jQuery笔记

jQuery
=============================================================================================day01
正课:

1. 什么是jQuery
2. 如何使用jQuery
3. 查找元素
4. 修改元素
5. 什么是jQuery:
   第三方开发的 执行DOM操作的 极简化的 函数库
   第三方: 先下载，才能使用
   执行DOM操作: 学jQuery还是在学DOM的增删改查+事件绑定。
   极简化: jQuery是DOM操作的终极简化
   函数库: jQuery中都是用函数解决一切问题，没有属性。

为什么: 2个原因:

1. 是DOM操作的终极简化: 4个方面
   增删改查
   事件绑定
   动画
   ajax
2. 解决了绝大部分兼容性问题:
   凡是jQuery让用的，都没有兼容性问题
   比如: IE8: 不支持:nth-child(i) 选择器
   document.querySelector(“xxxx:nth-child(i)”)错误
   如果使用jQuery: $(“xxxx:nth-child(i)”) 正确！
   原理: jQuery先检查兼容性问题。
   如果发现当前浏览器不兼容，会用js模拟出选择器的效果。
   CSS选择器:nth-child(i) -> js中的children[i-1]

jQuery的问题:

1. 仅限于PC端

2. 仅仅是对DOM操作的每一步进行的简化。并没有彻底简化开发的步骤。

3. 如何使用jQuery:
   下载: jquery.com
   1.x: 兼容旧浏览器 1.11.3
   未压缩版: 拥有完备的注释，代码格式和见名知义的变量名。——可读性好。问题: 体积大不便于下载和传输。
   压缩版: 去掉注释，所有空格/换行等格式，最简化了变量名。——体积极小。问题: 可读性差。——上线后/生产环境中
   Webpack工具: 将HTML,CSS,JS代码压缩打包为极简化的代码。
   2.x: 不再兼容旧浏览器
   3.x: 不兼容旧浏览器，增加了部分新特性

引入: 在需要使用jQuery的页面中先引入jquery.js文件

然后再编写自定义js程序

原理:
引入jquery-1.11.3.js后:
在内存中添加了一种新的类型jQuery，包括两大部分:
1. 构造函数: 创建该类型的子对象，并填充对象的内容
function jQuery(选择器){
//…
}
2. 原型对象: 保存该类型所有的孩子共用的函数
jQuery.prototype:{
//所有jQuery子对象可使用的公共的函数
}
只要想使用jQuery家的简化版API，必须先创建jQuery类型的子对象。又因为jQuery家的函数都是为了操作DOM元素的，所以创建jQuery对象时，都要找到DOM树上的原生DOM元素，保存到jQuery对象中。
比如: var btn1=new jQuery("#btn1")
先在原生DOM树上找到id为btn1的原生DOM按钮。
然后创建jQuery对象，保存找到的这个按钮对象。
但是new jQuery太麻烦，所以jQuery构造函数中，提前包含了return new jQuery，调用jQuery()，就等效于调用new jQuery了，以此省略new:
function jQuery(选择器){
return new jQuery(选择器)
}
所以: var btn1=jQuery("#btn1")
但是jQuery的名字还是长，于是作者: $=jQuery所以，用$=用jQuery=new jQuery
所以: var btn1=KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn1"); 因为jQ…开头，比如: var $btn1=$("#btn1")
对jQuery对象，调用简化版函数，jQuery对象会自动翻译为对应的原生函数，自动作用于内部保存的原生DOM对象上，比如: $btn1.click(function()...)就等效于:btn1.addEventListener("click",function()...)再比如:调用$btn1.html()，会被自动翻译为btn1.innerHTML

本质: jQuery对象其实是一个保存多个找到的DOM元素的类数组对象

jQuery函数的特点: 3个:

1. 自带遍历效果: 对jQuery对象整体调用函数，等效于自动对内部保存的多个原生DOM对象，分别调用函数。
   比如: 页面上三个button，每个按钮都要绑定单击事件:
   //用DOM做
   var btns=document.getElementsByTagName(“button”);
   for(var btn of btns){//只能遍历
   btn.οnclick=function(){ … }
   }
   //用jQuery做，不用遍历，只要对整体调用一次click()
   var $btns=$(“button”);
   $btns.click(function(){ … })
   等效于自动: btns[0].οnclick=function(){ … }
   btns[1].οnclick=function(){ … }
   btns[2].οnclick=function(){ … }

