样式&＃xff1a;在style里面写的&＃xff0c;用 css 来操作
属性&＃xff1a;在标签里面写的&＃xff0c;用 attr 方法来操作
attr 方法
- 设置属性&＃xff0c;不设置值&＃xff1a;返回的是该属性的值
$("img").attr("alt");
$("img").attr("alt", "图片提示");
$("img").attr({alt:"提示",title:"标题",aa:"bb"
})
宠物画廊
DOCTYPE html>
<html><head lang&＃61;"en"><meta charset&＃61;"UTF-8"><title>title><style type&＃61;"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><script src&＃61;"../jquery-1.12.4.js">script><script>$(function() {$("#imagegallery a").click(function() {let href &＃61; $(this).attr("href");$("#image").attr("src", href);let title &＃61; $(this).attr("title");$("#des").text(title);return false;});});script>head><body><h2>宠物画廊h2><ul id&＃61;"imagegallery"><li><a href&＃61;"https://img0.baidu.com/it/u&＃61;2121198274,334472822&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" title&＃61;"宠物A"><img src&＃61;"https://img0.baidu.com/it/u&＃61;2121198274,334472822&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" width&＃61;"100" alt&＃61;"宠物1" />a>li><li><a href&＃61;"https://img2.baidu.com/it/u&＃61;2811156018,1959433119&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" title&＃61;"宠物B"><img src&＃61;"https://img2.baidu.com/it/u&＃61;2811156018,1959433119&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" width&＃61;"100" alt&＃61;"宠物2" />a>li><li><a href&＃61;"https://img2.baidu.com/it/u&＃61;2755867228,1853722967&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" title&＃61;"宠物C"><img src&＃61;"https://img2.baidu.com/it/u&＃61;2755867228,1853722967&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" width&＃61;"100" alt&＃61;"宠物3" />a>li><li><a href&＃61;"https://img0.baidu.com/it/u&＃61;3246027752,1353919475&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" title&＃61;"宠物D"><img src&＃61;"https://img0.baidu.com/it/u&＃61;3246027752,1353919475&fm&＃61;26&fmt&＃61;auto&gp&＃61;0.jpg" width&＃61;"100" alt&＃61;"宠物4" />a>li>ul><div style&＃61;"clear:both">div><img id&＃61;"image" src&＃61;"images/placeholder.png" alt&＃61;"" width&＃61;"450px" /><p id&＃61;"des">选择一个图片p>body>
html>
效果图&＃xff1a;
prop 方法
对于布尔类型的属性&＃xff0c;不要attr方法&＃xff0c;应该用prop方法 prop用法跟attr方法一样
表格全选
DOCTYPE html>
<html><head lang&＃61;"en"><meta charset&＃61;"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;}tbody tr td:first-child {text-align: center;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}style>head><body><div class&＃61;"wrap"><table><thead><tr><th><input type&＃61;"checkbox" id&＃61;"j_cbAll" />th><th>商品th><th>价钱th>tr>thead><tbody id&＃61;"j_tb"><tr><td><input type&＃61;"checkbox" />td><td>iPhone8td><td>8000td>tr><tr><td><input type&＃61;"checkbox" />td><td>iPad Protd><td>5000td>tr><tr><td><input type&＃61;"checkbox" />td><td>iPad Airtd><td>2000td>tr><tr><td><input type&＃61;"checkbox" />td><td>Apple Watchtd><td>2000td>tr>tbody>table>div><script src&＃61;"jquery-1.12.4.js">script><script>$(function() {$("#j_cbAll").click(function() {$("#j_tb input").prop("checked", $(this).prop(&＃39;checked&＃39;))})$("#j_tb input").click(function(){let checkboxAll &＃61; $("#j_tb input").lengthlet ischecked &＃61; $("#j_tb input:checked").lengthif (ischecked &＃61;&＃61;&＃61; checkboxAll) {$("#j_cbAll").prop("checked",true)} else{$("#j_cbAll").prop("checked",false)}})});script>body>html>
效果图&＃xff1a;
京公网安备 11010802041100号