超级详细的jQuey总结

普通选择器

$(“ul”) 获取页面所有的ul标签
$(“ul>li:nth-child(1)”) 获取ul子元素中的第一个子元素
$(“ul>li:last-child”) 获取ul子元素中的最后一个子元素
$(“ul>li.a”) 获取ul下面li里面类名为a的元素
$(“li:nth-child(odd)”) 获取li里面的第奇数个元素
$(“li:nth-child(even)”) 获取li里面的第偶数个元素

特殊选择器

:first 获取第一个元素
:last 获取最后一个元素
:eq(n) 获取索引为n的那一个
:odd 获取索引为奇数的元素 与:nth-chiild(odd) 不同
:even 获取索引为偶数的元素 与 :nth-child(even)不同

筛选器

first() 筛选出来一个元素集合里面的第一个元素
last() 筛选出一个元素集合里面的最后一个元素
eq(n)筛选出一个元素集合里面的索引为n的元素
next() 选择元素的下一个兄弟元素
nextAll() 筛选出元素后面所有兄弟元素
nextAll(选择器) 选择所有下面兄弟元素符合选择器要求的函数
nextUtil(选择器) 筛选出元素后面所有的兄弟元素知道选择器元素为止
prev() 筛选出元素的上一个兄弟元素
prevAll() 筛选出元素上面的所有兄弟元素
prevAll(选择器) 选择所有上面兄弟元素符合选择器要求的元素
prevUtil(选择器) 筛选出元素上面的所有兄弟元素直到选择器元素为止
parent() 筛选出元素的父元素
parents(选择器) 筛选出所有祖先元素中满足选择器的元素
parentUntil(选择器) 筛选出元素的所有祖先元素 直到选择器元素为止
siblings(）筛选出所有兄弟元素 自己除外
siblings(选择器) 选择所有兄弟元素中满足选择器要求的元素
find(选择器) 在一个元素的后代元素中查找对应选择器的元素 (在一个元素集合的每一个元素中查找后代元素 )
index() 获取元素的索引位置

操作文本内容

• html()

是一个读写方法
传参是写 不传参是读 设置的是超文本内容
只能获取第一个元素的超文本内容

• text()

读写方法
传参是写 不传参是读 设置的是超文本内容
能获取元素集合内所有所有元素的文本内容和
-val()
读写方法 操作input标签
不传参就是获取value值 传参就是设置value值
给集合内所有元素设置value值

操作元素类名

addClass() 给元素集合里面所有的元素添加固定的类名 有则不添加 无则添加
removeClass() 执行这个方法会给元素集合里面所有的元素删除固定的类名
toggleClass() 切换类名 有则删除 无则添加
hasClass() 判断有没有某个类名 返回一个布尔值

操作元素样式

$(“div”).css(“width”) 获取元素集合中的第一个元素的样式属性值
$(“div”).css(“width”,“200px”) 设置元素集合中所有元素的属性

• 批量设置样式

$('div').css({
	width:200,
	height:'300px',
})

操作元素属性

• attr()

读写方法
传递一个参数时 是读取属性
传递两个参数时 是设置属性
所有属性都会显示在标签上 原生属性 自定义属性
无论设置的属性值是什么类型 都会转换成字符串类型

• removeAttr()

用来删除属性
针对自定义属性

• prop()

读写方法
传递一个参数是读取
传递两个参数是设置
非原生属性 不会显示在标签上 但是可以获取使用
设置的属性值是什么类型 获取的就是什么数据类型

• removeProp()

用来删除属性
删除prop设置的属性有多少删除多少(针对自定义属性)
不能删除 原生属性 如 ：id class
-data()
读写属性
传递一个参数是读取
传递两个参数是设置
和元素的原生属性没有关系 可以设置id 但是和元素的id没有关系
会在元素身上开辟一个空间 存储设置的属性
设置的属性值是什么类型 获取就是什么类型
data()方法也能读取写在标签上的 H5标准自定义属性

扫描二维码关注公众号，回复： 9736376 查看本文章

-removeDate()

用来删除data()设置的属性

绑定事件

• on(“事件类型”,fn)

给元素集合的所有元素绑定事件

• on(“事件类型”,“事件委托”,fn)

把事件委托位置的元素 委托给前面元素的集合

• on(“事件类型”,“复杂数据类型”,fn)

给每一个元素绑定一个事件 复杂数据类型是触发事件时传递给函数的参数

• on(“事件类型”,“事件委托”,任意数据类型,事件处理函数)
• on({})

给一个元素绑定多个事件
$(‘div’).on({
click:function(){},
mouseover:function(){}
})

• one({})

传递的参数个数和意义和on方法一样
只是绑定的事件只能执行一次

• off()

用来解绑一个元素绑定的事件
off(“事件类型”) 给该事件类型的所有事件解绑
off(“事件类型”,fn) 解绑指定事件处理函数
on和one绑定的都可以解绑

• trigger()

用来触发事件的
trigger(“事件类型”) 把该元素的事件给触发

• hover()

特殊的事件函数
鼠标移入移出的时候触发
写法：$(‘div’).hover(function(){
console.log(‘移入’)
},function(){
console.log(‘移出’)
})

• 创建元素节点

$("<div>创建的节点</div>")

插入节点

内部插入节点

• append()

用法：页面元素.append(要插入的元素)
放在页面元素的子元素位置 放在末尾

• appendTo()

用法：要插入的元素.appendTo(页面元素)
放在页面元素的子元素位置 放在末尾

• prepend()

用法：页面元素.prepend(要插入的元素)
放在页面元素的子元素位置 放在最前面

• prependTo()

用法：要插入的元素.prependTo(页面元素)
放在子元素的位置 放在最前面

外部插入节点

• after()

用法：页面元素.after(要插入的元素)
放在页面元素的下一个兄弟元素位置

• insertAfter()

用法：要插入的元素.insertAfter(页面元素)
放在页面元素的下一个兄弟元素位置

• before()

页面元素.before(要插入的元素)
放在页面元素的上一个兄弟元素位置

• insertBefore()

要插入的元素.insertBefore(要插入的元素)
放在页面元素上一个兄弟元素位置

删除节点

• empty()

用法：页面元素.empty()
吧页面元素变成一个空标签
把所有子元素都干掉

• remove()

用法：页面元素.remove()
把自己干掉

• detach()

用法：页面元素.detach(选择器)
干掉指定元素

替换节点

• replaceWith()

用法：页面元素.replaceWith(替换元素)
用替换元素把页面元素换掉

• replaceAll()

用法：替换元素.replaceAll(页面元素)
页面元素被替换元素换掉

克隆节点

• clone()

专用来克隆节点
用法：页面元素.clone()
传不传参都会克隆子节点

• clone(布尔值,布尔值)

第一个参数：默认值false 表示是否克隆元素的事件
第二个参数：默认是跟随第一个 表示是否克隆子节点的事件

获取元素尺寸

width()和height() 获取元素的内容区域的尺寸
innerWidth() 和 innnerHeigh() 获取元素的 内容 + padding区域的尺寸
outerWidth() 和 outerHeight() 获取元素的 内容 + padding + border区域的尺寸
outerWidth(true) 和 outerHeight(true) 获取元素的 内容 + padding + border + margin 的区域尺寸
这些方法都是不考虑盒模型的状态 (不管是什么盒模型 都是固定区域)

获取元素位置

• offset()

不传参就是获取
读取到的元素是相对于页面的位置关系
返回值是一个对象
用法：页面元素.offset().left
传递一个对象就是写入 offset({left:xxx,top:xxx})

• position()

只读方法
元素相对于定位父级元素的位置关系
得到的也是一个对象
如果写right和bottom 会自动计算成left和top值

获取页面卷去的尺寸

scrollTop() 读写方法 传参设置 不传参获取
scrollLeft() 读写方法 传参设置 不传参获取

jQuery函数

• ready()

类似于window.onload事件
也叫做jQuery的入口函数
$(window).ready(function(){})

• each()遍历

元素集合.each(function(index,item){})

jQuery动画

标准动画

show() 显示 语法：show(时间,运动曲线,运动结束函数)
hide() 隐藏 语法：hide(时间,运动曲线,运动结束函数)
toggle() 切换 语法：toggle(时间,运动曲线,运动结束函数)

折叠动画

slideDown() 下滑显示 语法：slideDown(时间,运动曲线,运动结束函数)
slideUp() 上滑隐藏 语法：slideUp(时间,运动曲线,运动结束函数)
slideToggle() 切换滑动显示隐藏 语法：slideToggle(时间,运动曲线,运动结束函数)

渐隐渐显动画

fadeIn() 渐渐显示 语法同上
fadeOut() 渐渐消失 语法同上
fadeToggle() 渐渐的切换显示和消失
fadeTo() 去到一个指定的透明度 语法：fadeTo(时间,透明度,运动曲线,运动结束的函数)

综合动画

• animate()

格式：
$(‘div’).animate({
width:300,
height:300,
left:30,
opacity:0.5
},2000,运动曲线,函数)

• shop() 停止动画
• finish() 瞬间完成动画

jQuery的ajax请求

• $.get() 用来发送get请求

语法：$.get(请求地址,传递给后端的参数,成功的回调函数,期望后端返回的数据类型)

• $.post()用来发送post请求

语法：跟get方式是一样的 四个参数一样

• $.ajax({}) 用来发送综合ajax请求(GET,POST,PUT…)

url:" " 请求地址
type:" " 请求方式
data:" " 传递给后端的数据
dataType: 期望后端返回的数据类型
async: 是否异步 默认true
success:function(){} 成功的回调函数
error:function(){} 失败的回调函数
timeout:数字 单位是ms 超时时间 (超过设置的时间没有响应 就算失败)
cache:true 是否缓存 默认true
content:上下文 (改变回调函数里面this指向)

• 发送jsonp 跨域请求

1.jsonp:利用script标签的src的请求方式
2.用$.ajax() 必须写：dataType:“jsonp”
jQuery准备好了一个函数名 并以参数的形式传递到了后端
传到后端的callback参数就是函数名
后端应该有一个准备好的 函数名()
jsonp:" " 带到后端的那个函数名 默认值是callback
cache:false 当dataType 等于jsonp时 默认值是false
语法：
$.ajax({
url: ‘http://127.0.0.1/server/jsonp.php’,
dataType: ‘jsonp’, // 表示我要发送一个 jsonp 请求
jsonp: ‘cb’, // 表示参数里面的 cb 属性时我准备好的函数名
cache: true, // 表示缓存本次请求
success: function (res) {
console.log(res)
}
})

• 全局钩子函数
  1.ajaxStart()

在同一个作用于下多个ajax请求时 第一个ajax发送请求之前触发
如果有多个ajax它只触发一次

2.ajaxSend()

每一个ajax在发送请求之前都会执行
xhr.send() 之前触发

3.ajaxSuccess()

每一个ajax在成功的时候触发
只要有一个ajax成功 就会触发

4.ajaxError()

每一个ajax在失败的时候触发
只要有一个ajax失败就会触发

5.ajaxComplete()

每一个ajax完成的时候触发
只要有一个ajax完成了 不管时成功还是失败 都会触发

6.ajaxStop()

会在同一个作用域内多个ajax的时候 最后一个ajax完成以后触发
若有多个ajax 它只会触发一次

• 钩子函数语法

$(“window”).ajaxStart(function(){})

多库并存

作用：页面引用多个类库时 防止发生冲突
jquery 向全局添加两个名字 $ 和 jQuery
如果页面引入多个类库 若向全局暴漏的名字一样就会产生冲突
用法 $$ = $.noConflict(true) 改变jQuery的控制权

拷贝对象

• 浅拷贝

$.extend(“对象1”,“对象2”)
把对象2里面的属性复制到对象1里面 若有相同属性则按最后一个对象的属性值

• 深拷贝

$.extend(true,“对象1”,“对象2”)
把对象2深拷贝到对象1里面

插件扩展机制

• $.extend()

扩展给jQuery本身使用
语法：
$.extend({
扩展的方法名：fuction(){},
扩展的方法名：function(){}
})

• $.fn.extent()

扩展给jQuery元素集合使用
语法：
$.fn.extend({
扩展的方法名：function(){},
扩展得方法名：function(){}
})

• jQuery 还可以引入封装好的插件

jquery-validate 用于表单验证
jquery-pagination 用于分页
这些插件 直接百度搜索下载
这些插件都依赖jquery 必须在jquery引用后面引用 如下代码：

<script src = "./jquery/jquery.min.js">
<script src="./jquery-validate/jquery.validate.min.js"></script>
  <script src="./jquery-validate/localization/messages_zh.min.js"></script>
  

如有错误 请多多指出