上一节:
下一节:

  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选择器参考手册。
上一节:
下一节: