jquery操作dom

最新推荐文章于 2024-04-10 10:06:32 发布

u011277123

最新推荐文章于 2024-04-10 10:06:32 发布

阅读量226

点赞数

相信科技的力量 2017-03-21 10:17

jquery 操作DOM元素(1)

.clone()

创建一个匹配的元素集合的深度拷贝。

.clone([withDataAndEvents])

withDataAndEvents (默认为false)

一个Boolean 表示是否会复制元素上的时间处理函数。

.clone([withDataAndEvents][,deepwithDataAndEvents])

withDataAndEvents (默认为false)

一个Boolean 表示是否会复制元素上的时间处理函数。

deepwithDataAndEvents

一个布尔值，指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值。

$(".hello").clone().appendTo(".goodbye")

效果： <div class="hello">Hello</div>

Goodbye

<div class="hello">Hello</div>

</div>

.wrap()

在集合中匹配的每个元素周围包裹一个HTML 结构。

.wrap([wrappingElement])

wrappingElement 一个选择器，元素，html字符 jq 对象指定的html结构环绕包裹的匹配元素。

.wrap(function)

function 一个回调函数，返回用于包裹匹配元素的HTML内容或对象。

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$('.inner').wrap('<div class="new" />');

结果：

<div class="inner">Hello</div>

</div>

<div class="inner">Goodbye</div>

</div>

$('inner').wrap(function(){

return '<div class="'+$(this).text()+'"/>'

})

<div class="inner">Hello</div>

</div>

<div class="inner">Goodbye</div>

</div>

.wrapAll()

在集合中所有的匹配元素的外褒一个HTML结构。

.wrapAll(wrappingElement)

wrappingElement

一个选择器，元素，html字符。

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$('.inner').wrapAll('<div class="new" />');

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

.wrapAll(function)

function

一个回调函数。index 表示匹配元素在集合中的索引的位置。this 指向集合中的当前位置。

$("p").wrapAll($(".doublediv"));

在所有的"p"元素

.wraplnner()

在匹配元素里的内容外包一层结构。

.wraplnner(wrappingElement)

wrappingElement 用来包在匹配元素的内容外面的HTML片段选择表达式，jquery对象 DOM 元素。

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$('.inner').wrapInner('<div class="new" />');

<div class="new">Hello</div>

</div>

<div class="new">Goodbye</div>

</div>

.wraplnner(function(index))

function(index)

function 一个返回HTML结构的函数，用来包裹在匹配元素的外面 this 指匹配中的元素。

$("P").wrapInner(document.createElement("b"));

.append()

在每个匹配元素里面的末尾处插入参数内容。

.append(content[,content])

content DOM 元素 DOM 数组，HTML字符串 jquery 对象。

content 一个或多个DOM 元素，元素数组，HTML字符串。

<h2>Greetings</h2>

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$('.inner').append('<p>Test</p>');

效果：

<h2>Greetings</h2>

Hello

</div>

Goodbye

</div>

.append(function(index,html))

function(index,html)

返回一个html 字符串，DOM 元素，对象函数。this 指向元素集合中的当前元素。

<p>I would like to say: </p>

$('p').append(document.createTextNode("Hello"))

效果：

<p>I would like to say: Hello</p>

.appendTo()

将匹配的元素插入到目标元素的最后面

.appendTo(target)

target 一个选择符，元素，HTML 字符串，DOM 元素数组。

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$('<p>Test</p>').appendTo('.inner');

Hello

</div>

Goodbye

</div>

.html()

获取集合中第一个匹配元素的HTML 内容或设置每一个HTML内容。

.html()

这个方法不接收任何元素。

<div class="demo-box">Demonstration Box</div>

</div>

$('div.demo-container').html();

获得到的结果

<div class="demo-box">Demonstration Box</div>

.html(htmlString)

htmlString 用来设置每一个匹配元素的HTML代码

.html(function(index oldHTML))

用来返回设置HTML内容的一个函数

<div class="demo-box">Demonstration Box</div>

</div>

$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');

效果如下：

<p>All new content. <em>You bet!</em></p>

</div>

.prepend()

将参数内容插入到每个匹配元素的前面。（元素内容）

.prepend(content[,content])

DOM 元素，元素数组，HTML 字符串对象。

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$('.inner').prepend('<p>Test</p>');

效果：

Hello

</div>

Goodbye

</div>

.prepend(function(index.html))

一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的开始处

$("p").prepend(document.createTextNode("Hello "));

.prependTo()

将所有的元素插入到目标元素前面（元素内）。

.prependTo(target)

target 一个选择器, DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。

<div class="inner">Hello</div>

<div class="inner">Goodbye</div>

</div>

$('<p>Test</p>').prependTo('.inner');

效果：

Hello

</div>

Goodbye

</div>

.text()

得到匹配元素集合中每个元素的合并文本。包括他们的后代。

.text() 这个方法不接受任何参数。

<div class="demo-box">Demonstration Box</div>

<ul>

</ul>

</div>

$('div.demo-container').text()

效果如下：

Demonstration Box list item 1 list item 2

.text(textString)

设置匹配元素集合中每个元素的文本内容

.text(text)

用于设置匹配元素内容的文本。

.text( function(index, text) )

用来返回设置文本内容的一个函数。

$('div.demo-container').text('<p>This is a test.</p>');

.text() 方法不能使用在 input 元素上。输入的文本需要使用 .val() 方法。