2. 一个函数两用: 调用一个函数时，如果不给新值，自动执行获取值的操作。如果给了新值，自动切换为更新的操作。
   比如: DOM获取或修改一个按钮的内容:
   获取: btn.innerHTML
   修改: btn.innerHTML=新值
   jQuery中:
   获取: btn.html()
   修改: btn.html(新值)

3. 几乎所有函数都返回正在遍历的jQuery对象，便于重复使用
   比如: $(“ul>li:first”).css(…) //return $("ul>li:first")可继续对$(“ul>li:first”)继续执行操作
   比如: 可直接跟.html()，继续访问第一个li的内容
   链式操作: 将多个操作通过.连接起来连续调用，称为链式操作。
   前提: 必须对每一步函数调用的返回值了如指掌
   优点: 减少变量的使用，减少查找的次数，优化程序

4. 查找: 2种:

5. 按选择器查找元素:
   var $elems=$(“任意选择器”)
   jQuery支持所有CSS3的选择器
   同时还扩展了一批新的选择器：
   回顾: 子元素过滤: 同CSS
   在多个父元素内，选择处在指定位置的子元素
   :first-child :last-child :nth-child(i) :only-child
   新: 基本过滤/位置过滤: jQuery新增的
   先将符合条件的所有元素取出来，放在一个大的集合中，再按元素在集合中的顺位编号选择指定的元素
   :first :last :even :odd :eq(i) :gt(i) :lt(i)
   偶数 奇数 等于 大于 小于

   新: 内容过滤: 用元素的内容中的文本关键词作为查询条件:

   1. :contains(关键词): 只要元素的内容中包含"关键词"，就选中该元素
   2. :has(选择器): 只要当前元素的内容中包含符合"选择器"条件的子元素，就选中

   新: 可见性过滤: 选择那些可见的或不可见的元素
   :hidden 匹配看不见的隐藏元素
   只能匹配两种: display:none 和 input type=“hidden”
   不能匹配两种: visibility:false 和 opacity:0
   :visible 匹配看的见的元素

   新: 表单过滤: 专门查询表单中的表单元素的选择器
   :input 选择所有表单元素: input select textarea button
   vs input 仅选择input元素
   每种type都对应一种选择器:
   :text :password :checkbox :radio :file … …

6. 按节点间关系查找元素:
   比如: $elem.next() 获得当前元素的下一个兄弟元素
   $elem.nextAll() 获得当前元素之后所有的兄弟元素

7. 修改:
   内容: 3种:

8. 原始的HTML片段: .innerHTML => .html()

9. 如果想去内嵌的标签或特殊符号: .textContent => .text()

10. 表单元素的值: .value => .val()
    属性:

11. HTML标准属性:

12. 三大状态属性: checked selected disabled
    $elem.prop(“状态”,bool)

13. 自定义扩展属性:
    样式: .style.css属性=值 => $elem.css(“css属性名”,“值”)
    福利: 不用写单位——仅jq有
    问题: 一次只能改一个css属性:
    解决: 同时修改多个css属性:
    $elem.css({
    “css属性1”: 值1,
    … : … ,
    })

补: var bool=$elem.is(“选择器”)
判断当前元素是否满足选择器的条件要求
返回bool值: 如果elem元素的特征满足选择器的要求，就返回true，否则返回false。

========================================================================================day02
正课:

1. 修改
2. 按节点间关系查找
3. 添加/删除/替换/克隆
4. 事件绑定
5. 修改:
   内容:
6. 原始HTML片段内容:
   .innerHTML -> .html([新内容]) 两用
7. 纯文本内容(去内嵌标签):
   .textContent -> .text([新内容]) 两用
8. 表单元素的值:
   .value -> .val([新值]) 两用
   属性:
9. HTML标准属性: 2种:
10. 核心DOM:
    元素.getAttribute()
    元素.setAttribute()
    ↓
    $元素.attr(“属性名”[,新值]) 两用
