jQuery
jQuery
1.JavaScript库作用及对比
- 为了简化JavaScript的开发，一些JavaScript库诞生了。JavaScript库封装了很多预定义的对象和使用函数。能帮助使用者建立高难度交互的Web2.0特性的富客户端页面，并且兼容各大浏览器。
- 目前流行的JavaScript库有：jQuery
2.jQuery简介
- jQuery是继Prototype之后又一个优秀的JavaScript库
- jquery理念：写得少，做得多。优势如下：
- 轻量级
- 强大的选择器
- 出色的DOM操作的封装
- 可靠的事件处理机制
- 完善的Ajax
- 出色的浏览器兼容性
- 链式操作方式
- ...
$(this).attr("checked")返回当前元素的checked属性值
$(this).attr("checked", true)返回的则是当前对象
1 <!-- 导入jQuery 库 --> 2 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 3 <script type="text/javascript"> 4 5 //$(function(){}) 相当于window.onload，代码编写在{}之间 6 $(function(){ 7 //1.选取button:$("button") 8 //2.为button添加onclick响应函数:button:$("button").click(function(){}); 9 //代码编写在function 的{}中 10 $("button").click(function(){ 11 //3.弹出helloworld 12 alert("helloworld"); 13 }); 14 }) 15 16 </script>
3.jQuery对象
- jQuery对象就是通过jQuery（$()）包装DOM对象后产生的对象。
- jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法：$("#persontab").html();
- jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的任何方法。
- 约定：如果获取的是jQuery对象，那么要在变量前面加上$.
- var $variable=jQuery对象
- var variable=DOM对象
4.jQuery对象转成DOM对象
-
jQuery对象不能使用DOM中的方法，但如果jQuery没有封装想要的方法，不得不使用DOM对象的时候，有如下两种处理方法：
- jquery对象是一个数组对象，可以通过[index]的方法得到对用的DOM对象：
var $cr=${"#cr"};
var cr=$cr[0];
2.使用jQuery中的get(index)方法得到相应的DOM对象
var $cr=${"#cr"};
var cr=$cr.get(0);
5.DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来（jQuery对象是通过jQuery包装DOM对象后产生的对象），就可以获得一个jQuery对象
var cr=document.getElementById("cr");
var $cr=$(cr);
转换后就可以使用jQuery中的方法了。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <!-- 导入jQuery 库 --> 7 <script type="text/javascript" src="jquery-3.1.1.min.js"></script> 8 <script type="text/javascript"> 9 10 //$(function(){}) 相当于window.onload，代码加载{}之间 11 $(function(){ 12 //1.选取button:$("button") 13 //2.为button添加onclick响应函数:button:$("button").click(function(){}); 14 //代码编写在function 的{}中 15 $("button").click(function(){ 16 //3.弹出helloworld 17 alert("helloworld"); 18 19 //jQuery和DOM对象 20 //1. 由jQuery对象转为DOM对象 21 //1).获取一个jQuery对象 22 var $btn=$("button"); 23 24 //2).jQuery 对象是一个数组。 25 alert($btn.length); 26 27 //3).可以通过数组下标转为DOM对象 28 alert($btn[0].firstChild.nodeValue); 29 30 //2. 由DOM对象转为jQuery对象 31 //1).选取一个DOM对象 32 var btn=document.getElementById("btn"); 33 34 //2).把DOM对象转为一个jQuery对象：使用$()进行包装 35 alert("--"+$(btn).text()); 36 }); 37 }) 38 39 </script> 40 </head> 41 <body> 42 43 <button id="btn">ClickMe</button> 44 <br><br> 45 <button>ClickMe2</button> 46 47 </body> 48 </html>
6.jQuery选择器
- 选择器是jQuery的根基，在jQuery中，对事件的处理，遍历DOM和Ajax操作痘印爱与选择器。
- jQuery选择器的有点：
- 简洁的写法
$("#id") //document.getElementById("id");
$("tagname") //document.getElementsByTagName("tagName");
2.完善的事件处理机制
//若在网页中，没有id为“id”的元素，浏览器会报错
//document.getElementById("id").style.color="red";
//需要先判断document.getElementById("id")是否存在
if(document.getElementById("id")){
document.getElementById("id").style.color="red";
}
//使用jQuery获取网页中的元素即便不存在也不会报错
$("#id").css("color","red");
6.1 基本选择器
- 基本选择器是jQuery中最常用的选择器，也是最简单的选择器，它通过元素id，class和标签名来查找DOM元素(在网页中id只能使用一次，class允许重复使用)。
| 选择器 | 描述 | 返回 |
| #id | 根据给定的id匹配一个元素 | 单个元素组成的集合 |
| .class | 根据给定的类名匹配元素 | 集合元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 |
| * | 匹配所有元素 | 集合元素 |
| selector1,selector2,...,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 |
6.2 层次选择器
- 如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器
| 选择器 | 描述 | 返回 |
| $("ancestor descendant") | 选取ancestor的所有descendant（后代）元素 | 集合元素 |
| $("parent>child") | 选取parent元素下的child(子)元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素 | 集合元素 |
| $("prev+next") | 选取紧接在prev元素后的下一个next元素 | 集合元素 |
| $("prev~siblings") | 选取prev元素后的所有siblings元素 | 集合元素 |
- 注意:("prev~div")选择器只能选择"#prev"元素后面的同辈元素；而jQuery中的方法siblings()与前后位置无关，只要是同辈节点就可以选取。
6.3 过滤选择器
- 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，选择器都以“：”开头
- 按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器。
| 选择器 | 描述 | 返回 |
| :first | 选取第一个元素 | 单个元素组成的集合 |
| :last | 选取最后一个元素 | 集合元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 |
| :even | 选取索引时偶数的所有元素，索引从0开始 | 集合元素 |
| :odd | 选取索引时奇数的所有元素，索引从0开始 | 集合元素 |
| :eq(index) | 选取索引等于index的元素，索引从0开始 | 集合元素 |
| :gt(index) | 选取索引大于index的元素，索引从0开始 | 集合元素 |
| :lt(index) | 选取索引小于index的元素，索引从0开始 | 集合元素 |
| :header | 选取所有的标题元素，如：h1，h2等 | 集合元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 |
6.4 内容过滤选择器
- 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
| 选择器 | 描述 | 返回 |
| :containt(text) | 选取含有文本内容为text的元素 | 集合元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 |
6.5 可见性过滤选择器
- 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
| 选择器 | 描述 | 返回 |
| :hidden | 选取所有不可见的元素 | 集合元素 |
| :visible | 选取所有可见的元素 | 集合元素 |
- 可见选择器:hiddern 不仅包含样式属性display为none的元素，也包含文本隐藏域(<input type="hidden">)和visible:hidden 之类的元素
6.6 属性过滤选择器
- 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
| 选择器 | 描述 | 返回 |
| [attribute] | 选取拥有此属性的元素 | 集合元素 |
| [attribute=value] | 选取指定属性的值为value的元素 | 集合元素 |
| [attribute!=value] | 选取指定属性的值不等于value的元素 | 集合元素 |
| [attribute^=value] | 选取指定属性的值以value开始的元素 | 集合元素 |
| [attribute$=value] | 选取指定属性的值以value结束的元素 | 集合元素 |
| [attribute*=value] | 选取指定属性的值含有value的元素 | 集合元素 |
| [selector1][selector2]...[selectorN] | 用属性选择器合并成一个复合属性选择器，满足多个条件，每选择一次，缩小一次范围 | 集合元素 |
6.7 子元素过滤选择器
| 选择器 | 描述 | 返回 |
| :nth-child(index/even/odd/equation) | 读取每个父元素的第index个子元素或者奇偶元素（index从1算起） | 集合元素 |
| :first-child | 选取每个父元素的第一个元素 | 集合元素 |
| :last-child | 选取每个父元素的最后一个元素 | 集合元素 |
| :only-child | 如果某个元素是它父元素中唯一的子元素，那么将被匹配 | 集合元素 |
- nth-child()选择器详解如下：
- :nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素
- :nth-child(2):能选取每个父元素下的索引值为2的元素
- :nth-child(3n):能选取每个父元素下的索引值是3的倍数的元素
- :nth-child(3n+1):能选取每个父元素下的索引值是3n+1的元素
6.8 表单对象属性过滤器
- 此选择器主要对所选择的表单元素进行过滤
| 选择器 | 描述 | 返回 |
| :enabled | 选取所有可用元素 | 集合元素 |
| :disabled | 选取所有不可用元素 | 集合元素 |
| :checked | 选取所有被选中的元素(单选框，复选框) | 集合元素 |
| :selected | 选取所有被选中选项元素(下拉列表) | 集合元素 |
- 表单选择器
| 选择器 | 描述 | 返回 |
| :input | 选取所有的<input>,<textarea>,<select>和<button>元素 | 集合元素 |
| :text | 选取所有的单行文本框 | 集合元素 |
| :password | 选取所有的密码框元素 | 集合元素 |
| :radio | 选取所有的单选框 | 集合元素 |
| :checkbox | 选取所有的多选框 | 集合元素 |
| :submit | 选取所有的提交按钮 | 集合元素 |
| :image | 选取所有的图像按钮 | 集合元素 |
| :reset | 选取所有的重置按钮 | 集合元素 |
| :button | 选取所有的按钮 | 集合元素 |
| :file | 选取所有的上传域 | 集合元素 |
| :hidden | 选取所有的不可见元素 | 集合元素 |
小结：
1.jQuery是JavaScript的一个函数库，非常方便，非常主流。
2.利用jQuery开发的步骤：
- 导入jQuery库
- 在$(function(){})红编写jQuery代码
3.jQuery对象 VS DOM对象
- jQuery对象不能使用DOM对象的属性和方法，反之DOM对象也不能使用jQuery对象的属性和方法。
- jQuery对象是一个DOM数组对象，所以可是使用下标的方式转为DOM对象
var $btn=$("button");
var btn=$btn[0];
- jQuery对象是使用$()保证对象后产生的对象
4.jQuery的选择器：
- 选取被选中的select的option需要使用子节点的方式：
a.$("select[name='test'] :selected").each(function(){});
b.jQuery选择器可以综合使用
c.如果选择器搞不定，可以借助方法
5.jQuery对象的几个方法：
- val():获取或设置表单元素的value属性值
//设置值
$(":text:enabled").val("YoungYang");
//获取值
alert($(":text:enabled").val());
- attr():和val方法类似
attr(name,val):为name属性值赋值为val
attr(name):获取name属性值
- each():对jQuery对象进行遍历，其参数为function，函数内部的this是正在遍历的DOM对象
$("select :selected").each(function(){
alert(this.value);
});
- text():和value方法类似
text():获取元素节点的文本子节点的值
text(str):设置元素节点的文本子节点的值
6.9 jQuery中的DOM操作
- DOM（Document Object Model---文档对象模型）：一种与浏览器，平台，语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。
- DOM操作的分类：
- DOM Core:DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理网页，也可以用来处理任何一种是用标记语言编写出来的文档，例如：XML
- HTML DOM：使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。
- CSS-DOM：针对于CSS操作，在JavaScript中，CSS-DOM主要用于获取和设置style对象的各种属性。
6.9.1 查找节点
- 查找属性节点：通过jQuery选择器完成。
- 操作属性节点：查找到所需要的元素之后，可以调用jQuery对象的attr()方法来获取它的各种属性值。
- 操作文本节点：通过text()方法
6.9.2 创建节点
-
创建节点：使用jQuery的工厂函数$():$(html);会根据传入的html标记字符串创建一个DOM对象，并把这个DOM对象包装成jQuery对象返回。
- 注意：
- 动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入到文档中；
- 当创建单个元素时，需注意闭合变迁和使用标准的XHTML格式。例如创建一个<p>元素，可以使用$("</p>")或者$("<p></p>"),但不能使用$("<p>")或$("<P>")。
- 创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建。
6.9.3 插入节点
- 动态创建HTML元素并没有实际用处，还需要将新创建的节点插入到文档中，即成为文档中某个节点的子节点
| 方法 | 描述 |
| append() | 向每个匹配的元素的内部的结尾处追加内容 |
| appendTo() | 将每个匹配的元素追加到指定的元素中的内部的结尾处 |
| prepend() | 向每个匹配元素的内部的开始处插入内容 |
| prependTo() | 将每个匹配的元素插入到指定的元素内部的开始处 |
- 以下方法不但能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动
| 方法 | 描述 |
| after() | 向每个匹配的元素的之后插入内容 |
| insertAfter() | 向每个匹配的元素的插入到指定的元素之后 |
| before() | 向每个匹配的元素的之前插入内容 |
| insertBefore() | 向每个匹配的元素的插入到指定的元素之前 |
6.9.4 删除节点
- remove():从DOM 中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素，当某个节点用remove()方法删除后，该节点所包含的所有后代节点被同时删除，这个方法的返回值是一个指向已被删除的节点的引用。
- empty():清空节点-清空元素中的所有后代节点(不包含属性节点)。
6.9.5 复制节点
- clone():克隆匹配的DOM元素，返回值为克隆后的副本，但此时复制的新节点不具有任何行为。
- clone(true):复制元素的同时也复制元素中的事件
6.9.6 替换节点
- replaceWith():将所有匹配的元素都替换为指定的HTML或DOM元素
- replaceAll():颠倒了的replaceWith()方法
- 注意：若在替换之前，已经在元素上绑定了事件，替换后原先绑定的事件会与原先的元素一起消失
6.9.7 包裹节点
-
wrap():将指定节点用其他标记包裹起来，该方法对于需要在文档中插入额外的结构化标记非常有用，而且不会破坏原始文档的语义。
-
wrapAll():将所有匹配的元素用一个元素来包裹，而wrap()方法是将所有的元素进行单独包裹。
-
wrapplanner():将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。
6.9.8 属性操作
- attr():获取属性和设置属性
- 当为该方法传递一个参数时，即为某元素的获取指定属性。
- 当为该方法传递两个参数时，即为某元素设置指定属性的值。
- jQuery中有很多方法都是一个函数实现获取和设置。如：attr(),html(),text(),val(),height(),width(),css()等。
- removeAttr():删除指定元素的指定属性
6.9.9 设置和获取HTML、文本和值
- 读取和设置某个元素中的HTML内容：html()。该方法可以用于XHTML，但不能用于XML文档。
- 读取和设置某个元素中的文本内容:text()。该方法既可以用于XHTML也可以用于XML文档。
- 读取和设置某个元素中的值:val()---该方法类似JavaScript中的value属性，对于文本框，下拉列表框，单选框该方法可反问元素的值(多选框只能返回第一个值)。如果为多选下拉列表框，则返回一个包含所有选择值的数组。
小结：使用jQuery进行DOM操作
-
新建(元素、属性、文本)节点：直接使用$()保证即可，返回值是一个jQuery对象。
var $atguigu=$("<li id="atguigu">尚硅谷</li>"); -
把节点插入到文档中： a. append,appendTo:把节点A插入为节点B的最后一个子节点。
$("<li id='atguigu'>尚硅谷</li>").appendTo($("#city")); $("#city").append("<li id='atguigu'>尚硅谷</li>");b. prepend,prependTo
$("<li id='atguigu'>尚硅谷</li>").prependTo($("#city")); $("#city").prepend("<li id='atguigu'>尚硅谷</li>");c. before,insertBefore
$("<li id='atguigu'>尚硅谷</li>").insertBefore($("#bj")); $("#bj").before("<li id='atguigu'>[尚硅谷]</li>");d. after,insertAfter
$("<li id='atguigu'>尚硅谷</li>").insertAfter($("#bj")); $("#bj").after("<li id='atguigu'>[尚硅谷]</li>"); - 删除节点：$("#bj").remove();
- 清空节点：$("#game").empty();
- 克隆节点：$("#bj").clone();
- 替换节点：
//创建一个<li>尚硅谷</li>节点，替换#city 的最后一个li 子节点
$("<li>尚硅谷</li>").replaceAll($("#city li:last"));
//创建一个<li>[尚硅谷]</li>节点，替换#city 的第二个li 子节点 $("#city li:eq(1)").replaceWith($("<li>[尚硅谷]</li>")); - wrap、wrapAll、wrapInner了解
- val()、html()、attr()、width()、height()等兼具有读写的方法：
//读取某个节点的html内容 alert($("#city").html()); //设置某个节点的html内容 $("#city").html("<li id='atguigu'>尚硅谷</li>");
- 技术点之外：
1.jQuery对象可以进行隐式迭代：$("p").click(function(){...}); 为选取的所有的P节点都添加了click 响应函数。jQuery对象本身就是一个DOM 对象的数组。 2.在jQuery中显示迭代：使用each()方法： $(":checkbox[name='c']:checked").each(function(){ alert(this.value); }); 可以在显示迭代的响应函数的参数中通过index属性获取到正在遍历的对象的索引。 3.在响应函数中，this是一个DOM对象。若想使用jQuery对象的方法需要把其包装为jQuery 对象：使用$()把this 包起来。（$(this)） 4.text()方法是一个读写的方法：不加任何参数，读取文本值；加参数为属性节点添加文本值(文本节点) （和text() 类似的方法:attr(),val()）。 5.defaultValue属性，该属性是DOM 对象的属性，可以获取表单元素的默认值 6.通过val()为radio赋值：即便是为一组radio赋值，val参数中也应该使用数组，使用一个值不起作用。 7.val() 不能直接获取checkbox 被选择的值，若直接获取，只能得到第一个被选择的值，因为$(":checkbox[name='c']:checked") 得到的是一个数组，而使用val() 方法只能获取数组元素的第一个值，若希望打印被选中的所有值，需要使用each遍历。而radio被选择的只有一个，所以可以直接使用val()方法获取被选择的值。 $(":checkbox[name='c']:checked").each(function(){ alert(this.value); }); 8. 同JS 的响应函数一样，jQuery 对象的响应函数若返回false，可以取消指定元素的默认行为，比如submit，a标签等 9. val() 方法，相当于 attr("value"),获取表单元素的value属性值，$.trim(str):可以去除str 的前后空格 10. jQuery 对象的方法的连缀：调用一个方法的返回值还是调用的对象，于是可以在调用方法的后面依然调用先前的那个对象的其他方法 $("<tr><tr>").append("<td>"+$("#name").val()+"</td>") .append("<td>"+$("#email").val()+"</td>") .append("<td>"+$("#value").val()+"</td>") .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>") .appendTo("#employeetable tbody") .find("a") .click(function(){ return removeTr(this) }); 11.find()方法：查找子节点,返回值为子节点对应的jQuery 对象 var $trNode=$(aNoe).parent().parent(); //获取$tr的第一个td节点的文本节点的文本值 var textContent=$trNode.find("td:first").text();
7.0 样式操作
- 获取class和设置class:class是元素的一个属性，所以获取class和设置class都可以使用attr()方法来完成。
- 追加样式：addClass()
- 移除样式:removeClass()---从匹配的元素中删除全部或指定的class
- 切换样式：toggleClass()---控制样式上的重复切换，如果类名存在则删除她，如果类名不存在则添加它。
- 判断是否含有某个样式:hasClass()---判断元素中是否含有某个class，如果有，则返回true；否则返回false。
8.0 CSS-DOM操作
- 获取和设置元素的样式属性:css()
- 获取和设置元素透明度:opacity属性
- 获取和设置元素高度，宽度:height(),width().在设置值时，若值传递数字，则默认单位为px。如需要使用其它单位则需传递一个字符串，例如：$("p:first").height("2em");
- 获取元素在当前视窗中的相对位移:offset().其返回对象包含了两个属性：top，left。该方法只对可见元素有效。
