jQuery學習總結02-屬性
1、attr(name|properties|key,value|fn)
說明：設置和返回被選元素的屬性值
示例：
參數：
| name(屬性名稱) | string |
| properties(作為屬性的‘名/值對‘對象) | map |
| key,value(屬性名，屬性值) | string,object |
|
key，function(index,attr) 1.屬性名稱 2.返回屬性值的函數,第一個參數為當前元素的索引值，第二個參數為原先的屬性值。 |
string,function |
描述：參數name,返回文檔中所有圖像img的src屬性值
jQuery代碼
$(‘img‘).attr(‘src‘)
描述：參數property,為所有圖像img元素設置alt和src屬性
jQuery代碼：
$(‘img‘).attr({src:‘test.jpg‘,alt:‘Test Image‘});
描述：參數key,value,為所有圖像img元素設置src屬性
jQuery代碼：
$(‘img‘).attr(‘src‘,‘test.jpg‘);
描述：參數key,回調函數，把src屬性的值設置為title屬性的值
jQuery代碼：
$(‘img‘).attr(‘title‘,function(){
return this.src;
});
2、removeAttr(name)
說明：從每一個匹配的元素中刪除一個屬性
1.6以下版本在IE6使用JQuery的removeAttr方法刪除disabled是無效的。解決的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持刪除disabled。
示例：
描述：將文檔中圖像的src屬性刪除
HTML代碼：
<img src=‘test.jpg‘ />
jQuery代碼：
$(‘img‘).removeAttr(‘src‘);
結果：
[ <img /> ]
3、prop(name|properties|key,value|fn)
說明：獲取在匹配元素集合中的第一個元素的屬性值
隨著一些內置屬性的DOM元素或window對象，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤
示例：
參數：
| name(屬性名稱) | string |
| properties(作為屬性的‘名/值對‘對象) | map |
| key,value(屬性名，屬性值) | string,object |
|
key，function(index,attr) 1.屬性名稱 2.返回屬性值的函數,第一個參數為當前元素的索引值，第二個參數為原先的屬性值。 |
string,function |
描述：參數name，選中復選框為true,沒選中為false
HTML代碼：
<input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" checked="checked" /> <input type="text" /> <input type="button" value="提交" />
jQuery代碼：
$(‘input[type="checkbox"]‘).prop(‘checked‘);
描述：參數properties，禁止和選中頁面所有的復選框
jQuery代碼：
$(‘input[type="checkbox"]‘).prop({disabled:true});
描述：參數key,value，禁止和選中頁面上所有的復選框
jQuery代碼：
$(‘input[type="checkbox"]‘).prop({checked:true});
$(‘input[type="checkbox"]‘).prop({disabled:true});
描述：參數key,回調函數，通過函數來設置頁面上所有的復選框被選中
jQuery代碼：
$(‘input[type="checkbox"]‘).prop(‘checked‘,function(index,val){
return true;
});
4、removeProp(name)
說明：用來刪除由.prop()方法設置的屬性集
隨著一些內置屬性的DOM元素或window對象，如果試圖將刪除該屬性，瀏覽器可能會產生錯誤。jQuery第一次分配undefined值的屬性，而忽略了瀏覽器生成的任何錯誤
示例：
描述：設置一個段落數字屬性，然後將其刪除。
jQuery代碼：
$(‘p‘).prop(‘luggageCode‘,1234);
$(‘p‘).prop(‘luggageCode‘);
$(‘p‘).removeProp(‘luggageCode‘);
$(‘p‘).prop(‘luggageCode‘);
5、addClass(class|fn)
說明：為每個匹配的元素添加指定的類名。
示例：
參數：
| class(一個或多個要添加到元素中的CSS類名，請用空格分開) | string |
|
function(index,class) 此函數必須返回一個或多個空格分隔的class名 1.index參數為對象在這個集合中的索引值 2.class參數為這個對象原先的class屬性值 |
function |
描述：參數class，為匹配的元素添加‘selected’類
jQuery代碼：
$("p").addClass("selected");
$("p").addClass("selected1 selected2");
描述：參數function,給li添加不同的class
jQuery代碼：
$(‘ul li‘).addClass(function(index,cls){
return ‘item-‘+ index;
})
6、removeClass([class|fn])
說明：從所有匹配的元素中刪除全部或者指定的類
示例：
參數：
| class(一個或多個要添加到元素中的CSS類名，請用空格分開) | string |
|
function(index,class) 此函數必須返回一個或多個空格分隔的class名 1.index參數為對象在這個集合中的索引值 2.class參數為這個對象原先的class屬性值 |
function |
描述：參數class,從匹配的元素中刪除 ‘selected‘ 類
jQuery代碼：
$("p").removeClass("selected");
描述：參數function,刪除最後一個元素上與前面重復的class
jQuery代碼：
$(‘li:last‘).removeClass(function() {
return $(this).prev().attr(‘class‘);
});
7、toggleClass(class|fn[,sw]) 註意：如果標簽已經包含class了，則會刪除class類名，否則新增
說明：如果存在（不存在）就刪除（添加）一個類。
示例：
參數：
| class(類名) | string |
|
class,switch 1:要切換的CSS類名 2.用於決定元素是否包含class的布爾值。 |
string,Boolean |
| switch(用於決定元素是否包含class的布爾值。) | Boolean |
|
function(index, class,switch)[, switch] 1:用來返回在匹配的元素集合中的每個元素上用來切換的樣式類名的一個函數。接收元素的索引位置和元素舊的樣式類作為參數。 2: 一個用來判斷樣式類添加還是移除的 boolean 值。 |
function,boolean |
描述：參數class，為匹配的元素切換 ‘selected‘ 類
jQuery代碼：
$("p").toggleClass("selected");
描述：參數class,switch，每點擊三下加上一次 ‘highlight‘ 類
jQuery代碼：
var count = 0;
$(‘p‘).click(function () {
$(this).toggleClass(‘highlight‘,count++ % 3 == 0)
});
描述：參數function,根據父元素來設置class屬性
jQuery代碼：
$(‘div.foo‘).toggleClass(function() {
if ($(this).parent().is(‘.bar‘) {
return ‘happy‘;
} else {
return ‘sad‘;
}
});
8、html([val|fn])
說明：取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。
在一個 HTML 文檔中, 我們可以使用 .html() 方法來獲取任意一個元素的內容。 如果選擇器匹配多於一個的元素，那麽只有第一個匹配元素的 HTML 內容會被獲取。
示例：
參數：
| val(用於設定HTML內容的值) | string |
|
function(index,html) 此函數返回一個HTML字符串 1.index為元素在集合中的索引位置 2.html為原先的HTML值 |
function |
描述：無參數，返回p元素的內容。
HTML代碼：
<p><span>jQuery</span></p>
jQuery代碼：
$(‘p‘).html();
結果：
"<span>jQuery</span>"
描述：參數val，設置所有 p 元素的內容
HTML代碼：
<p></p>
jQuery代碼：
$(‘p‘).html(‘<span>Hello,World</span>‘)
描述：參數function,使用函數來設置所有匹配元素的內容。
HTML代碼：
<p></p> <p></p> <p></p>
jQuery代碼：
$(‘p‘).html(function(index){ return ‘<span>Hello,item ‘ +index +‘</span>‘; });
9、text([val|fn])
說明：取得所有匹配元素的內容。
結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。
示例：
參數：
| val(用於設定元素內容的文本) | string |
|
function(index,text) 此函數返回一個字符串 1.index為元素在集合中的索引位置 2.text為原先的text值 |
function |
不再詳細贅述
10、val([val|fn|arr])
說明：獲得匹配元素集合中第一元素的當前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數組，其包含所選的值。
示例：
參數：
| val(要設置的值) | string |
|
function(index,value) 此函數返回一個要設置的值 1.index為元素在集合中的索引位置 2.value為原先的value值 |
function |
|
array(用於check/select的值) |
array(string) |
描述：無參數，獲取文本框中的值
HTML代碼：
<input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" checked="checked" /> <input type="checkbox" /> <input type="checkbox" checked="checked" /> <input type="text" /> <input type="button" value="提交" />
jQuery代碼：
$(‘input[type=text]‘).val()
描述：參數val,設定文本框的值
jQuery代碼：
$(‘input[type=text]‘).val(‘hello world‘)
描述：參數array, 設定一個select和一個多選的select的值
HTML代碼：
<select id="single"> <option>Single</option> <option>Single2</option> </select> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple</option> <option>Multiple2</option> <option selected="selected">Multiple3</option> </select><br/> <input type="checkbox" value="check1"/> check1 <input type="checkbox" value="check2"/> check2 <input type="radio" value="radio1"/> radio1 <input type="radio" value="radio2"/> radio2
jQuery代碼:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
jQuery學習總結02-屬性