JQuery中DOM操作示例代码

Jquery的DOM操作

1、插入节点代码示例:

<p title=”选择你喜欢的水果”>你最喜欢的水果是?</p>

<ul>

<li title=”苹果”>苹果</li>

<li title=”橘子”>橘子</li>

<li title=”菠萝”>菠萝</li>

</ul>

<script language=”javascript”>

var $li_1=$(“<li title=’香蕉’>香蕉</li>”);

var $li_2=$(“<li title=’雪梨’>雪梨</li>”);

$(“ul”).append($li_1).append($li_2);

//插入节点

$(“p”).append(“<b>这里的追加的内容。</b>”);

$(“<b>这是要增加的内容</b>”).appendTo(“p”);

$(“p”).prepend(“<b>在前面添加内容</b>”);

$(“<span>这是前置的内容</span>”).prependTo(“p”);//如果没有span包含,这内容无法前置

$(“p”).after(“<i>在p结束之后添加内容</i>”);

$(“<i>这个内容也是在p之后<br></i>”).insertAfter(“p”);

$(“p”).before(“<font color=’red’>这内容是在p标签之前</font>”);

$(“<i>这是在最前的</i>”).insertBefore(“font”);

</script>

2、删除节点代码示例:

<p title=”选择你喜欢的水果”>你最喜欢的水果是?</p>

<ul>

<li title=”苹果”>苹果</li>

<li title=”橘子”>橘子</li>

<li title=”菠萝”>菠萝</li>

</ul>

<script language=”javascript”>

var $li=$(“ul li:eq(1)”).remove();

$li.appendTo(“ul”);

$(“ul li:eq(1)”).detach();//如果再重新追加上,原来的事件还在,而remove不会存在

$(“ul li:eq(1)”).empty();//这个是清空元素内容

</script>

3、复制节点代码示例:

<p title=”选择你喜欢的水果”>你最喜欢的水果是?</p>

<ul>

<li title=”苹果”>苹果</li>

<li title=”橘子”>橘子</li>

<li title=”菠萝”>菠萝</li>

</ul>

<script language=”javascript”>

$(“ul li:eq(1)”).clone(true).appendTo(“ul”);

</script>

4、替换节点代码示例:

<p title=”选择你喜欢的水果”>你最喜欢的水果是?</p>

<ul>

<li title=”苹果”>苹果</li>

<li title=”橘子”>橘子</li>

<li title=”菠萝”>菠萝</li>

</ul>

<p title=”第二个会替换的”>第二个会替换的?</p>

<script language=”javascript”>

$(“p”).replaceWith(“<strong>你最不喜欢的水果是?</strong>”);

//也可以用下面的,注意替换是所有元素都会替换

$(“<i>这是又一次替换</i>”).replaceAll(“strong”);

</script>

5、包裹节点示例代码:

<strong>第一部分</strong>

<b>这点会包裹起来吗?</b>

<strong>第二部分</strong>

<script language=”javascript”>

$(“strong”).wrap(“<i></i>”);

// 每个strong都被包裹,而wrapAll是对整体包裹,如果中间有其他元素会放在包裹元素之后

$(“strong”).wrapAll(“<i></i>”);

$(“strong”).wraplnner(“<i></i>”);//这个是包裹了strong元素的子内容

</script>

6、属性操作示例代码:

<p title=”第一个标题属性”>第一个文章标点</p>

<script language=”javascript”>

var $p=$(“p”);

var p_text=$p.attr(“title”);//获取属性title的内容

//设置一个属性可以这样用

$(“p”).attr(“title”,”新的属性值”);

//如果设置多个属性,可以用下面的方法

$(“p”).attr({“title”:”标题属性”,”id”:”myid”});//后面传递多个参数也是这样的

//删除属性

$(“p”).removeAttr(“title”);

</script>

9、样式操作代码示例:

<p>样式操作例子</p>

<script language=”javascript”>

$(“p”).attr(“class”)//读取样式

$(“p”).attr(“class”,”newclass”);//这样会把原来样式去掉换成新的样式

$(“p”).addClass(“addclass”);//这里是追加样式,这样样式就成了原样式和追加样式的叠加

$(“p”).removeClass(“newclass”);//移除newclass样式,如果不带参数,那么将会清空class的值

var t=$(“p”).hasClass(“addclass”);//等价$(“p”).is(“.addclass”);

</script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区