jQuery是什么苍柏？能干什么？

• jQuery是一款開(kāi)源免費(fèi)的JS 框架荚恶，對(duì)JS進(jìn)一步封裝
• 沒(méi)有改進(jìn)語(yǔ)法撩穿，只是讓我們開(kāi)發(fā)者，在操作頁(yè)面元素谒撼、給頁(yè)面元素綁定事件食寡、發(fā)送AJAX請(qǐng)求等方面，代碼可以寫(xiě)得更簡(jiǎn)潔一些

jQuery版本介紹

• jQuery1.x：經(jīng)典版本廓潜，兼容 IE6抵皱、7、8辩蛋。
• jQuery2.0：改進(jìn)版本呻畸，后續(xù)版本將不再支持 IE6、7堪澎、8瀏覽器

jQuery的基本使用

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

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

  // $與jQuery變量作用一致
  console.log($ === jQuery);//true
  
  // Dom對(duì)象
  let btn = document.getElementById("btn");
  console.log(btn);
  
  // jQuery對(duì)象
  let $btn = $("#btn");
  console.log($btn);
  
  // Dom對(duì)象轉(zhuǎn)換為jQuery對(duì)象
  console.log($(btn));
  
  // jQuery對(duì)象轉(zhuǎn)換為Dom對(duì)象
  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對(duì)象.size(); // 獲取 jQuery 中包含元素的個(gè)數(shù)<br/>
      jQuery對(duì)象.val(); // 操作元素的 value 屬性<br/>
      jQuery對(duì)象.html(); // 操作元素內(nèi)的 HTML 代碼<br/>
      jQuery對(duì)象.text(); // 操作元素內(nèi)的文本擂错，忽略 HTML 標(biāo)簽<br/>
      jQuery對(duì)象.css(); // 操作元素的 style 屬性
  </div>
  
  <hr/>
  
  <div>
      <p>
          問(wèn)題 1：獲取 jQuery 中包含 DOM 的個(gè)數(shù)味滞，比如獲取頁(yè)面上 p 元素的個(gè)數(shù)
      </p>
      <p>
          問(wèn)題 2：獲取 id 為 username 元素的 value 屬性值
      </p>
      <p>
          問(wèn)題 3：設(shè)置 id 為 username 元素的 value 屬性值為"叩丁狼教育"
      </p>
      <p>
          問(wèn)題 4：對(duì)比 h1 元素的內(nèi)容和純文本的區(qū)別
      </p>
      <p>
          問(wèn)題 5：把 h1 元素內(nèi)容的顏色改為黃色
      </p>
  </div>
  

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

• jQuery的常用選擇器

  <div id="msg">使用 ID 選擇器獲取當(dāng)前 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>
          問(wèn)題 1：獲取 id 為 msg 的元素的內(nèi)容
      </p>
      <p>
          問(wèn)題 2：獲取所有的 li 元素并打印數(shù)量
      </p>
      <p>
          問(wèn)題 3：獲取所有 class 為 selected 的元素，字體顏色改為 red
      </p>
  </div>
  

  // 問(wèn)題 1：獲取 id 為 msg 的元素的內(nèi)容
  console.log($("#msg").text());
  
  // 問(wèn)題 2：獲取所有的 li 元素并打印數(shù)量
  console.log($("li").size());
  
  // 問(wèn)題 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>
          問(wèn)題 1：獲取所有 ul 下的所有 li 元素昨凡，并打印分析結(jié)果
      </p>
      <p>
          問(wèn)題 2：獲取 id 為 myul 下的所有子 li 元素，并打印分析結(jié)果
      </p>
      <p>
          問(wèn)題 3：獲取所有 label 元素后的 input 元素蚁署，并打印分析結(jié)果
      </p>
      <p>
          問(wèn)題 4：獲取緊跟著 label 元素后的 input 元素便脊，并打印分析結(jié)果
      </p>
  </div>
  

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

• jQuery的過(guò)濾選擇器

  <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>
          問(wèn)題 1：獲取隱藏 input 的 value 屬性值, 不能使用根據(jù)元素名, 也不能通過(guò)給元素加
          id 屬性，再通過(guò) id 選擇器找
      </p>
      <p>
          問(wèn)題 2：獲取選中的 option
      </p>
  </div>
  

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

• jQuery事件綁定

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

  $("#btn1").click(function () {
      // this是Dom對(duì)象
      console.log(this);
  
      // 轉(zhuǎn)換為jQuery對(duì)象
      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é)點(diǎn)(插入子節(jié)點(diǎn))</legend>
          <input type="button" value="append" id="append"/>
      </fieldset>
  </form>
  
  <form>
      <fieldset>
          <legend>外部插入節(jié)點(diǎn)(插入兄弟節(jié)點(diǎn))</legend>
          <input type="button" value="after" id="after"/>
      </fieldset>
  </form>
  
  <form>
      <fieldset>
          <legend>刪除節(jié)點(diǎn)</legend>
          <input type="button" value="刪除所有子節(jié)點(diǎn)" id="empty"/>
          <input type="button" value="刪除節(jié)點(diǎn)" id="remove"/>
          <input type="button" value="恢復(fù)節(jié)點(diǎn)" id="resume"/>
      </fieldset>
  </form>
  

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

• jQuery屬性操作

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

  <input id="btn" type="button" value="點(diǎn)我"/>
  <form>
      <fieldset>
          <legend>屬性操作</legend>
          <input type="button" value="獲取屬性值" id="getAttr"/>
          <input type="button" value="設(shè)置屬性值" 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());
  });
  
  // 設(shè)置屬性值
  $("[id=setAttr]").click(function () {
      $("legend").val("禹王穆專(zhuān)屬");
  });
  
  // 添加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"));
  });