JQuery入门到精通教程()

简介: JQuery入门到精通教程()

一,什么是jQuery?

jQuery就是JavaScript的一个库:封装了很多JS代码(类库),方便使用时随时调用。

二, jQuery为什么要学习?

jQuery简化了 JavaScript 编程,代码编写更加简单。

三,什么时候用?

是一些前端框架的基础,比如EasyUI,Bootstrap

四,怎么使用jQuery?

利用工具:HBuilderX

1.下载jQuery库

http://官方地址:http://jquery.com/

2.引入:将js文件复制到项目中

3.需要引入jQuery

<script src="js/jquery-3.3.1.js"></script>

  五,jQuery选择器

  1. ID选择器:#ID  ——单个元素
<script>
        $(function(){
        // id选择器
        $("#id").css({"background":"blue","color":"orange"})
        })
</script>
  1. 类选择器:.class  ——元素集合
<script>
        $(function(){
        // 类选择器
        $(".name").css({"background":"blue","color":"orange"})
        })
</script>
  1. 元素选择器:element  ——元素集合
<script>
        $(function(){
        // 元素选择器
        $("div").css({"background":"blue","color":"orange"})
        })
</script>
  1. 通配符选择器:*  ——元素集合
<script>
        $(function(){
        // 通配符选择器
        $("*").css({"background":"blue","color":"orange"})
        })
</script>
  1. 组合选择器
<script>
        $(function(){
        // 组合选择器
        $("#li,p").css({"background":"blue","color":"orange"})
        })
</script>
  1. 子代选择器
<script>
        $(function(){
        // 获取ul下所有的li
        $("#ul>li").css({"background":"blue","color":"orange"})
        })
</script>
  1. 后代选择器
<script>
        $(function(){
        // 获取li下所有的内容
        $("#ul li").css({"background":"blue","color":"orange"})
        })
</script>
  1. 获取第一个元素
<script>
        $(function(){
        // 获取ul下面第一个li
        $("#ul>li:first").css({"background":"blue","color":"orange"})
        })
</script>
  1. 获取最后一个元素
<script>
        $(function(){
        // 获取ul下面最后一个li
        $("#ul>li:last").css({"background":"blue","color":"orange"})
        })
</script>
  1. 获取偶数下标
<script>
        $(function(){
        // 设置li所有偶数样式
        $("#ul>li:odd").css({"background":"blue","color":"orange"})
        })
</script>
  1. 获取奇数下标
<script>
        $(function(){
        // 设置li所有奇数样式
        $("#ul>li:even").css({"background":"blue","color":"orange"})
        })
</script>
  1. 获取大于某个下标元素
<script>
        $(function(){
        // 设置li所有下标大于1的样式
        $("#ul>li:gt(1)").css({"background":"blue","color":"orange"})
        })
</script>
  1. 获取小于某个下标元素
<script>
        $(function(){
        // 设置li所有下标小于1的样式
        $("#ul>li:lt(1)").css({"background":"blue","color":"orange"})
        })
</script>

总结

以上就是今天要介绍的内容,本文仅仅简单介绍了jQuery基本的使用,后续还会更新发布。

目录
相关文章
|
27天前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
18 0
|
4月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
28 0
|
5月前
|
存储 JavaScript 前端开发
JQuery(入门~选择器)
JQuery 是快速、简洁的JavaScript库,也就是写好的JS文件。
|
4月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
|
4月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
32 0
|
6月前
|
XML JSON JavaScript
jQuery入门到实战
jQuery入门到实战
jQuery入门到实战
|
2月前
|
存储 JavaScript 前端开发
JQuery入门基础
JQuery入门基础
20 0
|
3月前
|
JavaScript 前端开发 开发工具
jQuery入门级别介绍及选择器的使用----详细介绍
jQuery入门级别介绍及选择器的使用----详细介绍
23 0
|
4月前
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
20 0
|
5月前
|
存储 JavaScript 前端开发
jQuery:入门
jQuery:入门
68 0

相关产品

  • 云迁移中心