jQuery属性设置
2022-03-16 本文已影响0人
马佳乐
获取属性
attr(属性名);
自带属性和自定义属性都可获取。如果没有该属性，则返回undefined
设置属性
attr(属性名，属性值);
可修改自带属性和自定义属性。如果没有该属性，则添加
可修改单属性或多属性。
设置多属性
attr({
属性名1:属性值1，
属性名2:属性值2，
...
});
移除属性
removeAttr(属性名);
可移除自带属性和自定义属性。如果没有该属性，也不会报错
可移除单属性或多属性。
移除多属性
removeAttr("属性1 属性2 ...");
相册放大练习：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
font-family: "Helvetica", "Arial", serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1 {
color: #333;
background-color: transparent;
}
a {
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul {
padding: 0;
}
li {
float: left;
padding: 1em;
list-style: none;
}
#imagegallery {
list-style: none;
}
#imagegallery li {
margin: 0px 20px 20px 0px;
padding: 0px;
display: inline;
}
#imagegallery li a img {
border: 0;
}
</style>
</head>
<body>
<h2>
画廊相册展示
</h2>
<ul id="imagegallery">
<li>
<a href="images/1.jpg" title="图片A">
<img src="images/1-small.jpg" width="100" alt="图片1" />
</a>
</li>
<li>
<a href="images/2.jpg" title="图片B">
<img src="images/2-small.jpg" width="100" alt="图片2" />
</a>
</li>
<li>
<a href="images/3.jpg" title="图片C">
<img src="images/3-small.jpg" width="100" alt="图片3" />
</a>
</li>
<li>
<a href="images/4.jpg" title="图片D">
<img src="images/4-small.jpg" width="100" alt="图片4" />
</a>
</li>
</ul>
<div style="clear:both"></div>
<img id="image" src="images/placeholder.png" alt="" width="450px" />
<p id="des">请选择一个图片</p>
</body>
</html>
<script src="js/jquery.js"></script>
<script>
$(function() {
//1. 给所有的a注册点击事件
$("#imagegallery a").click(function() {
//获取当前点击的a标签的href属性的值
var $href = $(this).attr("href");
//给img标签的src属性赋值（href属性值）
$("#image").attr("src", $href);
//获取当前点击的a标签的title属性的值
var $title = $(this).attr("title");
//给p标签的src属性赋值（title属性值）
$("#des").text($title);
//组织a标签的跳转
return false;
});
});
</script>
在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法（结果只会返回undefined），只能用prop方法（返回true或false）。
用法：
prop(属性名[,属性值]);
获取或设置属性值
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" id="btn1" />
<br />
<input type="checkbox" id="ckb1" />
</body>
</html>
<script type="text/javascript" src="js/jquery.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
//console.log($("#ckb1").attr("checked"));//undefined
console.log($("#ckb1").prop("checked"));//true或false
});
});
</script>
全选全不选按钮练习
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
text-align: center;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>菜名</th>
<th>饭店</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧肉</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>西红柿鸡蛋</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>红烧狮子头</td>
<td>田老师</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>日式肥牛</td>
<td>田老师</td>
</tr>
</tbody>
</table>
</div>
<script src="js/jquery.js"></script>
<script>
$(function() {
//设置第一行单选按钮带动下面按钮的全选和全不选
$("#j_cbAll").click(function() {
//修改下面的checkbox的checked属性值跟随id为j_cbAll的checkbox
$("#j_tb input").prop("checked", $(this).prop("checked"));
});
//设置下面按钮带动第一行单选按钮的全选和全不选
$("#j_tb input").click(function() {
//与下面方法等价
//if($("#j_tb input:checked").length == $("#j_tb input").length) {
// $("#j_cbAll").prop("checked", true)
//} else {
// $("#j_cbAll").prop("checked", false)
//}
$("#j_cbAll").prop("checked", $("#j_tb input:checked").length == $("#j_tb input").length)
});
});
</script>
</body>
</html>
