jQuery 屬性操作

2022-05-04 11:42:11 字數 2375 閱讀 5960

一、屬性操作

1.1 設定或者獲取元素固有屬性值 prop()

element.prop("屬性名"

) //獲取屬性值

console.log($("a").prop("href")); //

""

element.prop("屬性","屬性值") //設定屬性語法

1.2 設定或獲取自定義屬性 attr(),這個屬性原來是沒有的

element.attr("屬性名") //

獲取屬性值,類似原生getattribute()

element.attr("屬性","屬性值") //設定屬性語法,類似原生setatribute()

console.log($("div").attr("index")); // "1"

console.log($("div").attr("data-index")); // "2"

1.3 資料快取 data()

在指定的元素上訪問資料,並不會修改dom元素結構,一旦頁面重新整理,之前存放的資料都將被移除

把資料存放到記憶體中,在dom中看不到

element.data("name","value") //

向被選元素附加資料

element.data("name") //向被選元素獲取資料

$("span").data("uname", "andy");

console.log($("span").data("uname")); //

andy

同時,還可以讀取html5 自定義屬性 data-index ,得到的是數字型

//

這個方法獲取data-index h5自定義屬性,不用向attr()那樣寫 data-index,而且返回的是數字型

console.log($("div").data("index"));

二、jquery內容文字值

主要針對元素的內容還有表單的值操作

2.1 普通元素內容 html() ,相當於原生innerhtml

element.html() //

獲取元素的內容,包括裡面的標籤

element.html("內容") //

設定元素的內容

2.2 普通元素文字內容text() ,相當於原生innertext

element.text() //

只獲取裡面的文字內容,不包含標籤

element.text("內容")

2.3 設定獲取表單值 val(), 相當於原生 value

element.val() 

element.val("內容")

element.parents('選擇器') //

返回所有的父親節點

三、jquery操作元素

3.1 遍歷元素

如果想給同一類元素做不同的操作,就需要用到遍歷

$("div").each(function

(index, domelement){})

//each()方法遍歷匹配的每乙個元素,主要用dom處理

//裡面的**函式有兩個引數:index是每個元素的索引號,domelement是每個dom元素物件,不是jquery物件

// 所以要想使用jquery方法,需要把dom元素物件轉化為jquery物件 $(domelement)

$.each(object, function

(index,element){})

//該方法可以遍歷任何物件,主要用於資料處理,比如陣列,物件

//裡面的函式有兩個引數:index是每個元素的索引號,element遍歷內容

3.2 建立元素

$("")  //

動態的建立了乙個

3.3 新增元素

element.after("內容")  //

把內容放入目標元素後面

element.before("內容") //

把內容放入目標元素前面

3.4 刪除元素

element.remove() //

刪除匹配的元素(本身)

element.empty() //

刪除匹配的元素集合中所有的子節點(孩子)

element.html("") //

清空匹配的元素內容,和empty一樣

jquery操作屬性

設定或返回被選元素的屬性值 img attr img attr title function 每乙個匹配的元素中刪除屬性 img removeattr src checked,selected屬性的設定和獲得應該使用該函式,返回值和設定值應該使用true和false 刪除由.prop 方法設定的屬性...

jquery 屬性操作

input attr value 獲取input的id input attr value 孫悟空 為input的value屬性設值為孫悟空 input attr 為input設定多個屬性 input attr value function 為input設定value屬性為方法返回值 input re...

Jquery 屬性操作

jquery 屬性操作 方法 selector addclass class button click function 2 removeclass 向匹配的元素移除指定的類名。定義和用法 removeclass 方法從被選元素移除乙個或多個類。注釋 如果沒有規定引數,則該方法將從被選元素中刪除所有...