--- url: /notes/j-query/jquery/index.md --- ## JavaScript库 JavaScript库：即 **library**，是一个**封装**好的特定的**集合**（方法和函数） 从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等 常见的JavaScript 库： * jQuery * Prototype * YUI * Dojo * Ext JS * 移动端的zepto 这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery ## jQuery介绍 jQuery总体概况如下 : * **jQuery**是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情 * j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能 * jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互 * 学习jQuery本质： 就是学习调用这些函数（方法） * jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率 **jQuery的优点** 1. 轻量级。核心文件才几十kb，不会影响页面加载速度。 2. 跨浏览器兼容，基本兼容了现在主流的浏览器。 3. 链式编程、隐式迭代。 4. 对事件、样式、动画支持，大大简化了DOM操作。 5. 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。 6. 免费、开源。 ## jQuery的基本使用 ### jQuery下载 jQuery的官网地址： https://jquery.com/，官网即可下载最新版本 各个版本的下载：https://code.jquery.com/ 版本介绍： 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本 ### 使用jQuery 步骤： * 引入jQuery文件。 * 在文档最末尾插入 script 标签，书写体验代码。 * $('div').hide() 可以隐藏盒子。 ### jQuery的入口函数 jQuery中常见的两种入口函数： ```js // 第一种: 简单易用。 $(function() { ... // 此处是页面 DOM 加载完成的入口 }); // 第二种: 繁琐，但是也可以实现 $(document).ready(function() { ... // 此处是页面DOM加载完成的入口 }); ``` **总结：** 1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。 2. 相当于原生 js 中的 **DOMContentLoaded**。 3. 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 4. 更推荐使用第一种方式。 ### jQuery中的顶级对象$ * $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ * $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法 ### jQuery对象和DOM对象 使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下 : * 用原生 JS 获取来的对象就是 DOM 对象 * jQuery 方法获取的元素就是 jQuery 对象 * jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储） **注意：** **只有** **jQuery** **对象才能使用** **jQuery** \*\*方法，\*\*DOM **对象则使用原生的** **JavaScirpt** **方法** ![image-20220419104953161](https://note-1259190304.cos.ap-chengdu.myqcloud.com/note/202204191049369.png) ### jQuery对象和DOM对象转换 DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用 （1）DOM --> jQuery ```js $(DOM对象) ``` （2）jQuery --> DOM ```js index为索引号 $(DOM对象)[index] $(DOM对象).get(index) ``` ```js // 1.DOM对象转换成jQuery对象，方法只有一种 var box = document.getElementById('box'); // 获取DOM对象 var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象 // 2.jQuery 对象转换为 DOM 对象有两种方法： // 2.1 jQuery对象[索引值] var domObject1 = $('div')[0] // 2.2 jQuery对象.get(索引值) var domObject2 = $('div').get(0) ``` 总结：实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法 ## jQuery常用的API ### jQuery选择器 #### 基础选择器 ```js $("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号 ``` | **名称** | **用法** | **描述** | | ---------- | ------------------- | ------------------------ | | ID选择器 | **$("#id")** | 获取指定ID的元素 | | 全选选择器 | **$("\*")** | 匹配所有元素 | | 类选择器 | **$(".class")** | 获取同一类class的元素 | | 标签选择器 | **$("div")** | 获取同一类标签的所有元素 | | 并集选择器 | **$("div,p,li")** | 选取多个元素 | | 交集选择器 | **$("li.current")** | 交集元素 | #### 层级选择器 | **名称** | **用法** | **描述** | | -------------- | ---------------------- | ------------------------------------------------------------ | | **子代**选择器 | **$("ul>li")** | 使用\*\*>**号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素 | | **后代**选择器 | **$("ul li")** | 使用**空格\*\*，代表后代选择器，获取ul下所有的li元素，包括孙子 | | | **$("ul + li")** | 使用\*\*+**，代表当前元素的下一个兄弟元素 | | | **$( "#prev ~ div" )** | 选择“prev”元素**之后的所有同级元素\*\*，具有相同的父元素，并匹配过滤“同级”选择器 | | **parent()** | **查找父级** | | ---------------------- | ---------------------------------- | | **parents()** | **返回祖先级元素**\*\*【父级过多】\*\* | | **children(selector)** | 最近一级（亲儿子） | | **find(selector)** | 后代选择器(所有的) | | **siblings(selector)** | 查找兄弟节点，不包括自己本身 | | **next()** | 获取当前元素的下一个兄弟元素 | | **nextAll(\[expr])** | 查找当前元素之后所有的同辈元素 | | **prev()** | 获取匹配元素前面相邻的同辈元素 | | **prevAll(\[expr])** | 查找当前元素之前所有的同辈元素 | #### 表单选择器 | **名称** | **描述** | | ------------- | -------------------------------------- | | **:button** | 选择所有按钮元素和按钮类型的元素 | | **:checkbox** | 选择复选框类型的所有元素 | | **:checked** | 匹配所有被选中或选中的元素 | | **:disabled** | 选择所有禁用的元素 | | **:enabled** | 选择所有启用的元素 | | **:file** | 选择文件类型的所有元素 | | **:focus** | 如果当前处于焦点，则选择元素 | | **:image** | 选择图像类型的所有元素 | | **:input** | 选择所有输入、文本区域、选择和按钮元素 | | **:password** | 选择密码类型的所有元素 | | **:radio** | 选择所有类型为 radio 的元素 | | **:reset** | 选择所有类型为 reset 的元素 | | **:selected** | 选择所有选定的元素 | | **:submit** | 选择提交类型的所有元素 | | **:text** | 选择所有文本类型的输入元素 | #### 属性选择器 | $("\[href]") | 选取所有带有 href 属性的元素 | | --------------------------------- | ------------------------------------------------------------ | | $("\[href='#']") | 选取所有带有 href 值等于 "#" 的元素 | | $("\[href!='#']") | 选取所有带有 href 值不等于 "#" 的元素 | | $("*") | 选择所有元素 | | $("element:animated") | 选择所有正在播放动画的所有元素 | | $( "a\[hreflang|='en']" ) | 选择a标签属性为hreflang属性值带有**en的字符串**或者后面跟着"**-"** | | $( "input\[name*='man']" ) | 选择具有包含给定**子字符串**的值的指定属性的元素 | | $( "input\[name~='man']" ) | 选择具有指定属性的元素，其值包含给定的单词，以**空格分隔** | | $( "input\[name$='letter']" ) | 选择具有以给定字符串**结尾**的值的指定属性的元素。比较区分大小写。 | | $( "input\[name^='news']" ) | 选择具有以给定字符串**开头**的值的指定属性的元素。 | | `$( "input[id][name$='man']" ) ` | 匹配所有指定属性过滤器的元素 | | **hasClass(class)** | 检查当前的元素是否含有某个特定的类，如果有，则返回true | | ------------------- | ------------------------------------------------------ | | **toggle()** | 切换元素的可见性 | #### 筛选选择器 **基础过滤选择器** | **$("element:focus")** | 如果当前处于焦点，则选择元素。 | | -------------------------- | ------------------------------------------ | | **$( "element:header" )** | 选择所有作为标题的元素，如 h1、h2、h3 等 | | **$( "div:lang(en-us)" )** | 选择指定语言的所有元素 | | **$( ":root" )** | 选择作为文档根的元素 | | **$(":target")** | 选择由文档 URI 的片段标识符指示的目标元素 | **子代过滤选择器\[冒号前面要有空格]** | **名称** | **描述** | | -------------------------- | ------------------------------------------------------------ | | **:first-child** | 选择作为其父元素的第一个子元素的所有元素 | | **:first-of-type** | 选择所有元素名称相同的同级元素中的第一个元素 | | **:last-child** | 选择作为其父项的最后一个子项的所有元素 | | **:last-of-type** | 选择所有元素名称相同的兄弟元素中的最后一个元素 | | **:nth-child(index)** | 选择作为其父元素的第 n 个子元素的所有元素 | | **:nth-last-child(index)** | 选择作为其父元素的第 n 个子元素的所有元素，从最后一个元素到第一个元素计数 | | **:nth-last-of-type** | 选择与具有相同元素名称的兄弟元素相关的父元素的第 n 个子元素的所有元素，从最后一个元素到第一个元素计数 | | **:nth-of-type()** | 选择与具有相同元素名称的兄弟元素相关的父元素的第 n 个子元素的所有元素 | | **:only-child** | 选择作为其父级唯一子级的所有元素 | | **:only-of-type** | 选择所有没有具有相同元素名称的兄弟元素的元素。 | **内容过滤器** | **名称** | **描述** | | ------------------- | ------------------------------------------------------------ | | **:contains("XX")** | 选择包含**指定文本的所有元素** | | **:empty** | 选择**所有没有子元素的元素**（包括文本节点) | | **:has()** | 选择**包含至少一个与指定选择器匹配的元素的元素** | | **:parent()** | 选择具有至少一个子节点（元素或文本）的**所有元素** ; **查找父级** | **JQuery扩展选择器** | **名称** | **用法** | **描述** | | -------------- | ------------------------- | --------------------------------------------------------- | | **:first** | **$("li:first")** | 获取第一个元素 | | **:last** | **$("li:last")** | 获取最后一个元素 | | **:eq(index)** | **$("li:eq(2)")** | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 | | **:odd** | **$("li:odd")** | 获取到的li元素中，选择索引号为奇数的元素 | | **:even** | **$("li:even")** | 获取到的li元素中，选择索引号为偶数的元素 | | **:not** | **$("li:not(.myClass)")** | 获取class不等于myClass的li元素 | | **:gt(index)** | **$("li:gt(1)")** | 获取索引号大于1的li对象 | | **:lt(index)** | **$("li:lt(3)")** | 获取索引号小于1的li对象 | | **:hidden** | **$("li:hidden")** | 获取所有隐藏的li元素 | | **:visible** | **$( "div:visible" )** | 选择所有可见的元素 | #### jQuery隐式迭代 **jQuery设置样式** ```js $('div').css('属性', '值') ``` **jQuery排他思想** 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式 ```js $(this).css('color ', 'red '); $(this).siblings().css("color ", ""); ``` **隐式迭代** 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。 ```js $('div').hide(); //页面中所有的div全部隐藏，不用循环操作 ``` **链式编程** 链式编程是为了节省代码量，看起来更优雅。 ```js $(this).css('color', 'red').sibling().css('color', ''); ``` ### jQuery样式操作 jQuery中常用的样式操作有两种：**css()** 和 **设置类样式**方法 **方法1: 操作 css 方法** jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式 常用以下三种形式 : （1）参数只写**属性名**，则是返回属性值 ```js var strColor = $(this).css('color'); ``` （2）参数是**属性名，属性值**，逗号分隔，是设置一组样式，属性必须**加引号**，值如果是**数字**可以**不用跟单位和引号** ```js $(this).css("color", "red "); ``` (3）参数可以是**对象**形式，方便设置多组样式。属性名和属性值用冒号隔开，属性**可以不用加引号** ```js $(this).css({"color": "white","font-size": "20px"}); ``` 注意：css() 多用于样式少时操作，多了则不太方便。 **方法2: 设置类样式方法** 作用等同于以前的 classList，可以操作类样式， 注意操作类里面的**参数不要加点**。 常用的三种设置类样式方法： ```js // 1.添加类 $("div").addClass("current"); // 2.删除类 $("div").removeClass("current"); // 3.切换类 $("div").toggleClass("current"); ``` **注意：** 1. 设置类样式方法比较适合样式多时操作，可以弥补css()的不足。 2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。 ### jQuery效果 jQuery 给我们封装了很多动画效果，最为常见的如下： * 显示隐藏：**show()** / **hide()** / **toggle()**; * 划入画出：**slideDown()** / **slideUp()** / **slideToggle()**; * 淡入淡出：**fadeIn()** / **fadeOut()** / **fadeToggle()** / **fadeTo()**; * 自定义动画：**animate()** ; **注意：** 动画或者效果一旦触发就会执行，如果**多次触发**，就造成**多个动画或者效果排队执行**。 jQuery为我们提供另一个方法，可以停止动画排队：**stop();** #### **停止动画排队** 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。 停止动画排队的方法为：**stop()** ; * stop() 方法用于停止动画或效果。 * stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。 总结: 每次使用动画之前，先调用 stop() ,在调用动画。 #### 事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover ```js hover([over, ] out) // 其中over和out为两个函数 ``` * over:鼠标**移到元素上**要触发的函数（相当于mouseenter） * out:鼠标**移出元素**要触发的函数（相当于mouseleave） * 如果**只写一个函数**，则鼠标**经过和离开都会触发**它 #### 显示隐藏 显示隐藏动画，常见有三个方法：**show()** / **hide()** / **toggle()**; **1.显示语法规范** ```js show([speed, [easing],[fn]]); ``` **显示参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **2.隐藏语法规范** ```js hide([speed, [easing],[fn]]); ``` **隐藏参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **3.切换语法规范** ```js toggle([speed, [easing],[fn]]); ``` **切换参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **建议：平时一般不带参数，直接显示隐藏即可** #### 滑入滑出 滑入滑出动画，常见有三个方法：**slideDown()** / **slideUp()** / **slideToggle()**; **1.下滑语法规范** ```js slideDown([speed, [easing],[fn]]); ``` **下滑参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **2.上滑语法规范** ```js slideUp([speed, [easing],[fn]]); ``` **上滑参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **3.滑动语法规范** ```js slideToggle([speed, [easing],[fn]]); ``` **滑动参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 #### 淡入淡出 淡入淡出动画，常见有四个方法：**fadeIn()** / **fadeOut()** / **fadeToggle()** / **fadeTo()** ; **1.淡入语法规范** ```js fadeIn([speed, [easing],[fn]]); ``` **淡入参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **2.淡出语法规范** **淡出参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **3.淡入淡出语法规范** ```js fadeToggle([speed, [easing],[fn]]); ``` **淡入淡出参数** （1）参数都可以省略，无动画直接显示 （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 **4.渐进方式调整到指定的不透明度** ```js fadeTo([speed, opacity, [easing],[fn]]) ``` **效果参数** （1）opacity 透明度必须写，取值0~1之间 （2）speed：（必须写）三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 #### 自定义动画 **1.语法** ```js animate(params, [speed], [easing], [fn]) ``` **2.参数** （1）**params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数可省略** （2）speed：三种预定速度之一的字符串（"show","normal","fast"）或表示动画时长的毫秒数（1000） （3）easing：（Optional）用来指定切换效果，默认是"swing"，可用参数"linear" （4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次 ### jQuery属性操作 jQuery 常用属性操作有三种：**prop()** / **attr()** / **data()** ; **元素固有属性值prop()** 所谓元素固有属性就是元素本身自带的属性，比如 `` 元素里面的href ，比如 `` 元素里面的type 1.**获取属性语法** ```js prop("属性") ``` 2.**设置属性语法** ```js prop("属性", "属性值") ``` 注意：prop() 除了普通属性操作，更适合操作表单属性：**disabled** / **checked** / **selected** 等 **建议设置boolean类型的属性\[true/false]** **元素自定义属性值 attr()** 用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1” 1.**获取属性语法** ```js attr("属性") //类似原生getAttribute() ``` 2.**设置属性语法** ```js attr("属性", "属性值") //类似原生setAttribute() ``` 注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性） **数据缓存 data()** data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除 1.**附加数据语法** ```js data("name","value") //向被选元素附加数据 ``` 2.**获取数据语法** ```js attr("name") //向备选数据获取数据 ``` 注意：同时，还可以读取 HTML5 自定义属性 data-index（第一个不用带data-） ，得到的是**数字型** ### jQuery文本属性值 jQuery的文本属性值常见操作有三种：**html()** / **text()** / **val()** ; 分别对应JS中的 **innerHTML** 、**innerText** 和 **value** 属性 **jQuery内容属性值** 常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对**元素的内容**还有**表单**的**值操作** 1.**普通元素内容html()（相当于原生inner HTML）** ```js html() //获取元素的内容 html("内容") //设置元素的内容 ``` 2.**普通元素文本内容text()（相当于原生innerText）** ```js text() //获取元素的文本内容 text("文本内容") //设置元素的文本内容 ``` 3.**表单的值val()（相当于原生value）** ```js val() //获取表单的值 val("内容") //设置表单的值 ``` **注意**：html() 可**识别标签**，text() **不识别标签** **parents("element")返回指定的祖先级元素** **toFixed(数字)可保留几位小数** ### jQuery元素操作 jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作 **遍历元素** jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要**给同一类元素做不同操作**，就需要用到遍历 **语法1** ```js $("div").each(function(index, domEle) { xxx; }) ``` （1）each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个 （2）里面的回调函数有2个参数： **index**是每个元素的索引号； **demEle**是每个DOM元素对象，不是jQuery对象 （3）\*\*使用jQuery方法，需要给这个dom元素转换为jQuery对象 \*\*$(domEle) **注意**：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换 **语法2** ```js $.each(Object, function(index, element) { xxx; }) ``` （1）$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象 （2）里面的回调函数有2个参数： **index**是每个元素的索引号 **element**遍历内容 **注意**：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换 **创建、添加、删除** **1.创建** ```js $("
  • "); ``` 动态的创建了一个 `
  • ` 2.1内部添加 ```js element.append("内容") ``` 把内容放入匹配元素内部最后面，类似原生appendChild **子元素添加到父元素** `Element.appendTo("内容");` 把内容放入匹配元素内部最前面 **2.2外部添加** ```js element.after("内容") //把内容放入目标元素后面 element.before("内容") //把内容放入目标元素前面 ``` （1）内部添加元素，生成之后，它们是**父子**关系 （2）外部添加元素，生成之后，它们是**兄弟**关系 **3.删除元素** ```js element.remove() //删除匹配的元素（本身） element.empty() //删除匹配的元素集合中所有的子节点 element.html("") //清空匹配的元素内容 ``` （1）remove删除元素本身 （2）empty()和html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内容 ### jQuery 尺寸、位置操作 **jQuery 尺寸操作** | **语法** | **用法** | | ---------------------------------- | -------------------------------------------------------- | | width()/height() | 取得匹配元素宽度和高度值 只算**width/height** | | innerWidth()/innerHeight | 取得匹配元素宽度和高度值 包含**padding** | | outerWidth()/outerHeight() | 取得匹配元素宽度和高度值 包含**padding、border** | | outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值 包含**padding、border、margin** | * 以上参数为空，则是获取相应值，返回数字型 * 如果参数为数字，则是修改相应值 * 参数可以不必写单位 **jQuery 位置操作** jQuery的位置操作主要有三个： **offset()**、**position()**、**scrollTop()/scrollLeft()** 1.\*\*offset()\*\*设置或获取元素偏移 （1）offset()方法设置或返回被选元素相对于**文档**的偏移坐标，跟父级没有关系 （2）该方法有2个属性left、top。 offset().top用于获取距离文档顶部的距离 offset().left用于获取距离文档左侧的距离 （3）可以设置元素的偏移：offset({top:10,left:30}); 2.\*\*position()\*\*获取元素偏移 （1）position()方法用于返回被选元素相对于**带有定位的父级**的偏移坐标，如果父级都没有定位，则以文档为准 （2）该方法有2个属性left、top。 position().top用于获取距离定位父级顶部的距离 position().left用于获取距离定位父级左侧的距离 （2）该方法**只能获取** 3.\*\*scrollTop()/scrollLeft()\*\*设置或获取元素被卷去的头部和左侧 （1）scrollTop()方法设置或返回被选元素被卷去的头部 （2）不跟参数是获取，参数为不带单位的数字是设置被卷去的头部 ### 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下： * 优点: 操作简单，且不用担心事件覆盖等问题。 * 缺点: **普通的事件注册**不能做**事件委托**，且无法实现**事件解绑**，需要借助其他方法 语法 ```js element.事件(function() {}) $("div").click(function() { 事件处理程序 }) ``` 其他事件和原生基本一致 比如mouseover、mouseout、focus、change、keydown、keyup，resize、scroll ### jQuery事件处理 因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下： * **on()**: 用于**事件绑定**，目前最好用的事件绑定方法 * **off()**: **事件解绑** * **trigger()** / **triggerHandler()**: **事件触发** #### on()绑定事件 因为普通注册事件方法的不足，jQuery又创建了多个新的事件绑定方法**bind()** / **live()** / **delegate()** / \*\*on()\*\*等，其中最好用的是: on() **语法** ```js element.on(events, [Selector], fn) ``` * events：一个或多个用**空格分隔**的事件类型，如“click”“keydown” * selector：元素的**子元素选择器** **优点：** （1）**可以绑定多个事件，多个处理事件处理程序** ```js $("div").on({ mouseover: function() {}, mouseout: function() {}, click: function() {} }); ``` 如果事件处理程序相同 ```js $("div").on("mouseover mouseout", function() { $(this).toggleClass("current"); }) ``` （2）**可以事件委派操作**。 事件委派定义：把原来加给子元素身上的事件绑定在父元素身上，就是事件委派给父元素 ```js $("ul").on("click", "li", function() { alert("hello world"); }) ``` 在此之前有bind(),live(),delegate()等方法来处理事件绑定或事件委派 （3）动态创建的元素，click()没有办法绑定事件，**on()可以给动态生成的元素绑定事件** ```js $("div").on("click", "p", function() { alert("可以给动态生成的元素绑定事件"); }) $("div").append($("

    我是动态创建的p

    ")) ``` #### off()解绑事件 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。jQuery 为我们提供 了多种事件解绑方法：**die()** / **undelegate()** / **off()** 等，甚至还有只触发一次的事件绑定方法 **one()**，在这里我们重点讲解一下 off() ; **语法** off()方法可以移除通过one()方法添加的事件处理程序 解绑p元素**所有**事件处理程序 ```js $("p").off() ``` 解绑p元素上面的点击事件 后面off是**侦听函数名** ```js $("p").off("click") ``` 解绑**事件委托** ```js $("ul").off("click", "li") ``` 如果有的事件只想触发一次，可以使用one(）来绑定事件 #### trigger()自动触发事件 提供了两个自动触发事件 trigger() 和 triggerHandler() **第一种：trigger()** ```js element.click() //第一种简写形式 element.trigger("type") //第二种自动触发模式 ``` **第二种：triggerHandler()** ```js element.triggerHandler(type) //第三种自动触发模式 ``` **triggerHandler模式不会触发元素的默认行为** ### jQuery事件对象 jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生 **语法** ```js element.on(events, [selector], function(event) {}) ``` 阻止默认行为：event.preventDefault() 或者return fasle 阻止冒泡：event.stopPropagation() ### jQuery拷贝对象 **语法** ```js $.extend([deep], target, Object1, [ObjectN]) ``` （1）deep：如果设为true为深拷贝，默认为false浅拷贝 （2）target：要拷贝的目标对象 （3）object1：待拷贝到第一个对象的对象 （4）onjectN：待拷贝到第N个对象的对象 （5）浅拷贝目标对象引用的被拷贝的**对象地址**，修改目标对象**会影响**被拷贝对象 （6）深拷贝，前面加true，完全克隆，修改目标对象**不会影响**被拷贝对象 ### jQuery多库共存 实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存 **解决方案** （1）**把里面的$符号统一改为jQuery** （2）**jQuery变量规定新的名称：$.noConflict()** ### jQuery插件 jQuery 插件常用的网站： * jQuery 插件库 http://www.jq22.com/ * jQuery 之家 http://www.htmleaf.com/ jQuery 插件使用步骤： 1. 引入相关文件。（jQuery 文件 和 插件文件） 2. 复制相关html、css、js (调用插件) #### **瀑布流插件** http://www.htmleaf.com/jQuery/pubuliuchajian/201601093003.html 插件的使用三点： 1. 引入css 2.引入JS 3.引入html（有的简单插件只需引入html和js，甚至有的只需引入js） #### 图片懒加载插件 [https://www.jq22.com/search?seo=%e6%87%92%e5%8a%a0%e8%bd%bd\&PageNo=1](https://www.jq22.com/search?seo=懒加载\&PageNo=1) 图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验 懒加载只需引入**html** 和 **js**操作 即可，此插件不涉及css #### **全屏滚动插件** 全屏滚动插件比较大，所以，一般大型插件都会有帮助文档，或者网站 GitHub：https://github.com/alvarotrigo/fullPage.js 全屏滚动插件介绍比较详细的网站为： http://www.dowebok.com/demo/2014/77/ #### **bootstrap组件** Bootstrap是 Twitter 公司设计的基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，他依靠jQuery实现，且支持响应式 布局，使得 Web 开发更加方便快捷 **凡是在软件开发中用到了软件的复用，被复用的部分都可以称为组件** **凡是在应用程序中已经预留接口的组件就是插件** Bootstrap组件使用非常方便: 1.引入bootstrap相关css和js 2.去官网复制html #### **bootstrap插件（JS）** bootstrap中的js插件其实也是组件的一部分，只不过是需要js调用功能的组件，所以一般bootstrap的js插件一般会伴随着js代码（有的也可以省略js，用属性实现） 步骤： 1.引入bootstrap相关css和js 2.去官网复制html 3.复制js代码，启动js插件。