jquery梳理之屬性操做

attr與removeAttr - 元素屬性

JS原生對於元素的屬性有三種方法來操做

dom.setAttribute(name , value) //爲元素添加屬性名 和 屬性值
dom.getAttribute(name) //獲取元素屬性值
dom.removeAttribute(name) //刪除元素屬性

而JQuery則將以上三個操做簡化爲: attr 和 removeAttr

attr(name , value) //對應 dom.setAttribute(name , value)
attr(name) //對應dom.getAttribute(name)
removeAttr(name) //對應dom.removeAttribute(name)

* 上述的name 爲屬性名，value爲屬性值
對於須要設置多個屬性時，採用的方式是在 attr方法傳入屬性配置對象

dom.attr({
    'class' : 'xxxx'
    'data-name' : 'xxxxx'
});

html() 、text()、val() - 元素值屬性

三個方法都是爲匹配的元素設置或者獲取內容
不一樣之處：
html設置的內容能夠包含元素；
text設置的內容爲純文本；
val 設置input(文本框的值)或select選中值

用法:
一、獲取內容

$(dom).html()
$(dom).text()
$(dom).val(); //*當dom爲select,且能夠多選，則返回值爲數組

二、設置內容

$(dom).html(string)
$(dom).text(string)
$(dom).val(string)

對於獲取或者設置輸入框的值，還能夠採用attr方法

$(dom).attr('value' , data);  ---> $(dom).val(data);
$(dom).attr('value');             ---> $(dom).val();

addClass，removeClass, toggleClass ,css -- 操做樣式屬性

addClass方法：添加樣式

$(dom).addClass(classname);
$(dom).addClass(function(index,classname) {
    //遍歷匹配的元素，並作相關添加樣式操做
    //index 遍歷元素的下標, name 當前元素的class屬性值
});

removeClass方法：刪除樣式

$(dom).removeClass(classname);
$(dom).removeClass(function(index,classname) {
    //遍歷匹配的元素，並作相關刪除樣式操做
    //index 遍歷元素的下標, name 當前元素的class屬性值
    return '刪除的樣式名稱'; //必須返回
});

toggleClass方法：切換樣式

$(dom).toggleClass(classname); 
//切換樣式，若是元素存在classname這個樣式，則刪除，若是沒有則添加

$(dom).toggleClass(classname , flag)
//flag爲布爾值，true表示添加樣式，false表示刪除樣式

css方法：設置樣式值

$(dom).css(name);
//獲取匹配元素中，第一個元素的樣式屬性值
$('p').css('width'); //獲取第一個p標籤的width樣式值
$(dom).css(name , value)
$(dom).css(name , callback)
$(dom).css(properties)
//設置匹配元素的樣式屬性
//當第二個參數爲函數時，函數必須返回屬性值
//當第一個參數爲一個鍵值對的對象（properties）時，表示爲元素設置多個屬性值

**注意：css方法中的name是指具體的樣式屬性名稱，如 width、height、positionaddClass方法中的classname 是指定義於.css文件中或者style標籤內的類選擇器的名稱例如 .add { color:red; }$(dom).addClass('add');**