jQuery（不完整，待后续整理补充）

最新推荐文章于 2022-05-31 11:12:40 发布

QZ_飘雪无痕

最新推荐文章于 2022-05-31 11:12:40 发布

阅读量791

点赞数 1

文章标签： jQuery

本文链接：https://blog.csdn.net/D_dragon_bamboo/article/details/51921605

版权

1.jQuery

1.1 认识jQuery

1.JavaScript和JavaScript库

1）JavaScript的出现使得网页和用户之间实现了实时的、动态的和交互的关系，使网页包含更多活跃的元素和更多精彩的内容。

2）3个弊端：复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。

3）JavaScript库作用及对比

库封装了很多预定义的对象和实用函数

Prototype

Dojo 离线存储的API、生成图标的组件、基于SVG/VML的矢量图形库和Comet支持等等。学习曲线陡、文档不齐全、API不稳定。

YUI（The Yahoo!User Interface Library）

Ext JS 侧重于界面

MooTools 是一套轻量、简洁、模块化和面性对象的JavaScript框架。完全彻底的面向对象的编程，语法简洁直观，文档完善。

jQuery 是一个轻量级的库，拥有强大的选择器，出色的DOM操作，可靠地事件处理，完善的兼容性和链式操作等。

1.2加入jQuery

1）简介

团队主要包括：核心库、UI、插件等开发人员以及推广和设计维护人员。

2）优势：（1）轻量级大小不到30K，Min版只有18K（2）强大的选择器（3）出色的DOM操作的封装（4）可靠的事件处理机制（5）完善的Ajax jQuery将所有的Ajax操作封装到$.ajax()里（6）不污染顶级变量 jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象（7）出色的浏览器兼容性（8）链式操作方式即对发生在一个jQuery对象上的一组动作，可以直接连接写而无需重复获取对象（9）隐式迭代（10）行为层和结构层的分离（11）丰富的插件支持（12）完善的文档（13）开源

1.3.jQuery代码的编写

1）配置jQuery环境

（1）获取jQuery 官方网站http://jquery.com/

（2）环境配置只需放到公共的位置，使用时只需在相关的HTML文档中引入该库文件的位置即可。

（3）在页面中引入jQuery 在编写的页面代码中<head>标签内引入jQuery库

<html>

<head>

</head>

<body>

</body>

</html>

（4）编写简单的jQuery代码

$(document).ready(function(){alert(“Hello Word!”);});

</script>

4)$(“.has_children”).click(function(){

$(this).addClass(“highlight”) //为当前元素增加highlight类

.children(“a”).show() //将子节点的<a>元素显示出来并重新

.end() //定位到上次操作的元素

.siblings() //获取元素的兄弟元素

.removeClass(“highlight”) //并去掉他们的highlight类

.children(“a”).hide(); //将兄弟元素下的<a>元素隐藏

});

当鼠标单击到class中含有has_children元素的同辈元素都去调一个名为highlight的class，然后将其内部的<a>紫云苏都显示出来，并且被单击的class中含有has_children元素的同辈元素都去掉一个名为highlight的class，同时同辈元素内部的<a>子元素全部隐藏。

window.onload与$(document).ready()的对比

5）注释

//在一个id为table的tbody中，如果最后一列中的checkbox没有被禁用，则把

//这行的背景设为红色

$(“#table>tbody>tr:has(td:last:has(:checkbox:enable))”).css(“background”,”red”);

1.4.jQuery对象和DOM对象

1）DOM（Document Object Model，文档对象模型），每一份DOM都可以表示成一棵树。

Var domObj = document.getElementById(“id”);//获取DOM对象

Var objHTML = domObj.innerHTML; //使用JavaScript中的方法-innerHTML

2)jQuery对象就是通过jQuery包装DOM对象后产生的对象。

