介紹以下 jQuery 函數(shù)的用法,給出范例

屬性相關(guān)

.val([value])

這是一個讀寫雙用的方法,用來處理input的value,當(dāng)方法沒有參數(shù)的時候返回input的value值,當(dāng)傳遞了一個參數(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()

為匹配的元素集合中的每個元素中移除一個屬性(attribute)

.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點是可以直接在一個 jQuery 對象上調(diào)用該方法,并且它解決了跨瀏覽器的屬性名不同的問題。

$('div').removeAttr('id');

.prop()/.removeProp()

這兩個方法是用來操作元素的property的,property和attibute是非常相似的概念,感興趣的同學(xué)可以看看jQuery的attr與prop

CSS相關(guān)

.css()

這是個和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))

移除元素單個/多個/所有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)

檢查元素是否包含某個class,返回true/false

Determine whether any of the matched elements are assigned the given class.

$( "#mydiv" ).hasClass( "foo" )

.toggleClass(className)

toggle是切換的意思,方法用于切換,switch是個bool類型值,這個看例子就明白

<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>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • jqueryscript放在head中,文檔前面時window.onload=handle頁面全部加在完再執(zhí)行jq...
    安石0閱讀 448評論 0 0
  • jQuery DOM操作 來源饑人谷課件,轉(zhuǎn)載請注明來源 創(chuàng)建元素 只需要把DOM字符串傳入$方法即可返回一個jQ...
    饑人谷光仔閱讀 434評論 0 0
  • 以下jQuery方法有什么作用?如何使用?給出范例 .append() 寫法:.append(content[,c...
    原上的小木屋閱讀 1,230評論 0 0
  • Data Visualization with D3 D3: SVG中的jQurey 1. Add Documen...
    王策北閱讀 876評論 0 2
  • 眼睛 媽媽才四十多就已經(jīng)因為太勞累,花了眼睛 眼鏡 好想陪媽媽久一點,為她配一副眼鏡,或者換我為她讀書中的故事 眼...
    sunfove閱讀 211評論 0 2

友情鏈接更多精彩內(nèi)容