jQuery基礎與js的區別

Love_YMM發表於2020-11-01
jQueryJS

jQuery初識

jQuery基礎知識

js的程式碼比較多而且有相容性，所以後面有團體把js進行了封裝，生成了js的庫叫jquery。

jQuery又是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫

jQuery入口函式

 $(document).ready(function(){
        // 執行程式碼
    });
    或者簡寫為：
    $(function(){
        // 執行程式碼
    });

js入口函式：window.onload = function () {…}

jQuery選擇器

基本選擇器

  1. 標籤選擇器（元素選擇器）
    語法： $("html標籤名")
    獲得所有匹配標籤名稱的元素
  2. id選擇器
    語法： $("#id的屬性值")
    獲得與指定id屬性值匹配的元素
  3. 類選擇器
    語法： $(".class的屬性值")
    獲得與指定的class屬性值匹配的元素
  4. 並集選擇器：
    語法： $("選擇器1,選擇器2....")
    獲取多個選擇器選中的元素之和
  5. 全部選擇器
    語法： $("*")
    獲取此頁面中的所有元素

單個屬性設定：

$("#box").css("width","100px");
$("#box").css("height","100px");
$("#box").css("background-color","red");

多個屬性設定：

$("#box").css({
    "width":"100px",
    "height":"100px",
    "background-color":"red"
})

層級選擇器

分為後代選擇器和子代選擇器

名稱用法
子代選擇器$(“ul>li”)
後代選擇器$(“ul li”)
  1. 後代選擇器
    語法： $("A B ")
    選擇A元素內部的所有B元素
  2. 子選擇器
    語法： $("A > B")
    選擇A元素內部的所有直接子元素B
  3. 親弟弟選擇器
    語法： $("A + B ")
    選擇緊接在A元素之後同級B元素
  4. 弟弟選擇器
    語法： $("A ~ B")
    選擇A元素之後的所有同級B元素

屬性選擇器

  1. 屬性名稱選擇器
    語法： $("A[屬性名]")
    包含指定屬性的選擇器

  2. 屬性選擇器
    語法： $("A[屬性名='值']")
    包含指定屬性等於指定值的選擇器

                        可選關係運算子：
                     !=  :屬性值不等於該值
                    ^=  :屬性值以該值開頭
                     $=  :屬性值以該值結尾
                     *=  :屬性值中包含該值

  3. 複合屬性選擇器
    語法： $("A[屬性名='值'][]...") 包含多個屬性條件的選擇器,必須都符合

表單選擇器

  1. :input
  2. :text
  3. :password
  4. :radio
  5. :checkbox
  6. :submit
  7. :image
  8. :reset
  9. :button
  10. :file

篩選選擇器

<body>
    <div id="box">
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
    </div>
    <script src="jquery.min.js"></script>
    
    <script>$("li:eq(2)").css("color","red");</script>    
    
</body>
</html>

在這裡插入圖片描述

JQuery操作DOM

屬性操作

1.使用attr()

獲取: 物件.attr(“屬性名”) //返回當前屬性值，底層使用的是getAttribute

注意：此種方式不能獲取value屬性的實時資料，使用物件名.val()進行獲取

修改：物件.attr(“屬性名”,“屬性值”);

刪除：removeAttr(“屬性名”) ：刪除該屬性的值

2.使用prop()

使用方法同attr()一致，底層是property

3.attr和prop區別

如果操作的是元素的固有屬性，則建議使用prop，某些特定屬性attr獲取不到

如果操作的是元素自定義的屬性，則建議使用attr

內容操作

獲取：

  1. html(): 獲取元素內的標籤體內容 ，底層呼叫的innerHTML
  2. text(): 獲取元素的標籤體純文字內容 ，底層呼叫的innerText
  3. val()： 獲取元素的value屬性值
    修改：
  4. html(“新的內容”): 新的內容會將原有內容覆蓋，HTML標籤會被解析執行
  5. text(“新的內容”): 新的內容會將原有內容覆蓋，HTML標籤不會被解析執行
  6. val(“新的內容”)： 設定元素的value屬性值

樣式操作

1、使用css()

物件.css(“屬性名”) //返回當前屬性的樣式值

物件.css(“屬性名”,“屬性值”) //增加、修改元素的樣式

物件.css({“樣式名”:“樣式值”,“樣式名”:“樣式值”……})//使用json傳參，提升程式碼書寫效率。

2、使用addClass()

物件.addClass(“類選擇器名”) //追加一個類樣式

