jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作

jQuery创建元素节点或文本节点或属性节点、jQuery插入节点、jQuery删除节点、jQuery复制节点、jQuery替换节点、jQuery包裹节点、jQuery属性操作、jQuery样式操作、jQuery设置和获取HTML、文本和值、jQuery遍历节点

  jQuery操作DOM的总结分享,个人学习笔记!分享的总结不一定很详细,不会每个方法的用法及详细描述及说明,只是一个概述!

  说说我的个人想法:

  很多时候,我们在开发JS特效的时候,脑子里没有想法,看到问题,第一想到的是思考怎么用那些常用的jQuery方法来解决问题,一些好用的方法及超简单的方法往往被忽略或者以前系统的学习过jQuery但一时忘记了!所以要牢牢知道jQuery到底有哪些方法,至于此方法怎么用我们可以不知道!大不了多花些时间百度下!多用几次就记住了!

  注:从全局出发,吃透jQuery都能干什么,都有什么方法!至于方法怎么使用,我们可以查询!

  1、创建元素节点或文本节点或属性节点

  方法:$(html);

  描述:创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。

  代码:$("ul").append($("<li title="属性节点" >文本节点</li>"));

  2、插入节点

方法描 述
append()向每个匹配的元素内部追加内容。注:在内部元素的最后面追加
appendTo()将所有匹配的元素追加到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中。
prepend()向每个匹配的元素内部前置内容。注:在内部元素的最前面追加
prependTo()将所有匹配的元素前置到指定的元素中。实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中。
after()在每个匹配的元索之后插入内容。
insertAfler()将所有匹配的元素插入到指定元素的后面。实际上,使用该方法是颠倒了常规的$(A).after(B)的操作,即不是将B插入到A后面,而是将A插入到B后面。
before()在每个匹配的元素之前插入内容。
insertBefore()将所有匹配的元素捅入到指定的元素的前面。实际上,使用该方法是颠倒了常规的$(A).before(B)的操作,即不是将B插入到A前面,而是将A插入到B前面。

  3、删除节点

方法描 述
remove()

当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
演示下删除后如何取回:
代码:
var $li = $("ul li:eq(0)").remove();//获取UL的第一个LI,并将其从网页中删除。
$li.appendTo("ul");//把刚删除的li重新添加到ul中。

detach()detach()和remove()一样,也是从DOM中去掉所有匹配的元素。但需要注意的是,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据都会保留下来。
empty()严格地讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后代节点。

  4、复制节点

  方法:clone()

  语法格式:clone(true)

  描述:其中参数设置为true就可以复制元素的所有事件的处理。

  代码:

  var kelong = $("ul").clone();//克隆好的对象

  kelong.addClass("yangshi");//添加个css样式,还可以使用jQuery其他方法进一步操作,很方便

  $("p").append(kelong);

  5、替换节点

  方法:replaceWith()和replaceAll()

  描述:将所有选择的元素替换成指定的html和dom元素。其中参数被选择替换的内容。replaceWith() 与replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在于替换字符的顺序。

  $("p")replaceWith("元素")和$("元素").replaceAll("p")只是顺序相反,效果是一样的。

  注:一旦完成替换,被替换元素中的全部事件都将消失,需要在新元素上重新绑定事件。

  6、包裹节点

方法描 述
wrap()

代码:
$("#li_one").wrap("<strong></strong>");
效果:
<strong>
    <li id="li_one" title="jQuery DOM 包裹节点">包裹节点</li>
</strong>

wrapAll()

该方法会将所有匹配的元素用一个元素来包裹。它不同于wrap()方法,wrap()方法是将所有的元素进行单独的包裹。
代码:
$(".li_two").wrapAll("<strong></strong>");
效果:
<strong>
    <li class="li_two" title="包裹节点">包裹节点</li>
    <li class="li_two" title="jQuery DOM 包裹节点">jQuery DOM 包裹节点</li>
</strong>

wrapInner()

该方法将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。
代码:
$("#li_one").wrapInner("<strong></strong>");
效果:
<li id="li_one" title="jQuery DOM 包裹节点">
    <strong>包裹节点</strong>
</li>

  7、属性操作

方法描 述
attr()、prop()

设置或返回匹配元素的属性和值。

removeAttr()、removeProp()从所有匹配的元素中移除指定的属性。

  8、样式操作

方法描 述
attr()

获取样式和设置样式。$("img").attr("width","180");

addClass()

追加样式,向匹配的元素添加指定的类名。

removeClass()移除样式,从所有匹配的元素中删除全部或者指定的类。$("div").addClass("yangshi")
toggleClass()

切换样式。

hasClass()判断是否含有某个样式。

  9、设置和获取HTML、文本和值

方法描述
html()

返回或设置被选元素的内容。$("p").html("Hello <b>world</b>!");

text()读取或者设置某个元素中的文本内容。
val()设置和获取元素的值。

  10、遍历节点

方法描述
children()获取匹配元素的子元素集合。
next()获取匹配元素后面紧邻的同辈元素。
prev()获取匹配元素前面紧邻的同辈元素。
siblings()获取匹配元素前后所有的同辈元素。
closest()获取最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找元素,逐级向上直到找到匹配选择器元素。
parent()获取集合中每个匹配元素的父级元素。
parents()获取集合中每个匹配元素的祖先元素。
其他find()filter()nextAll()prevAll()

  11、CSS-DOM操作

方法描述
css()获取和设置style对象的各种属性。$("p").css("color","red");$("p").css({"color":"red","font-size":"30px"});
height()获取和设置元素高度。
width()获取和设置元素宽度。
offset()获取元素在当前视窗的相对偏移,返回的对象包括两个属性,即top和left。
position()获取元素相对于最近的一个(position样式属性设置为relative或者absolute的)祖父节点的相对偏移,返回的对象包括两个属性,即top和left。
scrollTop()获取元素的滚动条距顶端的距离。
scrollLef()获取元素的滚动条距左侧的距离。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值