操作物件標籤

<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"

2. 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"})