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 });

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

时间: 2024-10-20 08:42:25

jQuery简要dom操作的相关文章

js,jQuery和DOM操作的总结(二)

jQuery的基本操作 (1)遍历键值对和数组 var arr = [9, 8, 7, 6, 5, 4]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值,第二个参数是索引 }) //=========================================// var keyWord = { "name": "老牛", "age"

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

第3章 jQuery的DOM操作

一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获取属性:elem.getAtrribute('title') 2.html-DOM document.div elem.src 3.CSS-DOM elem.style.color='red' 二. jQuery的DOM操作 1.查找节点 (1)元素节点 1 2 alert($('ul li:eq(

jQuery进行DOM操作记录

1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content)      返回值:jQuery  参数-content:要插入的元素String,Element,jQuery 为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下: $("#1").append("input type='button' value='确定'/>")   在1的内部元素的后面添加一个按钮 $("#1")

jQuery常用dom操作

操作属性节点(type属性不支持修改和删除) attr('name')——取值(如果jq对象是多个,则只取得第一个值,例如:$('.class').attr('name')——只获得第一个class的name属性值) attr('name','value')——赋值 如果参数是json对象,那么则会同时修改多个属性值,例如:var kv = {name:'username',value:'tom'}; $('#username').attr(kv); 还可以通过函数的返回值来修改属性值,例如:$

Jquery的dom操作与原生dom的转换

本片文章包含了 jquery常见dom操作. q与原生dom对象的区别与转换 伪数组对象的知识 如有错误,烦请指正. 增 以下方法共性:可以一次添加多个内容,内容可以是DOM对象.HTML string. jQuery对象 创建元素 var obj = $('<div class="test"><p><span>Done</span></p></div>'); 两种方法可以创建元素 直接写入html 传入一个原生d

Jquery所有Dom操作汇总

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> </head>

JQuery的Dom操作

大家好 又见面了 这次继续还是由我为大家带来JQuery的基础操作,这次的重点是在JQuery里使用DOM 示例如下: Prepend():在内容的前面插入新的标签,如下: 效果: prependTo():和上面的功能一模一样,也就是顺序上的区别 效果: After():标签后面添加新的元素 Before():在匹配元素的前面插入新的标签 删除节点 在JQuery里面,删除节点的方法大致3种:remove(),detach(),empty() Remove():从DOM里面删除所有匹配的元素 效

Jquery 事件 DOM操作

常规事件: 把JS的事件  on去掉即可 例如:js    document.getElementById("id").onclinck=function(){} Jquery  $("#id").click(function(){  事件发生的事}); 复合事件 hover(function(){}   ,   function(){})     移入移出事件 toggle(function(){} , function(){}  ....)可以有无数个funct