jQuery简要dom操作

简介:

文本

dom

获取标签 $(选择)。

创建一个标签对象 $("标签"); 由于所有的返回jQuery对象,能够调用链(无论jQuery API 回报jQuery对象)

插入标签

内部插入


1.append(content|fn)


概述
向每一个匹配的元素内部追加内容。


这个操作与对指定的元素运行appendChild方法。将它们加入到文档中的情况类似。

參数
contentString, Element, jQueryV1.0

要追加到目标中的内容

function(index, html)FunctionV1.4

返回一个HTML字符串,用于追加到每个匹配元素的里边。

接受两个參数,index參数为对象在这个集合中的索引值。html參数为这个对象原先的html值。


演示样例

描写叙述:向全部段落中追加一些HTML标记。

HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]


2.appendTo(content) 返回值:jQuery  把全部匹配的元素追加到还有一个指定的元素元素集合中。


实际上,使用这种方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中。而是把A追加到B中。

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,返回值是全部被追加的内容,而不不过先前所选中的元素。所以,要选择先前选中的元素,须要使用end()方法,參见例二。

參数
contentString

用于被追加的内容


演示样例

描写叙述:把全部段落追加到ID值为foo的元素中。

HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>


描写叙述:新建段落追加div中并加上一个class

 

HTML 代码:
<div></div><div></div>
jQuery 代码:
$("<p/>")
   .appendTo("div")
   .addClass("test")
   .end()
   .addClass("test2");
结果:
<div><p class="test test2"></p></div>
<div><p class="test"></p></div>

 


3.prepend(content|fn)

prepend(content)
向每一个匹配的元素内部前置内容。


这是向全部匹配元素内部的開始处插入内容的最佳方式。

參数
contentString, Element, jQueryV1.0

要插入到目标元素内部前端的内容

function(index, html)FunctionV1.4

返回一个HTML字符串。用于追加到每个匹配元素的里边。

接受两个參数,index參数为对象在这个集合中的索引值。html參数为这个对象原先的html值。


演示样例描写叙述:向全部段落中前置一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]


描写叙述:将一个DOM元素前置入全部段落

HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
jQuery 代码:
$("p").prepend( $(".foo")[0] );
结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Good Bye</b>


描写叙述:向全部段落中前置一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").prepend( $("b") );
结果:
<p><b>Hello</b>I would like to say: </p>


4.prependTo(content)


返回值:jQueryprependTo(content)

概述
把全部匹配的元素前置到还有一个、指定的元素元素集合中。


实际上,使用这种方法是颠倒了常规的$(A).prepend(B)的操作。即不是把B前置到A中,而是把A前置到B中。

在jQuery 1.3.2中。appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,须要使用end()方法,參见 appendTo 方法的例二。

參数
contentString

用于匹配元素的jQuery表达式


演示样例描写叙述:把全部段落追加到ID值为foo的元素中。

HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>


外部插入


1..after(content|fn)

after(content|fn)

在每一个匹配的元素之后插入内容。

參数
contentString, Element, jQueryV1.0

插入到每一个目标后的内容

functionFunctionV1.4

函数必须返回一个html字符串。


演示样例描写叙述:在全部段落之后插入一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>


描写叙述:在全部段落之后插入一个DOM元素。

HTML 代码:
<b id="foo">Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("#foo")[0] );
结果:
<p>I would like to say: </p><b id="foo">Hello</b>


描写叙述:在全部段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:
<b>Hello</b><p>I would like to say: </p>
jQuery 代码:
$("p").after( $("b") );
结果:
<p>I would like to say: </p><b>Hello</b>

 

2.before(content|fn) 返回值:jQuery   在每一个匹配的元素之前插入内容。


參数
contentString, Element, jQueryV1.0

插入到每一个目标后的内容

functionFunctionV1.4

函数必须返回一个html字符串。


演示样例描写叙述:在全部段落之前插入一些HTML标记代码。

HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]


描写叙述:在全部段落之前插入一个元素。

HTML 代码:
<p>I would like to say: </p><b id="foo">Hello</b>
jQuery 代码:
$("p").before( $("#foo")[0] );
结果:
<b id="foo">Hello</b><p>I would like to say: </p>


描写叙述:在全部段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:
<p>I would like to say: </p><b>Hello</b>
jQuery 代码:
$("p").before( $("b") );
结果:
<b>Hello</b><p>I would like to say: </p>


3.insertAfter(content) 返回值:jQuery 把全部匹配的元素插入到还有一个、指定的元素元素集合的后面。


实际上,使用这种方法是颠倒了常规的$(A).after(B)的操作。即不是把B插入到A后面,而是把A插入到B后面。

