jQuery 訪問DOM元素操作

2021-09-11 06:22:21 字數 4570 閱讀 1172

一、操作元素屬性

1.獲取元素的屬性

attr()prop()

例1：css樣式：

使用如下：

//attr可以獲取其width


$("input[type='button']").attr("width", "200px");


console.log($("input[type='button']").attr("width")); //200px


//prop不可以獲取其width


$("input[type='button']").prop("width", "300px");


console.log($("input[type='button']").prop("width")); //0
2.設定元素的屬性

語法格式：attr(key,value);

其中，key表示屬性的名稱，value表示屬性的值。如果要設定多個屬性，也可通過attr()方法實現，其語法格式：attr()

(1)設定其自帶屬性

attr prop有可有不可

例2：css樣式：

使用如下：

/*一次設定多個屬性值*/


//attr可以設定其width


$("input[type='button']").attr();


console.log($("input[type='button']").attr("width")); //100px


//prop不可以設定其width


$("input[type='button']").prop();


console.log($("input[type='button']").prop("width")); //0
（2）設定自定義屬性attr prop均可例3：css樣式：使用如下：

3.刪除元素的屬性

語法格式：removeattr(name);

其中，name為元素屬性的名稱

（1）removeattr()可以移除自定義與自帶屬性

例4：css樣式：

使用如下：

var btn = $("input[type='button']");


btn.removeattr("data-src");


console.log(btn.attr("data-src")); //undefined


btn.removeattr("value");


console.log(btn.attr("value")); //undefined
（2）removeprop()只能移除自定義屬性

例5：css樣式：

使用如下：

var btn = $("input[type='button']");


btn.removeprop("data-src");


console.log(btn.prop("data-src")); //undefined
二、元素內容的操作

1.html()：獲取或設定元素的html內容

例6：css樣式：困！

使用如下：

console.log($("#block").html());   //困！


$("#block").html("歡迎");
2.text()：獲取或設定元素的文字內容例7：css樣式：困！使用如下：

console.log($("#block").text());   //困！


$("#block").text("歡迎");
注：html()和text()方法的區別如下：

三、操作表單元素的值

val()：獲取或設定表單元素的value值

例8：css樣式：

使用如下：

$("#txt").val("12345");


console.log($("#txt").val()); 12345
四、元素樣式的操作

1.直接設定元素樣式值

（1）css()：獲取或設定元素的樣式

語法格式：css(name,value);

其中，name為樣式名稱，value為樣式的值

例9：css樣式：

使用如下：$("#txt").css("bordercolor", "#090a0a"); //設定css樣式

（2）同時設定多個樣式屬性

例10：css樣式：

使用如下：

$("#txt").css();
案例：將rgb值裝換為十六進製制的值

css樣式：

使用如下：

$("#txt").css("bordercolor", "#090a0a");  //設定css樣式


var color = $("#txt").css("bordercolor");


var col = (function (c) )(color);


console.log(col); //#90a0a
2.增加css類別

（1）addclass()：增加元素類別名稱

語法格式：addclass(class);

其中，class為類別的名稱

（2）可增加多個類別的名稱，需用空格將其隔開

語法格式：addclass(class0 class1 …);

例11：css樣式：

使用如下：

$("#btn").addclass("btninfo");  /*新增乙個類*/


$("#btn").addclass("btninfo btnlist"); /*新增多個類*/
3.類別切換

toggleclass()：切換不同的元素類別

語法格式：toggleclass(class);

其中，class為類別名稱，其功能是當元素中含有名稱為class的css類別時，刪除該類別，否則增加乙個該名稱的css類別，即有則刪無則加。

例12：css樣式：

使用如下：$("#btn").toggleclass("b***ata");

4.刪除類別

removeclass()：刪除類別

語法格式：removeclass(class);

其中，class為類別名稱，該名稱是可選項，當選該名稱時，則刪除名稱為class的類別， 多個類別時用空格隔開；若不選名稱，則全部移除

例13：css樣式：

使用如下：

$("#btn").removeclass("b***ata btnlist");  /*移除類名稱*/


$("#btn").removeclass(); /*全部移除*/

JQuery 操作DOM元素

使用attr 方法控制元素的屬性 使用attr 屬性名 是獲取該屬性的值。使用attr 屬性名 屬性值 是設定屬性的值 html text 方法控制元素的文字 包含樣式 使用html 時是獲取元素的html文字 包括樣式 如果文字是斜體的，獲取到的也是斜體的 使用html 哈哈哈 時是將元素的htm...

jquery操作DOM 元素 3

detach 從dom 中去掉所匹配的元素。detach selector selector 乙個選擇表示式將需要移除的從匹配的元素中過濾出來。p detach empty 從dom中移除集合中匹配元素的所有子節點。empty 這個方法不接受任何引數。結構 hello goodbye hello e...

jquery操作DOM 元素 2

after 在匹配的元素集合中的每個元素後面插入引數指定的內容，作為其兄弟節點。after content content content html字串 dom 元素 元素陣列 物件，用來插入到集合中每個匹配元素的後面。content html字串 dom 元素 元素陣列 物件，用來插入到集合中每個...