什么是过滤器？
过滤器就是用来筛选dom对象的，过滤器是和选择器一起使用的。在选择了dom对象后在进行过滤筛选。
jQuery对象中存储的dom对象顺序与页面标签声明有关系。
声明顺序就是dom中存放的顺序
1.基本过滤器
使用dom对象在数组中的位置来作为过滤条件的。
1.数组中第一个dom成员 语法: $("选择器:first")
2.选择最后一个dom成员 语法：$("选择器:last")
3.选择指定下标的dom成员 语法：$("选择器:eq(下标)")
4.选择大于某个下标的所有成员 语法：$("选择器:gt(下标)")
5.选择小于某个下标的所有成员 语法：$("选择器:lt(下标)")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
//页面加载完成之后执行 相当于onload事件
$("#btn").click(function () {
alert("我单机了按钮");
});
$("#btn1").click(function () {
var obj = $("div:first");
obj.css("background-color", "red");
});
$("#btn2").click(function () {
var obj = $("div:last");
obj.css("background-color", "red");
});
$("#btn3").click(function () {
//获取下标等于3的div
var obj = $("div:eq(3)");
obj.css("background-color", "green");
});
$("#btn4").click(function () {
// 获取下标小于3的div
var obj = $("div:lt(3)");
obj.css("background-color", "orange");
});
$("#btn5").click(function () {
// 获取下标大于3的div
var obj = $("div:gt(3)");
obj.css("background-color", "blue");
});
});
</script>
<style type="text/css">
div {
background-color: gray;
}
</style>
</head>
<body>
<div id="one">我是div0</div>
<div id="two">我是div1</div>
<div id="">
我是div2
<div>我是div3</div>
<div>我是div4</div>
</div>
<div>我是div5</div>
<br />
<br />
<span>我是span</span>
<br />
<br />
<input type="button" id="btn" value="绑定事件" /><br />
<input type="button" id="btn1" value="获取dom中第一个对象" /><br />
<input type="button" id="btn2" value="获取dom中最后一个对象" /><br />
<input type="button" id="btn3" value="获取下标等于3的div" /><br />
<input type="button" id="btn4" value="获取下标小于3的div" /><br />
<input type="button" id="btn5" value="获取下标大于3的div" /><br />
</body>
</html>
2.表单属性过滤器
根据对象的状态作为条件，筛选dom
1.获取可用的文本框 $(":text:enabled")
2.获取不可用的文本框 $(":text:disabled")
3.获取选中的复选框 $(":checkbox:checked")
4.获取选中的option 下拉框 $("选择器:option:selected")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function () {
//页面加载完成之后执行 相当于onload事件
$("#btn1").click(function () {
//选中可用的文本框
var obj = $(":text:enabled");
obj.val("hello");
});
$("#btn2").click(function () {
//选中的复选框
var obj = $(":checkbox:checked");
for (var i = 0; i < obj.length; i++) {
console.log(
"dom方式" + obj[i].value + ",jQuery的方式" + $(obj[i]).val()
);
}
});
$("#btn3").click(function () {
//选中的下拉列表框
// var obj = $("select > option:selected");
var obj = $("#lang>option:selected");
console.log(obj.val());
});
});
</script>
<style type="text/css">
div {
background-color: gray;
}
</style>
</head>
<body>
<p>文本框</p>
<input type="text" id="text1" value="文本框1" /><br />
<input type="text" id="text1" value="文本框2" disabled /><br />
<input type="text" id="text1" value="文本框3" /><br />
<input type="text" id="text1" value="文本框4" disabled /><br />
<br />
<br />
<p>复选框</p>
<input type="checkbox" value="游泳" />游泳<br />
<input type="checkbox" value="健身" checked />健身<br />
<input type="checkbox" value="电子游戏" checked />电子游戏<br />
<br />
<br />
<p>下拉框</p>
<select name="" id="lang">
<option value="java">java</option>
<option value="go" selected>go</option>
<option value="python">python</option>
</select>
<br />
<br />
<p>按钮</p>
<button id="btn1">所有的可用的文本框的值设为hello</button><br />
<button id="btn2">显示选中的复选框</button><br />
<button id="btn3">显示选中的下拉列表框</button><br />
</body>
<script>
/*
表单过滤器
根据对象的状态作为条件，筛选dom
1.获取可用的文本框 $(":text:enabled")
2.获取不可用的文本框 $(":text:disabled")
3.获取选中的复选框 $(":checkbox:checked")
4.获取选中的option 下拉框 $("选择器:option:selected")
*/
</script>
</html>
