jQuery是什么？能干什么？

• jQuery是一款開源免費的JS 框架，對JS進一步封裝
• 沒有改進語法，只是讓我們開發(fā)者，在操作頁面元素、給頁面元素綁定事件、發(fā)送AJAX請求等方面，代碼可以寫得更簡潔一些

jQuery版本介紹

• jQuery1.x：經(jīng)典版本，兼容 IE6、7、8。
• jQuery2.0：改進版本，后續(xù)版本將不再支持 IE6、7、8瀏覽器

jQuery的基本使用

• jQuery對象與Dom對象之間的轉(zhuǎn)換

  <button id="btn">按鈕</button>
  

  // $與jQuery變量作用一致
  console.log($ === jQuery);//true
  
  // Dom對象
  let btn = document.getElementById("btn");
  console.log(btn);
  
  // jQuery對象
  let $btn = $("#btn");
  console.log($btn);
  
  // Dom對象轉(zhuǎn)換為jQuery對象
  console.log($(btn));
  
  // jQuery對象轉(zhuǎn)換為Dom對象
  console.log($btn.get(0));
  

• jQuery的常用方法

  <h1 id="h1">做人<i>要低調(diào)</i></h1>
  
  <input type="text" id="username" value="wolfcode"/><br/><br/>
  <div>
      jQuery 常用方法:<br/>
      jQuery對象.size(); // 獲取 jQuery 中包含元素的個數(shù)<br/>
      jQuery對象.val(); // 操作元素的 value 屬性<br/>
      jQuery對象.html(); // 操作元素內(nèi)的 HTML 代碼<br/>
      jQuery對象.text(); // 操作元素內(nèi)的文本，忽略 HTML 標簽<br/>
      jQuery對象.css(); // 操作元素的 style 屬性
  </div>
  
  <hr/>
  
  <div>
      <p>
          問題 1：獲取 jQuery 中包含 DOM 的個數(shù)，比如獲取頁面上 p 元素的個數(shù)
      </p>
      <p>
          問題 2：獲取 id 為 username 元素的 value 屬性值
      </p>
      <p>
          問題 3：設置 id 為 username 元素的 value 屬性值為"叩丁狼教育"
      </p>
      <p>
          問題 4：對比 h1 元素的內(nèi)容和純文本的區(qū)別
      </p>
      <p>
          問題 5：把 h1 元素內(nèi)容的顏色改為黃色
      </p>
  </div>
  

  //問題 1：獲取 jQuery 中包含 DOM 的個數(shù)，比如獲取頁面上 p 元素的個數(shù)
  console.log($("p").size());
  
  //問題 2：獲取 id 為 username 元素的 value 屬性值
  console.log($("#username").val());
  
  //問題 3：設置 id 為 username 元素的 value 屬性值為"禹王穆好帥"
  $("#username").val("禹王穆好帥");
  
  //問題 4：對比 h1 元素的內(nèi)容和純文本的區(qū)別
  console.log($("h1").html());
  console.log($("h1").text());
  
  //問題 5：把 h1 元素內(nèi)容的顏色改為黃色
  $("#h1").css("color", "yellow");
  

• jQuery的常用選擇器

  <div id="msg">使用 ID 選擇器獲取當前 DIV元素</div>
  <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
  </ul>
  <ul id="myul">
      <li>item1</li>
      <li class="selected">item2</li>
      <li>item3</li>
      <li class="selected">item4</li>
  </ul>
  <hr/>
  <div>
      <p>
          問題 1：獲取 id 為 msg 的元素的內(nèi)容
      </p>
      <p>
          問題 2：獲取所有的 li 元素并打印數(shù)量
      </p>
      <p>
          問題 3：獲取所有 class 為 selected 的元素，字體顏色改為 red
      </p>
  </div>
  

  // 問題 1：獲取 id 為 msg 的元素的內(nèi)容
  console.log($("#msg").text());
  
  // 問題 2：獲取所有的 li 元素并打印數(shù)量
  console.log($("li").size());
  
  // 問題 3：獲取所有 class 為 selected 的元素，字體顏色改為 red
  $(".selected").css("color", "red");
  

• jQuery的層次選擇器

  <ul id="myul">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>
          <ul>
              <li>item1</li>
              <li>item2</li>
              <li>item3</li>
              <li>item4</li>
          </ul>
      </li>
  </ul>
  <label>LABEL1</label>
  <input type="text" value="text1"/>
  <input type="text" value="text2"/>
  <br/>
  <label>LABEL2</label>
  <input type="text" value="text3"/>
  <input type="text" value="text4"/>
  <br/>
  <label>
      LABEL3
      <input type="text" value="text5"/>
      <input type="text" value="text6"/>
  </label>
  <hr/>
  <div>
      <p>
          問題 1：獲取所有 ul 下的所有 li 元素，并打印分析結(jié)果
      </p>
      <p>
          問題 2：獲取 id 為 myul 下的所有子 li 元素，并打印分析結(jié)果
      </p>
      <p>
          問題 3：獲取所有 label 元素后的 input 元素，并打印分析結(jié)果
      </p>
      <p>
          問題 4：獲取緊跟著 label 元素后的 input 元素，并打印分析結(jié)果
      </p>
  </div>
  

  // 問題 1：獲取所有 ul 下的所有 li 元素，并打印分析結(jié)果
  console.log($("ul li"));
  
  // 問題 2：獲取 id 為 myul 下的所有子 li 元素，并打印分析結(jié)果
  console.log($("#myul > li"));
  
  // 問題 3：獲取所有 label 元素后的 input 元素，并打印分析結(jié)果
  console.log($("label ~ input"));
  
  // 問題 4：獲取緊跟著 label 元素后的 input 元素，并打印分析結(jié)果
  console.log($("label + input"));
  

