jQuery选择器

最新推荐文章于 2020-08-06 17:54:47 发布

chenpi0623

最新推荐文章于 2020-08-06 17:54:47 发布

阅读量121

点赞数

文章标签：人工智能 javascript ViewUI

原文链接：https://my.oschina.net/ygys/blog/782606

版权

可以将jQuery选择器分为：基本选择器，层次选择器，过滤选择器，表单选择器四大类。其中，过滤选择器又可分为：简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器6种。

基本选择器语法

选择器	功能	返回值
#id(id选择器)	根据给定的id匹配一个元素	单个元素
.class(类选择器)	根据给定的类匹配元素	元素集合
Element(元素选择器)	根据给定的元素名匹配元素	元素集合
*(通配符选择器)	匹配所有元素	元素集合
selector1,selectorN(组合选择器)	将每一个选择器匹配到的元素合并后一起返回	元素集合

示例1：

功能描述：一个页面包含两个div标记，其中一个用于设置ID属性，另一个用于设置class属性；我们再加一个span标记，全部元素初始值均为隐藏，然后通过jQuery基本选择器显示相应的页面标记。
实现代码

<!doctype  html>
<html>
<head>
<meta  charset="utf-8"/>
<title>jQuery基本选择器</title>
<style  type="text/css">
   body{
        font-size:14px;
        text-align:center;
   }
   #clsFrame{
        width:300px;
        height:100px;
   } 
   #clsFrame  div,span{
        display:none;
        float:left;
        width:65px;
        height:65px;
        border:thin  solid #000;
        margin:8px; 
   }
   .clsOne{
        background-color:#eee;
   }
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
   $(function(){
        //id选择器匹配元素
        $("#divOne").css("display","block");
   });
   $(function(){
        //class选择器匹配元素
        $(".clsOne").css("display","block");
   });
   $(function(){
       //element选择器匹配元素
       $("span").css("display","block");
   });
   $(function(){
       //"*"选择器匹配元素
       $("body *").css("display","block");
   });
   $(function(){
      //组合选择器匹配元素
      $("#divOne,.clsOne,span").css("display","block");
   });
   //上述方法依次分别测试
</script>
</head>
<body>
  <div id="clsFrame">
     <div  id="divOne">ID</div>
     <div  class="clsOne">CLASS</div>
     <span>SPAN</span>
  </div> 
</body>
</html>

层次选择器语法

选择器	功能	返回值
祖先元素后代元素	根据祖先元素匹配所有的后代元素	元素集合
父元素>子元素	根据父元素匹配所有的子元素	元素集合
prev+next	匹配所有紧接在prev元素后面的相邻元素	元素集合
prev~siblings	匹配prev元素之后的所有兄弟元素	元素集合

层次选择器通过DOM元素间的层次关系获取元素，主要的层次关系包括：后代，父子，相邻，兄弟。prev+next可以使用.next()代替，而prev~siblings可以使用.nextAll()代替。

示例2：

功能描述：在页面中，设置4个div标记，其中在第二块中，添加一个span标记，在该span标记中又添加一个span标记，全部元素初始值均为隐藏，然后通过jQuery层次选择器显示相应的元素。
实现代码：

<!doctype  html>
<html>
<head>
<meta  charset="utf-8"/>
<title>使用jQuery层次选择器</title>
<style  type="text/css">
body{
     font-size:14px;
     text-align:center;
    }
div,span{
     float:left;
     border:#000  thin  solid;
     margin:8px;
     display:none;
    }
.clsFraA{
     width:65px;
     height:65px;
    }
.clsFraP{
     width:45px;
     height:45px;
     background-color:#eee; 
    }
.clsFraC{
    width:25px;
    height:25px;
    background-color:#ddd;
    }
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(function(){
      //匹配后代元素
      $("#divMid").css("display","block");
      $("div span").css("display","block");
    });
    $(function(){
      //匹配子元素
      $("#divMid").css("display","block");
      $("div>span").css("display","block");
    });
    $(function(){
      //匹配后面相邻的元素
      $("#divMid+div").css("display","block");
      $("#divMid").next().css("display","block"); 
    });
    $(function(){
      //匹配后面所有的元素
      $("#divMid~div").css("display","block");
      $("#divMid").nextAll().css("display","block");
    });
    $(function(){
      //匹配所有相邻元素
      $("#divMid").siblings().css("display","block");
    });
    //上述方法依次分别测试
