普通属性
1.设置属性:
- 设置单个属性:$(选择器).attr("属性名","属性值")
- 设置多个属性:$(选择器).attr({属性名:"属性值",属性名:"属性值"…}) 这里的属性名可加引号也可不加引号
2.获取属性:
- $(选择器).attr("属性名")
3.删除属性:
- $(选择器).removeAttr("属性名")
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<img id="img" src="20171122191603_896cd9.jpg" disabled/>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
//设置属性
$("#img").attr("width","300px");
$("#img").attr({"border":"3px",title:"love"})
//获取属性
var v1=$("#img").attr("src");
//删除属性
$("#img").removeAttr("disabled")
console.log(v1)
</script>
</body>
</html>
运行结果:
css属性
1.设置css属性:
- 设置单个css属性:$(选择器).css("属性名","属性值")
- 设置多个css属性:$(选择器).css({属性名:"属性值",属性名:"属性值"…}) 这里属性名的引号可加可不加
2.获取css属性:
- $(选择器).css("属性名")
3.添加样式:
- $(选择器).addClass("样式名")
4.删除样式:
- $(选择器).removeClass("样式名")
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.clr{
background: red;
}
.cor{
color: #00AAEE;
}
</style>
<body >
<div id="test" class="cor" >
<h1>hello world</h1>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
//设置css属性
$("#test").css("background","green")
$("#test").css({
background:"yellow",
color:"pink"
})
//获取css属性
console.log($("#test").css("color"))
//添加样式
$("#test").addClass("clr")
//删除样式
$("#test").removeClass("cor")
</script>
</body>
</html>
运行结果:
元素内容
1.设置元素内容:
- 设置的内容不会被html解析:$(选择器).text("内容")
- 设置的内容会被html解析:$(选择器).html(''内容')
2.获取元素内容:
- 获取的内容是呈现在页面上的:$(选择器).text()
- 获取的内容是元素里的源代码内容:$(选择器).html()
通常text()方法用于元素里的内容是纯文本,html()方法用于元素里的内容含有html标记。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<div id="test1"></div>
<div id="test2"></div>
<div id="test">
<h1>>hello world<</h1>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
$("#test1").text("<h1>>hello world<</h1>")
$("#test2").html("<h1>>hello world<</h1>")
var v1=$("#test").text();
var v2=$("#test").html()
console.log(v1)
console.log(v2)
</script>
</body>
</html>
运行结果:
表单对象value值
1.设置value值:
- $(选择器).val("value值")
2.获取value值
- $(选择器).val()
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<input id="username" type="text" name="username" value="哈哈">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script>
var v1=$("#username").val()
$("#username").val("嘻嘻")
console.log(v1)
</script>
</body>
</html>
运行结果: