国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

?js操作屬性 練習(xí)總結(jié)

Original 2018-12-12 13:29:17 266
abstract:js操作屬性 操作屬性的原理還是對(duì)DOM的操作  常用的操作方法 注意操作類(lèi)時(shí),方法內(nèi)是操作的類(lèi)名,不帶“.”,操作屬性也一樣。  addClass()和removeClass()方法: 為某個(gè)元素添加或刪除某個(gè)類(lèi),可以用這種方法改變?cè)氐?css 樣式,如果有多各類(lèi),需要用逗號(hào)隔開(kāi)。如給 div 元素加上一個(gè)可以改變其背景色的類(lèi):&nb

js操作屬性 

操作屬性的原理還是對(duì)DOM的操作 

 常用的操作方法 注意操作類(lèi)時(shí),方法內(nèi)是操作的類(lèi)名,不帶“.”,操作屬性也一樣。 

 addClass()和removeClass()方法: 

為某個(gè)元素添加或刪除某個(gè)類(lèi),可以用這種方法改變?cè)氐?css 樣式,如果有多各類(lèi),需要用逗號(hào)隔開(kāi)。如給 div 元素加上一個(gè)可以改變其背景色的類(lèi):

 .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è)類(lèi)。 

 toggleClass() 方法 用事件配合,對(duì)某個(gè)元素進(jìn)行添加和刪除某個(gè)類(lèi)的切換操作: 

$("div").click(function(){ $("div").toggleClass("bgcolor") })

 text()/html()/var()方法 :

這三個(gè)方法分別用來(lái)返回元素的文本、html內(nèi)容(類(lèi)似js的innerhtml()方法)、元素的值。

練習(xí)代碼效果:

屏幕快照 2018-12-11 下午9.22.35.png

屏幕快照 2018-12-11 下午9.22.43.png

屏幕快照 2018-12-11 下午9.22.47.png

屏幕快照 2018-12-11 下午9.22.54.png

<!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>


Release Notes

Popular Entries