JQuery屬性擷取

操作對象标簽

<div id="first" class="green" data-age="19"></div>
<div id="second" class="blue"></div>
<div id="third" class="red"></div>
<input type="radio" name="select" checked="False">web
           

1. 原生js屬性擷取

var div = document.getElementById(“first”);

擷取第一個标簽的ID

var divID = div.id;
           

給id重新指派

div.id = "four"
           

通過getAttributr方法擷取屬性值

var divID = div.getAttribute("id")
           

通過getAttributr方法設定id屬性

div.setAttribute("id","first")
           

通過className方法擷取class值

var myClass = div.className;
           

給div添加class值，這個方法會替換掉原來的class值

div.className = "border"
           

擷取div的class值，但是擷取的是一個數組清單類型的class

var classList = div.classList
           

給div設定一個class值，但是會替換原來類名

div.classList = "green"
           

給div添加一個類名，不會替換原來的class值

div.classList.add("border")
           

移除一個類名

div.classList.remove("border")
           

判斷class值是否存在，有則删除，無則添加

div.classList.toggle("border")
           

查找dataset集合屬性值

var age= div.dataset.age
           

設定data屬性

div.dataset.age = "30"
           

1. JQ方法擷取屬性值

擷取屬性 擷取的是所有同類型标簽中的某一個的屬性

var myID = $("div").attr("id")
           

設定屬性 設定的是所有同類型标簽的屬性

$("div").attr("id","newID")
           

添加一個class屬性值

$("div").addClass("red")
           

移除一個class屬性值

$("div").removeClass("red")
           

判斷class值是否存在，有則删除，無則添加

$("div").toggleClass("red")
           

attribute 屬性 用來設定和擷取所有值不為布爾類型的屬性

var isSelect = $("input").attr("checked")
           

檢視單選框是否被選中

property 屬性 用來設定和擷取值布爾類型的屬性

var isSelect = $("input").prop("checked")
           

鍊式調用

$("div").css("background-color","orange").css("margin-left","0").css({"margin-top":"0"})