目录
2、设置属性值 attr('title','hahaha')
6、移除class的值 removeClass('page')
7、添加或者移除class值 toggleClass('hah')
12、innerHeight() 获取高度+padding上下
一、属性
1、获取属性值 attr('title')
2、设置属性值 attr('title','hahaha')
3、同时设置多个属性值
attr({
title: 'enenen',
style: 'background-color: red';
});4、移除属性值 removeAttr('title')
5、添加class值 addClass('page')
6、移除class的值 removeClass('page')
7、添加或者移除class值 toggleClass('haha')
二、CSS
1、获取样式值 css('color')
2、设置样式值 css('color','red')
3、设置样式值
css({
'color': 'red',
'font-size': '30px'
})4、offset()
<1>相对于窗口
<2>获取top和left的值
5、position()
<1>相对于父级
<2>获取top和left的值
6、获取滚动的值 scrollTop()
7、设置滚动的值 scrollTop(300)
8、获取滚动的值 scrollLeft()
9、设置滚动的值 scrollLeft(200)
10、获取高度 height()
11、获取宽度 width()
12、innerHeight() 获取高度+padding上下
13、获取宽度+padding左右
14、获取高度+padding上下+border上下
15、获取宽度+padding左右+border左右
三、筛选
1、first():第一个
2、last():最后一个
3、find()
<1>寻找子级
<2>类似于后代选择器
4、eq(n):第n个
5、not(x):没有x描述的
6、filter():过滤
7、slice():剪裁
8、has()
<1>过滤
<2>检索的是集合中DOM算的后代
9、children():子级(不包含子级的后代)
10、parent():直接父级
11、parents():所有父级
12、parentUntil(x):直到找到x描述的父级停止
13、offsetParent():第一个定位的父级
14、next():下一个
15、nextAll():后边所有
16、nextUntil(x):下一个到x描述前
17、prev():上一个
18、prevAll():前边所有
19、prevUntil(x):上一个到x描述
20、siblings():匹配元素的所有兄弟元素
21、addBack():当前的再添加上一个
22、end():返回上一个jq对象
具体案例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jq</title>
<style>
section{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
</head>
<body>
<ul>
<li>ul item1</li>
<li>ul item2</li>
<li class="yes">ul item3</li>
<li>ul item4</li>
<li>ul item5</li>
</ul>
<ol>
<li>ol item1</li>
<li class="yes">ol item2</li>
<li>ol item3</li>
<li>ol item4</li>
<li>ol item5</li>
</ol>
<div id="ok">ok</div> -->
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
// dom与jq可以互换
// var dOK = document.getElementById("ok");
// console.log($(dOK));
// console.log($("#ok")[0]);
// onload方法与ready方法的区别是什么?
$("ol li:nth-of-type(2)").css({
color: "red",
fontSize: 26
// 'font-size': 26
}).attr("id","ok").toggleClass("yes")
$("ul li:eq(3)").css({
color: "green"
})
// 非破坏性操作:方法返回自身(this指向原来的jq对象)
// 破坏性操作:this指向新的jq对象
$("ul li").filter(".yes").css({
color: "pink"
})
</script>
</html>
运行结果: