jqurey的选择器使用

1、基本过滤选择器

1. 基本选择器 $(“基本选择器”)

2. 层次选择器 $(“E>F”)

3. 属性选择器 $(“input[type=text]”)

4. 过滤选择器

   		  	 基本过滤选择器
   			内容过滤选择器
   			可见性过滤选择器
   			表单对象过滤选择器 
   

<h1>奇酷教育</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>

// 基本过滤选择器
			// 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":"blue"})
			//3、选择指定行 按照下标来看
			  $("li:eq(2)").css({"background-color":"yellow"})
			//4、选择范围行，大于小于
			  $("li:gt(2)").css({"background-color":"pink"})
			  $("li:lt(2)").css({"background-color":"orange"})
			//5、排除行
			 $("li:not(.active)").css({"color":"white"})
			 //6、获取所有标题元素，h1-h6
			console.log($(":header"));

2、jqurey其它过滤选择器

1. 内容过滤选择器

2. 可见过滤选择器

3. 表单对象过滤选择器

   	     :enabled  选取所有可用元素 
   	     :disabled 选取所有不可用元素 
   	     :checked  选取所有被选中的元素（单元框、复选框
   	     :selected 选取所有被选中的选项元素（下拉列表 
   

<style>
.wrapper>p{
	display: none;
	/* visibility: hidden; 不包含*/
}
<style>
<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>
		</div>

// $(“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());
		   })