11. HTML DOM:
    元素.属性名=值
    property
    ↓
    $元素.prop(“属性名”[,新值]) 两用

 无论attr还是prop都可同时修改多个属性: 
 $元素.attr|prop({
   属性名:值,
     ... : ... , 
 })

2. 状态属性: disabled checked selected
   不能用核心DOM的getAttribute()或setAttribute()访问
   自然也就不能用$元素.attr()访问
   只能用.访问: chb.checked=true;
   而在jquery中只能用: $元素.prop()
3. 自定义扩展属性:
   只能用核心DOM的getAttribute()和setAttribute()访问
   自然也能用jQuery的$元素.attr()但是，不能用.访问:ANY.data-trigger=值自然也不能用jQuery的$元素.prop()访问

样式:
elem.style.css属性 -> $元素.css()
问题: 只能一个一个的修改css属性，无法快速简介的批量修改。
解决: 只要批量修改样式，都用class属性
jQuery: $元素.addClass(“类名”) 添加class
$元素.removeClass(“类名”) 移除class
$元素.hasClass(“类名”) 判断是否包含class
比DOM的 className="类名"是覆盖，无法只精确修改某一个class。
而addClass和removeClass()，可精确修改某一个class，而不影响其它class。
另外: $元素.toggleClass("类名")自动判断是否包含指定"类名"，自动在有和没有这个类名之间来回切换比如一个按钮在有classdown和没有classdown之间来回切换://如果当前按钮没有classdown,就添加downif(!$(this).hasClass(“down”)){
$(this).addClass(“down”);
}else{//否则，就移除down
$(this).removeClass(“down”);
}
其实最简单的写法: $(this).toggleClass(“down”);

2. 查找:

3. 按选择器查找:

4. 按节点间关系查找:
   两大类关系

5. 父子关系
   元素.parentNode|parentElement 父元素
   jq -> $元素.parent();
   元素.children 所有直接子元素
   jq -> $元素.children([“选择器”]);
   如果没有选择器，就获得所有直接子元素
   如果提供了选择器，就仅获得符合选择器要求的部分直接子元素
   jq -> $元素.find(“选择器”)
   在元素的所有后代中查找符合选择器要求的
   强调: 必须写选择器
   元素.firstElementChild 第一个直接子元素
   jq-> $元素.children().first()
   元素.lastElementChild 最后一个直接子元素
   jq-> $元素.children().last()

6. 兄弟关系
   元素.previousElementSibling 前一个兄弟
   jq->$元素.prev()
   扩展: jq -> $元素.prevAll(["选择器"])选择当前元素之前所有兄弟元素(符合条件的)元素.nextElementSibling后一个兄弟jq->$元素.next()
   扩展: jq -> $元素.nextAll(["选择器"])选择当前元素之后所有兄弟元素(符合条件的)扩展:jq->$元素.siblings([“选择器”])
   选择除当前元素之外无论前后的所有兄弟元素(符合条件的)

7. 添加/删除/替换/克隆:

8. 添加元素:
   jq: 2步:

9. 用html片段创建新元素:
   var $elem=$(html片段)

10. 将新元素添加到DOM树
    末尾追加: 父元素.appendChild(新元素)
    jq -> $父元素.append($新元素)
    扩展: 开头追加: $父元素.prepend($新元素)
    中间插入: 父元素.insertBefore(新元素, child)
    jq -> $child.before($新元素)
    扩展: 在当前元素后插入新元素: $child.after($新元素)
    问题: 要么返回父元素，要么返回旧的子元素，无法在调用后继续利用链式操作，对新元素做后续连续操作。
    解决: 其实以上API都有一对儿:
    比如: $父元素.append($新元素)
    $新元素.appendTo($父元素)//return $新元素
    .对新元素继续操作
    再比如: $父元素.prepend($新元素)//return $父元素
    $新元素.prependTo($父元素)//return $新元素
    .对新元素继续操作

11. 删除: $元素.remove();

12. 替换:
    父元素.replaceChild(新元素, 旧元素)
    jq-> $旧元素.replaceWith($新元素)//return $旧元素
    $新元素.replaceAll($旧元素)//return $新元素
    .对新元素继续操作

