002-jQuery选择器-CFANZ编程社区

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <!-- <script src="js/my_jquery_functions.js"></script> -->
  </head>
  <!-- 
    jQuery选择器
      jQuery选择器允许您对HTML元素组或单个元素进行操作
      jQuery选择器基于元素的id,类，类型，属性，属性值等“查找”，或者选择HTML元素。
      它基于已经存在的CSS选择器，除此之外，他还有一些自定义的选择器
      jQuery中所有选择器都以美元符号开头$() $(function(){});
    元素选择器
      jQuery元素选择器基于元素名选取元素
      在页面中选取所有<p>元素
      $("p")
      实例
      用户点击按钮之后，所有的<P元素隐藏起来>
    #id 选择器
      jQuery#id选择器通过HTML元素的id属性选取指定的元素
      页面中元素的id应该是唯一的，所以你要在页面中选取唯一的元素需要通过
      #id选择器
      通过id选取元素语法如下
      $("#test")
      实例
      当用户点击按钮之后,有id="test"属性的元素将被隐藏
    #.class选择器
      jQuery类选择器可以通过指定的class查找元素
      语法如下
      $(".test")
      实例
      用户点击按钮后所有带有class="test"属性的元素都隐藏
      更多实例
      $("*") 选取所有实例
      $("this") 选取当前实例
      $("p.intro")选取class为intro的<p>元素
      $("p:first")选取第一个<p>元素
      $("ul li:first")选取第一个ul元素的第一个li元素
      $("ul li:first-child")选取每一个url元素的第一个<li>元素
      $("[href]")选取带有href属性的元素
      $("a[target="_blank"]")选取所有target属性值等于_blank的元素
      $("a[target!="_blank"]")选取所有target属性值不等于_blank的元素
      $(":button")选取所有type="button"的<input>元素和<button元素>
    独立文件中使用jQuery函数
      如果您的网站包含许多页面,并且您希望您的jQuery函数易于维护,那么请把您的jQuery函数放在独立的js文件中
      当我们在教程中演示jQuery时,会将函数直接添加到<head部分>.不过,把他们放到一个单独的文件中会更好,
      就像这样
      
   -->
  <body>
    <button id="button">p元素</button>
    <button id="button1">#test</button>
    <button id="button2">.class=test</button>
    <button id="button3">type=button的button和input</button>
    <button id="button4">p class="intro"</button>
    <button id="button5">a[target='_blank']</button>
    <input type="button">
    <h1>这是一个标题</h1>
    <ul>
      <li id="test">你点我我就消失</li>
      <li class="test">你点我我就消失</li>
      
    </ul>
    <p>如果你按按钮我就消失</p>
    <p>如果你按按钮我真的消失</p>
    <p>你按了按钮就真的见不到我了</p>
    <p class="intro">这是p.intro</p>
    <a target="_blank">这是a[target="_blank"]</a>
  </body>

</html>

单独的JS代码如下

$(document).ready(function() {
  $("#button").click(function() {
    $("p").hide();
  });


  $("#button1").click(function() {
    $("#test").hide();
  });

  $("#button2").click(function() {
    $(".test").hide();
  });
  $("#button3").click(function() {
    $(":button").hide();
  });

  $("#button4").click(function() {
    $("p.intro").hide();
  });
  $("#button5").click(function() {
    $("a[target='_blank']").hide();
  });
});