目录
使用jQuery
js与jQuery代码对比
jQuery选择器：用来选中元素
基本方法
js与jQuery代码对比
jQuery选择器：用来选中元素
基本方法
使用jQuery
jQuery是什么：jQuery是JavaScript的类库，封装了很多js代码。类似java中的类库一样里面一个类中有很多别人写好的功能。90%以上的公司都在用jQuery。
官网：http://jquery.com/
为什么要学jQuery：可以简化JavaScript开发，jQuery中包含有：选择器，CSS样式，HTML事件处理，JS动画 以及丰富的插件等等，而且浏览器兼容性很高
打开jQuery官网首页：write less,do more 写的少做的更多
为什么要用jQuery？很简单，就一句话，因为用的人多。我们可以先看一下比较流行的前端框架https://www.bootcdn.cn/
了解一下Bootstrap 现在企业用的非常的多，还有React、jQuery、Angular.js、Vue.js这些前端框架是目前企业用的非常多的
Vue.js 目前移动端 微信端用的前端框架最多的
什么情况下用jQuery：中大型网站开发，一些前端框架的基础，比如EasyUI
怎么用：我们今天开始用HBuilder写代码，我们中国人开发的软件呦！具体怎么代码怎么写，小伙伴们跟着我看疗效。
准备工作：
- 下载jQuery库：
-
- 登录jQuery官网http://jquery.com/
- 点击下载
-
有三种版本：
- Download the compressed, production jQuery 3.3.1 生产版本
- Download the uncompressed, development jQuery 3.3.1 开发版本
- Download the map file for jQuery 3.3.1
建议下载开发版本
2、HBuilder使用 创建项目
3、把jQuery库复制到项目中的js文件夹中
4、引入jQuery库文件:
注意：script标签中不要写内容，写jQuery代码就再写一对script标签
js与jQuery代码对比
案例1：点击按钮获取文本框中的值(JS对比jQuery)，如下图
JS版：
jQuery版：
先引入jQuery库
jQuery选择器：用来选中元素
1.1基本选择器
1.2层次选择器
1.3过滤选择器
1.4表单选择器
1.1：基本选择器
基本选择器包括：
ID选择器 #：#标签id名
类选择器 . ：.标签name名
元素选择器 ：标签名 元素选择器又叫做标签选择器 直接用标签名来选中。
基本方法
通配符：如果选中所有的元素 可以直接用通配符 * 表示所有。
选择器还可以组合多个一起使用，可以分为并集和交集。
并集：selector1,selector2,用逗号隔开
交集：selector1 selector2 用空格隔开
下面我们用代码分别实现一下不同选择器实现效果的方式：
案例2：使用基本选择器改变元素背景色和字体颜色(div、p、span)
我们先来写两个div用来对比一下一个添加一个id属性，一个添加一个class属性
<h2>2、基本选择器</h2>
<div id="one">
我是第一个盒子
</div>
<div class="two">
我是第二个盒子
</div>
然后我们再来看jQuery代码怎么写，首先 我们要找到第一个div然后在修改它的背景色，那么怎么写呢？大家来看
$("#one") 找到id为one的div 接着再修改背景色，直接在后面点，点不出来提示，那么来看一下怎么让他有提示。点击语法提示库，对。选择jquery.2。现在还可以 好歹有点提示了。那么背景色的css属性单词是哪个？伙计们还记得么？background 对的。我们接着直接修改属性 值就OK了，非常简单：
$("#one").css("background","green");
现在我们已经把id为one的div的背景色修改为了绿色。如果我现在要修改为红色，该怎么写？
好，那么我们接着试一下用类选择器该怎么实现：同样的，我们还是需要先找到div，只不过这次不是根据id找，而是根据class类来找。该怎么写？
刚刚id选择器用#,现在我们用类选择器 应该是什么？对 用点
(“.two”)。再接着我们把背景色修改为yellow：(".two").css("background","yellow");怎么样？就是这么简单！
我们先注释一下，那么我们现在可不可以直接设置两个div的背景色统一都为红色，来看一下 该怎么写？同样的刚才我们分别用id选择器和 类选择器 找到了一个div然后设置背景色就可以了。现在我们是不是要设置所有div的背景颜色。那么我们可不可以直接根据div标签来设置。那么我们来用元素选择器来试一下，首先先找到div：(“div”)找到所有的div，然后设置背景色:("div").css("background","red");
如果是现在我想设置div背景色的同时，再把div中的字体颜色设置为粉色，大家来看一下该怎么写！现在我们要同时设置两个属性，背景色和字体颜色。那么这种同时要设置多个样式时格式该咋写？
一样的，首先找到div：("div")，再接着设置样式，只不过现在要设置多个，那么就要把之前的逗号改为冒号，然后后面逗号再接着写第二个属性 ：
通配符：* 接着我们来看一下* 这个有什么用。来，我们直接把上面的代码再写一遍，把选择器改为* 看一下效果:
$("*").css({"background":"pink","color":"blue"});，哎呦我去，全粉了。正如大家所料，*表示所有，那么就是给所有的元素设置属性了。
多个选择器(并集)：selector1,selector2：
接下来我们来看一下如果我们想把网页中所有的p标签 和 span标签字体全部变成 粉色的该怎么写？首先我们同样的是给所有的p标签 和 span标签设置样式，我们可以直接用元素标签，先写一个p，然后还要再加上span：$("p,span").css("color","pink"); 来，我们看一下疗效。所有的p 和 span 不管是在div内的 还是在div外边的全部受到影响。这种写法我们叫做多个选择器 并集。
多个选择器(交集)：selector1 selector2
那么有并集 应该也会有交集。什么是交集，我们来写一下看看。
$("#one p").css("color","pink");大家觉得这句代码写完，有几句话字体会变色？来 看一下疗效，只有一句话变了颜色。这句话是id为one的div中的p标签。那么大家来想一下，这种空格的 写法表示什么意思？
指定标签内的标签，对的。
那么现在咱们玩点刺激的，现在我在第一个div里面的p段落中再加点东西<p>我是第一个div中的 <span>第一个p标签</span></p>。现在呢，我想只改变 第一个p 这几个字的颜色，大家来看一下该怎么写？前面我们写过$("#one p").css("color","pink");，设置div中的p标签，现在要设置的是div中的p中的 span，该怎么写？哎 对，只需要再来一个空格 然后加上一个span就OK了：
$("#one p span").css("color","pink");
怎么样，今天的课不难吧，会找标签，记住语法格式就OK了
jQuery的核心就是查询
层次选择器:
我们来看一下在线api，找到选择器，来看层级选择器，这里面有四个，第一个 刚才我们已经讲过了。叫什么来着？交集还是并集？
>:子选择器
首先我们来看一下大于号这个，看一下文档上面的解释：用以匹配元素的选择器，并且它是第一个选择器的子元素。大家注意解释说什么？第一个选择器的子元素？ 那么大家来猜一下，这个大于号表示什么意思？又该怎么用？文档解释很明显，就是找到第一个选择器中的指定的子元素。那么我们先来看一下：
<div id="one">
我是第一个盒子
<p>我是第一个div中的 <span>第一个p标签</span></p>
<span>我是第一个div中的 第一个span标签</span>
</div>
这段代码中，有几个span，假如我现在想要设置这两个span标签的颜色 该怎么写？只设置p标签中的span又该怎么写？
设置两个span：$("#one span").css("color","pink");
设置p中的span：$("#one p>span").css("color","pink");
先找到div中的p标签，然后再找到p标签中的子标签 span
:兄弟选择器，同级的第一个
接下来 我们来看一下这个 又是什么意思？意思很简单 同级，兄弟级别，那么什么是同级。先来看一下代码:
<div id="one">
我是第一个盒子
<p>我是第一个div中的 <span>第一个p标签</span></p>
<span>我是第一个div中的 第一个span标签</span>
</div>
我们以这个代码为例来试一下：
$("#one p span").css("color","pink");
来 看一下效果，div中总共有两个span现在哪一个span受到了影响？是p里面的 还是和p标签同级的？ 哎 对了 这就是 的作用
注意 这里面的同级只会得到第一个，也就是只有一个，不会找到其它的同级选择器
~:同级的所有选择器
上面我们说了同级的第一个选择器，我们接着试试看这个是同级的几个选择器。先来看一下代码:
<div id="one">
我是第一个盒子
<p>我是第一个div中的 <span>第一个p标签</span></p>
<span>我是第一个div中的 第一个span标签</span>
<span>我是第一个div中的 第2个span标签</span>
<span>我是第一个div中的 第3个span标签</span>
<p>我是第一个div中的第二个p标签</p>
</div>
我们直接来试一下看看疗效:
$("#one p~span").css("color","pink");效果很明显，div中的所有和p标签同级的span标签全部受到影响，其它的同级标签不会受到影响
过滤选择器：
获取第一个元素:first
我们先写一个ul
<ul>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
</ul>
First 第一个，那么大家来猜一下 我现在写的这段代码会有什么效果:
$("ul li:first").css("color","pink");
最后一个元素:last
现在再来看一下这个:$("ul li:last").css("color","pink");一个是第一个，一个是最后一个 咋样 简单吧！
获得奇数元素:even
大家先来看一次even是什么意思？奇数？ 不不不 是偶数的意思。这个地方很神奇，为嘛呢？因为外国的第一个是0，第二个是1，第三个是2，那么刚好在这里，奇数 表示的是偶数个，偶数表示的是第奇数个。咋样，感觉刺激不，晕不晕？来直接看一下疗效：
$("ul li:even").css("color","pink");第一行，第三行，第五行受到影响
获取偶数元素:odd
那么我们接着来看这个 odd 上面是奇数行，那么这个很明显了。但是大家一定要注意这两个单词的意思。odd的意思是奇数。even的意思是偶数
$("ul li:even").css("color","pink");
获取某一范围元素:
:gt 大于
现在我们来试一下让大于第一行的li背景色全部改变:
$("ul li:gt(0)").css("background","pink");注意啦，这个地方和其他的不一样居然有参数了，这个参数表示第几行的下标，而且不包括下标表示的行，那么这个效果很明显是大于下标0的行
:lt 小于
再来试一下这个，刚才那个是大于，不包括参数行，现在这个我们再来看一下：$("ul li:lt(4)").css("background","pink");同样的参数行从0开始，不包括参数表示的行
范围：第二行到第四行
现在咱们再来个刺激一点的，掐头去尾，除了第一行，和最后一行，其它的全部选中。我们来试一下我们现在要找到大于0的然后再找到小于4的。代码是不是可以这样写:
("ul li:gt(0):lt(4)").css("background","pink");我们来看一下效果，哎，最后一行也选中了，为啥不行呢？我们来分析一下，我们先找到的是大于0的 也就是后面的都包括了，然后再去选中其它的，在这里我们想要选中范围内的 需要先确定 最大 的位置，然后再选中其它的，所以上面的写法是不正确的。我们应该先确定最大的：
表单选择器：
我们先来看一下文档中的表单选择器，这里面基本上表单中的每一个元素都有，我们主要讲一下单选，多选 和 下拉框的选择器。我们先写一下网页代码写个表单：
<form method="post">
性别:<input type="radio" name="sex" id="" value="男" checked="checked" />男
<input type="radio" name="sex" id="" value="女" />女 <br>
爱好:<input type="checkbox" name="hobby" id="" value="eat" />吃饭
<input type="checkbox" name="hobby" id="" value="sleep" />睡觉
<input type="checkbox" name="hobby" id="" value="playDD" />打豆豆<br>
地址：
<select>
<option value ="1">长沙市</option>
<option value ="2">南阳市</option>
<option value ="3">武汉市</option>
</select>
<br>
<input type="button" name="" id="ok" value="提交" />
</form>
单选按钮：
我们先来看一下怎么获取被选中的单选按钮的值怎么获取。我们先给按钮添加一个点击事件，点击按钮获取被选中的单选框的value属性值。
/* 表单选择器 */
//给提交按钮添加点击事件
$("#ok").click(function(){
//获取表单中被选中的单选按钮的值 :radio表示单选按钮 :checked表示被选 //中的
var sex = $(":radio:checked").val();
alert(sex);
})
在这里建议一下小伙伴们后面测试不要用alert弹了。我们以后统一用：confole.info(sex);然后在页面按F12选中控制台 看输出结果
多选按钮：
多选按钮和单选按钮呢 基本上是一样的，来我们对比着上面的写一下试试。
var len = $(":checkbox:checked").length;
Console.info(len);
先测试一下能不能获取到选中的选项个数。
既然能获取到选中的选项个数，我们接着来获取值。不过多选框选中的可能有多个值，所以这个地方需要each遍历。这个地方写法有点复杂，大家注意一下。
var len = $(":checkbox:checked").each(function(){
var hobby = $(this).val();
console.info(hobby);
});
直接在each里面写匿名函数遍历选中的选项，$(this).val();表示选中的选项的value值
下拉：
接着看咱们的最后一个 下拉。下拉要注意了，单选 和多选直接就是找到选中的选项就行，可是下拉select标签中还有标签，我们要获取的是select中option选项的值，所以这个地方要注意写法。
var address = $("option:selected").val();获取option标签的value属性值
那如果想要获取长沙市，武汉市，不是获取value值呢？可以获取到吗？
var address = $("option:selected").html();option标签可以直接这样获取到标签内的网页文本。
