屬性相關(guān)
.val([value])
這是一個(gè)讀寫雙用的方法拷恨,用來處理input的value,當(dāng)方法沒有參數(shù)的時(shí)候返回input的value值谢肾,當(dāng)傳遞了一個(gè)參數(shù)的時(shí)候腕侄,方法修改input的value值為參數(shù)值
$('input').val()
$('input').val('newValue');
.attr()
.attr(attributeName)
獲取元素特定屬性的值
Get the value of an attribute for the first element in the set of matched elements.
var title = $( "em" ).attr( "title" );
.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
為元素屬性賦值
Set one or more attributes for the set of matched elements.
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
$( "#greatphoto" ).attr( "title", function( i, val ) {
return val + " - photo by Kelly Clark";
});//這里用id選擇符舉例是不是function永遠(yuǎn)最多迭代一次?用類選擇符是不是更好些?
.removeAttr()
為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性(attribute)
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點(diǎn)是可以直接在一個(gè) jQuery 對象上調(diào)用該方法冕杠,并且它解決了跨瀏覽器的屬性名不同的問題微姊。
$('div').removeAttr('id');
.prop()/.removeProp()
這兩個(gè)方法是用來操作元素的property
的,property和attibute是非常相似的概念分预,感興趣的同學(xué)可以看看jQuery的attr與prop
CSS相關(guān)
.css()
這是個(gè)和attr
非常相似的方法兢交,用來處理元素的css
.css(propertyName) / .css(propertyNames)
獲取元素style特定property的值
Get the value of style properties for the first element in the set of matched elements.
var color = $( this ).css( "background-color" );
var styleProps = $( this ).css([
"width",
"height",
"color",
"background-color"
]);
.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
設(shè)置元素style特定property的值
Set one or more CSS properties for the set of matched elements.
$( "div.example" ).css( "width", function( index ) {
return index * 50;
});
$( this ).css( "width", "+=200" );
$( this ).css( "background-color", "yellow" );
$( this ).css({
"background-color": "yellow",
"font-weight": "bolder"
});
.addClass(className) / .removeClass(className)
.addClass(className) / .addClass(function(index,currentClass))
為元素添加class,不是覆蓋原class笼痹,是追加配喳,也不會檢查重復(fù)
Adds the specified class(es) to each of the set of matched elements.
$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {
return "item-" + index;
});
removeClass([className]) / ,removeClass(function(index,class))
移除元素單個(gè)/多個(gè)/所有class
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {
return $( this ).prev().attr( "class" );
});
.hasClass(className)
檢查元素是否包含某個(gè)class,返回true/false
Determine whether any of the matched elements are assigned the given class.
$( "#mydiv" ).hasClass( "foo" )
.toggleClass(className)
toggle是切換的意思凳干,方法用于切換晴裹,switch是個(gè)bool類型值,這個(gè)看例子就明白
<div class="tumble">Some text.</div>
第一次執(zhí)行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble bounce">Some text.</div>
第二次執(zhí)行
$( "div.tumble" ).toggleClass( "bounce" )
<div class="tumble">Some text.</div>