//1.0jQuery的屬性
/*
每個元素都有一個或者多個特性，這些特性的用途就是給出相應元素或者其內容的附加資訊。
如：在img元素中，src就是元素的特性，用來標記圖片的地址
JavaScript中操作特性的DOM方法主要有3個，
1.getAttribute()獲取特性
2.setAttribute()設定特性
3.removeAttribute() 移出特性
在jQuery中操作特性的jQuery方法:
1.attr() 獲取/設定屬性
2.removeAttr() 移出屬性
在jQuery中用一個attr()與removeAttr()就可以全部搞定了，
jQuery中用attr()方法來獲取和設定元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經常用到attr()
*/
//1.1 attr()與removeAttr()的用法
/*
attr()方法的用法:
1. $(element).attr("屬性名");//獲取屬性名的屬性值
2. $(element).attr("屬性","屬性值");//設定屬性的屬性值
3. $(element).attr("屬性名","函式值");//設定屬性的函式值
4. $(element).attr({"屬性名":"屬性值","屬性名":"屬性值"});//給指定元素設定多個屬性值
removeAttr()方法的用法:
1. $(element).removeAttr("屬性名");//移出對應的屬性
//1.0 jQuery選擇器
/*
頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。
jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理復雜選擇程序與性能優化，更多專注業務邏輯的撰寫。
jQuery幾乎支持主流的css1~css3選擇器的寫法，我們從最簡單的也是最常用的開始學起:
*/
//1.1 ID選擇器 $("#id");
/*
id選擇器也是基本的選擇器，jQuery內部使用JavaScript函式document.getElementById()來處理ID的獲取。
原生語法的支持總是非常高效的，所以在操作DOM的獲取上，如果能采用id的話盡然考慮用這個選擇器
注意:id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，
將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的
*/
// 1.0 jQuery屬性的.html()與.text()方法
/*
讀取、修改元素的html結構或者元素的文本內容是常見的DOM操作，
JavaScript中提供innerHTML與innerText屬性
jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()
*/
// 1.1 $(element).html()方法
/*
獲取集合中第一個匹配元素的HTML內容 或 設定每一個匹配元素的html內容.
1. $(element).html() 獲取element元素的HTML內容
2. $(element).html("htmlString") 為每一個匹配元素添加html內容
重要說明：$(element) .html()方法內部使用的是DOM的innerHTML屬性來處理的，
所以在設定與獲取上需要注意的一個最重要的問題，這個操作是針對整個HTML內容（不僅僅只是文本內容）
*/
//1.0 jQuery屬性 動態操作class
/*
1. $(element).addClass();//為每個匹配元素所要增加的一個或多個樣式名
- 方法不會替換一個樣式類名。它只是簡單的添加一個樣式類名到元素上
2. $(element).removeClass();//每個匹配元素移除的一個或多個用空格隔開的樣式名
3. $(element).toggleClass();
//在匹配的元素集合中的每個元素上添加或洗掉一個或多個樣式類,
取決于這個樣式類是否存在或值切換屬性。即：如果存在（不存在）就洗掉（添加）一個類
*/
/*
JavaScript中通過className屬性來動態的操作class類
*/
//1.0 jQuery樣式操作$(element).css()方法
/*
通過JavaScript獲取DOM元素上的style屬性，我們可以動態的給元素賦予樣式屬性。
在jQuery中我們要動態的修改style屬性我們只要使用css()方法就可以實作了:
$(element).css()方法:獲取元素樣式屬性的計算值或者設定元素的CSS屬性
*/
//1.1 $(element).css()方法使用方法
/*
1. $(element).css("屬性名") //獲取匹配元素集合中的第一個元素的樣式屬性的計算值
2. $(element).css(["屬性名1","屬性名2"]) //傳遞一個陣列，回傳一個物件結果
3. $(element).css("屬性","屬性值") //設定元素的css樣式
4. $(element).css({"屬性1":"屬性值1","屬性2":"屬性值2"}) //可以傳一個物件，同時設定多個樣式
5. $(element).css({屬性名,function}) //可以傳入一個回呼函式，回傳取到對應的值進行處理
*/
//1.2 注意事項
/*
瀏覽器屬性獲取方式不同，在獲取某些值的時候都jQuery采用統一的處理，比如顏色采用RBG，尺寸采用px
$(element).css()方法支持駝峰寫法與大小寫混搭的寫法，內部做了容錯的處理
當一個數只被作為值（value）的時候，jQuery會將其轉換為一個字串，并添在字串的結尾處添加px，
例如 .css("width",50}) 與 .css("width","50px"})一樣
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/53077.html
標籤：HTML(CSS)