​js操作属性 练习总结

原创2018-12-12 13:29:1798
摘要:js操作属性 操作属性的原理还是对DOM的操作  常用的操作方法 注意操作类时,方法内是操作的类名,不带“.”,操作属性也一样。  addClass()和removeClass()方法: 为某个元素添加或删除某个类,可以用这种方法改变元素的 css 样式,如果有多各类,需要用逗号隔开。如给 div 元素加上一个可以改变其背景色的类:&nb

js操作属性 

操作属性的原理还是对DOM的操作 

 常用的操作方法 注意操作类时,方法内是操作的类名,不带“.”,操作属性也一样。 

 addClass()和removeClass()方法: 

为某个元素添加或删除某个类,可以用这种方法改变元素的 css 样式,如果有多各类,需要用逗号隔开。如给 div 元素加上一个可以改变其背景色的类:

 .bgcolor{ background:red; } 
$("div").addClass("bgcolor")

 attr()和removeAttr()方法:

 attr()用来返回元素的某个属性值,如果传入两个参数,则第一个是属性名,第二个是需要修改成的属性值。如输入框获取焦点时改变占位符: 

$("input").focus(function ({ $("input").attr("placeholder", "你好") })

 同理,如果要删除占位符属性,则代码改为: 

$("input").removeAttr("placeholder")

 hasClass()方法: 

用来返回布尔值,判断某个元素是否包含某个类。 

 toggleClass() 方法 用事件配合,对某个元素进行添加和删除某个类的切换操作: 

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

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

这三个方法分别用来返回元素的文本、html内容(类似js的innerhtml()方法)、元素的值。

练习代码效果:

屏幕快照 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("这里是添加进去的内容")
})
$("button").click(function () {
alert($("div").attr("style"))
})
})
</script>
</body>
<input placeholder="获取焦点后改变文字(attr 方法)">
<div style="width:200px;height:200px">点击切换样式和添加内容(toggleClass 方法和 html()方法)</div>
<button>点击获取 div元素的宽度和高度</button>
</html>


发布手记

热门词条