</script>
</head>
<body>
  <div class="clsFraA">LEFT</div>
  <div class="clsFraA" id="divMid">
      <span class="clsFraP"  id="span2">
          <span class="clsFraC" id="span2"></span>
      </span>
  </div>
  <div class="clsFraA">Right_1</div>
  <div class="clsFraA">Right_2</div>
</body>
</html>

siblings()方法用于获取指定元素的所有相邻元素。

简单过滤选择器

选择器	功能	返回值
first()或:first	获取第一个元素	单个元素
last()或:last	获取最后一个元素	单个元素
:not(selector)	获取除了匹配给定选择器的元素之外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引从0开始	元素集合
:odd	获取所有索引值为奇数的元素，索引从0开始	元素集合
:eq(index)	获取指定索引值对应的元素，索引从0开始	单个元素
:gt(index)	获取所有大于给定索引值的索引对应的元素,索引从0开始	元素集合
lt:(index)	获取所有小于给定索引值的索引对应的元素，索引从0开始	元素集合
:header	获取所有标题类型的元素	元素集合
:animated	获取正在执行动画效果的元素	元素集合

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号(:)开头。

示例3：

功能描述：在页面中，设置一个h1标记用于显示主题。创建ul标记并在其中放置4个li。再创建一个span标记用于执行动画效果。通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态。
代码实现：

<!doctype  html>
<html>
<head>
<title>简单过滤选择器</title>
<meta  charset="utf-8"/>
<style type="text/css">
 body{ 
      font-size:14px;
      text-align:center;
  }
 div{
      width:241px;
      height:83px;
      border:solid  thin  #000;
  }
 h1{
     font-size:14px;
     margin:0px;
  }
 ul{
     list-style-type:none;
     padding:0px;
     margin:0px;
  }
 .DefClass,.NotClass{
     height:23px;
     width:60px;
     line-height:23px;
     float:left;
     border-top:border  1px  #eee;
     border-bottom:border  1px  #eee;
  }
 .GetFocus{
     width:58px;
     border:1px  solid #666;
     background-color:#eee;
  }
 #spanMove{
     width:238px;
     height:23px;
     line-height:23px;
  }
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
    //匹配第一个元素
    $("li:first").addClass("GetFocus");
    $("li").first().addClass("GetFocus");
  });
  $(function(){
    //匹配最后一个元素
    $("li:last").addClass("GetFocus");
    $("li").last().addClass("GetFocus");
  });
  $(function(){
   //匹配除了与给定选择器匹配的元素之外的所有元素
    $("li:not(.NotClass)").addClass("GetFocus");
  });
  $(function(){
   //匹配索引值为偶数的元素
    $("li:even").addClass("GetFocus");
  });
  $(function(){
  // 匹配索引值为奇数的元素
    $("li:odd").addClass("GetFocus");
  });
  $(function(){
   //匹配与指定索引值对应的元素
    $("li:eq(3)").addClass("GetFocus");
  });
  $(function(){
   //匹配大于给定索引值的索引所对应的元素
    $("li:gt(0)").addClass("GetFocus");
  });
  $(function(){
   //匹配小于给定索引值的索引对应的元素
    $("li:lt(3)").addClass("GetFocus");
  });
  $(function(){
  //匹配标题类型的元素
    $(":header").css("width","237px");
    $(":header").addClass("GetFocus");
  });
  $(function(){
    //匹配正在执行动画效果的元素
    animateIt();
    $(":animated").addClass("GetFocus");
  });
  function animateIt(){
    //动画
    $("#spanMove").slideToggle("slow",animateIt);
  }
  //以上方法依次分别测试
</script>
</head>
<body>
   <div>
      <h1>简单过滤选择器</h1>
      <ul>
         <li  class="DefClass">Item 0</li>
         <li  class="DefClass">Item 1</li>
         <li  class="NotClass">Item 2</li>
         <li  class="DefClass">Item 3</li>
      </ul>
      <span  id="spanMove">Span  Move</span>
   </div>
</body>
</html>

内容过滤选择器语法

