jquery 选择器

一、基础选择器

    1、id 选择器  通过元素的id属性去查找一个元素

        var $dom=$("#id属性值");

    2、元素选择器  根据元素名称查找

       var $dom=$("element");

    3、类选择器  通过类(.class)属性查找 

       var $dom=$(".class");

    4、* 选择器 匹配所有的元素

       var $dom=$("*"); 匹配html页面中所有元素 包括<head>、<body>、<script>

   var $dom=$("div *");匹配div元素下的所有子元素(包括孙子.... 元素); *号前一定要有空格

   实践证明:由于使用*选择器获取的是全部元素,因此,有些浏览器将会比较缓慢,这个选择器也需要谨慎使用。

   5、seleN选择器  精确的选择任意多个指定的元素

    var $dom=$(".red,.green");  选择了class='red'、class='green'的元素

 6、层次性选择器   常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素

       var $dom=$("div span"); 获得div下的span元素(即使span元素是孙子... 元素)

 7、child选择器 所选择的目标是子集元素,相当于一个家庭中的子辈们,但不包括孙辈

   var $dom=$("div> span");获得div下的子元素span(不是所有的span)

 8、prev + next选择器  查找与“prev”元素紧邻的下一个“next”元素

   var $dom=$('div + p');获得div 紧邻的下一个p元素

  9、prev ~ siblings选择器  后者则获取prev 元素后面全部相邻的元素

  var $dom=$('div~span');获得div后面紧邻的所有span元素

 二、过滤选择器

 1、first过滤器   获得一组相同标签元素中的第1个元素

    var  $dom=$("li:first"); 获得第一个li元素

  2、last过滤器   获得一组相同标签中最后一个元素

    var  $dom=$("li:last"); 获得最后一个li元素

  3、eq(index)过滤选择器  从一组标签元素数组中,灵活选择任意的一个标签元素

       var $dom=$("li:eq(3)");  获得第四个li元素(下标从0开始)

  4、contains(text)过滤选择器  按照文本内容来查找一个或多个元素

       var $dom=$("li:contains('jQuery')");获得li元素集合内容中有jQuery文本的li元素

 5、has(selector)过滤选择器  获取选择器中包含指定元素名称的全部元素

      var $dom=$("li:has('label')"); 获取li中包含元素label(所有包括孙子...元素)的所有li元素

 6、hidden过滤选择器  获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden、style="display:none" 的元素

      var $dom=$('input:hidden');  获得type属性为hidden的input元素

      var $dom=$('p:hidden');    获得样式为 display=none 的p元素

 7、visible过滤选择器    获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。

     var $dom=$("li:visible");  获取display!=none 的所有li元素

 8、[attribute=value]属性选择器  获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。

     var $dom=$("li[title='蔬菜']");  获取 属性title='蔬菜' 的所有 li 元素

 9、[attribute!=value]属性选择器  获取不包含属性名,或者与属性名和属性值不相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。

      var $dom=$("li[title!='蔬菜']");  获取 属性title!='蔬菜' 的所有 li 元素

 10、[attribute*=value]属性选择器  获取属性值中包含指定内容的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。

    var $dom=$("li[title*='果']");  获取 属性title 值中有‘果’ 字 的所有 li 元素

11、:first-child子元素过滤选择器  获取每个父元素中返回的首个子元素,它是一个集合

        var $dom= $("li:first-child"); 获得几组列表中 每组的 第一个 li元素

12、:last-child子元素过滤选择器  获取每个父元素中返回的最后一个子元素,它是一个集合

        var $dom= $("li:last-child"); 获得几组列表中 每组的 最后一个 li元素

三、表单选择器

  1、input表单选择器  获取表单内所有元素

       var $dom=$("form:input"); 获取表单内所有元素  不仅包括所有<input>标记的表单元素,而且还包括<textarea>、<select> 和 <button>标记的表单元素

  2、text表单文本选择器  获取表单中全部单行的文本输入框元素

      var $dom=$("form :text");

  3、password表单密码选择器  获取表单中全部的密码输入文本框元素

      var $dom=$("form :password");

  4、:radio单选按钮选择器  获取表单中的全部单选按钮元素

        var $dom=$("form  :radio");

  5、checkbox复选框选择器  获取表单中的复选框元素

        var $dom=$("form  :checkbox");

  6、submit提交按钮选择器  选择器可获取表单中的这个提交按钮元素

      var $dom=$("form   input:submit");

  7、image图像域选择器   选择器可以快速获取表单中的img元素

      var $dom=$("form   :image");

 8、button表单按钮选择器  获取且只能获取“type”属性值为“button”的<input>和<button>这两类普通按钮元素。

      var $dom=$("form :button");

 9、checked选中状态选择器  获取复选框、单选按钮元素,选中时“checked”属性值为“checked”

      var $dom=$("form :checked");

10、:selected选中状态选择器  获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

       var $dom=$("#frmTest :selected");

原文地址:https://www.cnblogs.com/jalja/p/4682717.html