jQuery_06 过滤器的使用-编程知识

jQuery_06 过滤器的使用

什么是过滤器？

过滤器就是用来筛选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的divvar obj = $("div:eq(3)");obj.css("background-color", "green");});$("#btn4").click(function () {// 获取下标小于3的divvar obj = $("div:lt(3)");obj.css("background-color", "orange");});$("#btn5").click(function () {// 获取下标大于3的divvar 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>/* 表单过滤器根据对象的状态作为条件，筛选dom1.获取可用的文本框     $(":text:enabled") 2.获取不可用的文本框   $(":text:disabled")3.获取选中的复选框     $(":checkbox:checked")4.获取选中的option 下拉框     $("选择器:option:selected")*/</script>
</html>