13. 克隆: var $新元素=$元素.clone();

14. 事件绑定:
    标准事件绑定:
    DOM: 元素.addEventListener(“事件名”,处理函数)
    元素.removeEventListener(“事件名”,处理函数)
    jq: addEventListener->on
    removeEventListener -> off
    $元素.on(“事件名”,处理函数)
    $元素.off(“事件名”,处理函数)
    简写的事件绑定: 仅限于最常用的21种事件
    $元素.事件名(function(e){
    e.stopPropagation();
    e.preventDefault();
    var $this=$(this);
    var $tar=$(e.target)
    … …
    })

事件代理:
DOM:父元素.addEventListener(“click”,function(e){
var tar=e.target;
if(tar是xxxx){
正式的逻辑
}
})
jq: 2处简写:

1. this又回来了！
2. 不用写if了！
   KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(e){ //自动if(tar.is(“选择器条件”))
   //自动保证所有进入function的元素都是符合选择器条件的。
   var $tar=$(this);
   … …
   })

===========================================================================================day03
正课:

1. 事件

2. 动画

3. 类数组对象操作

4. 添加自定义函数

5. 封装自定义插件

6. 事件:
   页面加载后执行:
   问题: 浏览器加载HTML和js是顺序加载
   必须保证js在HTML加载后执行，才能保证所有的查找都能找到想要的元素。
   但是

模拟触发: 即使没有点击按钮，也可执行按钮的单击事件处理函数
如何: $元素.事件名() //手动调用指定元素上的事件处理函数

2. 动画:

3. 简单动画: 固定的三种动画效果

4. 显示隐藏: $元素.show() $元素.hide() $元素.toggle()
   问题/优点: 本质其实是用display:block和display:none来实现的瞬间显示隐藏。
   解决: 加参数: 动画持续时间
   $元素.show(2000) $元素.hide(2000)

5. 上滑下滑: $元素.slideUp()
   $元素.slideDown()
   $元素.slideToggle()

6. 淡入淡出: $元素.fadeIn()
   $元素.fadeOut()
   $元素.fadeToggle();
   问题:

7. 效果固定的，无法修改

8. 都是用js程序和定时器模拟的动画效果——效率低
   总结: 将来能用css做的动画，首选css——效率高，可维护
   特别推荐: $元素.show() $元素.hide() $元素.toggle()
   不包含动画效果，仅简化display操作
   比如: $元素.css(“display”,“block”)
   .show()
   $元素.css(“display”,“none”)
   .hide()
   $元素.toggle() 自动在显示和隐藏之间来回切换

9. 万能动画: 对任意css属性应用动画效果

   $元素.animate({
   //目标样式
   css属性:值,
   … : … ,
   }, 动画持续时间ms)
   让{}里的css属性，在规定的时间ms内，从当前值缓慢过渡到目标值
   问题: 1. 也是用js和定时器模拟的，效率低
   2. 功效类似于css的transition，还不如transition
   相同: 凡是单个数值的属性: 都支持
   width, height, left, top, padding, margin …
   不同: CSS中的transition支持颜色动画
   也支持CSS3变换
   jq中的animate不支持颜色动画
   也不支持CSS3变换
   排队和并发:
   排队变化: 多个css属性，先后按顺序变化
   如何: 对同一个元素反复调用多次动画函数，多个动画函数的效果是排队顺序执行的。
   比如: $s2.animate({left:400},2000)
   .animate({top:300},2000)
   本质:
   所有的元素都有一个动画队列:
   调用动画函数，并不是立刻执行动画的意思，仅仅是将动画效果加入队列中等待顺序执行。
   并发变化: 多个css属性，同时变化
   如何: 放在一个animate中的多个css属性默认并发同时变化

   动画结束后自动执行:
   jQuery中所有动画函数都是定时器模拟的，所以都是异步的。主程序中其它函数是不会等动画执行完才执行的。
   解决: 如果希望在动画接收后才自动执行一项任务，可用动画函数提供的回调函数参数
   如何: 每个动画函数，都有最后一个参数，是一个回调函数。放在回调函数中的代码，一定会在动画结束后才自动执行

   停止动画: $元素.stop()
   坑: .stop()默认只停止队列中当前正在播放的动画，后续动画依然继续播放。
   解决: .stop(true) 停止当前动画，并清空队列
   选择器: :animated 匹配正在播放动画的元素