在jQuery 1.3.2中。appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,须要使用end()方法。參见 appendTo 方法的例二。

參数
contentStringV1.0

用于匹配元素的jQuery表达式


演示样例描写叙述:把全部段落插入到一个元素之后。与 $("#foo").after("p")同样

HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>


4.insertBefore(content) 返回值:jQuery   把全部匹配的元素插入到还有一个、指定的元素元素集合的前面。


实际上,使用这种方法是颠倒了常规的$(A).before(B)的操作,即不是把B插入到A前面。而是把A插入到B前面。

在jQuery 1.3.2中,appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作,要选择先前选中的元素,须要使用end()方法。參见 appendTo 方法的例二。

參数
contentStringV1.0

用于匹配元素的jQuery表达式


演示样例描写叙述:把全部段落插入到一个元素之前。与 $("#foo").before("p")同样。

HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>

删除标签


1.empty() 返回值:jQuery 删除匹配的元素集合中全部的子节点。


演示样例描写叙述:把全部段落的子元素(包含文本节点)删除

HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:
$("p").empty();
结果:
<p></p>

 

2.remove([expr])


从DOM中删除全部匹配的元素。


这种方法不会把匹配的元素从jQuery对象中删除,因而能够在将来再使用这些匹配的元素。

但除了这个元素本身得以保留之外,其它的比方绑定的事件。附加的数据等都会被移除。

參数expr  String       

用于筛选元素的jQuery表达式


演示样例描写叙述:从DOM中把全部段落删除

HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove();
结果:
how are


描写叙述:从DOM中把带有hello类的段落删除

HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").remove(".hello");
结果:
how are <p>you?</p>


3.detach([expr]) 返回值:jQuery     detach([expr])



从DOM中删除全部匹配的元素。


这种方法不会把匹配的元素从jQuery对象中删除。因而能够在将来再使用这些匹配的元素。

与remove()不同的是,全部绑定的事件、附加的数据等都会保留下来。

參数
expr  String    用于筛选元素的jQuery表达式


演示样例描写叙述:从DOM中把全部段落删除

HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are


描写叙述:从DOM中把带有hello类的段落删除

HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach(".hello");
结果:
how are <p>you?

</p>

 

获得和加入标签

attr(name|properties|key,value|fn)


设置或返回被选元素的属性值。

參数
name  String     属性名称

properties Map   作为属性的“名/值对”对象

key,value String, Object      属性名称。属性值

key,function(index, attr) String,Function

1:属性名称。

2:返回属性值的函数,第一个參数为当前元素的索引值。第二个參数为原先的属性值。


演示样例

參数name

描写叙述:返回文档中全部图像的src属性值。

jQuery 代码:
$("img").attr("src");


參数properties

描写叙述:为全部图像设置src和alt属性。

jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });


參数key,value 描写叙述:

为全部图像设置src属性。

jQuery 代码:
$("img").attr("src","test.jpg");


參数key,回调函数 描写叙述:

把src属性的值设置为title属性的值。

jQuery 代码:
$("img").attr("title", function() { return this.src });

版权声明:本文博客原创文章。博客,未经同意,不得转载。






本文转自mfrbuaa博客园博客,原文链接:http://www.cnblogs.com/mfrbuaa/p/4645158.html,如需转载请自行联系原作者


相关文章
|
2月前
|
JavaScript 前端开发 开发者
深入了解jQuery:轻松实现高效的DOM操作
【10月更文挑战第11天】深入了解jQuery:轻松实现高效的DOM操作
67 0
|
3月前
|
JavaScript 前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改,包括如何获取和设置元素的文本内容、属性值、添加和删除元素,以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码,展示了jQuery在实际开发中的便捷性。
jQuery 操作 DOM 及 CSS
|
7月前
|
缓存 JavaScript
|
3月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
22 0
|
6月前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
70 2
JavaScript基础-DOM操作:查找、创建、修改
|
6月前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
47 2
|
6月前
|
JavaScript 前端开发 开发者
DOM操作
【6月更文挑战第30天】DOM操作
40 1
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
JavaScript 前端开发 API
前端框架与库 - jQuery基础与DOM操作
【7月更文挑战第18天】jQuery 是一个简化JavaScript任务的库,以其“write less, do more”理念著称。核心功能包括DOM操作、事件处理和Ajax。DOM操作如选择元素(`$(&quot;p&quot;)`、`$(&quot;#myDiv&quot;)`、`$(&quot;.myClass&quot;)`)、创建及添加元素、修改属性和内容。事件处理如绑定(`click`)和触发(`trigger`)。常见问题涉及`$`符号冲突(使用`jQuery`代替)、异步加载管理和选择器性能优化。了解并规避这些问题能提升jQuery使用效率。
37 0