ホームページ >ウェブフロントエンド >jsチュートリアル >jquery による DOM 要素の操作 (1)

jquery による DOM 要素の操作 (1)

黄舟オリジナル: 2016-12-16 10:41:151162ブラウズ

.clone()
　　创建一个匹配的元素集合的深度拷贝。
　　.clone([withDataAndEvents])
　　　　withDataAndEvents (默认为false)
　　　　　　一个Boolean 表示是否会复制元素上的时间处理函数。
　　.clone([withDataAndEvents][,deepwithDataAndEvents])
　　　　withDataAndEvents (默认为false)
　　　　　　一个Boolean 表示是否会复制元素上的时间处理函数。
　　　　deepwithDataAndEvents
　　　　　　一个布尔值，指示是否对时间处理程序和克隆的元素的所有子元素的数据应该被复制。默认情况下它的值相匹配的第一个参数的值。

　　　　　　$(".hello").clone().appendTo(".goodbye")
　　　　　　效果：

Hello

　　　　　　　　Goodbye
　　　　　　　　

Hello

.wrap()
　　在集合中匹配的每个元素周围包裹一个HTML 结构。
　　.wrap([wrappingElement])
　　　　wrappingElement 一个选择器，元素，html字符 jq 对象指定的html结构环绕包裹的匹配元素。
　　.wrap(function)
　　　　function 一个回调函数，返回用于包裹匹配元素的HTML内容或对象。
　　　　

Hello

Goodbye

　　　　$('.inner').wrap('

');
　　　　结果：
　　　　

Hello

Goodbye

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

'
　　　　})

Hello

Goodbye

.wrapAll()
　　在集合中所有的匹配元素的外褒一个HTML结构。
　　.wrapAll(wrappingElement)
　　　　wrappingElement
　　　　　　一个选择器，元素，html字符。
　　　　

Hello

Goodbye

　　　　$('.inner').wrapAll('

');
　　　　　　

Hello

Goodbye

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

　　　　　　$("p").wrapAll($(".doublediv"));
　　　　　　　　在所有的"p"元素

.wraplnner()
　　　　在匹配元素里的内容外包一层结构。
　　　　.wraplnner(wrappingElement)
　　　　　　wrappingElement 用来包在匹配元素的内容外面的HTML片段选择表达式，jquery对象 DOM 元素。
　　　　

Hello

Goodbye

　　　　$('.inner').wrapInner('

');
　　　　　　

Hello

Goodbye

　　.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字符串。
　　　　

Greetings

Hello

Goodbye

　　　　$('.inner').append('

Test

');
　　　　效果：
　　　　　　

Greetings

　　　　　　　　　　Hello
　　　　　　　　　　

Test

　　　　　　　　　　Goodbye
　　　　　　　　

Test

　　　　.append(function(index,html))
　　　　　　　　function(index,html)
　　　　　　　　　　　　返回一个html 字符串，DOM 元素，对象函数。this 指向元素集合中的当前元素。

I would like to say:

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

　　　　　　　　效果：
　　　　　　　　　　

I would like to say: Hello

.appendTo()
　　　将匹配的元素插入到目标元素的最后面
　　　.appendTo(target)
　　　　target 一个选择符，元素，HTML 字符串，DOM 元素数组。
　　　　

Hello

Goodbye

　　　　$('

Test

').appendTo('.inner');
　　　　

　　　　　　　　Hello
　　　　　　　　

Test

　　　　　　　　Goodbye
　　　　　　　　

Test

.html()
　　获取集合中第一个匹配元素的HTML 内容或设置每一个HTML内容。
　　.html()
　　　　这个方法不接收任何元素。
　　　　

Demonstration Box

　　　　$('div.demo-container').html();
　　　　获得到的结果
　　　　

Demonstration Box

　　.html(htmlString)
　　　　htmlString 用来设置每一个匹配元素的HTML代码
　　.html(function(index olDHTML))
　　　　用来返回设置HTML内容的一个函数
　　　　

Demonstration Box

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

All new content. You bet!

');
　　　　效果如下：
　　　　

All new content. You bet!

.PRepend()
　　　　将参数内容插入到每个匹配元素的前面。（元素内容）
　　　　　　.prepend(content[,content])
　　　　　　DOM 元素，元素数组，HTML 字符串对象。
　　　　　　

Hello

Goodbye

　　　　　　$('.inner').prepend('

Test

');
　　　　　　效果：
　　　　　　　　

Test

　　　　　　　　　　Hello
　　　　　　　　

Test

　　　　　　　　　　Goodbye
　　　　　　　　　　

　　　　　　.prepend(function(index.html))
　　　　　　　　一个返回HTML字符串，DOM元素，jQuery对象的函数，该字符串用来插入到匹配元素的开始处
　　　　　　　　$("p").prepend(document.createTextNode("Hello "));

.prependTo()
　　将所有的元素插入到目标元素前面（元素内）。
　　.prependTo(target)
　　　　target 一个选择器, DOM元素，元素数组，HTML字符串，或者jQuery对象，将被插入到匹配元素前的内容。
　　　　

Hello

Goodbye

　　　　$('

Test

').prependTo('.inner');
　　　　效果：
　　　　

Test

　　　　　　　　Hello
　　　　　　

Test

　　　　　　　　Goodbye
　　　　　　

.text()
　　得到匹配元素集合中每个元素的合并文本。包括他们的后代。
　　.text() 这个方法不接受任何参数。
　　

Demonstration Box

list item 1

list item 2

　　 (text)
一致する要素コンテンツのテキストを設定するために使用されます。
.text( function(index, text) )
テキストの内容を設定する関数を返すために使用されます。
$('div.demo-container').text('

This is a test.

');
.text() メソッドは入力要素では使用できません。入力したテキストには .val() メソッドを使用する必要があります。

上記は、DOM 要素を操作する jQuery の内容です (1) 関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript の AMD 仕様次の記事：JavaScript の AMD 仕様

続きを見る