10. 类数组对象操作:
    jQuery的$()查询后的结果就是一个类数组对象
    但是在js中类数组对象很受歧视，数组家的函数，都用不了。
    jQuery中为类数组对象提供了两个最常用的函数:
    $(…).each() 类似于 js中的数组的forEach
    遍历集合中的每个元素，执行相同的操作
    如何: 遍历一个ul下的所有li
    $(“ul>li”)//返回类数组对象
    //.forEach(function(elem, i , arr){ … })
    .each(function(i, elem){
    elem->每个li …
    $(elem)->jq的$li
    })
    $(...).index()类似于js中的数组的indexOf查找集合中是否包含指定的元素，以及在什么位置如何:在一批元素中查找一个指定元素的位置比如:查找一个$li在ul下所有li中是第几个
    var i=$("ul>li").index($li)
    可简写: 如果是在同一个父元素下找li的位置
    var i=$li.index(); //自动就在当前里的父元素内查找

11. 添加自定义函数:
    何时: 当jQuery中提供的函数不够用时
    如何: 向jQuery的原型对象中添加新函数，所有jQuery对象都可以使用。
    比如: 为所有jQuery对象添加一个函数: sum() 能对找到的所有元素的内容自动求和。

    1. 先在jQuery原型对象中添加自定义的共有函数
       //jQuery.prototype.sum=function(){
       ||
       jQuery.fn.sum=function(){
       //遍历将来调用sum()的点前的jQuery查找结果集合中的每个元素，并计算内容的和
       var $elems=this;//直接拿到$(“ul>li”) jq对象，不需要$()
       var total=0;
       KaTeX parse error: Expected '}', got 'EOF' at end of input: …lem){//elem取出的是elems中保存的一个一个的DOM对象
       var $el=$(elem);
       total+=parseInt($el.html())
       })
       //返回计算结果
       return total;
       }
    2. 在任意jQuery对象上调用
       var 内容的和=$(“ul>li”).sum()

12. 封装jQuery自定义组件:
    官方组件库: jQuery UI
    如何:

    1. 引入jQuery UI的css
    2. 按组件的要求编写HTML内容
    3. 引入jQuery.js和jQuery UI.js
    4. 编写自定义代码，找到组件的父元素，对父元素调用一次组件函数。
       jQueryUI的原理: 侵入性: 在程序员不知情的情况下，自动添加样式和行为。
       如果自己封装了插件，自己用，jQueryUI方式一定是简单
       如果考虑可维护性和灵活性，jQueryUI封装的太死了，不便于维护。
       jQuery组件是一套可重用的CSS样式和js功能的集合
       为什么: 重用！
       何时: 当发现很多网页中都需要一个小功能时，就要将这个功能的样式和行为封装为一个组件，将来反复使用
       如何:
       定义组件:
    5. 前提: 已经用原始的CSS，DOM，jq实现了。只不过暂时没有分离出来。所以定义jQuery组件其实仅是一个提取的过程
    6. 向jQuery的原型对象中添加自定义的组件函数
       1.1 为组件的HTML元素添加样式
       自动在各个元素上侵入class
       1.2 为组件的HTML元素添加行为
    7. 将原来写好的CSS代码提取到专门的css文件中独立存储
       使用组件: 和使用jQuery UI组件的用法完全一样

=============================================================================================day04
jQuery中的$()共可以做几件事？
$(“选择器”) 查找DOM元素，保存进jQuery对象中
$(this|e.target) 将DOM元素，封装为jQuery对象
$(html片段) 创建新元素
$(function(){ … }) 绑定事件，DOM内容加载后就提前触发

鄙视: 如何避免组件间样式冲突
不好的做法: 改名
因为项目中要求描述一个事物或一种功能，必须用统一的名称。
好的做法: 在所有的样式类前加上统一的前缀

