这篇来说如何来使用jQuery？
Ⅰ、jQuery的引入
①一般引入：使用jQuery只需要在页面的<head>中引入jQuery文件即可；
引入jquery文件
引入这个文件的话，我们得提前把它下载好，放在js文件夹中。下载的话在百度搜索jQuery即可。
②其他引入，是通过一些npm、node、yarn也可以引入jQuery。
Ⅱ、$符号
jQuery把所有的功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名。
$ 与 jQuery 类型相等
$与jQuery都是方法类型。大多数情况，我们都直接使用$，如果$变量被占用并且还不能修改，就只能使用jQuery这个变量。
Ⅲ、jQuery的书写格式
jQuery中比较简单易懂，你用什么就选什么，比如说，我们添加div标签的class值，如下图所示：
添加class值
添加成功
我最开始学习jQuery的时候是用它的原始格式，选择对象后准备就绪之后，也就是说页面加载完成后，就会执行函数里面的内容了。
即：$(document).ready(function(){
$('div').addClass('box');
});
那么，感觉这样好麻烦的话，它也有缩写形式，如下代码所示：
第一种缩写格式：
$().ready(function(){
$('div').addClass('box');
});
第二种缩写格式：
$(function(){
$('div').addClass('box');
});
以上两种缩写格式都类似于原生格式：window.onload = function(){};
推荐大家用第一种原始格式。
Ⅳ、选择器
①选择器是jQuery的核心
一个选择器可以写出类似$('#dom-id')
在js中，得写 var obj=document.getElementById('dom-id');
在jQuery中，var obj=$('#dom-id');
②jQuery选择器返回的对象是jQuery对象
类似于数组，每个元素都是一个引用了DOM节点的对象
如果选择的jQuery对象不存在一定不会返回undefined或者null
所以不必判断if(div === undefined)
③选择器又分为多种，如基本选择器、多项选择器、层级选择器、属性选择器、过滤器、表单相关、内置查找和过滤。
⑴ 基本选择器
#id 根据指定的id匹配一个元素
element 根据指定元素的标签名匹配所有元素
.class 根据指定的类名匹配元素
通配符* 匹配所有的元素
⑵ 多项选择器 $('selector1,selector2,selectorN');
将每一个选择器匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
⑶ 层级选择器
a. 后代选择器 $('ancestor descendant');
在指定的祖先元素下匹配所有的后代元素；
2个弊端：会选中所有的后代，除了儿子，就连孙子，重孙只要你有都会选中
b. 直接后代选择器 $('parent > child'); 在指定的父元素下匹配所有的子元素
c. $('prev + next'); 匹配所有紧接在prev元素后的next元素
d. 兄弟选择器 $('prev ~ siblings'); 匹配prev元素之后的所有siblings元素
⑷ 属性选择器
有以下七种属性选择器：
[attribute] 属性名选择器、
[attribute=value] 属性值选择器
[attribute!=value] 非属性值选择器
[attribute^=value] 以某个属性值开头的选择器
[attribute$=value] 以某个属性值结尾的选择器
[attribute*=value] 包含属性值选择器
[selector1][selector2][selectorN] 多个属性选择器
⑸ 过滤器，一般不会单独使用
:first-child
:last-child
:nth-child(n | even | odd | formula)
:nth-last-child(n | even | odd | formula)
:only-child
:first-of-type
:last-of-type
:nth-of-type(n | even | odd | formula)
:nth-last-of-type(n | even | odd | formula)
:only-of-type
过滤器参数：
n 匹配子元素序号，必须为整数，从1开始
even 匹配所有的偶数元素
odd 匹配所有的奇数元素
formula 使用特殊公式如(an+b)进行选择
⑹ 表单相关
a. 表单元素
:input 可以选择<input>,<textarea>,<select>,<button>
:text 匹配所有的单行文本框，和input[type='text']一样
其他input的type ：
:password / :radio / :checkbox / :image / :reset / :button / :file
b. 表单状态
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)
:selected 匹配所有选中的option元素
单选框、复选框尽量用checked ，下拉框用selected
⑺ 内置查找和过滤 ps：[]中括号括起来的代表可选参数
a. find(expr|object|element) 搜索所有与指定表达式匹配的元素(find找到的不管是孩子还是孙子全都能找)
b. children([expr]) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合 (注意用children找到的是某个元素的孩子，性能比find好一些)
c. parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合
d. next([expr]) 、prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面(前面)同辈元素的元素集合
e. eq(index | -index) 获取当前链式操作中第N个jQuery对象
参数的值如果是正数，就是正数第几个，如果是负数，就是倒数第几个。
f. siblings([expr]) 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
g. filter()与参数分析 (filter过滤器)
filter(expr|object|element|fn) 筛选出与指定表达式匹配的元素集合（filter可以代替以上的方法）
参数分析：
expr 代表字符串值,包含供匹配当前元素集合的选择器表达式
object 现有的jQuery对象,以匹配当前的元素
element 一个用于匹配元素的DOM元素
fn 一个函数用来作为测试元素的集合
今日份知识点%已送达，小可爱们请查收~~
网友评论