jQuery
1 jQuery概述
部分企业jQuery与框架混用,容易出bug。
1.1 jQuery概述
jQuery是第三方开发的执行DOM操作的极简的函数库。jQuery对DOM的每个操作/API进行简化(极简化),仅限于PC端。
函数库:jQuery使用函数解决一切问题
jQuery是DOM操作API的终极简化(增删改查,),解决浏览器兼容性问题,所有PC端项目/框架底层都使用jQuery
1.2 jQuery下载
下载:jquery.com
版本:
1.x 支持IE8
jquery.js: 未压缩版本,学习/开发阶段,可读性好;缺点: 体积大,不便于快速加载
1)有完备的注释
2)有清晰的代码结构
3)有见名知义的变量名
jquery.min.js: 压缩版本,生产环境,体积小,便于快速加载;缺点: 几乎不可读
1)删除注释
2)清楚代码结构
3)极简化了变量名
2.x 不再支持IE8
3.x 不再支持IE8,新特性:
1. 运行在Strict Mode下
2. 引进for…of循环,代替each
3. 新动画API: requestAnimationFrame()
4. 兼容JS Promises
1.3 jQuery使用
引入页面: 通常先引入jQuery.js,再编写自定义脚本
jQuery的原理:
引入jQuery.js,其实是向window中添加一种新类型,名为jQuery(){},包括2部分:
1.构造函数: function jQuery(){}创建该类型的子对象
2.原型对象: jQuery.prototype={}保存该类型的子对象共用的简化版API
$相当于构造函数jQuery的名称,只有通过$创建的对象(等效于new jQuery())才能使用jQuery的原型对象中的方法
使用jQuery的简化版API操作DOM元素:
-
创建jQuery类型的子对象,封装进要操作的DOM元素:2种:
1)查找元素,并封装进jQuery对象中:
var $btn=new jQuery(“选择器”)//=号左边是变量名,可以不加/$,由于new jQuery使用频繁,进行简化:function jQuery() {return new jQuery();} window.\$=jQuery; var \$btn=\$(“选择器”)//简化形式
执行:创建jQuery对象(封装多个DOM元素的类数组对象),用选择器查找需要操作的DOM元素对象保存进jQuery对象;
调用:对jQuery对象调用API,等效于对内部封装的DOM元素调用相应的API
2)将现有的DOM元素直接封装进jQuery对象: var $btn=$(this) -
只有通过jq对象才可调用jQuery提供的简化版API,操作找到的DOM元素,this默认返回DOM元素,${this}将this返回的DOM元素封装成jQuery对象
几乎所有jQuery API都有三大特性:
1.自带遍历效果: 对jQuery对象调用API相当于对每个DOM元素调用API
$btns.click(function(){ … }) 可给找到的所有btn都绑定事件处理函数
$lis.css(“css属性”,”值”) 可给找到的所有li都设置css属性
2.一个函数两用:
如果给了新值,就修改内容;没给新值,就获取内容
$().html() 获取内容 $().html(“新内容”) 修改内容
$().css(“css属性”) 获取css属性值
$().css(“css属性”,”新值”) 修改css属性值
3.链式调用:函数自动返回正在使用的jQuery对象本身,使用链式操作简化代码
2 增删改查
2.1 查找
2.1.1 按选择器查找
jQuery支持所有CSS3选择器
1)基本选择器: #id element .class * select1,select2
2) 层次选择器: 父 后代 父>子 兄+弟 兄~弟
3) 子元素过滤选择器:
:first-child :last-child :nth-child(i) :only-child
4) 属性选择器:
[属性名]
[属性名=值]
[属性名^=开头]
[属性名$=结尾]
[属性名*=部分]
[属性名!=值]
5) 扩展选择器
- 基本过滤选择器:
先将所有符合条件的元素放入一个集合中,再统一编号,然后选择集合中指定位置的元素
:first/last :even/odd :eq/gt/lt(i) - 可见性过滤
:visible可见的元素 :hidden隐藏的元素
:hidden只能匹配display:none和input type=hidden - 内容过滤
:contains(关键字)根据元素内容中的文本关键字作为搜索条件
:has(selector)根据元素下的子元素的特征作为搜索条件,选择子元素中有符合selector要求的父元素
:empty 选择内容为空的元素
:parent 选择内容不为空的元素 - 状态过滤
:disabled :enabled :checked :selected - 表单元素过滤
专门用于表单,选择表单元素
:input 选择表单中的表单元素: button input select textarea
input 是元素选择器,只能选择input元素
每一种type属性都对应着一种input
每一种type属性都有专门的一个选择器跟它对应
:text :password :checkbox :radio :submit :reset…
2.1.2 按节点间关系查找
- 父子
$().parent() elem.parentNode
$().children([“selector”]) 只查找直接子元素elem.children
$().find(“selector”) 查找所有后代元素中符合selector的元素
$().children(":first-child") elem.firstElementChild
$().children(":last-child") elem.lastElementChild - 兄弟
$().prev() elem.previousElementSibling
$().prevAll() 之前所有
$().next() elem.nextElementSibling
$().nextAll() 之后所有
$().siblings() 选除当前元素之外的所有
2.2 修改
2.2.1 修改内容:
- 原始HTML片段: $().html([新HTML片段]) .innerHTML
- 纯文本内容: $().text([新文本]) .textContent
- 表单元素的值: $().val ([新值]) .value
2.2.2 修改属性:
- HTML标准属性: 2种访问方式:
1.核心DOM API:
$().attr(“属性名”[,新值]) .getAttribute()/.setAttribute()
2. HTML DOM API:
$().prop(“属性名”[,新值]) elem.属性名 - 状态属性:
$().prop(“状态”[,bool]) elem.状态 - 自定义扩展属性:
$().attr(“自定义属性”)可读取任意自定义拓展属性 .getAttribute()/.setAttribute()
$().data(“自定义属性”)只能读取以data-*开头的自定义拓展属性 替代 .dataset.属性名
其实attr和prop可一次修改多个属性:
$().attr/prop({
属性名:值,
属性名:值,
...
})
2.2.3 样式:
$().css(“css属性”[,新值])
替代:
1)修改: elem.style.css属性=值
2)获取: var style=getComputedStyle(elem) / .style.css属性
$().css({
css属性:值, //jQuery中长度数值不用加单位!
… : … ,
})
用class批量修改元素的样式:
$().addClass(“class1 class2”)
$().removeClass(“class1”)
$().hasClass(“class1”)
$().toggleClass(“class1”) 在有或没有class1之前切换
相当于:
if(!\$btn.hasClass("down"))
//为当前按钮添加down class
$btn.addClass("down");
else//否则(有)
//为当前按钮移除down class
$btn.removeClass("down");
2.3 添加/删除/替换/克隆
2.3.1 添加
-
用$(“html片段”)创建新元素,及其子元素
var $elem=$(“html片段”); -
将$()创建的新元素追加到DOM树上
$(父元素).append($elem) //return 父元素 替代 父元素.appendChild(elem)
$(elem).appendTo(父元素) //return 子元素elem$(父元素).prepend($elem) 在开头插入
$(elem).prependTo(父元素)$(child).before(elem) 父元素.insertBefore(elem, child)
$(elem).insertBefore(“selector”)$(child).after(elem) 将elem插入到child之后
$(elem).insertAfter(“selector”)$(child).replaceWith(elem)父元素.replaceChild(elem, child)
$(elem).replaceAll(child) return 新子元素elem
2.3.2 删除
删除: $().remove()
2.3.3 替换
$child.replaceWith($elem) 代替parent.replaceChild(elem, child)
$elem.replaceAll($child) return $elem .后续操作
2.3.4 克隆
$().clone()浅克隆:仅复制属性和样式,不复制行为
$().clone(true)深克隆:复制属性样式和行为
3 事件
3.1 事件绑定
$().on(“事件名”, 处理函数) 代替 .addEventListener(), 比如: $().on(“click”,function(){ … })
$().事件名(处理函数), 比如: $().click(function(){ … })
$().off(“事件名”, 处理函数) 解除绑定代替 .removeEventListener()
利用冒泡: this指向e.target;对父元素绑定一次监听,可以监听所有符合条件的子元素,且动态添加的新子元素能自动获得父元素上的事件
$(parent).on(“事件名”,”选择器”,function(){
//2个简化:
//1. this->e.target
//2. 不用写if,而是将判断条件选择器直接交给on作为参数,由on自动判断
})
只触发一次,自动解绑
$().one(“事件名”,function(){ … })
3.2 事件
3.2.1 页面加载
页面加载后执行:
-
DOM内容(html, js)加载后就提前触发: DOMContentLoaded
仅需要等待HTML和js加载完成就可提前执行,适用于和CSS、图片无关的js初始化操作。
可执行:事件绑定,添加/删除/遍历/修改元素的内容;
不能执行:获取/修改CSS,获取图片大小
jQuery重新封装:
$(document).ready(function(){ … })
->$().ready(function(){ … })
->$(function(){ … })
几乎所有的jQuery代码都会包含在$(function(){…}) -
整个页面加载后才触发: 等HTML,CSS,JS,图片加载完;依赖于CSS和图片的代码,必须放在window.onload中
$(window).load(function(){//addEventListener
})
3.2.2 $的原理
jQuery中$的原理: $是jQuery类型的别名
使用$可以做4件事:
1.$(“选择器”) 查找并封装DOM元素为jQuery对象
优化: 如果查找条件简单时,默认用HTML查找
如果查找条件复杂时,首选用选择器查找
2.$(DOM元素) 直接将DOM元素封装为jQuery对象
3.$(“HTML片段”) 用HTML片段创建DOM元素
4.$(function(){…}) 绑定DOM内容加载后触发的事件处理函数
3.2.3 鼠标事件
鼠标事件:
mouseover mouseout
问题: 冒泡(无论父元素是否同时触发子元素触发的事件)——反复进出子元素,也会反复触发父元素上的处理函数()
解决: 都用mouseenter和mouseleave代替,即使反复进出子元素也不会反复触发父元素上的处理函数(如果同时绑定mouseenter和mouseleave可简写为$().hover(fun1, fun2),其中fun1对应mouseenter,fun2对应mouseleave)
两个处理函数如果相同可统一为一个
3.2.4 模拟触发
模拟触发:
即使没有点击按钮,也能执行按钮的处理函数:
2种:
$elem.trigger(“事件名”)
可简写为: $elem.事件名()
4 动画
4.1 简单动画
- 显示隐藏
$().show() $().hide() $().toggle()
不带参数,默认用display:block/none 实现瞬间显示隐藏,想要动画效果必须添加ms参数,表示持续时间 - 上滑下滑
.slideUp(ms) .slideDown(ms) .slideToggle() - 淡入淡出
.fadeIn(ms) .fadeOut(ms) .fadeToggle()
动画效果固定,后期无法维护;
js定时器程序实现的动画效率远不如css高
4.2 万能动画
对任意css属性实施动画效果
$().animate({
css属性值:目标值,
...
}, 持续ms, function())
只支持单个数值的属性,不支持与颜色有关的属性,因为颜色实际上有三个值
排队和并发:
排队表示多个css属性先后依次变化,同一对象的不同animate从上到下顺序执行;并发表示多个css属性同时变化,将多个css属性放在同一个animate中
调用动画API仅是将动画加入执行队列,没有立刻执行。
延迟执行$(…).delay(ms).动画API
停止动画$(…).stop(),只能停止队列中正在播放的一个动画,后续动画依然会执行。
使用$().stop(true)停止当前动画并清空队列(继续播放会再次等待队列之前动画的时间)
使用:animated选择和判断正在播放动画的元素
animate最后一个参数表示回调函数,在动画播放后自动调用执行
动画优先选择css,效率高,可维护;和交互有关以及动态添加/删除DOM元素的动画只能选择js定时器
5 类数组对象操作
-
遍历:
实例方法,保存在jQuery的原型对象
$()->jQuery()->new jQuery()$().each(function(i,elem){ //替代forEach(function(elem,i,arr)) //i 获得当前位置 //elem 获得当前元素对象 })
静态方法: ,保存在jQuery构造函数,通过$直接调用
//$->jQuery
$.each(类数组对象/数组,function(i,elem){})
var i=$.inArray(查找的元素,数组/类数组对象[,fromi]) -
查找:
$(“所有元素”).index(“要找的元素”)
在"所有元素"的jQuery对象中,查找"要找的元素"的位置
如果在同一个父元素下找子元素的位置:
$(要找的子元素).index()
6 自定义API
在jQuery的原型对象中添加自定义函数:
jQuery.fn等效于jQuery.prototype
定义新函数:
jQuery.fn.新函数=function(){
}
调用新函数: $(…).新函数()