https://lanhai1.github.io/archives/ 👈 个人博客
1⃣️、什么是jQuery
是一个封装了很多方法的外部JavaScript库
1.1 什么是JavaScript库?
把一些浏览器兼容代码或者是常用的函数
封装到JavaScript文件中
这个文件就是JavaScript库 也可以叫JavaScript函数库
1.2 jQuery的特点
- Write Less,Do More(写的少做的多)
- 体积小
- 功能强大
- 链式编程
- 隐式迭代
- 插件丰富
- 开源
- 免费
2⃣️、聊聊链式编程
对象.方法 如果返回的还是一个jQuery对象 则就可以继续点方法 这个现象就叫做链式编程
2.1 什么是断链？
jQuery对象调用方法后返回的不是当前jQuery对象了
2.2 如何处理断链?
调用 end() 方法 返回上一层状态
3⃣️、原生JavaScript和jQuery相比较
3.1 原生JavaScript的缺点
- 不能给window添加多个onload事件 后面的会把前面的覆盖
- 原生JavaScript的API名字都太长 太难记
- 代码冗余
- 原生JavaScript中的有些API存在浏览器兼容问题
- 容错率低 前面代码出错 后面代码则不会继续执行
3.2 jQuery的优点
- 可以写多个入口函数
- jQuery的方法名都易记
- 代码简洁、隐式迭代(偷偷的遍历)、链式编程
- jQuery处理了浏览器兼容问题
- 容错率高 前面代码出错 不会影响后面代码的执行
4⃣️、$
$ 是一个方法
$ 方法根据传递的参数不同 实现的功能也不一样(多态)
- 如果传递的是一个匿名函数 则就是一个入口函数
- 如果传递的是一个字符串 则就是一个选择器 或 是一个创建元素的(需要配合append()方法去追加至页面)
- 如果传递的是一个 DOM 对象 则是将 DOM 对象转换为 jQuery 对象
5⃣️、jQuery中的this
jQuery为了方便程序员的操作 把this指向修改成了 e.target
6⃣️、jQuery入口函数和DOM入口函数的区别
6.1 jQuery入口函数写法
$(function(){
})
jQuery(function(){
})
$(document).ready(function(){
})
6.2 DOM入口函数写法
window.onload = function(){
}
6.3 jQuery入口函数和DOM入口函数之间的区别
jQuery入口函数可以写多个 并且不会被覆盖 (DOM入口函数只能写一个 并且会被覆盖)
jQuery入口函数比DOM入口函数先执行
jQuery入口函数等页面上的DOM树加载完毕后就会执行
window.onload要等待页面上所有资源加载完毕后才会执行(DOM树、外部图片、外部链接的Css/Js/icon...都加载完毕后才会执行)
7⃣️、jQuery对象 与 DOM对象
7.1 jQuery对象与DOM对象的区别
7.1.1 jQuery对象
- 就是用jQuery选择器获取到的对象
- 只能调用jQuery的方法 不能调用DOM的属性和方法.
- jQuery对象其实是一个伪数组 里面存放的是DOM对象
- jQuery对象其实是DOM对象的包装集
7.1.2 DOM对象
- 就是用原生JavaScript获取到的对象
- 只能调用DOM的属性和方法 不能调用jQuery的方法
7.2 jQuery对象和DOM对象互转
7.2.1 BOM对象转换jQuery对象
$(document.getElementById(“”));
7.2.2 jQuery对象转换BOM对象
document.getElementById(“”)[0]
||
jQuery对象.get(0);
8⃣️、jQuery获取元素尺寸图释
9⃣️、jQuery事件
9.1 鼠标移入移出事件
- mouseenter
鼠标移入 - mouseleave
鼠标移出
9.2 mouseenter和mouseover的区别
- mouseover
事件在鼠标移动到选取的元素及其子元素上时触发 - mouseenter
事件在鼠标移动到选取的元素上是触发
9.3 事件发展历程
9.3.1 简单事件注册
$("div").click(fn)
- 不能同时注册多个事件
- 不能动态注册
9.3.2 bind()注册事件
$("div").bind({
"click":fn,
"mouseenter":fn
})
- 同时注册多个事件
- 不能动态注册
9.3.3 delegate()注册事件
$("div").delegate({
"click":fn,
"mouseenter":fn
})
- 同时注册多个事件
- 支持动态注册
9.3.4 on()注册事件
9.3.4.1 on简单注册
$("div").on("click",fn)
9.3.4.2 on委托注册
$(父级元素).on("click","子级元素",fn)
- 支持动态注册
9.3.4.3 解绑on事件
$("div").off("click",fn)
不传递参数则解绑该元素上的所有事件
注意 fn 需要写函数名
9.4 阻止事件
- 阻止浏览器默认行为
e.preventDefault() - 阻止事件冒泡
e.stopPropagation() - 同时阻止浏览器默认行为和事件冒泡
return false
1⃣️0⃣️、jQuery选择器
10.1 基本选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $(“#id”) | 获取指定ID的元素 |
| 类选择器 | $(“.class”) | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div, p,li,.renClass”) | 使用逗号分隔，只要符合条件之一即可 |
| 交集选择器 | $(“div.renClass”) | 获取class为redClass的div元素，注意，连接之间不要打空格 |
10.2 层级选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| 子代选择器 | $(“ul>li”) | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 | $(“ul li”) | 使用空格，表示后代选择器，获取ul下的所有li元素，包括孙子层级的元素等 |
10.3 过滤选择器(这类选择器都带冒号:)
| 名称 | 用法 | 描述 |
|---|---|---|
| 基数选择器 :odd | $(“ul>li:odd”) | 获取基数元素 |
| 偶数选择器 :even | $(“ul>li:even”) | 获取偶数元素 |
| 索引选择器 :eq(index) | $(“ul>li:eq(2)’) | 选择索引为2的元素，索引index从0开始 |
1⃣️2⃣️、jQuery常用方法
- text()
获取/设置文本
如果是设置会覆盖标签原有的数据 - html()
获取/设置页面内容
会覆盖原来的内容 如果设置的内容中有标签会被解析 - css()
获取/设置样式
设置单个样式
$().css()
设置多个样式
$().css({
})
用css()设置的样式都是行内样式
如果获取的jQuery对象包含的是多个DOM对象
则获取的第一个DOM对象的样式
如果设置的jQuery对象包含的是多个DOM对象
则会将所有的DOM对象都设置对应的样式(隐式迭代)
- val()
获取/设置表单元素的值(value)
以下操作元素的方法
参数一: 必填项 动画执行的时长 可以是毫秒 也可以是'slow' 'normal' 'fast'
参数二: 可填项 动画执行完毕后的回调函数
- show()
显示 - hide()
隐藏 - toggle()
切换 - slideDown()
滑入 - slideUp()
滑出 - slideToggle()
切换 - fadeIn()
淡入 - fadeOut()
淡出 - fadeToggle()
切换 - fadeTo()
淡入到哪里
参数一 执行动画的时长
参数二 执行到多少透明度
参数三 回调函数
- stop()
参数1: 是否清除队列
参数2: 是否跳转到当前动画的最终效果
如果不写参数默认都是false
- animate()
自定义动画
参数1: 必填项 对象 做动画的属性们
参数2: 可填项 做动画的时长
参数3: 可填项 值可以是'linear'匀速 也可以是'swing'缓动 不写默认是缓动
参数4: 可填项 动画执行完毕后的回调函数
- each()
显式迭代
参数=>函数(index,ele){}=>(索引值,元素DOM对象)
- clone()
克隆节点
参数为boolean值 默认false
true =>深克隆 会克隆事件
false =>浅克隆 不会克隆事件
- offset()
`获取元素距离document的距离
/*获取*/
offset().top
offset().left
/*设置*/
offset({
top:10,
left:10
})
/*如果元素之前未设置定位 则自动设置相对定位*/
- position()
获取元素距离父级定位的距离
/*获取*/
position().left
position().top
只能获取不能设置
- scrollTop()\scrollLeft()
获取元素卷曲(滚)出去的距离
传参就是设置 不传参就是获取
1⃣️3⃣️、操作属性的方法
- attr()
attr(属性名)=> 获取属性值
attr(属性名,属性值)=> 设置单个属性
attr({属性名:属性值,....})=> 设置多个属性 - removeAttr()
removeAttr(属性名)=> 移除属性
可以设置自定义属性
和
移除自定义属性
1⃣️4⃣️、筛选选择器的方法
- children()
获取当前元素的子元素
参数是标签名 - find()
获取当前元素的指定后代元素
不传递参数则获取的是当前元素的所有后代元素
传递参数(标签名)则获取的是当前元素的指定后代元素 - siblings()
获取当前元素的兄弟元素 不包括自己
参数是标签名 - parent()
获取当前元素的父级元素 - next()
获取当前元素的下一个兄弟元素 - nextAll()
获取当前元素的后面所有的兄弟元素 - prev()
获取当前元素的上一个兄弟元素 - prevAll()
获取当前元素的前面所有兄弟元素 - eq(索引)
获取匹配索引的元素 - prop()
获取 prop("checked")
设置 prop("checked",true)
处理checked、selected、disabled这类boolean值的方法
1⃣️5⃣️、class 操作
- addClass()
添加类 - removeClass()
移除类 - hasClass()
判断类=> 返回boolean值 - toggleClass()
切换类=> 有这个类就移除 没有就添加
添加类和移除类 可以传递多个类名参数
会隐式迭代
1⃣️6⃣️、创建元素的两种方式
- html()
直接传入字符串形式的标签
会被解析至页面
但是会覆盖原来的内容
- $()
直接传入字符串形式的标签
需要配合append()方法追加至页面
不会覆盖原来的内容
1⃣️7⃣️、添加节点的五种方式
- append()
需要配合 $() 一起使用
父元素.append(子元素)
作为最后一个子元素添加
- prepend()
父元素.prepend(子元素)
作为第一个子元素添加
- before()
兄弟元素A.before(兄弟元素B)
把元素B插入到元素A前面
- after()
兄弟元素A.after(兄弟元素B)
把元素B插入到元素A后面
- appendTo()
子元素.appendTo(父元素)
作为最后一个子元素添加
1⃣️8⃣️、删除节点的三种方式
- html("")
不推荐使用 因为这个方法只会清空内容
如果内容标签有事件 事件不会被清除 可能内存泄漏不安全
- empty()
可以清空内容 也可以清除元素上的事件
- remove()
需删除的元素.remove()
需要删除的元素自己调用这个方法
XMind 思维导图
网友评论