选择器	功能	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含子元素或者文本的空元素	元素集合
:has(selector)	获取包含与给定选择器匹配的元素的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

内容过滤选择器根据元素中的文字内容或所包含子元素的特征获取元素。

示例4：

功能描述：在页面中，根据需要创建4个div标记，并在其中的div中新建一个span标记，其余div中输入内容或为空，通过内容过滤选择器获取指定的元素，并显示在页面中。
代码实现：

<!doctype  html>
<html>
<head>
<title>内容过滤选择器</title>
<meta  charset="utf-8"/>
<style>
 body{ 
      font-size:14px;
      text-align:center;
  }
 div{
      float:left;
      border:thin  solid  #ccc;
      margin:8px;
      width:65px;
      height:65px;
      display:none;
  }
 span{
      float:left;
      border:thin  solid #ccc;
      margin:8px;
      width:45px;
      height:45px;
      background-color:#eee;
 }
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
   //匹配包含给定文本的元素
    $("div:contains(A)").css("display","block");
  });
  $(function(){
   //匹配所有不包含子元素或者文本内容的元素
    $("div:empty").css("display","block");
  });
  $(function(){
   //匹配包含与给定选择器匹配的元素的元素
    $("div:has(span)").css("display","block");
  });
  $(function(){
   //匹配含有子元素或者内容的元素
    $("div:parent").css("display","block");
  });
</script>
</head>
<body>
    <div>ABCD</div>
    <div><span></span></div>
    <div>SDFG</div>
    <div></div>
</body>
</html>

注意：在使用:contains(text)内容过滤选择器时，如果text为英文字母，则有大小写之分，即区分大小写。

可见性过滤选择器语法

选择器	功能	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有的可见元素	元素集合

示例5：

功能描述：在页面中，创建一个<span>和<div>标记，分别设置标记的display属性为"none"和"block";然后根据可见性过滤选择器显示页面元素。
实现代码：

<!doctype  html>
<html>
<head>
<title>使用可见性过滤选择器</title>
<meta  charset="utf-8"/>
<style type="text/css">
  body{font-size:14px;text-align:center;}
  span{display:none;}
  div,span{
       float:left;border:#000  thin  solid;margin:8px;width:65px;height:65px;
  }
  .GetFocus{
       border:#eee  thin  solid;background-color:#eee;
  }
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
   //匹配不可见元素
     $("span:hidden").show();
  });
  $(function(){
  // 匹配可见元素
    $("div:visible").addClass("GetFocus");
  });
  //以上方法依次分别测试
</script>
</head>
<body>
  <div>visible</div>
  <span>Hidden</span>
</body>
</html>

注意：:hidden选择器所选择的不仅包括样式为display:none;的元素，而且还包括属性type="hidden"和样式visibility:hidden的所有元素。

属性过滤选择器语法

选择器	功能	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取包含给定属性并且属性值为给定值的元素	元素集合
[attribute!=value]	获取包含给定属性并且属性值不为给定值的元素	元素集合
[attribute^=value]	获取包含给定属性并且属性值以给定值开头的元素	元素集合
[attribute$=value]	获取包含给定属性并且属性值以给定值结尾的元素	元素集合
[attribute*=value]	获取包含给定属性并且属性值包含给定值的元素	元素集合
[selector1][selector2][selectorN]	获取匹配多个属性过滤选择器的元素	元素集合

属性过滤选择器依据元素的某个属性获取元素。

示例6：

功能描述：在页面中，增加4个div标记，并设置不同的ID和Title属性值，然后通过不同的属性过滤选择器获取所指定的元素集合，并显示在页面中。
实现代码：

<!doctype  html>
<html>
<head>
<meta  charset="utf-8"/>
<title>使用属性过滤选择器</title>
<style  type="text/css">
 body{font-size:14px;text-align:center;}
 div{
     float:left;border:1px  solid #ccc;margin:8px;width:65px;height:65px;display:none;
 }
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
    //获取包含指定属性的元素
     $("div[title]").show(3000);
  });
  $(function(){
   //获取包含指定属性并且属性值为指定值的元素
     $("div[title='A']").show(3000);
  });
  $(function(){
   //获取包含指定属性并且属性值不为指定值的元素
     $("div[title!='A']").show();
  });
  $(function(){
   //获取包含指定属性并且属性值以指定值开头的元素
     $("div[title^='A']").show(3000);
  });
  $(function(){
   //获取包含指定属性并且属性值以指定值结尾的元素
     $("div[id$='D']").show(3000);
  });
  $(function(){
   //获取包含指定属性并且属性值包含给定值的元素
     $("div[id*='div']").show(3000);
  ]);
  $(function(){
   //获取匹配多个属性过滤器的元素
    $("div[title^='A'][title*='B']").show(3000);
  });
  //以上方法依次分别测试
