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(){

}
调用新函数: $(…).新函数()

jQuery_1

jQuery