$(“#foo”).html();//获取id为foo的元素内的HTML代码.html（）是jQuery里的方法

等同于 document.getElementById(“foo”).innerHTML;

注意用#id作为选择符取得的是jQuery对象儿并非document.getElementById(“id”)所得到的DOM对象，两者并不等价。

1.5.jQuery对象和DOM对象的相互转换

Var $variable = jQuery对象; 如果获取的对象是jQuery对象，那么在变量前加上$

Var variable = DOM对象；

1）jQuery对象转成DOM对象

jQuery对象是一个数组织对象，可以通过[index]的方法得到相应的DOM对象

var $cr = $(“#cr”); //jQuery对象

Var cr = $cr[0]; //DOM对象

Var cr = $cr.get(0); //jQuery本身提供的get(index)方法

2）DOM对象转换成jQuery对象

Var cr = document.getElementById(“cr”);//DOM对象

Var $cr = $(cr); //jQuery对象

<input type=”checkbox” id=”cr”/><label for=”cr”>我已经阅读了上面制度</label>

$(document).ready(function(){ //等待DOM元素加载完毕

Var $cr = $(“#cr”); //jQuery对象

Var cr = $cr[0]; //DOM对象，或者$cr.get(0)

$cr.click(function(){

If(cr.checked){ //DOM方式判断

Alert(“感谢您的支持，你可以继续操作!”);

}

})

$(document).ready(function(){ //等待DOM元素加载完毕

Var $cr = $(“#cr”); //jQuery对象

$cr.click(function(){

If($cr.is(“:checked”)){ //DOM方式判断

Alert(“感谢您的支持，你可以继续操作!”);

}

})

1.6.Dreamweaver

安装自动提示功能：命令-->扩展管理-->安装扩展-->jQuery_API.mxp

重启新建空白页面引入jQuery。

1.7.Aptana 一个功能非常强大的、开源和专注JavaScript的Ajax开发IDE

特性：

提供JavaScript、JavaScript函数、HTML和CSS语言的Code Assist功能

显示JavaScript、HTML和CSS的代码结构

支持JavaScript、HTML和CSS代码提示，包括JavaScript自定义函数

代码语法错误提示

支持Aptana UI =自定义和扩展

支持跨平台

支持FTP/SFTP

调试JavaScript

支持流行Ajax框架的Code Assist功能，包括AFLAX、Dojo、jQuery、MochiKit、Prototype、Rico、script.aculo.us、Yahoo UI和Ext

通过插件扩展后则可以作为Adobe AIR iPhone和Nakia等的开发工具

提供了Eclipse插件。

2.jQuery选择器

2.1 jQuery选择器是什么

1.CSS选择器常用的CSS选择器

标签选择器 E{CSS规则} 以文档元素作为选择符 td{font-size:14px;}

ID选择器 #ID{CSS规则} 以文档元素的唯一标识符ID作为选择符 #note{width:1px;}

类选择器 E.className{CSS规则} 以文档的class作为选择符 div.note{font-size:1px;}

.dream{font-size:1px;}

群组选择器E1,E2,E3{CSS规则}多个选择符应用同样的样式规则 td,p,div,a{font-size:1px;}

后代选择器 E F{CSS规则} 元素E的任意后代元素F #links a{color:red;}

通配选择符 *{CSS规则} 以文档的所有元素作为选择符 *{font-size:1px;}

伪类选择器（E:Pseudo-Elements{CssRules}）、子选择器(E > F{CssRules})、

临近选择器(E+F{CssRules})、属性选择器(E[attr] {CssRules})

<style>

.demo{

Color : red;

Font-size : 30px;

}

</style>

Function demo(){ <script type=”text/javascript”>

Alert(‘JavaScript demo.’); $(“.demo”).click(function(){

} alert(“jQuery Demo”);

})

</script> </script>

2.2jQuery选择器的优势

1.简洁的写法 $()函数

$(“#ID”)用来代替document.getElementById()函数，即通过ID获取元素

$(“tagName”)用来代替document.getElementsByTagName()函数

2.完善的处理机制

If(document.getElementById(“tt”)){ $(‘#tt’).css(“color”,”red ”);

Document.getElementById(“tt”).style.color=”red”; </script>

}

</script>

注意：$(‘#tt’)获取的永远是对象，即使页面上没有此元素。因此当要用jQuery检查某个元素在网页上是否存在时，应该根据获取到元素的长度判断，代码如下：

If($(‘#tt’).length>0){do something}或者转化成DOM对象来判断if($(‘#tt’)[0]){do something}

2.3jQuery选择器

例1：给网页中的所有<p>元素添加onclick事件

JavaScript代码如下：

Var items = document.getElementsByTagName(“p”); //获取网页中所有的p元素

For(var I = 0;i<items.length;i++){ //由于获取到的是数组对象，因此需要把它循环出来

Items[i].onclick = function(){do something} //给每个对象添加onclick事件

}

jQuery：

$("p").click(function(){do something})

例2：使一个特定的表格隔行变色

HTML代码如下：

<tbody>

</tbody>

</table>

javaScript代码如下：

var item = document.getElementById(“td”);//获取id为tb的元素（table）

var tbody = item.getElementsByTagName(“tbody”)[0];//获取表格的第1个tbody元素

var trs = tbody.getElementsByTagName(“tr”);//获取tbody元素下的所有tr元素

for(var I = 0;i<trs.length;i++){

if(i%2==0){

trs[i].style.backgroundColor = “#888”;

}

}

jQuery:

$('#td tbody tr:even').css("backgroundColor","#888")

例3：对多选框进行操作，输出选中的多选框的个数

HTML代码如下：

JavaScript代码如下：

Var btn = ddocument.getElementById(“btn”);//获取id为btn的元素（button）

Btn.onclick = function(){

Var arrays = new Array();

Var items = document.getElementsByName(“check”);

For(I = 0;i<items.length;i++){

If(items[i].checked){

Arrays.push(items[i].value);//push（）是JavaScript数组中的方法

}

Alert(“选中的个数为：”+arrays.length);

}

jQuery:

$('#btn').click(function(){

var length = $("input[name='check']:checked").length;

alert("选中的个数："+length);

})

jQuery选择器分为基本选择器、层次选择器、过滤选择器和表单选择器

2.3.1基本选择器通过元素id、class和标签名等来查找DOM元素

#id 根据给定的id匹配一个元素单个元素 $(“#test”)选取id为test的元素

.class 根据给定的类名匹配元素集合元素 $(“.test”)选取所有class为test的元素

Element 根据给定的元素名匹配元素集合元素 $(“p”)选取所有的<p>元素

* 匹配所有元素集合元素 $(“*”)选取所有的元素

Selector1, Selector2, …,将每一个选择器匹配到的元素合并后一起返回集合元素$(“div,span,p.myClass”)选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素

改变id为one的元素的背景颜色 $(‘#one’).css(“background”,”#bbffaa”);

改变class为mini的所有元素的背景颜色 $(‘.mini’).css(“background”,”#bbffaa”);

改变元素名是<div>的所有元素的背景颜色$(‘div’).css(“background”,”#bbffaa”);

改变所有元素的背景色$(‘*’).css(“background”,”#bbffaa”);

改变<span>和id为two的元素的背景色$(‘span,#two’).css(“bacckground”,”#bbffaa”);

2.3.2层次选择器获取后代元素、子元素、相邻元素和兄弟元素等

$(“ancestor descendant”) 选取ancestor元素里的所有descendant（后代）元素集合元素 $(“div span”)选取div里的所有的<span>元素

$(“parent > child”) 选取parent元素下的child（子）元素，与$(“ancestor descendant”)有区别，$(“ancestor descendant”)选择的是后代元素集合元素 $(‘div > span’)选取<div>元素下元素名是<span>的子元素

$(‘prev + next’)选取紧接在prev元素后的next元素集合元素 $(‘.one + div’)选取class为one的下一个<div>元素

$(‘prev ~ siblings’)选取prev元素之后的所有siblings元素集合元素 $(‘#two~div’)选取id为two的元素后面的所有<div>兄弟元素

改变<body>内所有<div>的背景色$(‘body div’).css(“background”,”#bbffaa”);

$(‘prev + next’)选择器等价于next()方法

$(“.one + div”) ==== $(“.one”).next(“div”);

$(‘prev~siblings’)选择器与nextAll()方法的等价关系

$(“#prev~div”) ==== $(“#prev”).nextAll(“div”)

$(“#prev~div”)选择器只能选择”#prev”元素后面的同辈<div>元素。而siblings()方法与前后位置无关，只要是同辈节点就能匹配。

2.3.3过滤选择器基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象过滤

1.基本过滤选择器

:first 选取第一个元素单个元素 $(“div:first”)选取所有<div>元素中第一个<div>元素

:last 选取最后一个元素

:not(selector)去除所有与给定选择器匹配的元素集合元素 $(“input:not(.myClass)”)选取class不是myClass的<input>元素

:even 选取索引是偶数的所有元素，索引从0开始集合元素

:odd 选取索引是奇数的所有元素

:eq(index) 选取索引等于index的元素(index从0开始) 单个元素 $(“input:eq(1)”)

:gt(index) 选取索引大于index的元素集合元素 $(“input:gt(1)”) 注：大于1不包括1

:lt(index) 选取索引小于index的元素

:header 选取所有的标题元素，例如h1，h2等集合元素

:animated 选取当前正在执行动画的所有元素集合元素 $(“div:animated”)选取正在执行动画的<div>元素

2.内容过滤选择器

:contains(text)选取含有文本内容为“text”的元素集合元素 $(“div:contains(‘我’)”)

:empty  选取不包含子元素或者文本的空元素  集合元素 $(“div:empty”)

:has(selector) 选取含有选择器所匹配的元素的元素集合元素 $(“div:has(p)”)选取含有<p>元素的<div>元素

:parent 选取含有子云阿苏或者文本的元素集合元素 $(“div:parent”)选取拥有子元素（包含文本元素）的<div>元素

3.可见性过滤选择器

:hidden 选取所有不可见的元素  集合元素 $(“:hidden”)

:visible 选取所有可见的元素  集合元素 $(“div:visible”)

4.属性过滤选择器

[attribute] 选取拥有此属性的元素集合元素 $(“div[id]”)选取拥有属性id的元素

[attribute=value]选取属性的值为value的元素 $(“div[title!=test]”)选取属性title不等于“test”的<div>元素(注：没有属性title的<div>元素也会被选取)

[attribute^=value]选取属性的值以value开始的值集合元素 $(“div[title^=test]”)选取属性title以“test”开始的<div>元素

[attribute*=value]选取属性的值以value结束的元素 $(“div[title*=test]”)

[selector1] [selector2] [selectorN]用属性选择起合并成一个复合属性选择器，满足多个条件。每选择一次，缩小一次范围$(“div[id][title*=’test’]”)选取拥有属性id，并且属性title以test结束的<div>元素

5.子元素过滤选择器

:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素.(index从1开始) 集合元素 :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index的index是从1开始的，而:eq(index)是从0算起的

:first-child 选取每个父元素的第一个子元素集合元素 :first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素 $(“ul li:first-child”);选取每个<ul>中第一个<li>元素

:last-child 选取每个父元素的最后一个元素

:only-child 如果某一个元素师它父元素中中唯一的子元素，那么将会配匹配。如果父元素中含有其他元素，则不会被匹配集合元素

$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素

示例：$('div.one:nth-child(2)').css("background","#bbffaa");

注意：eq(index)只匹配一个元素，而:nth-child将为每一个符合条件的父元素匹配子元素，同时应该注意到nth-child(index)的index是从1开始的，而eq(index)是从0开始的，

同理：first和：first-child，：last和last-child也类似。

6.表单对象属性选择器

:enabled 选取所有可用的元素集合元素 $("#form1:enabled");选取id为form1的表单内的所有可用元素

:disabled 选取所有不可用元素集合元素 $("#form2:disabled")；选取id为form2的表单内的所有不可用的元素

:checked 选取所有被选中的元素（单选框，复选框）集合元素 $("input:checked");选取所有被选中的<input>元素

:selected 选取所有被选中的选项元素（下拉列表）集合元素 $("select:selected");选取所有被选中的选项元素

2.3.4表单选择器

:input 选取所有的<input>、<textarea>、<select>、<button>元素集合元素 $(":input")选取所有的<input>、<textarea>、<select>、<button>元素

:text 选取所有的单行文本框集合元素 $(":text")选取所有的单行文本框

:passwoord 选取所有的密码框集合元素 $(":password");

:radio 选取所有的单选框

:checkbox 选取所有的复选框

:submit 选取所有的提交按钮

:image 选取所有的图像按钮

:reset 选取所有的重置按钮

:button 选取所有的按钮

:file 选取所有的上传域

:hidden 选取所有不可见元素

2.4应用jQuery改写示例

例1：给网页中所有的<p>元素添加onclick事件

$("p").click(function(){//获取页面中所有的<p>元素，给每一个元素添加onclick事件

//doing something

})

例2：使一个特定的表格隔行变色

$('#tb tbody tr:even').css("backgroundColor","#888");//获取id为tb的元素，然后寻找它下面的tbody标签，在寻找tbody下索引值是偶数的tr元素；改变它的背景色

例3：对多选框进行操作，输出选中的多选框的个数

$('#btn').click(function(){

var length = $("input[name='check']:checked").length;

//先使用属性选择器，然后用表单对象属性过滤，最后获取jQuery对象的长度

alert("选中的个数为："+length);

});

2.5选择其中的一些注意事项

2.5.1选择器中含有特殊符号的注意事项

1.选择器中含有· # ( ]等特殊字符需要转义

例：$('#id\\#b'); //转移特殊字符#

$('#id\\[1\\]');//转义特殊字符[]

2.属性选择器的引号问题

1.1.0版本 $('div[@title="test"]');

1.3.1之后 $('div[title="test"]'); //去掉了@符号

2.5.2选择器中含有空格的注意事项

例：<div class="test">

</div>

var $t_a = $('.test :hidden');//带空格的jQuery选择器选取class为test的元素里面的隐藏元素

var $t_b = $('.test:hidden'); //不带空格的jQuery选择器选取隐藏的class为test的元素

var len_a = $t_a.length; //4

var len_b = $t_b.length; //3

3.jQuery中的DOM操作

3.1 DOM操作的分类 一般来说DOM操作分为3个方面：DOM Core（核心）、HTML-DOM和CSS-DOM

1.DOM Core

JavaScript中getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法都是DOM Core的组成部分。

例：使用DOM Core来获取表单对象的方法

document.getElementsByTagName("form");

使用DOM Core来获取某元素的src属性的方法

element.getAttribute("src");

2.HTML-DOM

例：使用HTML-DOM来获取表单对象的方法

document.forms;//HTML-DOM提供了一个forms对象

使用HTML-DOM来获取某元素的src属性的方法

element.src;

HTML-DOM和DOM Core相比较而言，HTML-DOM的代码通常比较简单，不过它只能用来处理Web文档

3.CSS-DOM 针对CSS的操作

主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

例：设置元素style对象字体颜色的方法

element.style.color = "red";

3.2 jQuery中的DOM操作

3.2.1查找节点

1.查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点

var li_text = $li.text(); //获取第二个<li>元素节点的文本内容

alert(li_text )； //打印文本内容

2.查找属性节点

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个，也可是两个。当参数是一个时，则是要查询的属性的名字，例：

获取属性节点并打印出它的内容

var $para = $("p"); //获取<p>节点

var p_txt = $para.attr("title");//获取<p>元素节点属性title

alert(p_txt); //打印title属性值

3.2.2创建节点

1.创建元素节点

例:创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。

（1）创建两个<li>新元素

（2）将这两个元素插入文档中

第（1）个步骤可以使用jQuery的工厂函数$()来完成，格式为:$(html);

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。

首先创建两个<li>元素：

var $li_1 = $("<li></li>");

var $li_2 = $("<li></li>");

然后将这两个新元素插入到文档中，可以使用jQuery中的append()等方法

$("ul").append($li_1);

$("ul").append($li_2);

可以采取链式写法：$("ul").append($li_1).append($li_2);

注意：（1）动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。（2）当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。

2.创建文本节点

var $li_1 = $("<li>香蕉</li>"); //创建一个<li>元素，包括元素节点和文本节点

//“香蕉”就是创建的文本节点

var $li_2 = $("<li>雪梨</li>"); //创建一个<li>元素，包括元素节点和文本节点

//“雪梨”就是创建的文本节点

$("ul").append($li_1);

$("ul").append($li_2);

注意：无论$(html)中的HTML代码多么复杂，都要使用相同的方式来创建

例如$("<li><em>这是</em><b>一个</b><a href='#'>复杂的组合</a></li>");

3.创建属性节点

var $li_1 = $("<li title='香蕉'>香蕉</li>");//创建一个<li>元素

//包括元素节点、文本节点和属性节点

//title='香蕉'就是创建的属性节点

$("ul").append($li_1);

3.2.3插入节点

插入节点的方法：

append() 向每个匹配的元素内部追加内容 <p>我想说：</p>

$("p").append("<b>你好</b>");

结果：<p>我想说：<b>你好</b></p>

appendTo()将所有匹配的元素追加到指定的 <p>我想说：</p>

元素中。实际上，使用该方法是 $("<b>你好</b>").appendTo("p");

颠倒了常规的$(A).append(B)的结果：<p>我想说：<b>你好</b></p>

操作，而不是将B追加到A中，而

是将A追加到B中

prepend() 向每个匹配的元素内部前置内容 <p>我想说：</p>

$("p").prepend("<b>你好</b>");

结果：<p><b>你好</b>我想说：</p>

prependTo()将所有匹配的元素追加到指定的 <p>我想说：</p>

元素中。实际上，使用该方法是 $("<b>你好</b>").appendTo("p");

颠倒了常规的$(A).prepend(B)的结果：<p>我想说：<b>你好</b></p>

操作，而不是将B追加到A中，而

是将A追加到B中

after() 在每个匹配的元素之后插入内容 <p>我想说：</p>

$("p").after("<b>你好</b>")

结果：<p>我想说：</p><b>你好</b>

insertAfter()将所有匹配的元素插入到指定

元素的后面。实际上，使用方法

是颠倒了常规的$(A).after(B)

的操作，即不是将B插入到A后面，

而是将A插入到B后面

before() 在每个匹配的元素之前插入内容 <p>我想说：</p>

$("p").before("<b>你好</b>");

结果： <b>你好</b><p>我想说：</p>

insertBefore()将所有匹配的元素插入到指定

的元素的前面

3.2.4 删除节点

1.remove()方法作用是从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。

$("ul li:eq(1)").remove();//获取第二个<li>元素节点后，将它从网页中删除

当某个节点用remove()方法删除后，该节点所包含的所哟偶后代节点将同时被删除。这个方法返回的返回值是一个指向已被删除的节点的引用，因此可以在以后使用这些元素。

var $li = $("ul li:eq(1)").remove(); //获取第二个<li>元素节点后，将他从网页中删除

$li.appendTo("ul"); //把刚才删除的节点又重新添加到<ul>元素里

$("ul li:eq(1)").appendTo("ul");//appendTo()方法也可以用来移动元素，移动元素时首先从文档上删除此元素，然后将该元素插入得到文档中的指定节点。

$("ul li").remove("li[title!=菠萝]");//将<li>元素中属性title不等于“菠萝”的<li>元素删除。

2.empty()方法严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

$("ul li:eq(1)").empty();//获取第二个<li>元素节点后，清空此元素里的内容，注意是元素里。

3.2.5复制节点

$("ul li").click(function(){

$(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中

})

在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件。因此该元素的副本也同样具有复制功能。

3.2.6 替换节点

replaceWith()方法和replaceAll()方法。

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");

3.2.7 包裹节点

wrap()方法。

QZ_飘雪无痕

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery（不完整，待后续整理补充）

1.jQuery 1.1 认识jQuery 1.JavaScript和JavaScript库 1）JavaScript的出现使得网页和用户之间实现了实时的、动态的和交互的关系，使网页包含更多活跃的元素和更多精彩的内容。 2）3个弊端：复杂的文档对象模型（DOM），不一致的浏览器实现和缺乏便捷的开发、调试工具。 3）JavaScri
复制链接

扫一扫