abstract:js操作屬性 操作屬性的原理還是對(duì)DOM的操作 常用的操作方法 注意操作類時(shí),方法內(nèi)是操作的類名,不帶“.”,操作屬性也一樣。 addClass()和removeClass()方法: 為某個(gè)元素添加或刪除某個(gè)類,可以用這種方法改變?cè)氐?css 樣式,如果有多各類,需要用逗號(hào)隔開(kāi)。如給 div 元素加上一個(gè)可以改變其背景色的類:&nb
js操作屬性
操作屬性的原理還是對(duì)DOM的操作
常用的操作方法 注意操作類時(shí),方法內(nèi)是操作的類名,不帶“.”,操作屬性也一樣。
addClass()和removeClass()方法:
為某個(gè)元素添加或刪除某個(gè)類,可以用這種方法改變?cè)氐?css 樣式,如果有多各類,需要用逗號(hào)隔開(kāi)。如給 div 元素加上一個(gè)可以改變其背景色的類:
.bgcolor{ background:red; } $("div").addClass("bgcolor")
attr()和removeAttr()方法:
attr()用來(lái)返回元素的某個(gè)屬性值,如果傳入兩個(gè)參數(shù),則第一個(gè)是屬性名,第二個(gè)是需要修改成的屬性值。如輸入框獲取焦點(diǎn)時(shí)改變占位符:
$("input").focus(function ({ $("input").attr("placeholder", "你好") })
同理,如果要?jiǎng)h除占位符屬性,則代碼改為:
$("input").removeAttr("placeholder")
hasClass()方法:
用來(lái)返回布爾值,判斷某個(gè)元素是否包含某個(gè)類。
toggleClass() 方法 用事件配合,對(duì)某個(gè)元素進(jìn)行添加和刪除某個(gè)類的切換操作:
$("div").click(function(){ $("div").toggleClass("bgcolor") })
text()/html()/var()方法 :
這三個(gè)方法分別用來(lái)返回元素的文本、html內(nèi)容(類似js的innerhtml()方法)、元素的值。
練習(xí)代碼效果:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery-3.3.1.js"></script> <style> input, button, div { display: block; margin: 20px auto; } input { width: 200px; transition: 0.5s; } div { text-align: center; background: grey; transition: 0.3s; } .bgcolor { background: red; border-radius: 50%; transition: 0.3s; } </style> </head> <body> <script> $(document).ready(function () { $("input").focus(function () { $("input").attr("placeholder", "你好") $("input").css("width", "150px") }) $("div").click(function () { $("div").toggleClass("bgcolor") $("div").html("這里是添加進(jìn)去的內(nèi)容") }) $("button").click(function () { alert($("div").attr("style")) }) }) </script> </body> <input placeholder="獲取焦點(diǎn)后改變文字(attr 方法)"> <div style="width:200px;height:200px">點(diǎn)擊切換樣式和添加內(nèi)容(toggleClass 方法和 html()方法)</div> <button>點(diǎn)擊獲取 div元素的寬度和高度</button> </html>