文章目录
JQuery属性操作
就是用JS操作HTML标签的属性
1.取得元素的指定属性值
<script>
$(function(){
var src=$("img").attr("src");
console.log(src);
})
</script>
</head>
<body>
<img src="../img/1.jpg" alt="找不到图片"/>
</body>
2.为元素的指定属性赋值
$(function(){
var attr=$("img").attr("src","../img/10.jpg");
console.log(attr);
})
3.删除元素的指定属性
$(function(){
var attr=$("img").removeAttr("src");
})
4.取得指定属性的值
另一种方式,prop()
<script>
$(function(){
var pr=$("input:eq(2)").prop("checked");
console.log(pr)
})
</script>
</head>
<body>
<input type="checkbox"/>爬山
<input type="checkbox"/>游泳
<input type="checkbox" checked/>唱歌
<input type="checkbox"/>跳舞
</body>
prop(“属性”):取得元素指定的属性值(一般用来操作HTML原生的属性)
而attr()可以操作原生属性,还可以操作自定义的属性
5.为元素设置属性值
$(function(){
$("input:eq(0)").prop("checked",true);
})
$(function(){
$("input:eq(2)").prop("disabled",true);
})
处于disabled的true状态则选择框不能操作了
6.为元素添加class属性
<script>
$(function(){
$("button").click(function(){
$("div").addClass('divClass');
})
})
</script>
<style>
.divClass{
height: 200px;
width: 500px;
background-color: pink;
margin-top: 100px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div></div>
<button type="button">添加样式</button>
</body>
7.删除元素的指定的class属性
<script>
$(function(){
$("button:first").click(function(){
$("div").addClass('divClass1 divClass2');
})
$("button:last").click(function(){
$("div").removeClass('divClass1 divClass2');
})
})
</script>
<style>
.divClass1{
border:solid deepskyblue;
height: 200px;
width: 500px;
margin-top: 100px;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}
.divClass2{
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<button type="button">添加样式</button>
<button type="button">删除样式</button>
</body>
删除p元素的class属性的"sclected",删除的是值
8.取得指定元素下的HTML值
$(function(){
var html=$("p").html();
console.log(html);
})
9.为指定元素设置新的HTML代码
<script>
$(function(){
$("p").html("<h1>周末好!</h1>");
})
</script>
</head>
<body>
<p>
<span>段落!</span>
</p>
</body>
10.取得指定元素下的文本值
$(function(){
$("p").text();
})
11.替换文本值
$(function(){
$("p").text("Hello World!");
})
12.取得文本框的值
<script>
$(function(){
console.log($("input").val());
})
</script>
</head>
<body>
<input type="text" name="pwd" value="1234" />
</body>
13.替换文本框的值
$(function(){
$("input").val("Hello World");
})