4. jQuery

1. jQuery介绍

1.1 jQuery基础知识

• jQuery = JavaScript + Query，是辅助JavaScript开发的JS类库，其核心思想为write less，do more，且基本解决了浏览器的兼容性问题
• 使用jQuery一定要引入jQuery类库，可以通过已下载的.js文件引入，或者通过谷歌/微软的服务器引入
• jQuery中的$是一个函数，称为jQuery核心函数，能完成很多功能
• jQuery绑定事件的步骤：① 使用jQuery查询到标签对象；② 给该标签对象定义响应函数

1.2 jQuery核心函数$
可以通过$()调用$函数，当该函数的传入参数不同时，函数的作用也不同：

• 传入参数为“函数”时：表示页面加载完成之后，相当于window.onload
• 传入参数为“HTML字符串”时：会创建这个HTML标签对象
• 传入参数为“选择器”时：会根据选择器查询标签对象
• 传入参数为“DOM对象”时：会把这个DOM对象转为jQuery对象

1.3 JQuery对象

• jQuery对象的本质：jQuery对象 = DOM对象数组 + jQuery提供的一系列功能函数
• jQuery对象和DOM对象之间不能使用对方的属性和方法
• DOM对象转为jQuery对象：$(DOM对象)
• jQuery对象转为DOM对象：jQuery对象[下标]

2. JQuery选择器

2.1 基本选择器

• #id：根据给定的id匹配一个元素
• element：根据给定的元素名匹配所有元素
• .class：根据给定的类匹配元素
• *：匹配所有元素
• selector1,selector2,selector3：将每一个选择器匹配到的元素合并和一起返回

2.2 层次选择器

• ancestor descendant：后代选择器，在给定的祖先元素下匹配所有的后代元素
• parent > child：子元素选择器，在给定父元素下匹配所有的子元素
• prev + next：相邻元素选择器，匹配所有紧接在prev元素后的next元素
• prev ~ siblings：后兄弟元素选择器，匹配prev元素之后的所有siblings元素

2.3 过滤选择器
2.3.1 基本过滤选择器

• selector:first：获取第一个元素
• selector:last：获取最后一个元素
• selector:eq(index)：匹配一个给定索引值的元素

2.3.2 内容过滤选择器

• selector:contains(text)：匹配包含给定文本的元素
• selector:empty：匹配所有不包含子元素或者文本的空元素
• selector:parent：匹配含有子元素或文本的元素
• selector:has(selector1)：匹配含有选择器所匹配元素的元素

2.3.3 属性过滤选择器

• selector[attribute]：匹配包含给定属性的元素
• selector[attribute=value]：匹配给定的属性是某个特定值的元素
• selector[attribute!=value]：匹配给定的属性不是某个特定值，或不含有该属性的元素

2.3.4 表单过滤选择器

• :input：匹配所有input、textarea、select、button元素
• :text：匹配所有的文本输入框
• :password：匹配所有的密码输入框
• :radio：匹配所有的单选框
• :checkbox：匹配所有的复选框

2.3.5 表单对象属性过滤选择器

• :enabled：匹配所有可用元素
• :disabled：匹配所有不可用元素
• :checked：匹配所有被选中的元素（不包括<select>中的<option>）
• :selected：匹配所有选中的<option>元素

2.4 元素的筛选
元素的筛选作用和选择器类似，选择器用于${}内部，筛选作为方法用在${}后方

• eq()：获取给定索引的元素
• first()：获取第一个元素
• last()：获取最后一个元素
• filter(exp)：留下匹配的元素
• is(exp)：判断是否匹配给定的选择器，只要有一个匹配就返回true
• has(exp)：返回包含有匹配选择器的元素的元素
• not(exp)：删除匹配选择器的元素
• children(exp)：返回匹配给定选择器的子元素
• find(exp)：返回匹配给定选择器的后代元素
• each()：对元素进行遍历，this代表正在遍历的对象

3. 文档处理

3.1 JQuery属性操作

• html()：设置/获取起始标签与结束标签之间的内容 = DOM属性的innerHTML
• text()：设置/获取起始标签与结束标签之间的文本 = DOM属性的innerText
• val()：设置/获取表单项的value属性值 = DOM属性的value
• attr()：设置/获取某个属性的值 （操作某些属性可能会产生错误）
• prop()：设置/获取某个属性的值（推荐使用）

3.2 DOM增删改

• a.appendTo(b)：把a插入到b子元素末尾，成为最后一个子元素
• a.prependTo(b)：把a插入到b子元素开头，成为第一个子元素
• a.insertAfter(b)：得到ba
• a.insertBefore(b)：得到ab
• a.replaceWith(b)：用b替换a
• a.replaceAll(b)：用a替换b
• a.remove()：删除a标签
• a.empty()：清空a标签内容

3.3 CSS样式操作

• addClass()：添加样式
• removeClass()：删除样式
• toggleClass()：有就删除，没有就添加样式
• offset()：获取和设置元素的坐标

3.4 jQuery动画

• show()：将隐藏的元素显示
• hide()：将可见的元素隐藏
• toggle()：可见就隐藏，不可见就显示
• fadeIn()：淡入
• fadeOut()：淡出
• fadeToggle()：淡入/淡出
• fadeTo()：在指定时长内将透明度修改到指定的值

4 jQuery事件操作

4.1 页面加载完成事件
原生JS和JQuery页面加载完成后的区别：

• 原生JS页面加载完成后的操作放在window.onload = function(){}中
• JQuery页面加载完成后的操作放在$(function(){});中，完整写法为$(document).ready(function(){});
• 页面加载完成后，JQuery操作先于原生JS操作执行。JQuery操作在浏览器内核解析完页面的标签、创建好DOM对象后马上执行；而原生的JS操作还要等标签显示需要的内容加载完成后再执行
• 原生JS操作只会执行最后一个函数中的代码，JQuery操作会按顺序依次执行所有代码

4.2 JQuery中其他的事件处理方法

• click()：绑定单击事件/触发单击事件（传函数为绑定，不传函数为触发）
• mouseover()：鼠标移入事件
• mouseout()：鼠标移出事件
• bind()：给元素一次性绑定一个或多个事件
• one()：使用上和bind()相同，但是每个事件只会触发一次
• unbind()：与bind()相反
• live()：使用上与one()相同，但是对动态创建的元素也有效

4.3 事件的冒泡
事件的冒泡指，父子元素绑定了同一个事件，当触发子元素的事件时，同一事件也被传递到了父元素的事件中响应。在子元素事件函数体内，通过return false;可以阻止事件冒泡。

4.4 JS事件对象

• JQuery每次触发一个事件时，就会产生一个JS对象用来记录这个事件触发时所有的相关信息，称为事件对象
• 在给元素绑定事件时，在事件的function(event)参数列表中添加一个参数，这个event参数就是JS传递参数事件处理函数的事件对象