jQuery的特点
- 优质的选择器和筛选器
- 方便的隐士迭代
- 强大的链式编程
引入方法
必须下载导入jQuery包
也就是：jquery.js 或者 jquer.min.js
jQuery的选择器
选择器——用来获取DOM元素的方法
- 匹配id属性的属性值
- 匹配clss属性的属性值，也就是类名
- 匹配标签名称
- 匹配标签结构
- 匹配属性属性值选择器
- 匹配组合选择器
- 匹配结构伪类选择器
jQuery的筛选器
筛选器——对选择器获取到的一组标签对象进行筛选
- .first() 匹配第一个
- .last() 匹配最后一个
- .eq() 匹配下标
- .prev() 匹配上一个兄弟
- .prevAll() 匹配上面所有的兄弟
- .next() 匹配下一个兄弟
- .nextAll() 匹配下面所有的兄弟
- .siblings() 匹配所有兄弟，不管上下
- .parent() 匹配直接父级
- .parents() 匹配所有父级
- .end() 匹配链式编程的上一级
- .find() 匹配指定条件的标签
jQuery的属性操作
.attr()方法
- 标签对象.attr(属性) 获取指定属性的属性值
- 标签对象.attr(属性，属性值) 设定属性和属性值
- 标签对象.attr(自定义属性，属性值) 设定自定义属性和属性值
.removerAttr()方法
标签对象.removeAttribute(属性) 删除指定的属性
jQuery的样式操作
- 标签对象.css(属性) 获取指定属性的属性值
- 标签对象.css(属性，属性值) 设定属性以及属性值
- 标签对象.css({ 属性：属性值 }) 以对象的形式，设定属性以及属性值，也可以同时设定多个属性，且定义方式比较灵活
jQuery标签对象的内容操作
.html()方法
效果类似于JavaScript的innerHTML
- 标签对象.html() 没有参数是获取内容
- 标签对象.html(内容) 带有参数是设定内容
.text()方法
效果类似于JavaScript的innerText
- 标签对象.text() 没有参数是获取标签内容
- 标签对象.text(内容) 带有参数是设定标签内容
jQuery的事件操作
绑定事件 —— on() 方法
移除事件 —— off() 方法
绑定的和删除的必须是同一个函数
只执行一次的one() 方法
直接触发事件 —— trigger() 方法
jQuery可以直接使用的事件
click事件
dblclick事件
scroll事件
hover事件
ready事件
jquery阻止冒泡事件
事件对象.stopPropagation() 或者 return false
jQuery阻止默认事件
事件对象.preventDefault() 或者 return false
jQuery的隐士迭代
- 常见的操作方式
隐式 — 计算机程序默认自动执行的操作
迭代 — 此处指的是便利操作
总结：jQuery会默认对集合中的所有标签对象 循环遍历 都执行相应的操作 - DEMO
jQuery的Tab切换
jQuery的元素操作
创建元素
内部插入元素
外部插入元素
替换元素
删除元素
克隆元素
jQuery的元素尺寸操作
操作元素的宽和高
获取元素的内置宽和高
获取元素的外置宽和高
jQuery的元素位置
元素相对于页面的位置
元素相对于父级元素的偏移量
获取页面卷去的宽度和高度
jQuery的动画
show() 动画 显示动画
hide() 动画 隐藏动画
toggle() 动画 显示隐藏切换动画
slideDown() 动画 下拉显示
slideUp() 动画 上拉隐藏
slideToogle() 动画 上下切换动画
fadeIn() 动画 逐渐显示动画
fadeOut() 动画 逐渐隐藏动画
fadeToogle() 动画 渐隐渐显动画
fadeTo() 动画 变换到指定的透明度
animate() 动画 自定义动画
stop() 停止动画
当前动画直接停止。动画就停止在当前位置，然后立即执行下一次动画效果
finish() 完成时动画
当前动画直接停止。动画直接执行至终止的状态，然后立即执行下一次动画效果
jQuery的ajax
get请求
post请求
综合发送ajax请求
发送jsonp请求
ajax的全局函数
全局的ajax函数，也被称作钩子函数
所谓的钩子函数，也就是在整个ajax执行到某个状态时，执行的函数而且每个ajax请求钩子函数都会触发
ajaxStart()
ajax请求，在开始的时候，会触发这个函数，多个请求只会触发一次
ajaxSend()
任意一个 ajax 请求，在准备 send 之前会触发这个函数
ajaxSuccess()
任意一个 ajax 请求在成功时会触发这个函数
ajaxError()
人一个 ajax 请求在失败的时候会发这个函数
ajaxComplete()
任意一个 ajax 请求在完成时会触发这个函数
ajaxStop()
所有 ajax 请求都结束时会触发这个函数只会触发一次
jQuery的多库共存
多库共存是什么
JQuery通过$() 或者 jQuery() 这两个暴露方法来操作，如果有其他类库，暴露的也就是这两个，就会造成使用上的冲突，此时就需要多库共存
操作步骤 —— 完全交出控制权
操作步骤 —— 更换控制权
jQuery的插件扩展
jQuery.extend —— 扩展给自己只能通过jQuery来调用
jQuery.fn.extend —— 扩展给元素集
详细jQueryAPI方法jQuery官网查看