jquery中的dom操作

1.插入节点的方法

abc.append(d):向每个匹配的元素内部添加内容。   

d.appendTo(abc):将所有匹配的元素添加到另一个元素里。跟上面相反

abc.prepend(d):向每个匹配元素内部前置内容。

d.prependTo(abc):跟上面相反。

abc.after(d):在每个匹配元素之后插入

d.insertAfter(abc):跟上面相反

abc.before(d):在每个匹配元素之前插入

d.insertBefore(abc):跟上面相反


2.删除节点的方法

$("ul li").remove():删除一个节点,会把这个节点里面的所有元素删除。

$("ul li").remove("li[title=='xxx']")可以指定删除的元素

detach():删除一个节点,会把这个节点里面的所有元素删除。这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。

empty():会清空节点内部的所有内容。


3.查找节点

$("ul li:eq(1)").text()
$("ul li:eq(1)").attr("title")


4.复制节点

$("#id").clone()
$("#id").clone(true)//为true复制的同时,复制绑定事件


5.替换节点

abc.replaceWith(d)把匹配的元素替换成括号里的内容

d.replaceAll(abc)跟上面相反


6.包裹节点

wrap()用括号里的元素把匹配的内容包裹起来,所有匹配结果一一包裹

$("div").wrap("<html></html>")
wrapAll():只包裹一次,把所有匹配的元素都包裹进来。如果有其他元素,就把其他元素放到包裹元素之后

wrapInner():匹配元素的子内容包裹起来。一一包裹


7.属性操作


7.1设置属性和获取属性

$("#name").attr("title");//获取属性
$("#name").attr("title","hello");//设置单个属性
$("#name").attr({"title":"hello","class":"name"})//设置多个属性


7.2删除属性

removeAttr("title")


8.样式操作


8.1获取样式和设置样式

attr("class")

attr("class","hi")

8.2追加样式

addClass("hi")//在原有class里增加了hi


8.3移除样式

removeClass("hi")

removeClass()//移除class属性


8.4切换样式

toggle()让元素在隐藏和显示之间转换,如果之前是显示的就隐藏,反之显示

toggleClass():添加或移除属性,如果原来没有就添加,有就删除

$("xxx").toggleClass("hi")


8.5判断是否含有样式

hasClass()

$("p").hasClass("a")==$("p").is(".a")


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


9.1html()

和innerHtml()相似,获取一个元素内部html,也可以设置

$("p").html()
$("p").html("hello")


9.2text()

和innerText()类似,获取文本内容,也可以设置


9.3val()

用来设置和获取value属性。


focus():获取焦点的事件

blur():失去焦点的事件

this.defaultValue()属性获取的是当前元素的默认值


10遍历节点

children()获取匹配元素的子元素集合

next():获取相连的下一个同辈元素

prev():获取相连的前一个同辈元素

siblings():获取前后所有同辈元素

closest():从当前元素开始找,然后父元素,然后父元素的父元素,一直找,找到最先匹配的返回,没有就返回空对象

parent():找当前元素的父元素

parents():遍历找当前元素的所有父元素,就是parent()后再parent()一直parent()

find():获得当前匹配元素集合中每个元素的后代,由选择器进行筛选。

filter():将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。


11css操作

$(xxx).css("color","red")
$(xxx).css({"color":"red","font-size":"16px"})

css("height");

$().height(100)//默认px

$().height()

width()

offset():返回元素在当前视窗的相对位移,包含top和left

var a = $().offset();
a.left
a.top
position():获取元素相对于最近一个position样式设置为relative和absolute的祖父节点的相对位移。返回left和top

scrollTop():获取滚动条距离顶端的距离,可以设置

scrollLeft():获取滚动条距离左侧的距离,可以设置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值