jQuery:常用 jQuery方法，$()的四種類型參數(shù)，jQuery對象轉(zhuǎn)js對象方法實(shí)列

前言:什么是jQuery？

jQuery 是一個快速、小型且功能豐富的 JavaScript 庫。它使像HTML文檔穿越和操作，事件處理，動畫和Ajax的東西簡單得多，一個易于使用的API，適用于許多瀏覽器。jQuery 結(jié)合了多功能性和可擴(kuò)展性，改變了數(shù)百萬人編寫 JavaScript 的方式。

如導(dǎo)入jQuery？

一.jQuery：$()的四種類型參數(shù)

①$(選擇器, 上下文)演示

②$(js原生對象)演示

在$()里面放入js原生代碼可以轉(zhuǎn)換為jQuery代碼，也就是說這個時候$()變成了一個轉(zhuǎn)換器也叫包裝器

③$(html文本)演示

可以在$()里面直接創(chuàng)建html元素，也可以在里面添加css行內(nèi)樣式

④$(回調(diào)函數(shù))演示

如果這個html元素在jquery對象后面直接用選擇器選中html元素是獲取不到的，要使用函數(shù)調(diào)用得方式才行

代碼塊

 <!-- 引入jQuery cdn文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      //1.$()上下文和選擇器
      //我們來用類選擇器選著一下item跟換背景顏色
      $(".item").css("background", "lightgreen");
      //2.$(原生對象)，$包裝器
      $(document.body).css("background", "#ccc");
      //3.$(html文本)，創(chuàng)建dom元素，直接包裝成了一個jquery對象
      $(
        "<p style='color: red;font-size:1.2em;'>祖國的綠水青山常在</p>"
      ).insertBefore(".list");
      //4.$()回調(diào)函數(shù)演示,如果這個html元素在jquery對象后面直接用選擇器選中html元素是獲取不到的，要使用函數(shù)調(diào)用得方式才行
      $(() => {
        $("h3").css("color", "red");
      });
      //   $("h3").css("color", "red");
    </script>
    <h3>同學(xué)們大家好</h3>

二.jQuery對象轉(zhuǎn)js對象方法實(shí)例

因?yàn)?code>jQuery的局限性,很多場景下需要將jQuery對象轉(zhuǎn)為js原生對象來調(diào)用js功能完成操作，看一下原生對象是什么樣子

接下來用數(shù)組的方式獲取到單個item，再用js原生對象進(jìn)行操作

然后再用jquery get方法訪問一下item對象看看

我們再用這些方法進(jìn)行訪問到ul給他設(shè)置樣式

代碼塊

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      //用數(shù)組的方式進(jìn)行對jquery對象和js對象之間的轉(zhuǎn)換
      //首先拿到item的原生對象，然后用數(shù)組的方式獲取到單個item，再用js原生對象進(jìn)行操作
      //看一下原生對象是什么樣子
      //   console.log($(".list,.item"));
      //js對象方法
      $(".list,.item")[1].style.backgroundColor = "yellow";
      //jquery對象方法
      $(".list,.item").get(3).style.backgroundColor = "lightgreen";
      //訪問ul進(jìn)行js設(shè)置樣式
      $(".list")[0].style.border = "2px solid";
      //訪問ul進(jìn)行jquery設(shè)置樣式
      //   $(".list").css("backgroundColor", "#ccc");
    </script>

三.常用 jQuery方法

一.attr()

①attr(name):訪問

attr可以訪問到標(biāo)簽屬性里面的內(nèi)容

②attr(name,value):標(biāo)簽元素屬性獲取和設(shè)置

attr訪問到method是post然后第二個參數(shù)跟改為get

③removeAttr(name):標(biāo)簽元素屬性刪除

可以看到用戶登錄原始狀態(tài)是白色，因?yàn)轭愄砑恿薱ss樣式屬性，如果用removeAttr刪除class屬性就會變回原始狀態(tài)

代碼塊

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // attr():獲取/設(shè)置元素屬性
      // attr(name):getter
      // attr(name,value): setter
      // removeAttr(name): 刪除屬性
      //-----------------------------------
      // attr(name):getter
      let form = $(".form-ceshi > .forms");
      // attr(name,value): setter
      //查找里面的method屬性是什么
      //   console.log(form.attr("method"));
      //設(shè)置一下賬號默認(rèn)樣式
      form.attr("method", "get");
      //   console.log(form.attr("method"));
      // removeAttr(name): 刪除屬性
      $(".form-ceshi > p").removeAttr("class");
    </script>

二.css()

jQuery css（） 可以獲取到元素的計算樣式

①方法小知識

jQuery css（） 第二個值傳入函數(shù)實(shí)現(xiàn)隨機(jī)生成背景顏色

代碼塊

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // css(): 包括了行內(nèi)樣式的計算樣式
      // css(name): getter
      // css(name,value): setter
      // css(name,callback)
      //獲取表單的計算樣式寬度
      let form = $(".form-ceshi");
      console.log(form.css("width"));
      //讓表單隨機(jī)生成背景顏色
      form.css("background", () => {
        const color = ["lightpink", "lightyellow", "lime", "#ccc"];
        // Math.floor向下取整
        // Math.random獲取0-1隨機(jī)數(shù)
        // 生成一個隨機(jī)的數(shù)組下標(biāo), 0 - 3之間
        return color[Math.floor(Math.random() * color.length)];
      });
    </script>

三.val()

代碼塊

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // val():無參,默認(rèn)就是獲取控件元素(input,select...)的value屬性的值
      // val(param): 設(shè)置
      // val(callback)
      //給表單控件value賦值
      $("input:text").val("zwz@qq.com");
      //查看表單控件的value值
      console.log($("input:text").val());
    </script>

四.text()和html()

①text()

大家可以看到text（）不會解析html標(biāo)簽元素，只會單文本進(jìn)行傳輸

②html()

大家可以看到html() 可以解析html標(biāo)簽元素，而且還可以添加樣式

代碼塊

 <script>
      // text(): 讀/寫入文本, textContent
      //   $(".box").text("<p>大家晚上好呀！</p>");
      // html(): 讀/寫html文本, innerHTML
      $(".box").html("<p style ='color:red;'>大家晚上好呀！</p>");
    </script>

五.jQuery-class

①addClass()

②removeClass()

③toggleClass()

toggleClass 動態(tài)切換類是什么意思呢？ 就是如果有這個屬性就移除，沒有這個屬性就添加，自動切換。

代碼塊

 <p>祖國的綠水青山常在</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
      // jquery-class
      // 添加類:addClass() =>  原生寫法：classList.add()
      // 移除類:removeClass() => 原生寫法：classList.remove()
      // 動態(tài)切換類:toggleClass() => 原生寫法：classList.toggle()
      let p = $("p");
      //   添加類:addClass()
      p.addClass("item");
      //   移除類:removeClass()
      p.removeClass("item");
      //   動態(tài)切換類:toggleClass()
      p.toggleClass("item");
    </script>

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語：