16、jQuery 对属性的操作
2022-09-01 本文已影响0人
一直流浪
attr()：
- attr(属性名)：获取属性
- attr(属性名，属性值)：修改或添加属性
- removeAttr(属性名)：移除属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性的操作</title>
</head>
<body>
<input type="button" value="获取属性" id="btn1" />
<input type="button" value="设置属性" id="btn2" />
<input type="button" value="移除属性" id="btn3" />
<br />
<img src="img/img5.jpg" alt="穷极一生得不到的人" title="小可爱" aaa='aaa' />
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//jQuery中属性操作：attr() removeAttr()
//1.设置属性
$('#btn2').click(function(){
//设置单属性
// $('img').attr('src','img/img2.jpg'); //以前有的src属性，可以更改
// $('img').attr('aaa','呵呵'); //修改自定义属性
// $('img').attr('bbb','bbb'); //如果没有的属性，会添加属性
//设置多属性
$('img').attr({
src:'img/img2.jpg',
aaa:'hehe',
bbb:'bbb'
});
});
//2.获取属性
$('#btn1').click(function(){
console.log($('img').attr('src')); //系统自带的属性可以获取
console.log($('img').attr('aaa')); //自定义的属性也可以获取
console.log($('img').attr('bbb')); //如果没有这个属性，会返回undefined
});
//3.移除属性
$('#btn3').click(function(){
//移除单属性
// $('img').removeAttr('src'); //系统自带的属性可以移除
// $('img').removeAttr('aaa'); //自定义的属性也可以移除
// $('img').removeAttr('bbb'); //如果没有这个属性，也不会报错
//移除多属性
$('img').removeAttr('src aaa alt');
});
})
</script>
案例：美女相册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>美女相册</title>
<style>
body{
margin-left: 100px;
}
ul{
list-style-type: none;
padding: 0px;
}
li{
display:inline-block;
}
.imgSmall{
width: 100px;
height: 100px;
margin-right: 10px;
}
</style>
</head>
<body>
<h2>美女相册</h2>
<ul id="imagellery">
<li>
<a href="img/img2.jpg" title="美女1">
<img class="imgSmall" src="img/img2.jpg" />
</a>
</li>
<li>
<a href="img/img5.jpg" title="美女2">
<img class="imgSmall" src="img/img5.jpg" />
</a>
</li>
<li>
<a href="img/img6.jpg" title="美女3">
<img class="imgSmall" src="img/img6.jpg" />
</a>
</li>
<li>
<a href="img/img7.jpg" title="美女4">
<img class="imgSmall" src="img/img7.jpg" />
</a>
</li>
</ul>
<div style="clear:both"></div>
<img id="image" src="img/img2.jpg" alt="" width="450px" />
<p id="des">选择一张图片</p>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//1.给小图片的a标签添加事件
//让大图的src与点击的小图的href一致
//让id为des的p标签的值为小图title
$('#imagellery>li>a').click(function(){
var scrValue = $(this).attr('href');
var titleValue = $(this).attr('title');
console.log(scrValue);
console.log(titleValue);
$('#image').attr('src',scrValue);
$('#des').text(titleValue);
return false;
})
})
</script>
prop()：
有一类属性：比如checked，写在元素身上表示选中，没有表示没有被选中。
这一类属性jQuery 不能再用attr,要用prop方法，用attr()的话，无论选中或是没选中都是undefined
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="按钮" id="btn1" />
<input type="checkbox" id="ckb1" />
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//有一类属性：比如checked，写在元素身上表示选中，没有表示没有被选中
//js如何操作？设置属性为true或false
// document.getElementById("btn1").onclick=function(){
// //设置
//// document.getElementById("ckb1").checked = true;
// //获取
// console.log(document.getElementById("ckb1").checked);
//
// }
//jQuery 不能再用attr,要用prop方法
$('#btn1').click(function(){
//无论选中或是没选中都是undefined
// console.log($('#ckb1').attr('checked'));
//如果多选框是选中状态返回true，未选中返回false
console.log($('#ckb1').prop('checked'));
})
})
</script>
案例：表格的全选反选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格删除</title>
<style>
*{
padding: 0;
margin: 0;
}
table{
border-collapse:collapse ;
border-spacing: 0;
}
thead{
display: table-header-group;
vertical-align: middle;
border-color:inherit ;
}
tbody{
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
th{
padding: 10px 10px;
background-color: skyblue;
border: 1px solid white;
}
td{
padding: 10px 10px;
background-color: #eeeeee;
border: 1px solid #999999;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th><input type="checkbox" id="ckb_all"/></th>
<th>专栏</th>
<th>内容描述</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox" id="ckb1" class="ckb" /></td>
<td>JavaSE 学习笔记</td>
<td>参考Oracle官方文档，系统学习JavaSE</td>
</tr>
<tr>
<td><input type="checkbox" id="ckb2" class="ckb"/></td>
<td>Oracle数据库笔记</td>
<td>参考Oracle官方文档，系统学习Oracle数据库</td>
</tr>
<tr>
<td><input type="checkbox" id="ckb3" class="ckb"/></td>
<td>LeetCode热门算法100道</td>
<td>刷题的必选之路</td>
</tr>
<tr>
<td><input type="checkbox" id="ckb4" class="ckb"/></td>
<td>Linux学习笔记</td>
<td>从零学习Linux系统</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script type="text/javascript" src="js/jQuery.js" ></script>
<script>
$(function(){
//(1)设置全选按钮功能
$('#ckb_all').click(function(){
var ckb_all_value = $(this).prop('checked');
// console.log(ckb_all_value);
$('#tb .ckb').prop('checked',ckb_all_value);
});
//(2)如果多选框都选中了，则全选框也选中，如果有一个没选中，全选框就未选中
$('#tb .ckb').click(function(){
//判断下面的多选框是否都被选中了
var flag = true;
//(1)让每个多选框的checked值求与运算
// for(var i = 0;i<$('#tb .ckb').length;i++){
//// console.log($($('#tb .ckb')[i]).prop('checked'));
// flag = flag && $($('#tb .ckb')[i]).prop('checked');
// }
//(2)统计选中的次数和总框数比较
var numofAll = $('#tb .ckb').length;
var numofChecked = $('#tb .ckb:checked').length;
$('#ckb_all').prop('checked',numofAll==numofChecked);
});
})
</script>
