jQuery屬性

1、jQuery屬性之屬性

1.1、attr(name)

獲得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應屬性,則返回undefined。返回值:Object
參數
name:屬性名稱。--String
示例:返回文檔中第一個圖像的src屬性值。
HTML代碼:
<img src="test.jsp"/>
jQuery代碼:
$("img").attr("src");
結果:
test.jsp

1.2、attr(properties)

將一個"名/值"形式的對象設置爲所有匹配元素的屬性。返回值:jQuery。
這是一種在所有匹配元素中批量設置很多屬性的最佳方式。注意,如果你要設置對象的class屬性,你必須使用'className'作爲屬性名。或者你可以直接使用.addClass(class)和.removeClass(class)。
參數
properties:作爲屬性的"名/值對"對象。--Map
示例:爲所有圖像設置src和alt屬性。
HTML代碼:
<img/>
jQuery代碼:
$("img").attr({src: "test.jsp", alt: "Test Image"});
結果:
[ <img src= "test.jpg"  alt:="Test Image" /> ]

1.3、attr(key, value)

爲所有匹配的元素設置一個屬性值。返回值:jQuery
參數
key:屬性名稱。--String
value:屬性值。--Object
示例:爲所有圖像設置src屬性。
HTML代碼:
<img/>
<img/>
jQuery代碼:
$("img").attr("src", "test.jpg");
結果:
[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

1.4、attr(key, function(index, attr))

爲所有匹配的元素設置一個計算的屬性值。返回值:jQuery
不提供值,而是提供一個函數 ,由這個函數計算的值作爲屬性值。
參數
key:屬性名稱。--String
function(index, attr):返回屬性的函數,第一個參數爲當前元素的索引值,第二個參數爲原先的屬性值。
示例:把src屬性的值設置爲title屬性的值。
HTML代碼:
<img src="test.jpg"/>
jQuery代碼:
$("img").attr("title", function(){
  return this.src;
});
結果:
<img src="test.jpg" title="test.jpg"/>

1.5、removeAttr(name)

從每一個匹配的元素中刪除一個屬性。返回值:jQuery
參數
name:要刪除的屬性名。--String
示例:將文檔中圖像的src屬性刪除。
HTML代碼:
<img src="test.jpg"/>
jQuery代碼:
$("img").removeAttr("src");
結果:
[ <img /> ]

2、jQuery屬性之CSS類

2.1、addClass(class)

爲每個匹配的元素添加指定的類名。返回值:jQuery
參數
class:一個或多個要添加到元素中的CSS類名,請用空格分開。--String
示例:爲匹配的元素加上'selected'類。
HTML代碼:
<p>Hello</p>
jQuery代碼:
$("p").addClass("selected");
結果:
[ <p class="selected">Hello</p> ]

2.2、addClass(function(index, class))

爲每個匹配的元素添加指定的類名。返回值:jQuery
參數
function(index, class):此函數必須返回一個或多個空格分隔的class名。接受兩個參數,index參數爲對象在這個集合中的索引值,class參數爲這個對象原來的class屬性值。
示例:給li加上不同的class。
HTML代碼:
<ul><li>Hello</li><li>Hello</li><li>Hello</li></ul>
jQuery代碼:
$("ul li:last").addClass(function(){
  return 'item-' + $(this).index();
});

2.3、removeClass([class])

從所有匹配的元素中刪除全部或者指定的類。返回值:jQuery
參數
class:(可選)一個或多個要刪除的CSS類名,請用空格分開。
示例:從匹配的元素中刪除'selected'類。
HTML代碼:
<p class='selected first'>Hello</p>
jQuery代碼:
$("p").removeClass("selected");
結果:
[ <p class="first">Hello</p> ]

2.4、removeClass(function(index, class))

從所有匹配的元素中刪除全部或者指定的類。返回值:jQuery
參數
function(index, class):此函數必須返回一個或多個空格分隔的class名。接受兩個參數,index參數爲對象在這個集合中的索引值,class參數爲這個對象原來的class屬性值。
示例:刪除最後一個元素上與前面重複的class
jQuery代碼:
$('li:last').removeClass(function(){
  return $(this).prev().attr('this');
});

2.5、toggleClass(class)

如果存在(不存在)就刪除(添加)一個類。返回值:jQuery
參數
class:CSS類名。--String
示例:爲匹配的元素切換''selected類。
HTML代碼:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery代碼:
$("p").togggleClass("selected");
結果:
[ <p class="selected">Hello</p>, <p>Hello Again</p> ]

2.6、toggleClass(class, switch)

如果開關switch參數爲true則加上對應的class,否則就刪除。返回值:jQuery
參數
class:要切換的CSS類名。--String
switch:用於決定元素是否包含class的布爾值。--Boolean
示例:每點擊三下加上一個'highlight'類。
HTML代碼:
<strong>jQuery 代碼:</strong>
jQuery代碼:
var count = 0;
$("p").click(function(){
  $(this).toggleClass("highlight", count++ % 3 == 0);
});

2.7、toggleClass(function(index, class), [switch])

如果開關switch參數爲true則加上對應的class,否則就刪除。返回值:jQuery
參數
function(index, value):返回class名的一個函數,接受兩個參數,index爲元素在集合中的索引位置,class爲原先元素的class值。--Function
switch:(可選)用於決定元素是否包含class的布爾值。--Boolean
示例:根據父元素來設置class屬性。
jQuery代碼:
$('div.foo').toggleClass(function(){
  if($(this).parent().is('.bar')){
     return 'happy';
}else{
     return 'sad';
}
});

2.8、html([val|fn])

取得第一個匹配元素的html內容。這個函數不能用於XML文檔。但可以用於XHTML文檔。
在一個HTML文檔中,我們可以使用.html()方法來獲取任意一個元素的內容。如果選擇器匹配多於一個的元素,那麼只能第一個匹配元素的HTML內容會被獲取。
參數
val:用於設定HTML內容的值。
function(index, html):此函數返回一個HTML字符串。接着兩個參數,index爲元素在集合中的索引位置,html爲原先的HTML值。
示例1:返回P元素的內容。
jQuery代碼:
$("p").html();
示例2:設置所有P元素的內容。
jQuery代碼:
$("p").html("hello <b>world</b>");

2.9、text([val|fn])

獲取所有匹配元素的內容。結果是由所有匹配元素包含的文本內容組合起來的文本。這個方法對HTML和XML文檔都有效。
參數
val:用於設置元素內容的文本。--String
function(index,text):此函數返回一個字符串。接受兩個參數,index爲元素在集合中的索引位置,text爲原來的text值。
示例:返回p元素的文本內容。
jQuery代碼:
$('p').text();

3.0、val([val|fn|arr])

獲取匹配元素的當前值。
在jQuery1.2中,可以返回任意元素的值了。如果多選,將返回一個數組,其包含所選的值(有value屬性的標籤,如果選擇器匹配多個則返回第一個元素的值)。
參數
val:要設置的值。--String
function(index,value):此函數返回一個要設置的值,接受兩個參數,index爲元素在集合中的索引位置,text爲原先的text值。--Function
array:用於check/select的值。--Array<String>
示例1:獲取文本框中的值。
jQuery代碼:
$("input").val();
示例2:設定文本框的值。
jQuery代碼:
$("input:text.items").val(function(){
   return this.value + '  ' + this.className;
});




















發佈了17 篇原創文章 · 獲贊 10 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章