jQuery中操縱元素屬性的方法:
attr(): 讀取或寫入符合元素的屬性值.
removeAttr(): 從符合的元素中移除指定的屬性.
attr()方法 讀取操作
attr()讀取操作. 讀取的是符合元素中第一個元素的指定屬性值.
格式: .attr(attributeName),傳回值類型:String.讀取不存在的屬性會回傳undefined.
注意選擇器的選擇結果可能是一個集合,這裡僅僅獲取的是集合中第一個元素的該屬性值.
看例子:
paragraph 1
paragraph 2
運行結果:彈框顯示: title1.
想要分別取得每一個元素的屬性,需要使用jQuery的循環結構,例如.each()或.map()方法.
上面的例子可以改成:
即可分別取得每個元素的屬性.
attr()方法 寫入操作
attr()寫入操作. 為符合元素的一個或多個屬性賦值.
一般格式: .attr(attributeName, value), 即為屬性設定value.
回傳值類型:jQuery.也即支援鍊式方法呼叫.
執行寫入操作的時候,如果指定的屬性名稱不存在,將會增加一個該名字的屬性,即增加自訂屬性,其名為屬性名稱,其值為value值.
寫屬性是為匹配集合中的每一個元素都進行操作的,見例子:
This is a paragraph.
This is another paragraph.
點選按鈕之後所有的p都加上了title="Hello World」的屬性.
寫入操作還有以下兩種格式:
.attr(attributes)和.attr(attributeName, function).
以下分別介紹.
.attr(attributes):
這裡attributes型別是PlainObject,可以用來一次設定多個屬性.
什麼是PlainObject呢,簡單理解就是大括號包圍的鍵值對序列.可以參考問後連結說明.
鍵和值之間用冒號(:)分隔,每個鍵值對之間用逗號(,)分隔.
注意: 設定多個屬性值時,屬性名的引號是可選的(可以有,也可以沒有).但是class屬性是個例外,必須加上引號.
例子:
This is a paragraph.
This is another paragraph.
點選兩個按鈕之後,元素變成:
其中
.attr(attributeName, function(index, oldValue)):
使用一個function來設定屬性值.function的第一個參數是index,第二個參數是該屬性之前的值.
看例子:
div {
顏色:藍色;
}
跨度{
顏色:紅色;
}
b {
字體粗細:加粗;
}
風格>
$(文檔).ready(function () {
$("div")
.attr("id", function (index, oldAttr) {
if (oldAttr) {
返回“div-id”索引oldAttr;
} 其他 {
返回“div-id”索引;
}
})
.each(函數 () {
$("span", this).html("(id = '" this.id "')");
});
});
腳本>
頭>
身體>
上面的例子,對應的頁面結果如下:
當使用一個方法來設定屬性值的時候,如果這個設定的函數沒有回傳值,或是回傳了undefined,目前的值是不會被改變的。
即操作會被忽略。
還是上面的例子,attr()其中的函數回傳未定義:
如下:
$(文檔).ready(function () {
$("div").attr("id", function (index, oldAttr) {
返回未定義;
}).each(函數 () {
$("span", this).html("(id = '" this.id "')");
});
});
腳本>
回傳的頁面效果如下:
即不進行任何修改操作,還是保留原來的屬性值。
注意:jQuery不能修改和
removeAttr() 方法
:刪除符合元素集合中每個元素的指定屬性。
removeAttr() 方法但是調用的是 JavaScript 的removeAttribute() 方法,它可以用 jQuery 物件直接調用,並且它考慮到並處理各個瀏覽器上的屬性名稱可能不統一的問題。
範例:
$(文檔).ready(function () {
$("input[type=button]").click(function () {
$("div").removeAttr("標題");
});
});
腳本>
頭>
輸入>
身體>
點選按鈕後,
注意: 用removeAttr()移除onclick在IE6-8上都不會起作用,為了避免這個問題,應該使用.prop()方法.
例如:
$element.prop( "onclick", null );
console.log( "onclick property: ", $element[ 0 ].onclick );

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

mPDF
mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SublimeText3 英文版
推薦:為Win版本,支援程式碼提示!

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3漢化版
中文版,非常好用