jQuery基本过滤选择器

本文记录WEB前端学习过程中遇到的jQuery基本过滤选择器~

基本:

  • :first:第一个
  • :last:最后一个
  • :not:删除指定内容。例如:1234:not(3)-->124
  • :even:偶数
  • :odd:奇数
  • :eq:指定第几个
  • :gt:大于几个
  • :lt:小于几个
  • :header:获得标题
  • :animated:获得动画
  • :focus:获得焦点

内容:

  • :contains:包含
  • :empty:是否为空
  • :has:包含
  • :parent:父类

可见性:

  • :hidden:隐藏
  • :visible:可见

示例代码:

<html>
	<head>
		<meta charset="UTF-8">
		<title>基本过滤选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div:first").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$("div:last").css("background-color","pink");
				});
				$("#btn3").click(function(){
					$("div:odd").css("background-color","pink");
				});
				$("#btn4").click(function(){
					$("div:even").css("background-color","pink");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		<span id="four">
		</span>
	</body>
</html>

标签: none