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 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

【CSS进阶】原生JS getComputedStyle等方法解析

24650
来自专栏Java帮帮-微信公众号-技术文章全总结

CSS Selectors Level 4新特性全面解析

前言 当看到 CSS Selectors Level 4 很多人会理所当然地喊出 CSS4。但是,这里必须明确一个概念,目前所谓的 CSS3 和 CSS4 都是...

32470
来自专栏coding for love

CSS入门8-三大特性之层叠特性与优先级

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

15830
来自专栏章鱼的慢慢技术路

Go指南练习_切片

19030
来自专栏web编程技术分享

js正则表达式简单应用

40150
来自专栏HTML5学堂

段落首字下沉

HTML5学堂:在项目中,时常能看到了一种文字展示的特殊效果——首字下沉(如图)。于是花了几分钟考虑了一下使用方法,脑测之后,又敲了敲代码实现了一下,写出来与大...

42150
来自专栏偏前端工程师的驿站

CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display...

22180
来自专栏听雨堂

MapX中取得图元操作的速度测试

        最常见的操作,是取得图层中的某个图元。假如需要根据一个属性(无重复)来获得图元的话,发现速度相差极大。 遍历比较是最慢的。 用图层的search...

20560
来自专栏deepcc

.clearfix:after的用法,清除浮动

28160
来自专栏腾讯NEXT学位

这些 CSS 命名规范将省下你大把调试时间(文末有福利)

443100

扫码关注云+社区

领取腾讯云代金券