<head>
<meta charset="UTF-8">
<title>过滤</title>
</head>
<body>
<ul>
<li>烟台大学1</li>
<li>烟台大学2</li>
<li>烟台大学3</li>
<li class="li4">烟台大学4</li>
</ul>
<div><ol><li>Hello</li></ol></div>
<div>How are you?</div>
<input type="checkbox" />
<form><input type="checkbox" /></form>
</body>
<script src="../jquery-3.1.1.js"></script>
<script>
/*返回索引为1的元素*/
console.log($("li").eq(1).html());
/*返回第一个元素*/
console.log($("li").first().html());
/*返回最后一个元素*/
console.log($("li").last().html());
/*返回包含li4这个类的元素*/
console.log($("li").hasClass("li4"));
/*过滤器：返回满足过滤条件的所有元素 过滤条件可以为多个*/
console.log($("li").filter(":first,.li4"));
/*$(select,document):
* 参数1：用来指定选择器
* 参数2：用来指定查找范围 默认是整个文档document*/
var result = $("div").filter(function(index) {
return $("ol", this).length == 0;
});
console.log(result);
/*is():如果结果中有一个元素符合条件，则返回true*/
console.log($("input[type='checkbox']").parent().is("form"));
</script>
<head>
<meta charset="UTF-8">
<title>过滤</title>
</head>
<body>
<form>
<input type="text" name="name" value="John"/>
<input type="text" name="password" value="password"/>
<input type="text" name="url" value="http://ejohn.org/"/>
</form>
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
<p>Hello</p>
<p id="selected">Hello Again</p>
</body>
<script src="../jquery-3.1.1.js"></script>
<script>
var result = $("input").map(function () {
return $(this).val();
});
/*伪数组：拥有数组的索引和length等。外观和数组类似。
* 但是不能使用数组的相关方法*/
// console.log(result.get().join("--"));
$('li').has('ul').css('background-color', 'red');
console.log($("p").not($("#selected")));
var arr = ["ccy", "jereh", "jredu"];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
for (item in arr) {
console.log(arr[item]);
}
</script>
<head>
<meta charset="UTF-8">
<title>slice</title>
</head>
<body>
<ul>
<li>烟台大学1</li>
<li>烟台大学2</li>
<li>烟台大学3</li>
<li>烟台大学4</li>
<li>烟台大学5</li>
</ul>
</body>
<script src="../jquery-3.1.1.js"></script>
<script>
// $("li:lt(3)").css("color","blue");
// $("li:gt(2)").css("color","blue");
// $("li:not(:last,:first)").css("color","blue");
$("li").slice(-4,-2).css("color","blue");
/*slice()
* 参数1：开始索引（包含）
* 参数2：结束索引（不包含）
* 如果两个参数同时存在，必须保证参数2大于参数1
*
* 特殊情况:
* 1:只有参数1，并且是正数，选取从参数1开始，一直到最后一个
* 1:只有参数1，并且是负数，选取从倒数参数值开始，一直到最后一个*/
</script>
本文介绍了jQuery中各种选择器的使用方法，包括基本的选择、过滤、筛选等操作，并通过实例展示了如何高效地操作DOM元素。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
