jQuery 选择器



  • jQuery选择器

    jQuery选择器是jQuery库中最重要的部分之一。
    jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
    jQuery选择器用于根据名称,id,类,类型,属性,属性值等“查找”(或选择)HTML元素。 它基于现有的CSS选择器,此外,它还有一些自己的自定义选择器。
    jQuery中的所有选择器都以美元符号和括号开头:$()。
  • 元素选择器

    jQuery元素选择器根据元素名称选择元素。
    您可以选择页面上的所有 <p>元素,如下所示:
       
      $("p")
    
    示例当用户点击按钮时,所有<p>元素都将被隐藏:
       
     <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
          $("button").click(function(){
            $("p").hide();
          });
        });
       </script>
     </head>
    
    
  • #id选择器

    jQuery #id选择器使用HTML标记的id属性来查找特定元素。
    id在页面中应该是唯一的,因此当您想要查找单个唯一元素时,应使用#id选择器。
    要查找具有特定id的元素,请写入哈希字符,后跟HTML元素的id:
         
      $("#test")
    
    示例当用户点击按钮时,将隐藏id=“test”的元素:
       
         <head>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            $(document).ready(function(){
              $("button").click(function(){
                $("#test").hide();
              });
            });
           </script>
         </head>
    
  • .class选择器

    jQuery .class选择器查找具有特定类的元素。
    要查找具有特定类的元素,请编写句点字符,后跟类的名称:
         
      $(".test")
    
    示例当用户点击按钮时,将隐藏class=“test”的元素:
       
        <head>
           <script type="text/javascript" src="jquery.js"></script>
           <script type="text/javascript">
           $(document).ready(function(){
             $("button").click(function(){
               $(".test").hide();
             });
           });
          </script>
        </head>
    
  • jQuery选择器的更多示例

    句法 描述
    $("*") 选择所有元素 尝试一下
    $(this) 选择当前的HTML元素 尝试一下
    $("p.intro") 使用class =“intro”选择所有<p>元素 尝试一下
    $("p:first") 选择第一个<p>元素 尝试一下
    $("ul li:first") 选择第一个<ul>的第一个<li>元素 尝试一下
    $("ul li:first-child") 选择每个<ul>的第一个<li>元素尝试一下
    $("[href]") 选择具有href属性的所有元素尝试一下
    $("a[target='_blank']") 选择目标属性值等于“_blank”的所有<a>元素尝试一下
    $("a[target!='_blank']") 选择目标属性值等于“_blank”的所有<a>元素尝试一下
    $(":button") 选择type =“button”的所有<button>元素和<input>元素尝试一下
    $("tr:even") 选择所有偶数<tr>元素尝试一下
    $("tr:odd") 选择所有奇数<tr>元素尝试一下
    有关所有jQuery选择器的完整参考,请转到我们的jQuery选择器参考手册