JavaScript学习笔记8-jQuery基本过滤选择器深度解析

最新推荐文章于 2022-11-03 19:13:49 发布

原创最新推荐文章于 2022-11-03 19:13:49 发布 · 565 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

21 篇文章

订阅专栏

本文通过实例展示了jQuery中基本过滤选择器的使用方法，包括:first、:last、:even、:odd等选择器的应用，帮助读者理解如何精确地选取DOM元素。

过滤选择器（filter）

–基本过滤
–内容过滤
–可见性过滤
–属性过滤
–子元素过滤
–表单对象属性过滤

基本过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <link rel="stylesheet" type="text/css" href="style.css" /> 
<script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">

  $(document).ready(function()
  {
	$("#button1").click(function()
	{
		$("div:first").css("background", "red");
	});

	$("#button2").click(function()
	{
		$("div:last").css("background", "blue");
	});

	$("#button3").click(function()
	{
		$("div:even").css("background", "green");
	});

	$("#button4").click(function()
	{
		$("div:odd").css("background", "orange");
	});
	
	$("#button5").click(function()
	{
		$("div:eq(3)").css('background', "pink");
	});

	$("#button6").click(function()
	{
		$("div:not(.one)").css('background', "yellow");
	});
    
	$("#button7").click(function()
	{
		$("div:gt(3)").css('background', "#abcdef");
	})

	$("#button8").click(function()
	{
		$("div:lt(3)").css('background', "#fedcba");
	})

	$("#button9").click(function()
	{
		$(":header").css('background', "#cdefab");
	})
	

  });
  </script>

 </head>

 <body>
  
<h3>基本过滤选择器.</h3>
 
<input type="button" value="test1" id="button1">
<input type="button" value="test2" id="button2">
<input type="button" value="test3" id="button3">
<input type="button" value="test4" id="button4">
<input type="button" value="test5" id="button5">
<input type="button" value="test6" id="button6">
<input type="button" value="test7" id="button7">
<input type="button" value="test8" id="button8">
<input type="button" value="test9" id="button9">


   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>
  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

 </body>
</html>