• jQuery的過濾選擇器

  <input type="hidden" name="id" value="1">
  <select>
      <option value="1">Flowers</option>
      <option value="2" selected>Gardens</option>
      <option value="3">Trees</option>
  </select>
  <hr/>
  <div>
      <p>
          問題 1：獲取隱藏 input 的 value 屬性值, 不能使用根據(jù)元素名, 也不能通過給元素加
          id 屬性，再通過 id 選擇器找
      </p>
      <p>
          問題 2：獲取選中的 option
      </p>
  </div>
  

  // 問題 1：獲取隱藏 input 的 value 屬性值, 不能使用根據(jù)元素名, 也不能通過給元素加id 屬性，再通過 id 選擇器找
  console.log($("input[type=hidden]").val());
  
  // 問題 2：獲取選中的 option
  console.log($("option:selected").text());
  

• jQuery事件綁定

  <button id="btn1">btn1</button>
  

  $("#btn1").click(function () {
      // this是Dom對象
      console.log(this);
  
      // 轉(zhuǎn)換為jQuery對象
      console.log($(this));
  });
  

• jQueryDOM操作

  <span style="background-color : blue;color: red;" id="span">SPAN</span>
  <div id="div1" style="background-color: gray;">DIV1</div>
  <div id="div2" style="background-color: green;">DIV2</div>
  
  <ul id="ul">
      <li>item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
  </ul>
  
  <input id="btn" type="button" value="刪除我"/>
  
  <form>
      <fieldset>
          <legend>內(nèi)部插入節(jié)點(插入子節(jié)點)</legend>
          <input type="button" value="append" id="append"/>
      </fieldset>
  </form>
  
  <form>
      <fieldset>
          <legend>外部插入節(jié)點(插入兄弟節(jié)點)</legend>
          <input type="button" value="after" id="after"/>
      </fieldset>
  </form>
  
  <form>
      <fieldset>
          <legend>刪除節(jié)點</legend>
          <input type="button" value="刪除所有子節(jié)點" id="empty"/>
          <input type="button" value="刪除節(jié)點" id="remove"/>
          <input type="button" value="恢復節(jié)點" id="resume"/>
      </fieldset>
  </form>
  

  //父親加小兒子
  $("#append").click(function () {
      $("#div1").append($("#span"));
  });
  
  //哥哥加弟弟
  $("#after").click(function () {
      $("#div2").after($("#div1"));
  });
  
  //清空所有節(jié)點
  $("#empty").click(function () {
      $("#ul").empty();
  });
  
  //刪除自己 detach
  $("#btn").click(function () {
      console.log("我被刪除了...");
  });
  
  let $btn;
  //刪除節(jié)點
  $("#remove").click(function () {
      //$btn = $("#btn").remove();
      $btn = $("#btn").detach();
  });
  
  //恢復節(jié)點
  $("#resume").click(function () {
      $("#ul").after($btn);
  });
  

• jQuery屬性操作

  .other {
      background-color: orange;
      font-size: 20px;
  }
  .myBtn{
      background-color: red;
  }
  

  <input id="btn" type="button" value="點我"/>
  <form>
      <fieldset>
          <legend>屬性操作</legend>
          <input type="button" value="獲取屬性值" id="getAttr"/>
          <input type="button" value="設置屬性值" id="setAttr"/>
      </fieldset>
  </form>
  <form>
      <fieldset>
          <legend>CSS 操作</legend>
          <input type="button" value="添加CSS" id="addClass"/>
          <input type="button" value="刪除CSS" id="removeClass"/>
          <input type="button" value="輪換CSS" id="toggleClass"/>
          <input type="button" value="判斷CSS" id="hasClass"/>
      </fieldset>
  </form>
  <input type="checkbox" value="1" checked name="gender" id="gender" dataoption='{"name" : "蔣干"}' style="color: red; background: aqua" class="myBtn other" > 男
  

  // 獲取屬性值
  $("[id=getAttr]").click(function () {
      console.log($("legend").val());
  });
  
  // 設置屬性值
  $("[id=setAttr]").click(function () {
      $("legend").val("禹王穆專屬");
  });
  
  // 添加CSS
  $("#addClass").click(function () {
      $("legend").addClass("other");
  });
  
  // 刪除CSS
  $("#removeClass").click(function () {
      $("legend").removeClass("other");
  });
  
  // 輪換CSS
  $("#toggleClass").click(function () {
      $("legend").toggleClass("myBtn");
  });
  
  // 判斷CSS
  $("#hasClass").click(function () {
      console.log($("legend").hasClass("myBtn"));
  });