黑馬jQuery教程3
阿新 • • 發佈：2020-08-18
1.操作屬性
| 方法 | 示例 | 說明 |
| attr() | elem.attr('屬性名'); | 獲取屬性 |
| elem.attr('屬性名','屬性值'); elem.attr({屬性名1:'屬性值1',屬性名2:'屬性值2',屬性名3:'屬性值3'}); | 設定屬性 | |
| removeAttr() | elem.removeAttr('屬性名'); elem.removeAttr('屬性名1 屬性名2 屬性名3'); | 刪除屬性 |
示例
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <input type="button" value="獲取屬性" id="btn1" /> <input type="button" value="設定屬性" id="btn2" /> <input type="button" value="移除屬性" id="btn3" /><br><br> <img src="cat.gif" alt="機器貓" title="機器貓" aaa="aaa" /> </body> </html> <script type="text/javascript" src="jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $('#btn1').click(function(){ console.log($('img').attr('src'));//再帶的屬性 console.log($('img').attr('aaa'));//自定義的屬性 console.log($('img').attr('hhh'));//未定義的屬性，返回undefined }); $('#btn2').click(function(){ // $('img').attr('src','zhuangtai.gif');//更改已有屬性 // $('img').attr('aaa','哈哈哈');//更改自定義屬性 // $('img').attr('bbb','bbb');//如果元素沒有這個屬性，就新增 $('img').attr({src:'zhuangtai.gif',aaa:'哈哈哈',bbb:'bbb'});//一次設定多個屬性 }); $('#btn3').click(function(){ // $('img').removeAttr('alt');//移除自帶屬性 // $('img').removeAttr('aaa');//移除自定義屬性 // $('img').removeAttr('bbb');//移除不存在的屬性 $('img').removeAttr('alt aaa bbb');//移除多個 }); }); </script>
1.1示例：相簿
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> li{float: left;list-style-type: none;margin-right:10px;} div.clear{clear:both;} div.defaultImg{width: 450px;height: 450px;background-color: #acacac;margin-left:40px;} img#image{margin-left:40px;} </style> </head> <body> <h2>汽車畫廊</h2> <ul id="imagellery"> <li> <a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597750497226&di=0da325d14a5b0099a9a504ef516aece3&imgtype=0&src=http%3A%2F%2Fwww2.autoimg.cn%2Fchejiahaodfs%2Fg30%2FM03%2FAD%2F9F%2Fautohomecar__ChsEf12nD7KAUmDYAACo1VeiDMM591.png" title="五菱巨集光"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597750497226&di=0da325d14a5b0099a9a504ef516aece3&imgtype=0&src=http%3A%2F%2Fwww2.autoimg.cn%2Fchejiahaodfs%2Fg30%2FM03%2FAD%2F9F%2Fautohomecar__ChsEf12nD7KAUmDYAACo1VeiDMM591.png" width="100" alt="五菱巨集光"> </a> </li> <li> <a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597750915191&di=e36aaec6f73d8225eb5b027adbdd8d6a&imgtype=0&src=http%3A%2F%2Fcar0.autoimg.cn%2Fcar%2Fupload%2F2015%2F3%2F13%2Fv_201503131743573193686112.jpg" title="陸風X8"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597750915191&di=e36aaec6f73d8225eb5b027adbdd8d6a&imgtype=0&src=http%3A%2F%2Fcar0.autoimg.cn%2Fcar%2Fupload%2F2015%2F3%2F13%2Fv_201503131743573193686112.jpg" width="100" alt="陸風X8"> </a> </li> <li> <a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597750988071&di=d87d8b941c5a6ea8c3020a1e92d3f6bf&imgtype=0&src=http%3A%2F%2Fcar3.autoimg.cn%2Fcardfs%2Fproduct%2Fg4%2FM12%2FF5%2F56%2Fautohomecar__wKgHy1ZZDj6AK9OEAAcmnVMfbeA833.jpg" title="哈弗H5"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597750988071&di=d87d8b941c5a6ea8c3020a1e92d3f6bf&imgtype=0&src=http%3A%2F%2Fcar3.autoimg.cn%2Fcardfs%2Fproduct%2Fg4%2FM12%2FF5%2F56%2Fautohomecar__wKgHy1ZZDj6AK9OEAAcmnVMfbeA833.jpg" width="100" alt="哈弗H5"> </a> </li> <li> <a href="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597751281169&di=f286ccac8ef17362d1e4a1c8ff053d4a&imgtype=0&src=http%3A%2F%2Fimg.pcauto.com.cn%2Fimages%2Fwxauto%2F4361DC646DEA232074E13B303B6015EA%2Fmmbiz_jpg%2FD0BWW7ia8rCPhfMPHGLejY6pEJ4NMVyzTCzc4ia09l1ZyQCubOEqIUGKscbA8IWrHQkXNia9P2aCMZ3fM0xSh4CWw_640x480.jpg" title="瓦茲獵人"> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597751281169&di=f286ccac8ef17362d1e4a1c8ff053d4a&imgtype=0&src=http%3A%2F%2Fimg.pcauto.com.cn%2Fimages%2Fwxauto%2F4361DC646DEA232074E13B303B6015EA%2Fmmbiz_jpg%2FD0BWW7ia8rCPhfMPHGLejY6pEJ4NMVyzTCzc4ia09l1ZyQCubOEqIUGKscbA8IWrHQkXNia9P2aCMZ3fM0xSh4CWw_640x480.jpg" width="100" alt="瓦茲獵人"> </a> </li> </ul> <div class="clear"></div> <img id="image" src="" alt="" width="450px" /> <div class="defaultImg"></div> <p id="des">選擇一個圖片</p> </body> </html> <script type="text/javascript" src="jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ $('li>a').click(function(){ //給小圖片a標籤設定一個單擊事件。讓id為image的img標籤修改src屬性為當前點選的a標籤的href值。讓id為des的p標籤文字設定為a標籤title屬性值。 //獲取當前點選的a標籤的href屬性值和title屬性值 var $desImg = $(this).attr('href'); var $desTitle = $(this).attr('title'); $('#image').attr('src',$desImg); $('#des').text($desTitle); $('.defaultImg').hide(); //阻止a標籤跳轉 return false; }) }); </script>
2.操作布林型別的屬性prop
在jQuery1.6以後，對於checked，selected，disable這類boolean屬性來說，不能用attr方法，只能用prop方法。
prop也可以獲取和設定屬性值
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> li{float: left;list-style-type: none;margin-right:10px;} div.clear{clear:both;} div.defaultImg{width: 450px;height: 450px;background-color: #acacac;margin-left:40px;} img#image{margin-left:40px;} </style> </head> <body> <input type="button" value="按鈕" id="btn1"><br><br> <input type="checkbox" id="ckb1"><br> </body> </html> <script type="text/javascript" src="jquery-3.4.1.js"></script> <script type="text/javascript"> $(function(){ //對於checked屬性，使用原生js來操作 /* document.getElementById('btn1').onclick = function(){ //設定操作 // document.getElementById("ckb1").checked = false; //獲取操作 console.log(document.getElementById("ckb1").checked); }*/ //在jQuery1.6之後，對於checked、selected、disable這類boolean型別的屬性來說，不能用attr方法，只能用prop方法。 $('#btn1').click(function(){ console.log($('#ckb1').prop("checked")); }); }); </script>
2.1示例：複選框全選與取消全選
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
li{float: left;list-style-type: none;margin-right:10px;}
div.clear{clear:both;}
div.defaultImg{width: 450px;height: 450px;background-color: #acacac;margin-left:40px;}
img#image{margin-left:40px;}
</style>
</head>
<body>
<input type="button" value="按鈕" id="btn1"><br><br>
<table id="table" cellspacing="0" cellpadding="5px" border="1">
<thead>
<tr bgcolor="skyblue">
<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>JavaScript</td>
<td>傳智播客-前端與移動開發學院</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>CSS</td>
<td>傳智播客-前端與移動開發學院</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>html</td>
<td>傳智播客-前端與移動開發學院</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>jQuery</td>
<td>傳智播客-前端與移動開發學院</td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script type="text/javascript">
$(function(){
//需求1:上面的多選框選中，下面的多選框跟著選中，上面的多選框取消選中，下面的多選框跟著不選中
//需求2:下面的多選框，都有單擊事件。
//如果下面的多選框都選中了，那麼上面的那個多選框跟著選中；如果下面的多選框有一個沒有選中，那麼上面的多選框就不選中
$('#j_cbAll').click(function(){
var $checkValue = $(this).prop('checked');
console.log($('#j_tb input'));
$('#j_tb input').prop('checked',$checkValue);
});
$('#j_tb input').click(function(){
//判斷下面的那四個多選框是否都被選中了
var numOfAll = $('#j_tb input').length;
var numOfSelect = $('#j_tb input:checked').length;
// if(numOfAll == numOfSelect){
// $('#j_cbAll').prop('checked',true);
// }else{
// $('#j_cbAll').prop('checked',false);
// }
//上面的這個判斷可以優化
$('#j_cbAll').prop('checked',numOfAll == numOfSelect);
});
});
</script>