</script>
</head>
<body>
   <div  id="divID">ID</div>
   <div  title="A">Title  A</div>
   <div  id="divAB" title="AB">ID<br/>Title  AB</div>
   <div  title="AEC">Title  AEC</div>
</body>
</html>

注意：show()是jQuery库中的一个显示元素函数，括号中的参数表示显示时间，单位是毫秒。show(3000)表示用3000毫秒显示。

子元素过滤选择器语法

选择器	功能	返回值
:nth-child(eq \| even \| odd \| index)	获取所有父元素下特定位置的子元素，元素索引从1开始	元素集合
:first-child	获取所有父元素下的第一个子元素	元素集合
:last-child	获取所有父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下仅有一个的子元素	元素集合

示例7：

功能描述：在页面中，创建3个ul标记，前面两个标记中设置4个li,后一个ul标记中设置1个li，通过子元素过滤选择器获取指定的页面元素，并改变其选择后的状态。
代码实现：

<!doctype  html>
<html>
<head>
<meta  charset="utf-8"/>
<title>使用子元素过滤选择器</title>
<style  type="text/css">
  body{font-size:14px;text-align:center;}
  ul{list-style-type:none;padding:0px;}
  ul  li{height:23px;width:60px;line-height:23px;border-top:solid 1px  #eee;
         border-bottom:solid  1px  #eee;margin-bottom:5px;}
  .GetFocus{width:58px;border:thin  solid  #666;background-color:#eee;}
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
    //匹配每个父元素中指定位置的子元素
     $("li:nth-child(2)").addClass("GetFocus");
     $("li:nth-child(even)").addClass("GetFocus");
     $("li:nth-child(odd)").addClass("GetFocus");
  });
  $(function(){
   //匹配每个父元素的第一个子元素
     $("li:first-child").addClass("GetFocus");
  });
  $(function(){
   //匹配每个父元素的最后一个子元素
    $("li:last-child").addClass("GetFocus");
  });
  $(function(){
   //匹配每个父元素中仅有的一个子元素
    $("li:only-child").addClass("GetFocus");
  });
</script>
</head>
<body>
  <ul>
     <li>Item 1-0</li>
     <li>Item 1-1</li>
     <li>Item 1-2</li>
     <li>Item 1-3</li>
  </ul>
  <ul>
     <li>Item 2-0</li>
     <li>Item 2-1</li>
     <li>Item 2-2</li>
     <li>Item 2-3</li>
  </ul>
  <ul>
     <li>Item 3-0</li>
  </ul>
</body>
</html>

示例8：

功能描述：比较简单过滤选择器和子元素过滤选择器的区别。
代码实现：

