jQuery选择器-优快云博客

在jQuery中，无论使用哪种类型的选择器，都要从一个美元符号和一对圆括号开始：$( )。所有能在样式表中使用的选择器，都能放到这个圆括号中的引号内。随后，就可以对匹配的元素集合应用jQuery方法。
$( )方法可以不需要使用循环访问一组元素，因为放到圆括号中的任何元素都将自动执行循环遍历，并且会被保存到一个jQuery对象中。可以在$( )方法的圆括号中使用的参数几乎没有什么限制。比较常用的一些例子如下:
类型名：$("div")会取得文档中所有的div元素。
ID名：$("loginForm")会取得文档中ID为loginForm的元素。
类：$(".hover")会取得文档中class属性包含hover的所有元素。
返回的元素集合称为包装集。

1.1 基础选择器

id选择器：根据元素的id选择

class选择器：根据元素的css类选择器

*选择器：选择所有元素

$(function(){
				//JQ的id选择器获取元素
				var a1 = $("#d1");
				console.log(a1);
				
				//JQ的class选择器获取元素
				var a2 = $(".c1");
				console.log(a2);
				
				//JQ的元素选择器获取元素
				var a3 = $("p");
				console.log(a3);
            });

1.2 层级选择器

子代选择器：$("ul>li") 使用>号，获取亲儿子级元素；不会获取孙子层级元素

后代选择器：$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素。包括孙子层级元素等

$(function(){
            //JQ的层级选择器获取ul下的所有li元素，包括孙子等
				var a4 = $("ul li");
				console.log(a4);
				console.log(a4.text());
				
				//JQ的层级选择器获取子代层级的元素，不包括孙子级元素
				var a5 = $("ul>li");
				console.log(a5);
				console.log(a5.text());
            });

1.3 属性选择器

属性名称选择器：$("A[属性名]") 包含指定属性的选择器

属性选择器：$("A[属性名 = '值']") 包含指定属性等于指定值的选择器

复合属性选择器：$("A[属性名 = '值'][ ]...") 包含多个属性条件的选择器

$(function(){
            //JQ的属性选择器
				var a6 = $("a");
				a6.css("color","red");
			});

1.4 过滤选择器

:first $('li:first') 获取第一个li元素

:last $('li:last') 获取最后一个li元素

:eq(index) $("li:eq(2)") 获取到的li元素中，选择索引号为2的元素

:odd $("li:odd") 获取到的li元素中，选择索引号为奇数的元素

:even $("li:even") 获取到的li元素中，选择索引号为偶数的元素

siblings(selector) $(".first").siblings("li") 查找兄弟节点，不包括自己本身

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤选择器</title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//获取第一个li元素
				$("li:first").css("color","pink");
				
				//获取最后一个li元素
				$("li:last").css("color","blue");
				
				//获取到li元素中，选择索引为2的元素
				$("li:eq(2)").css("color","yellow");
				
				//获取到li元素中，选择索引号为奇数的元素
				$("li:odd").css("font-size","10px");
				
				获取到li元素中，选择索引号为偶数的元素
				$("li:even").css("font-size","50px");
				
				//查找兄弟节点，不包括自己本身
				$(".first").siblings("li").css("font-family","楷体");
			});
		</script>
	</head>
	<body>
		<ul>
			<li>玉桂狗</li>
			<li>库洛米</li>
			<li>hello，kitty</li>
			<li>帕恰狗</li>
			<li>美乐蒂</li>
			<li>布丁狗</li>
		</ul>
	</body>
</html>

1.5 表单过滤选择器

可用元素选择器： :enabled 获得可用元素

不可用元素选择器： :disabled 获得不可用元素

选中选择器： :checked 获得单选/复选框选中的元素

选中选择器： :selected 获得下拉框选中的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单过滤器</title>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$("input[type = 'text']:enabled").val("JQ设置可用的表单值")
				$("input[type = 'text']:disabled").val("JQ设置不可用的表单值")
				
				//按钮事件
				$("#btn").click(function(){
					var a3 = $("input[type = 'radio']:checked").val();
						alert(a3)
					var hobby = $("input[type = 'checkbox']:checked");
					for(var i=0;i<hobby.length;i++){
						alert(hobby[i].value)
					}
					var address = $("select>option:selected").val();
						alert(address)
				});
			});
		</script>
	</head>
	<body>
		<form action="#" method="post">
			可用表单：<input type="text" name="a1" value="" /><br />
			不可用表单：<input type="text" name="a2" value="" disabled="true" /><br />
			单选框：<input type="radio" name="a3" value="0" />男
					<input type="radio" name="a3" value="1" />女 <br />
			复选框：<input type="checkbox" name="hobby" value="唱" />唱
					<input type="checkbox" name="hobby" value="跳" />跳
					<input type="checkbox" name="hobby" value="rap" />rap<br />
			下拉列表：<select name="address">
				<option value="河南">河南</option>
				<option value="河北">河北</option>
				<option value="山东">山东</option>
				<option value="山西">山西</option>
			</select> <br />
			<button type="button" id="btn">按钮</button>
		</form>
	</body>
</html>