物件.removeClass(“類選擇器名”) //刪除一個指定的類樣式

物件.toggleClass(“類選擇器名”): //切換class屬性

JS和jQuery的區別

1 定位元素
JS
document.getElementById(“abc”)

jQuery
$("#abc") 通過id定位
$(".abc") 通過class定位
$(“div”) 通過標籤定位

需要注意的是JS返回的結果是這個元素，jQuery返回的結果是一個JS的物件。以下例子中假設已經定位了元素abc。

2 改變元素的內容
JS
abc.innerHTML = “test”; //現在的專案中有用到
jQuery
abc.html(“test”);

3 顯示隱藏元素
JS
abc.style.display = “none”; //現在的專案中有用到
abc.style.display = “block”;

jQuery
abc.hide();
abc.show();

abc.toggle(); //在顯示和隱藏之間切換、

4 獲得焦點

JS和jQuery是一樣的，都是abc.focus();

5 為表單賦值
JS
abc.value = “test”;
jQuery
abc.val(“test”);

6 獲得表單的值
JS
alert(abc.value);
jQuery
alert(abc.val());

7 設定元素不可用
JS
abc.disabled = true;
jQuery
abc.attr(“disabled”, true);

8 修改元素樣式
JS
abc.style.fontSize=size;
jQuery
abc.css(‘font-size’, 20);

JS
abc.className=“test”;
JQuery
abc.removeClass();
abc.addClass(“test”);

9 判斷核取方塊是否選中

jQuery
if(abc.attr(“checked”) == “checked”)
注意：網上說的.attr(“checked”) == true實際上不能用，上面這個測試過能用

①.根據ID取元素

{
JS:取到的是一個DOM物件。

例：var div = document.getElementByID(“one”);

jQuery:取到的是一個JQUERY物件。

例：var div = $("#one");——括號裡面是根據某個東西來找，相當於一個選擇，如果我們要根據ID來找，在樣式表裡的ID是用#來表示的，所以在這裡我們直接帶入井號，整句的意思就是根據ID為one的來查詢。

}

②.根據class取元素，在陣列裡面如果要取DOM物件使用索引的方式，如果要取JQUERY物件使用eq()

{
JS:取到的是一個陣列

例：var div = document.ElementsByClassName(“test”);

JQUERY:

例：var div = $(".test");

}

③.根據name取元素

{
JS：返回的是一個陣列

例：var bd = document.getElementsByName(uid);

JQUERY：的方式是用 方括號，屬性=一個值，不限制非要根據name來取值，JQUERY是根據屬性來取元素

例：$("[name=‘uid’]");

}

④.根據標籤名取元素

{
JS：返回的也是一個陣列

例：var div = document.getElementsByTagName(“div”);

JQUERY：和樣式表裡面給所有div加樣式的方法一樣，在雙引號內直接寫標籤名

例：$(“div”);

}

附：JQUERY的其他取值方式

組合選取：var div = $(“div span”);——有很多組合方式

操作內容

①.非表單元素（如果是文字就用text方法，如果是html程式碼就用html方法）

{
　　　　　　例：div.text();——無引數的情況下是取值

div.text(“aaaa”);——有引數的情況下是賦值

div.html();——無引數的情況下是取值

div.html(“aaaa”);——有引數的情況下是賦值

}

②.表單元素

{
　　　　　　JS：div.value;——取值；div.value = xxx;——賦值

JUQERY：div.val();——無引數是取值，有引數是賦值。

}

操作屬性

JS裡面用來操作屬性的方法是

div.setAttribute("","");——設定屬性、修改屬性

div.removeAttribute("");——移除屬性，引號裡面寫一個屬性名

div.getAttribute();——獲取屬性

JQUERY裡面用來操作屬性的方法

新增屬性：div.attr(“test”,“aa”);——給這個attr方法加入引數，屬性名叫做test，屬性的值是aa

移除屬性：div.removeAttr(“test”);——移除test這條屬性

獲取屬性：div.attr(“test”);——在attr方法裡面直接寫入一個屬性的名就可以了

操作樣式

JS裡面操作樣式的關鍵字是style

例：div.style.backgroundColor = “red”;——把這個div的背景色設定成為了紅色

JQUERY裡面操作樣式的關鍵字是css

例：div.css(“background-color”,“yellow”);——把這個div的背景色變為黃色，在這裡CSS裡面所有的樣式和css樣式表裡面的樣式是一模一樣的沒有任何變化

JS操作樣式的方法只能獲取內聯樣式，不能取內嵌的和外部的樣式。

相關文章