<!doctype  html>
<html>
<head>
<meta  charset="utf-8"/>
<title>简单过滤选择器与子元素过滤选择器的比较</title>
<style  type="text/css">
  body{font-size:14px;text-align:center;}
  ul{list-style-type:none;padding:0px;}
  ul  li{height:23px;width:60px;line-height:23px;border-top:solid 1px  #eee;
         border-bottom:solid  1px  #eee;margin-bottom:5px;}
  .GetFocus{border:thin  solid  #666;background-color:#eee;}
  .GetFocusEven{background-color:yellow;}
  .GetFocusOdd{background-color:green;}
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
     //简单过滤选择器
    $(function(){
     	//获取第一个li元素
     	$("li:first").addClass("GetFocus");
     	//显示结果，只有Item  1-0被选中。元素索引从0开始
     	
     	//获取最后一个li元素
     	$("li:last").addClass("GetFocus");
     	//显示结果，只有Item 3-3被选中。元素索引从0开始
     	
     	//获取索引值为偶数的li元素
     	 $("li:even").addClass("GetFocusEven");
     	//获取所有索引值为奇数的Li元素
     	  $("li:odd").addClass("GetFocusOdd");
     	//显示结果，所有索引值为偶数，奇数的li元素都被选中，索引从0开始。
     	
     	//获取索引值为2的li元素
     	$("li:eq(2)").addClass("GetFocus");
     	//显示结果，只有Item  1-2被选中，索引值从0开始。
     });

     //子元素过滤选择器
     $(function(){
     	//获取所有父元素的第一个li子元素
     	$("li:first-child").addClass("GetFocus");
     	//显示结果，所有父元素的第一个li子元素都被选中。元素索引从0开始。
     	
     	//获取所有父元素的最后一个li元素
       $("li:last-child").addClass("GetFocus"); 
        //显示结果，所有父元素的最后一个Li元素都被选中，元素索引从0开始	。
        
       //获取所有父元素中索引值为偶数的li子元素
       $("li:nth-child(even)").addClass("GetFocusEven");
       //获取所有父元素中索引值为奇数的li子元素
       $("li:nth-child(odd)").addClass("GetFocusOdd");
       //显示结果，所有父元素中索引值为偶数，奇数的li子元素都被选中，索引从1开始。
       
       //获取所有父元素中指定位置上的li子元素
       $("li:nth-child(2)").addClass("GetFocus");
       //显示结果，所有父元素中索引值为2的li子元素都被选中，索引值从1开始。
    });
    //以上方法依次分别测试
</script>
</head>
<body>
  <ul>
     <li>Item 1-0</li>
     <li>Item 1-1</li>
     <li>Item 1-2</li>
     <li>Item 1-3</li>
  </ul>
  <ul>
     <li>Item 2-0</li>
     <li>Item 2-1</li>
     <li>Item 2-2</li>
     <li>Item 2-3</li>
  </ul>
  <ul>
     <li>Item 3-0</li>
     <li>Item 3-1</li>
     <li>Item 3-2</li>
     <li>Item 3-3</li>
  </ul>
</body>
</html>

总结：

a>简单过滤选择器 :first(或者first()方法)，:last(或者last()方法)和子元素过滤选择器 :first-child，:last-child的异同：

相同点：元素的索引值都是从0开始

不同点：:first和 :last只能获取第一个或者最后一个指定的元素，返回值为单个元素；而 :first-child和:last-child可以获取所有父元素中第一个或者最后一个指定的子元素，返回值为元素集合。

b>简单过滤选择器 :even，:odd和子元素过滤选择器 :nth-child(even | odd)的异同：

相同点：都可以获取所有索引值为偶数或者奇数的指定元素，返回值都为元素集合

不同点：:even，:odd的元素索引值从0开始，而:nth-child(even |odd)的索引值从1开始。

c>简单过滤选择器 :eq(index)和子元素过滤选择器 :nth-child(index) 的异同：

相同点：无

异同点：:eq(index)只能获取指定位置上的指定元素，索引值从0开始，返回值是单个元素。而:nth-child(index)可以获取所有父元素中指定位置上的指定子元素，索引值从1开始，返回值是元素集合。

表单对象属性过滤选择器语法

选择器	功能	返回值
:enabled	获取表单中所有启用的元素	元素集合
:disabled	获取表单中所有禁用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中的option元素	元素集合

表单对象属性过滤选择器通过表单中的某个对象的属性特征获取该类元素。

示例9：

功能描述：在一个表单中，创建两个文本框对象，再放置两个复选框对象，一个设置成被选中状态，另一个设置成未选中状态。同时新建一个下拉列表对象，并选中其中两项，通过表单对象属性过滤选择器获取某指定元素，并处理该元素。
代码实现：

<!doctype  html>
<html>
<head>
<meta  charset="utf-8"/>
<title>使用表单对象属性过滤选择器</title>
<style  type="text/css">
  body{font-size:14px;text-align:center;}
  select{height:65px;}
  .clsIpt{width:100px;padding:3px;}
  .GetFocus{border:1px solid red;background-color:green;}
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
   $(function(){
     //获取表单中所有启用的input元素
      $("input:enabled").addClass("GetFocus");
     //获取表单中所有不可用的input元素
      $("input:disabled").addClass("GetFocus");
     //获取表单中所有被选中的input元素
      $("input:checked").addClass("GetFocus");
     //获取表单中所有被选中的option元素
      $("#span2").html("选中项是:"+$("option:selected").text());
     //以上方法依次分别测试。由于checkbox在IE和firefox,chrome下显示不一致，所以以上方法在不同浏览器中效果不同。
    });
</script>
</head>
<body>
  <form id="form1" style="width:241px;">
     <div  id="divA">
            <input type="text" value="可用的文本框" class="clsIpt"/>
            <input type="text" value="不可用的文本框" disabled="disabled" class="clsIpt"/>
     </div>
     <div  id="divB">
            <input type="checkbox" checked="checked" value="1"/>选中
            <input type="checkbox" value="0"/>未选中
     </div>
     <div id="divC">
            <select  multiple="multiple">
               <option  value="0">Item0</option>
               <option  value="1" selected="selected">Item1</option>
               <option  value="2">Item2</option>
               <option  value="3" selected="selected">Item3</option>
            </select>
            <span id="span2"></span>
     </div>
  </form>
</body>
</html>

表单选择器语法

选择器	功能	返回值
:input	获取表单中所有的input,textarea,select元素	元素集合
:text	获取表单中的所有单行文本框	元素集合
:password	获取表单中所有的密码框	元素集合
:radio	获取表单中所有的单选按钮	元素集合
:checkbox	获取表单中所有的复选框	元素集合
:submit	获取所有的提交按钮	元素集合
:image	获取所有图像域	元素集合
:reset	获取所有的重置按钮	元素集合
:button	获取表单中的所有普通按钮（type="button"）	元素集合
:file	获取表单中的所有文件域	元素集合

示例10：

功能描述：在一个页面表单中，创建11种常见的表单对象，根据表单过滤选择器，先显示出所有表单对象，然后显示各种不同的表单对象。
实现代码：

<!doctype  html>
<html>
<head>
<meta  charset="utf-8"/>
<title>使用表单选择器</title>
<style type="text/css">
  body{font-size:14px;text-align:center;}
  form{width:241px;}
  textarea,button,input,span,select{display:none;}
  .btn{border:1px  solid #eee;padding:2px;width:60px;}
  .txt{border:#eee solid  1px;padding:3px;}
  .img{padding:2px;border:1px solid #ccc;}
  .div{border:#ccc 1px solid;background-color:#eee;padding:5px;}
</style>
<script  src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
  $(function(){
           //获取表单中的所有元素
            $("#form1 div").html("共找到input类型元素"+$("#form1 :input").length+"个");
            $("#form1 div").addClass("div");
          //获取所有单行文本框
            $("#form1 :text").show(3000);
          //获取所有密码框
            $("#form1 :password").show(3000);
          //获取所有单选按钮
            $("#form1 :radio").show(3000);
            $("#form1 #span1").show(3000);
          //获取所有复选框
            $("#form1 :checkbox").show(3000);
            $("#form1 #span2").show(3000);
          //获取所有提交按钮
            $("#form1 :submit").show(3000);
          //获取所有图像域
            $("#form1 :image").show(3000);
          //获取所有重置按钮
            $("#form1 :reset").show(3000);
          //获取所有按钮
            $("#form1 :button").show(3000);
           //获取所有文件域
            $("#form1 :file").show(3000);
          //以上方法依次分别测试
    });
</script>
</head>
<body>
   <form id="form1">
      <textarea  class="txt">TextArea</textarea>
      <select><option value="0">Item 0</option></select>
      <input  type="text" value="text"  class="txt"/>
      <input  type="password"  value="password"  class="txt"/>
      <input type="radio"/><span id="span1">Radio</span>
      <input  type="checkbox"/><span  id="span2">checkbox</span>
      <input  type="submit"  value="submit"  class="btn"/>
      <input  type="image"  title="image"  src="D:\desktop\临时图片\h4-slide.png" class="img"/>
      <input  type="reset"  value="reset"  class="btn"/>
      <input  type="button"  value="button"  class="btn"/>
      <input  type="file"  title="fifle"   class="txt"/>
      <div  id="divshow"></div>
   </form>
</body>
</html>

jQuery选择器小结：与传统javascript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下两个方面：

代码更简单：在jQuery库中封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松，简单几行代码就可以实现较为复杂的功能。
完善的检测机制：在传统的javascript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件。如果该元素在页面中不存在或者被前面的代码所删除，那么浏览器将提示运行出错，影响后续代码的执行。因此，在javascript代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。使用jQuery选择器获取页面元素不需要检测页面元素是否存在，且页面正常执行。

综合示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>综合示例</title>
	<style  type="text/css">
	   body{font-size:14px;font-family:"微软雅黑";}
	   #contain{margin:0  auto;border:#000  thin  solid;width:339px;padding:8px;}
	   #title{overflow:hidden;}
	   h1{float:left;margin:0px;font-size:20px;cursor:pointer;}
	   img{float:right;cursor:pointer;margin-top:2px;}
	   ul{list-style:none;overflow:hidden;padding:0px;}
	   li{float:left;width:113px;}
       #link{overflow:hidden;}
       #link  a{float:right;}
	</style>
	<script  src="jquery-3.1.1.min.js"></script>
	<script>
	    $(document).ready(function(){//页面加载事件
	    	$("#title").click(function(){//标题单击事件
	    		if($("#content").is(":visible")||$("#link").is("visible")){//判断是否可见
	    			$("#content").css("display","none");//如果可见则隐藏
	    			$("#link").css("display","none");
	    			$("#title>img").attr("src","down.png");//改变图片路径
	    			$("#title>h1").attr("title","单击展开分类");//改变title属性
	    			$("#title>img").attr("title","单击展开分类");
	    		}
	    		else{
	    			$("#content").show();//如果不可见则显示
	    			$("#link").show();
	    			$("#title img").attr("src","top.png");//改变图片路径
	    			$("#title>h1").attr("title","单击收起分类");//改变title属性
	    			$("#title>img").attr("title","单击收起分类");
	    		}
	    	});
	    	$("#link  a").click(function(){
	    		if($("#link  a").text()=="简化"){//判断文本
	    		$("#content ul>li:gt(5)").hide();//隐藏元素
	    		$("#link a").text("更多");//改变文本
	    		$("#link a").attr("title","单击展开全部分类");//改变title属性
	    	     }
	    	     else{
	    	     	$("#content ul li:gt(5)").show();//显示元素
	    	     	$("#link a").text("简化");//改变文本
	    	     	$("#link a").attr("title","单击收起部分分类");//改变title属性
	    	     }
	    	});
	    });
	</script>
</head>
<body>
	<div id="contain">
		<div id="title">
			<h1  title="单击收起分类">图书分类</h1>
			<img src="top.png" alt="收缩小图标" title="单击收起分类"/>
		</div>
		<div id="content">
			<ul>
				<li><a href="#">小说<i>（1110）</i></a></li>
				<li><a href="#">文艺<i>（230）</i></a></li>
				<li><a href="#">青春<i>（1430）</i></a></li>
				<li><a href="#">少儿<i>（1560）</i></a></li>
				<li><a href="#">生活 <i>（870）</i></a></li>
				<li><a href="#">社科<i>（1460）</i></a></li>
				<li><a href="#">管理<i>（1450）</i></a></li>
				<li><a href="#">计算机<i>（1780）</i></a></li>
				<li><a href="#">教育<i>（930）</i></a></li>
				<li><a href="#">工具书<i>（3450）</i></a></li>
				<li><a href="#">引进版<i>（980）</i></a></li>
				<li><a href="#">其他类<i>（3230）</i></a></li>
			</ul>
		</div>
		<div id="link">
			<a href="#" title="单击收起部分分类">简化</a>
		</div>
	</div>
</body>
</html>

初始效果:

单击标题或者小图标后效果（再次单击后展开）：

单击“简化”后效果（再次单击后展开）：

转载于:https://my.oschina.net/ygys/blog/782606

chenpi0623

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器

可以将jQuery选择器分为：基本选择器，层次选择器，过滤选择器，表单选择器四大类。其中，过滤选择器又可分为：简单过滤选择器，内容过滤选择器，可见性过滤选择器，属性过滤选择器，子元素过滤选择器，表单对象属性过滤选择器6种。基本选择器语法 ...
复制链接

扫一扫