jQuery中的DOM操作(考前总结)

一、操作样式

1. css()方法

专门用来设置css属性的。

<script>
$("div").css("color");      //读取div元素的color属性值
$("div").css("color", "red");   //设置div元素的color属性值

//设置多个属性值
$("div").css("color", "red").css("width", "300").css("height", "200").css("background-color", "pink");

$("div").css({color:"red", width: 300, height: 200,"background-color": "pink"});    //效果和上面链式写法一样

 $("div").css({
color: “red”, 
width: 300, 
height: 200,
"background-color": "pink"
});                 //推荐写法  
</script>

注意:属性名中带 “ - ” 的属性要放在双引号里。

2. 类样式方法

专门用来操作元素的class属性。
addClass(): 追加样式。$(selector).addClass(class1 class2 … classN);
removeClass(): 移除样式。$(selector).removeClass("class1 class2 … classN ") ;
hasClass(): 判断样式。$(selector). hasClass(class);
toggleClass(): 切换样式 。$(selector).toggleClass(class) ;

二、操作内容

text():设置元素中的文本内容,等同于原生JS中的innerText属性。
html():设置元素中html代码,等同于原生JS中的innerHTML属性 。
val():可以获取或设置元素的value属性值,等同于原生JS中的value属性。

三、操作尺寸

width()、height(): 获取的是 content 区域大小
innerWidth()、innerHeight():获取的是 content + padding 区域大小
outerWidth()、outerHeight():获取的是 content + padding + border 区域大小
outerWidth(true)、outerHeight(true):获取的是 content + padding + border + margin 区域大小

四、操作属性

attr():设置或获取元素标签上的属性
prop():设置或获取元素标签上的属性
removeAttr():删除元素的一个或多个属性,如需移除若干个属性,使用空格分隔属性名称。
提醒: 一般在添加属性名称时该属性就会生效或属性只有true和false两个属性值时尽量使用prop()方法进行设置与获取,其他属性则使用attr()方法。

五、操作节点

1.获取节点:

通过各种选择器或选择器的组合来获取想要的网页元素。
$(“选择器”)

2.创建节点:

元素节点通过工厂函数$()直接创建,文本节点和属性节点可以随着元素节点创建时一起创建,也可以通过先创建元素节点,再使用操作内容和属性的方法产生。

3.插入节点:

内部插入节点:
append()、prepend():父元素的方法, 把方法部分的内容入其部分的内容中;
appendTo()、prependTo():要插入的节点的方法,把方法部分的内容入其部分的内容中

外部插入节点:
before()、after():要插入的节点的同辈节点的方法,把方法部分的内容入其部分的内容(before是之前after是之后)。
insertBefore()、insertAfter():要插入的节点的方法,把方法前部分的内容插入其后部分的内容(before是之前after是之后)。

4.删除节点:

remove():节点及所有的后代、节点上绑定的事件都被删除
detach():绑定的事件会被保留下来
empty():清空节点,清除所有后代

5.复制节点:

clone():参数为true,复制元素的同时也复制元素绑定的事件

6.替换节点:

replaceWith():被替换的在前面。
replaceAll():被替换的在自己的括号里。

<script>
$("#one").replaceWith("<p><strong>你喜欢的是?</strong></p>");
$("<strong>你喜欢的是?</strong>").replaceAll("#two");
</script>

<body>
<p id="one" title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<p id="two"   title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
</body>

7.包裹节点:

wrap():括号内填“想要在外层添加元素”,在每个匹配的元素外层包裹上一个html元素。
wrapAll():给选中的所有标签统一添加一个父级
wrapInner():在元素里包裹一层标签
unwrap():将元素集合的父级元素删除

8.遍历节点:

children():取得匹配元素的所有子元素组成的集合,该方法只考虑子元素而不考虑任何后代元素。
find():返回被选元素的后代元素,一路向下直到最后一个后代。
next():取得匹配元素后面紧邻的同辈元素的集合。
prev():取得匹配元素前面紧邻的同辈元素的集合
siblings():取得匹配元素前后所有的同辈元素。
closet():获取最近匹配的祖先元素
parent():返回被选元素的直接父元素。
parents():获取所有祖先元素

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

寂静花开

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值