一、操作元素屬性
1.獲取元素的屬性
attr()prop()
例1:css樣式:
使用如下:
2.設定元素的屬性//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
語法格式:attr(key,value);
其中,key表示屬性的名稱,value表示屬性的值。如果要設定多個屬性,也可通過attr()方法實現,其語法格式:attr()
(1)設定其自帶屬性
attr prop有可有不可
例2:css樣式:
使用如下:
(2)設定自定義屬性attr prop均可例3: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
使用如下:
3.刪除元素的屬性
語法格式:removeattr(name);
其中,name為元素屬性的名稱
(1)removeattr()可以移除自定義與自帶屬性
例4:css樣式:
使用如下:
(2)removeprop()只能移除自定義屬性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
例5:css樣式:
使用如下:
二、元素內容的操作var btn = $("input[type='button']");
btn.removeprop("data-src");
console.log(btn.prop("data-src")); //undefined
1.html():獲取或設定元素的html內容
例6:css樣式:困!
使用如下:
2.text():獲取或設定元素的文字內容例7:css樣式:console.log($("#block").html()); //困!
$("#block").html("歡迎");
困!
使用如下:
注:html()和text()方法的區別如下:console.log($("#block").text()); //困!
$("#block").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樣式:
使用如下:
2.增加css類別$("#txt").css("bordercolor", "#090a0a"); //設定css樣式
var color = $("#txt").css("bordercolor");
var col = (function (c) )(color);
console.log(col); //#90a0a
(1)addclass():增加元素類別名稱
語法格式:addclass(class);
其中,class為類別的名稱
(2)可增加多個類別的名稱,需用空格將其隔開
語法格式:addclass(class0 class1 …);
例11:css樣式:
使用如下:
3.類別切換$("#btn").addclass("btninfo"); /*新增乙個類*/
$("#btn").addclass("btninfo btnlist"); /*新增多個類*/
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 元素 元素陣列 物件,用來插入到集合中每個...