龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

jquery常用方法及使用示例汇总(6)

时间:2014-11-09 03:05来源:网络整理 作者:网络 点击:
分享到:
复制代码 代码如下: pI would like to say: /pbHello/b jQuery 代码: 复制代码 代码如下: $("p").before( $("b") ); 结果: bHello/bpI would like to say: /p .append()和.appendTo() 4.append

复制代码 代码如下:

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

jQuery 代码:

复制代码 代码如下:

$("p").before( $("b") );

结果:

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


.append()和.appendTo()

4.append()

描述:向所有段落中追加一些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>


5.appendTo()

描述:新建段落追加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>


.prepend()和.prependTo()

6.prepend()

描述:向所有段落中前置一个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>

7.prependTo()

描述:把所有段落追加到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. .insertAfter()和.after():在现存元素的外部,从后面插入元素 
2. .insertBefore()和.before():在现存元素的外部,从前面插入元素 
3. .appendTo()和.append():在现存元素的内部,从后面插入元素 
4. .prependTo()和.prepend()  :在现存元素的内部,从前面插入元素

精彩图集

赞助商链接