1.什么是jQuery:
jQuery:第三方的极简化的DOM操作的函数库第三方:下载极简化:是DOM操作的终极简化:4个方面:
DOM操作:学习jQuery还是在学DOM，只不过API简化了函数库:jQuery中都是函数，用函数来解决一切问题为什么使用:
- DOM操作的终极简化
- 解决了大部分浏览器兼容性问题凡是jQuery让用的，都没有兼容性问题
2.如何使用:
下载:版本:
1.x:兼容旧浏览器IE8
2.x:不再兼容旧浏览器
3.x:不再兼容旧浏览器，提供了更多新特性:
鄙视:3.x的新特性:
引入网页:2种:
- 引入服务器本地的js文件:<script><li>引入CDN网络中共享的js文件:</li></ol><p><scriptclass="lazy" data-original=“http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js”</p><p>原理:引入jquery-1.x.js其实是在全局添加了一种新类型jQuery包括:构造函数jQuery:用于创建jQuery类型的子对象原型对象jQuery.fn:用于保存只有jQuery类型的子对象才能访问的共有方法如何使用jQuery简化版API:问题:DOM元素无法使用jQuery简化版API解决:要想使用jQuery简化版API，必须先创建jQuery类型的子对象:如何创建jQuery类型的子对象:2种:</p><ol><li>通过查找DOM元素，将DOM元素保存到新创建的jQuery对象中:var $jq=$(“selector”) 什么是jQuery对象:包含找到的DOM元素的类数组对象</li><li>将已经获得的DOM元素直接保存进新创建的jQuery对象中</li></ol><p>jQueryAPI的通用特点:3个</p><ol><li>自带遍历:对jQuery对象整体调用一次API，等效于对内部每个元素都调用一次API</li><li>一个函数两用:给新值，就修改；没给新值，就读取原值</li><li>每个函数都返回正在操作的jq对象:链式操作!</li></ol><p><strong>3.查找:选择器</strong></p><p>基本选择器:同CSSid class element * , 层次选择器:同CSS空格>+ ~ 子元素过滤选择器:同CSS在各自父元素内，分别排序，从1开始:first-child:last-child :only-child :nth-child(2n/2n+1/odd/even/i)基本过滤选择器(位置过滤选择器):jQuery新增将所有符合条件的元素，保存在一个统一的集合中，在集合内统一编号。从0开始:first/last:gt/lt/eq(i) :even/odd 属性过滤选择器:同CSS内容过滤:jQuery新增4种:</p><ol><li>以内容中的文本作为条件查询父元素:contains(text)内容包含指定文字的元素</li><li>以子元素的特征作为查询条件，查询父元素:has(selector)包含符合selector要求的子元素的父元素</li><li>空元素/非空元素::parent :empty</li></ol><p>可见性过滤:jQuery新增:hidden只能选择两种隐藏的元素</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/e0db6681842c4b4399a202f5e9d0d081" img_width="968" img_height="50" alt="前端知识点总结——JQ" inline="0"></div><p>:visible</p><p>状态过滤:同CSS四大状态:</p><p>:enabled:disabled :checked :selected</p><p>表单元素过滤:</p><p>:input选择所有表单元素:input select textarea button</p><p>:[type]每种type都对应一种选择器</p><div class="pgc-img"><img class="lazy" data-original="http://p9.pstatp.com/large/pgc-image/5feda398fb5848bcbd4ac5a03fd851de" img_width="871" img_height="48" alt="前端知识点总结——JQ" inline="0"></div><p><strong>4.修改:</strong></p><p>内容:3种:html代码片段:$(…).html([新内容]).innerHTML 纯文本内容:$(…).text([新内容]).textContent 表单元素的值:$(…).val([新值]).value 清空内容:$(…).empty(); 属性:3种:HTML标准属性:$(…).attr(“属性名”[,“值”])</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/e50024751acc407fa860f78c15fa595d" img_width="890" img_height="216" alt="前端知识点总结——JQ" inline="0"></div><p>状态属性:$(…).prop(“属性名”[,bool])自定义扩展属性:$(…).data(“属性名”[,“值”])样式:修改:内联样式:获取:计算后的样式:都用.css:$(…).css(“css属性名”[,值])问题:单独修改每个css属性，代码繁琐解决:用class批量修改样式:$(…).addClass("class … ") $(…).removeClass(“class…”) $(…).hasClass(“class …”)</p><p>$(…).toggleClass(“class…”)</p><ol><li>按节点间关系查找:</li></ol><p>2大类:</p><ul><li>父子:$(…).parent() $(…).children([“selector”]) 问题:只能获得直接子元素解决:在所有后代中查找$(…).find(“selector”)$(…).children().first(); $(…).children().last();</li><li>兄弟:$(…).prev/next() $(…).prevAll/nextAll([“selector”])$(…).siblings([“selector”])</li></ul><ol><li>添加,删除,替换,克隆:</li></ol><p>添加:2步:</p><ul><li>创建新元素:var $elem=$(“html代码片段”)</li><li>将新元素添加到DOM树:</li></ul><p>末尾追加:$parent.append($elem) //return $parent</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/ab5c93ec85a04e6a8964c0170d8aafa0" img_width="882" img_height="53" alt="前端知识点总结——JQ" inline="0"></div><p>开头插入:$parent.prepend($elem) //return $parent</p><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/82fade8975ca4b0aa679e9db97845fe9" img_width="886" img_height="56" alt="前端知识点总结——JQ" inline="0"></div><p>指定元素前插入:$child.before($elem)</p><p>指定元素后插入:$child.after($elem)</p><p>可简化为1步:</p><p>$(“html代码片段”).appendTo($parent)</p><p>$parent.append(“html代码片段”)</p><p>移除:$(…).remove()</p><p>替换:$(…).replaceWith(); //右替换左//return左</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/ad93beb4c7234b91b15c20c9f7f76e17" img_width="953" img_height="59" alt="前端知识点总结——JQ" inline="0"></div><p>克隆:$(…).clone();</p><p>浅克隆:仅复制内容和样式，不复制行为</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/612f77f9815a41dea7b888d8659ac6c5" img_width="921" img_height="62" alt="前端知识点总结——JQ" inline="0"></div><p>深克隆:即复制内容和样式，又复制行为</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/8e7cfad5c0a14ca8b6c7b00ed1ae2738" img_width="990" img_height="56" alt="前端知识点总结——JQ" inline="0"></div><p><strong>5.事件:</strong></p><p>鄙视:jq中有几种事件绑定方式，分别是什么:</p><ol><li>.bind(“事件名”,handler)</li></ol><p>.unbind(“事件名”,handler)</p><p>3个重载:</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/4701b4fadcf44b3a89cebed35da0ad1f" img_width="947" img_height="110" alt="前端知识点总结——JQ" inline="0"></div><ol><li>.one(“事件名”,handler)</li></ol><p>只能触发一次，触发后，自动解绑</p><ol><li>.delegate(“selector”,“事件名”,handler)</li></ol><p>其实就是利用冒泡的简化版：</p><ul><li>将利用冒泡中的目标元素判断提升到第一个参数，用选择器作为判断条件</li><li>将this重新指回了目标元素</li></ul><p>鄙视:.delegate vs .bind</p><ul><li>绑定位置不同:.bind() 直接绑在目标元素(子元素)上.delegate()绑在父元素上</li><li>事件监听的个数不同:.bind() 导致事件监听个数增多.delegate()始终只有一个监听</li><li>.bind()无法让动态生成的新元素自动获得事件处理函数.delegate()即使后来动态生成的新元素也可自动获得父元素上的事件处理函数</li></ul><p>解绑:.undelegate()</p><ul><li>.live/die()废弃</li><li>.on:统一bind和delegate的用法</li><li>代替bind:.on(“事件名”,handler)</li><li>代替delegate:.on(“事件名”,“选择器”,handler)</li></ul><p>解绑:.off()</p><p>终极简化:.事件名(handler)</p><p><strong>6.页面加载后执行:2种:</strong></p><p>1.DOMContentLoaded:</p><p>DOM内容(html,js)加载完成,就提前触发</p><p>何时:操作不需要等待css和图片时，首选DOMContentLoaded</p><p>jQuery:$(document).ready(function(){ … })</p><p>简化:$().ready(function(){…})</p><p>更简化:$(function(){…})</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/dceeb4ab05a441088a851930ef5f0b76" img_width="871" img_height="55" alt="前端知识点总结——JQ" inline="0"></div><p>2.window.onload=function(){</p><p>//等待页面所有内容(html,css,js,图片)都加载完才能执行</p><p>}</p><p>何时:如果必须等待css和图片加载完，才能执行的操作，必须放在window.onload中</p><p>鄙视:jQuery中$的原理:4种重载</p><ul><li>如果传入选择器字符串，则查找并创建jq对象优化:speed up 如果选择器只是一个id，则调用getElementById如果选择器只是一个标签，则调用getElementsByTagName如果选择器只是一个class，则调用getElementsByClassName如果选择器复杂，才调querySelectorAll</li><li>如果传入DOM元素对象，则封装现有DOM元素为jq对象</li><li>如果传入html代码片段，就创建新元素:</li><li>如果传入函数，就绑定DOM内容加载后执行</li></ul><p><strong>7.鼠标事件:</strong></p><p>DOM:mouseover mouseout</p><p>进出子元素，也会反复触发父元素上的事件</p><p>jq:mouseenter mouseleave</p><p>进出子元素，不再触发父元素上的事件</p><p>简化:如果同时绑定mouseenter和mouseleave</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/ec36b41daed346b198cd57afda36687d" img_width="966" img_height="79" alt="前端知识点总结——JQ" inline="0"></div><p>模拟触发:$(…).trigger(“事件名”)=> $(…).事件名()</p><p><strong>8.动画:</strong></p><p>简单动画:3种:</p><ul><li>显示隐藏:.show(ms) .hide(ms) .toggle(ms)</li></ul><p>不带参数，默认:瞬间显示隐藏，不带动画</p><p>原理:display属性实现的，不支持动画</p><p>带毫秒数参数:会有动画效果</p><ul><li>上滑下滑:.slideUp(ms) .slideDown(ms) .slideToggle(ms)</li><li>淡入淡出:.fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)</li></ul><p>问题:1. 效果是固定的，不便于维护</p><p>2\.用程序的定时器实现的动效，效率不如transition</p><p>万能动画:</p><p>$(…).animate({</p><p>css属性:目标值,</p><p>css属性:目标值,</p><p>},ms)</p><p>问题:只支持单个数值的css属性</p><p>不支持颜色和CSS3变换</p><p>动画播放后自动执行:动画API的最后一个参数都是一个回调函数，在动画播放完成后自动执行!回调函数中的this，指正在播放动画的当前DOM元素</p><p><strong>9.排队和并发:</strong></p><ul><li>并发:多个css属性同时变化放在一个animate函数内的多个css属性默认并发变</li><li>排队:多个css属性先后变化对同一个元素，先后调用多个动画API，都是排队执行原理:所有动画API起始并不是立刻开始动画，而仅是将当前动画函数加入元素的动画队列中等待执行。</li></ul><p>停止动画:$(…).stop();</p><p>默认:仅停止动画队列中，当前正在播放的一个动画，队列中后续动画，依然执行！</p><p>如何停止动画，并清空队列:.stop(true)</p><p>选择器::animated 可选择或判断一个正在播放动画的元素</p><p><strong>10.类数组对象操作:</strong></p><p>遍历:</p><p>$(…).each(function(i,elem){</p><p>//this->当前elem</p><p>})</p><p>鄙视:$(…).each() vs $.each(数组/集合,fun)</p><p>查找:</p><p>vari=$(…).index(要找的DOM元素/jq对象)</p><p>简化:如果在一个父元素内查找子元素:</p><p>$(子元素).index();</p><p><strong>11.为jquery添加自定义方法:</strong></p><ul><li>添加在jQuery.fn中</li></ul><p>强调:jQuery.fn.自定义方法=function(){</p><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/85cc17a4e4094e3388c4e6235e48b7d7" img_width="751" img_height="72" alt="前端知识点总结——JQ" inline="0"></div><ul><li>调用时:$(…).自定义方法()</li></ul><p><strong>12.插件:为标准函数库或框架添加功能的第三方库</strong></p><ul><li>官方插件jQueryUI:</li></ul><p>使用jQueryUi:</p><p>先引入jquery.js，</p><p>因为jQueryUI是基于jQuery开发的</p><p>再引入jquery-ui.js</p><p>再编写自定义脚本</p><p>包括:</p><p>交互:自学</p><p>效果:</p><ul><li>重写了三类简单动画API，添加了新的动效</li><li>为addClass/removeClass/toggleClass，也添加了动效</li><li>重写了animate方法，支持颜色动画</li></ul><p>部件:什么是部件:具有完整样式和行为的小功能如何使用:4步:</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/56863ceb7b44429c9e0a46fcf02c4e28" img_width="843" img_height="133" alt="前端知识点总结——JQ" inline="0"></div><p>原理:</p><div class="pgc-img"><img class="lazy" data-original="http://p3.pstatp.com/large/pgc-image/33bd78b99c92491098fa85e4ec438a3c" img_width="930" img_height="99" alt="前端知识点总结——JQ" inline="0"></div><p>jQueryUI vs bootstrap</p><p>jQueryUI 傻瓜式，侵入式</p><p>优:简单缺:不可维护</p><p>bootstrap少量手动添加样式和行为(自定义扩展属性)</p><p>缺:相比jQueryUI，稍微麻烦</p><p>优:可定制!</p><p><strong>13.第三方插件:</strong></p><p>文件上传:</p><p>富文本编辑器:</p><p>masonry:彩砖墙/瀑布流</p><p><strong>14.自定义插件:</strong></p><p>何时:只要希望复用一块功能和样式时，都要封装为插件</p><p>如何:</p><p>前提:必须已经用原生的html,css,jss实现了插件的功能</p><p>2种封装插件的风格:jQuery侵入式:</p><ul><li>将插件所需的css提取出来，保存在单独的css文件中</li><li>定义插件的js文件:</li></ul><p>先检查是否提前引入了jQuery</p><p>定义插件函数，保存在jQuery的原型对象jQuery.fn中</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/54f838b841df4397a791f8c458d61e64" img_width="760" img_height="83" alt="前端知识点总结——JQ" inline="0"></div><ul><li>使用插件:</li></ul><p>引入插件的css文件</p><p>在body中按插件的规定，编写html内容</p><p>引入jquery.js和插件的js文件</p><p>在自定义脚本中，查找要应用插件的父元素，调用插件函数</p><p>BootstrapDIY式:</p><ul><li>将css拷贝到独立的css文件中</li><li>编写js:先验证是否提前加载了jQuery查找自定义扩展属性，为其绑定事件</li><li>使用插件:引入插件的css按照插件的HTML格式要求，编写内容为插件的HTML元素手动添加class为触发事件的元素添加指定的自定义扩展属性</li></ul><p><strong>15.jQuery的ajaxAPI</strong></p><p>$.ajax({</p><p>type:“get/post”,</p><p>url:“xxx”,</p><p>data:“rawData”/{变量名:值,…}</p><p>dataType:“json”,</p><p>beforeSend(){</p><div class="pgc-img"><img class="lazy" data-original="http://p1.pstatp.com/large/pgc-image/591f44d90adf469ab018c3403a436d3b" img_width="835" img_height="58" alt="前端知识点总结——JQ" inline="0"></div><p>}</p><p>completed(){</p><p>//只要请求完成，无论成功还是失败，都触发</p><p>}</p><p>success(data){</p><p>//请求成功触发</p><p>}</p><p>error(){</p><p>//发生错误时触发</p><p>}}).then(data=>{ … … }).catch(err=>{ … }) 简写:</p><ul><li>专门发送get请求</li></ul><p>$.get(url,data,dataType).then(data=>{… })</p><ul><li>专门发送get请求，接收JSON响应，并自动转为js对象</li></ul><p>$.getJSON(url,data).then(data=>{… })</p><ul><li>专门发送get请求，接收js语句响应，并执行</li></ul><p>$.getScript(url,data)</p><ul><li>专门发送get请求，获取一段html代码片段的响应，并自动填充到前面的父元素中</li></ul><p>$(父元素).load(“xx.php/xx.html”)强调:不支持then!</p><p>专门简化post请求的:$.post(url,data,dataType).then(data=>{ … })</p><p><strong>16.跨域请求:</strong></p><p>允许跨域请求:link, img,>
分享到:
閱讀更多 渡一教育web前端開發 的文章
