目录
一、操作样式
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():获取所有祖先元素