jQuery笔记

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

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

为什么: 2个原因:

是DOM操作的终极简化: 4个方面 增删改查 事件绑定 动画 ajax解决了绝大部分兼容性问题: 凡是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的问题:

仅限于PC端

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

如何使用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个:

自带遍历效果: 对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(){ … }

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

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

查找: 2种:

按选择器查找元素: 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) 偶数 奇数 等于 大于 小于

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

:contains(关键词): 只要元素的内容中包含"关键词"，就选中该元素: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 … …

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

修改: 内容: 3种:

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

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

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

HTML标准属性:

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

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

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

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

修改按节点间关系查找添加/删除/替换/克隆事件绑定修改: 内容:原始HTML片段内容: .innerHTML -> .html([新内容]) 两用纯文本内容(去内嵌标签): .textContent -> .text([新内容]) 两用表单元素的值: .value -> .val([新值]) 两用 属性:HTML标准属性: 2种:核心DOM: 元素.getAttribute() 元素.setAttribute() ↓ $元素.attr(“属性名”[,新值]) 两用HTML DOM: 元素.属性名=值 property ↓ $元素.prop(“属性名”[,新值]) 两用 无论attr还是prop都可同时修改多个属性: $元素.attr|prop({ 属性名:值, ... : ... , }) 状态属性: disabled checked selected 不能用核心DOM的getAttribute()或setAttribute()访问 自然也就不能用$元素.attr()访问 只能用.访问: chb.checked=true; 而在jquery中只能用: $元素.prop()自定义扩展属性: 只能用核心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”);

查找:

按选择器查找:

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

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

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

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

添加元素: jq: 2步:

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

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

删除: $元素.remove();

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

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

事件绑定: 标准事件绑定: 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处简写:

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

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

事件

动画

类数组对象操作

添加自定义函数

封装自定义插件

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

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

动画:

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

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

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

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

效果固定的，无法修改

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

万能动画: 对任意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 匹配正在播放动画的元素

类数组对象操作: 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(); //自动就在当前里的父元素内查找

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

先在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; }在任意jQuery对象上调用 var 内容的和=$(“ul>li”).sum()

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

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

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

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

正课:

ajax

*****跨域

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对象/数组 } })

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

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

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

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

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的，就可以通过浏览器的同源策略检查，可正常使用

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: …{ //不要用("