正课:

1. ajax

2. *****跨域

3. ajax
   $.ajax({
   url:“服务端接口地址”, //http://localhost:3000/users/login
   type:“get|post”,
   data: { uname: “dingding”, upwd: “123456” },
   //“uname=dingding&upwd=123456”,
   //如果返回json，需要自动JSON.parse()转为js对象
   dataType:“json”, //如果不写需要自己手动调用JSON.parse()
   //onreadystatechange =function(res){ … }//在响应回来后，处理响应结果
   success: function(res){
   //res是JSON.parse()已经翻译过的可直接使用的js对象/数组
   }
   })

4. *****跨域:
   浏览器同源(origin)策略: 也称禁止跨不同源头访问资源
   强调: 仅限于ajax
   浏览器规定发送ajax请求时，只有相同域名的客户端和相同域名的服务端之间才能发送请求:
   比如: 学子商城项目:
   客户端:
   http://localhost:3000/index.html
   index.js
   $.ajax()
   请求↓ ↑响应 成功
   服务端:
   http://localhost:3000/index

跨域: 从一个域名下的网页，向另一个域名下的服务端发送ajax请求——受浏览器的同源策略控制，禁止发送的
比如:

1. 域名不同:
   http://www.a.com/index.html -> http://www.b.com
2. 子级域名不同:
   http://oa.tedu.cn/index.html -> http://hr.tedu.cn
3. 端口号:
   http://localhost:5500/index.html -> http://localhost:3000
4. 协议不一样:
   http://localhost/index.html -> https://localhost
   :80 :443
5. 即使同一台机器，域名和IP之间互相访问
   http://localhost/index.html -> http://127.0.0.1
   域名 IP
   以上5种情况，都会报ajax请求错误:
   CORS…Access-Control-Allow-Origin

但是，现实中，随处可见跨域请求:
手机都能看天气和股票
淘宝可跟踪所有快递公司的物流信息
一定可以跨域请求: 如何跨域

1. CORS方式: 仅服务端改代码，就可跨域
   同源策略的本质: 其实可以发送ajax请求
   也可以正常执行服务端的程序
   也可以顺利返回正确的结果
   但是，浏览器经过检查数据的来源，发现和当前网页的来源不一致，所以，到手的数据不让用！
   如何: 其实就是在服务器端返回响应的响应头中伪装成指定的源头
   //res.send(result); //不要用res.send了
   res.send其实是一种简写:
   等效于:
   res.writeHead()+res.write(JSON.stringify(result))+res.end()
   想跨域，就不要用简写的res.send()
   自己在服务端写三步：
   res.writeHead(200,{
   “Access-Control-Allow-Origin”:“http://127.0.0.1:5500”
   });
   res.write(JSON.stringify(result));
   res.end();
   这样返回的数据，就被伪装成来自127.0.0.1:5500的，就可以通过浏览器的同源策略检查，可正常使用

2. JSONP方式: JSON with padding
   填充式JSON

服务端: 将要发送的数据填充在一条js语句中
 res.write(`document.write("${weather}")`)
客户端: <script src="服务端接口地址"
  <script 发送请求到服务端
    并能够收到服务端返回的js语句字符串:
    document.write("${weather}")
    <script只要收到js语句，就立刻自动执行
问题: 要在客户端执行的js语句，在服务端写死了，众口难调。

方案二: 提前在客户端定义一个函数，用于处理服务端返回的请求，服务端仅使用函数名拼接一条函数调用的js语句
客户端: function show(weather){
任意js语句
}
服务端: res.write(show("${weather}"))
问题: 本该定义在客户端的函数名，在服务端是写死的，众口难调
方案三: 用请求参数，将函数名传递给服务器
客户端: <script src=“http://localhost:3000?callback=show”
服务端: 接收客户端传来的名为callback的参数中保存的函数名
将callback函数名动态拼接到要返回的函数调用语句中
问题: <script是在页面中写死的，只能在页面加载过程中执行一次。无法按需反复执行，比如每次单击按钮时，随时发送请求。
方案四: 每次单击按钮时动态创建<script元素
客户端:
KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ //不要用("