jQuery过滤选择器

一、前言

今天分享一下jQuery的过滤选择器，大致分为：

                1、基本选择器 $("基本选择器")
                2、层次选择器 $("E>F")
                3、属性选择器 $("input[type=text]")
                4、过滤选择器
        

二、代码

实践出真知，所以选择用最简单明了的代码给大家简单认识一下选择器结构和分类

html

<h1>jQuery过滤器</h1>
		<h2>基本过滤选择器</h2>
		<ul>
			<li>111111</li>
			<li>222222</li>
			<li class="active">333333</li>
			<li class="active">444444</li>
			<li>555555</li>
			<li>666666</li>
		</ul>

js 

// 基本过滤选择器
			//1、选择第一个和最后一个
			$("li:first").css({"background-color":"red"})
			$("li:last").css({"background-color":"red"})
			//2、选择奇偶行
			$("li:even").css({"background-color":"green"})
			$("li:odd").css({"background-color":"green"})
			//3、选择指定行
			$("li:eq(2)").css({"background-color":"yellow"})
			//4、选择范围行，大于小于
			$("li:gt(2)").css({"background-color":"pink"})
			$("li:lt(2)").css({"bcakground-color":"orange"})
			//5、排除行
			$("li:not(.active)").css({"color":"white"})
			//6、获取标题元素
			console.log($(":header"));

html

<div class="wrapper">
			<div>开心</div>
			<div></div>
			<div>
				<p>快乐</p>
			</div>
			<div><span></span></div>

			<p>111</p>
			<p>222</p>
			<form action="">
				<input type="text" value="张三">
				<input type="text" disabled value="李四">
				<input type="checkbox" value="1">
				<input type="checkbox" value="2">
				<input type="checkbox" value="2">
				<select name="" id="">
					<option value="1">郑州</option>
					<option value="2">开封</option>
				</select>
			</form>

js 

			// $(“div:contains(‘奇酷’)”)选择内容里包含我的所有div
			console.log($(".wrapper div:contains('奇酷')"));
			// $(“div:empty”)选择不包含子元素（含文本）的所有div元素
			console.log($(".wrapper div:empty"));
			// $(“div:has(p)”)选择含有p元素的所有div元素
			console.log($(".wrapper div:has(p)"));
			// $(“div:parent”)选择拥有子元素（包含文本）的所有div元素
			console.log($(".wrapper div:parent"));

			// $(“:hidden”)选择所有不可见元素，
			console.log($(".wrapper>p:hidden"));
			// $(“div:visible”)选取所有可见的div元素 
			console.log($(".wrapper>div:visible"));

			// :enabled  选取所有可用元素
			console.log($("input:enabled"));
			// :disabled 选取所有不可用元素 
			console.log($("input:disabled"));
			// :checked  选取所有被选中的元素（单元框、复选框）
			$("input[type=checkbox]").click(function() {
				var ch = $("input:checked"); //获取所有被选中的元素
				console.log(ch.length);
			})
			// :selected 选取所有被选中的选项元素（下拉列表 ）
			$("select").change(function() {
				// html()  text()  val()
				console.log($(":selected").val());
				console.log($(":selected").html());
			})

选择器大致分为以上内容，但是本人没有引入外链js，大家复制代码进行分析的时候，切记要引入哦