1. 过滤操作
- first()
- last()
- eq()
- not()
- filter()
- slice()
- has()
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery筛选操作</title>
<style>
.my-list{
width: 600px;
list-style: none;
}
.my-list li{
margin-bottom: 10px;
padding: 20px;
border: 2px dashed orange;
}
</style>
</head>
<body>
<h1>jQuery筛选操作</h1>
<hr>
<ul class="my-list">
<li>a</li>
<li>b</li>
<li class="item">c</li>
<li>d<span class="item">item</span></li>
<li>e</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// $(".my-list li:first").css("border-color", "red");
$(".my-list li").first().css("border-color", "red");
$(".my-list li").last().css("border-color", "red");
$(".my-list li").eq(1).css("border-color", "red");
$(".my-list li").not(".item").css("background-color", "yellow");
$(".my-list li").not(":first").css("color", "red");
$(".my-list li").filter(".item").css("background-color", "pink");
// 截取其中一部分
// $(".my-list li").slice(2).css("background-color", "green");
// $(".my-list li").slice(1,3).css("background-color", "green");
// 包含子元素属性为item时满足条件
$(".my-list li").has(".item").css("border", "5px solid purple");
});
</script>
</body>
</html>
2. 查找
- children([selector]) 获取子元素
- find(selector) 获取后代元素
- parent([selector]) 获取父元素
- parents([selector]) 获取所有的祖先元素(满足条件)
- parentsUntil([selector]) 获取祖先元素的集合(从父元素到选择器指定的祖先元素,但是指定的祖先排除掉)
- offsetParent() 获取第一个定位的祖先元素
- next([selector]) 紧邻在后面的兄弟元素
- nextAll([selector]) 后面所有的兄弟元素
- nextUntil([selector]) 直到selector
- prev([selector]) 紧邻在前面的兄弟元素
- prevAll([selector]) 前面所有的兄弟元素
- prevUntil([selector]) 直到selector
- sibilings([selector]) 所有的兄弟元素
- closest([selector]) 从所有的祖先元素和本身里面找出第一个满足条件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery查找操作</title>
<style>
#firstList{
position: relative;
width: 600px;
list-style: none;
}
li{
margin-bottom: 10px;
padding: 20px;
border: 2px dashed orange;
list-style: none;
}
</style>
</head>
<body>
<h1>jQuery查找操作</h1>
<hr>
<ul id="firstList">
<li>a</li>
<li>b</li>
<li>c
<ul>
<li>c1</li>
<li id="myItem">c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
</ul>
</li>
<li class="item">d</li>
<li>e</li>
<li>f</li>
<p>aha</p>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 子元素
// $("#firstList").css("border","5px solid red");
// 选取子元素,除了子元素,其他后代元素不会被选中
// $("#firstList").children().css("border","5px solid red");
// $("#firstList").find("li").css("border","5px solid red");
// 获取 祖先元素系列
$("#myItem").css("background-color","pink");
// $("#myItem").parent().css("border", "5px solid red");
// 选取祖先里面的ul
// $("#myItem").parents("ul").css("border", "5px solid red");
// 从它自己直到找到body标签内所有祖先之后停下
// $("#myItem").parentsUntil("body").css("border", "5px solid red");
// 返回第一个定位的祖先元素
// $("#myItem").offsetParent().css("border", "5px solid red");
// 获取 兄弟元素
$(".item").css("background-color", "pink");
// 后面的兄弟元素操作
// 仅临的一个兄弟元素
// $(".item").next("li").css("border", "5px solid red");
// 后面所有的li标签的兄弟元素
// $(".item").nextAll("li").css("border", "5px solid red");
// 后面所有直到p标签的兄弟元素
// $(".item").nextUntil("p").css("border", "5px solid red");
// 前面的兄弟元素操作
// $(".item").prev().css("border", "5px solid red");
// $(".item").prevAll().css("border", "5px solid red");
//$(".item").prevUntil("li:first").css("border", "5px solid red");
//所有兄弟元素
$(".item").siblings().css("border", "5px solid red");
});
</script>
</body>
</html>
3. 串联
- add() 把选中的元素加入当前集合
- addBack() 把调用该方法的元素 加入当前集合
- end() 返回最后一次破坏性操作之前的DOM
- contents() 返回所有子节点的集合
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>串联操作</title>
<style>
ul {
width: 600px;
list-style: none;
}
li {
margin-bottom: 20px;
padding: 20px;
border: 2px dashed orange;
}
p {
width: 500px;
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>串联操作</h1>
<hr>
<ul id="myList">
<li>a b c d</li>
<li>a b c d</li>
<li>a b c d</li>
<li>a b c d</li>
<li>a b c d</li>
</ul>
<hr>
<p>a b c d</p>
<div id="box">
你好
<br>
<p>a b c d</p>
abc
<!--emm-->
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// add() 把选中的元素 加入当前的集合中,所以p标签也变粉色了
// $("#myList").find("li").add("p").css("background-color","pink");
//addBack()把#myList也加进去了
// $("#myList").children("li").addBack().css("border", "5px solid red");
//addBack()把body也加进去了
// $("body").find("li").addBack().css("border", "5px solid red");
//addBack()把ul也加进去了
// $("body").find("ul").find("li").addBack().css("border", "5px solid red");
// end()返回前面的前面的一次DOM操作,也就是说,end()现在指向的是#myList li
// $("#myList li").eq(2).end().css("border", "5px solid red");
// end()现在指向的是#myList
$("#myList").find("li").end().css("border", "5px solid red");
console.log($("#box").contents());
});
</script>
</body>
</html>
4. jQuery DOM对象操作
- each() 遍历
- map() 返回新的集合
- length 集合中元素的数量
- index() 返回该元素在父元素中的索引位置
- get([index]) 返回集合中指定索引的dom对象,还可以把jquery dom集合转为类数组
- is(selector) 判断该jquery dom是否满足某个条件 返回布尔值
demo
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery DOM 对象的方法</title>
<style>
#myList {
width: 600px;
list-style: none;
}
#myList li {
margin-top: 10px;
padding: 20px;
border: 2px dashed orange;
}
</style>
</head>
<body>
<h1>jQuery DOM 对象的方法</h1>
<hr>
<ul id="myList">
<li>a b c d</li>
<li>a b c d</li>
<li>a b c d</li>
<li>a b c d</li>
<li>a b c d</li>
<li>a b c d</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
// 遍历
$("#myList li").each(function (index, ele) {
// console.log(index, ele);
// ele.innerHTML += " e f";
$(ele).append(" e f");
})
// map
var list = $("#myList li").map(function (index, ele) {
// return $(ele).html();
return index;
})
// 产生一个返回的集合
console.log(list);
console.log($("#myList li").length);
//返回某个元素 在父元素中的索引
// console.log($("#myList li").index());
$("#myList li").click(function () {
console.log($(this).index());
});
console.log($("#myList li").get(1));
console.log($("#myList li").get());
});
</script>
</body>
</html>