JavaScript-14
1.jQuery属性操作
- 设置或获取元素的固有属性
元素固有属性：元素本身自带的属性
- 京东购物车模块
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 <script type="text/javascript"> 8 $(function(){ 9 $(".kind input").click(function(){ 10 if($(this).prop("checked")){ 11 $(".product input").prop("checked","true"); 12 index = 3; 13 }else{ 14 $(".product input").prop("checked",""); 15 index = 0; 16 } 17 }) 18 $(".summary input").click(function(){ 19 if($(this).prop("checked")){ 20 $(".product input").prop("checked","true"); 21 $(".kind input").prop("checked","true"); 22 index = 3; 23 }else{ 24 $(".product input").prop("checked",""); 25 $(".kind input").prop("checked",""); 26 index = 0; 27 } 28 }) 29 var index = 0; 30 $(".product input").change(function(){ 31 if($(this).prop("checked")){ 32 index++ 33 }else{ 34 index--; 35 } 36 if(index === 3){ 37 $(".kind input").prop("checked","true"); 38 $(".summary input").prop("checked","true"); 39 } 40 }) 41 }) 42 script> 43 <style type="text/css"> 44 * { 45 padding: 0; 46 margin: 0; 47 } 48 49 .box { 50 width: 1200px; 51 margin: 40px auto; 52 } 53 54 .kind { 55 background-color: rgb(240, 243, 240); 56 padding: 10px; 57 border-radius: 3px; 58 } 59 60 .kind em { 61 font-style: normal; 62 display: inline-block; 63 width: 130px; 64 } 65 66 .kind .product_slogan { 67 width: 480px; 68 } 69 70 .product div { 71 width: 1200px; 72 height: 250px; 73 border: rgb(240, 243, 240) solid 1px; 74 border-top: rgb(161, 164, 161) solid 2px; 75 margin-top: 20px; 76 } 77 78 .product input { 79 margin: 20px; 80 } 81 82 .summary { 83 background-color: palegoldenrod; 84 height: 30px; 85 width: 1182px; 86 margin-top: 20px; 87 padding-left: 20px; 88 } 89 style> 90 head> 91 <body> 92 <div class="box"> 93 <div class="kind"> 94 <input type="checkbox"/> 95 <em>全选em> 96 <em class="product_slogan">商品em> 97 <em>单价em> 98 <em>数量em> 99 <em>小计em> 100 <em>操作em> 101 div> 102 <div class="product"> 103 <div><input type="checkbox">div> 104 <div><input type="checkbox">div> 105 <div><input type="checkbox">div> 106 div> 107 <div class="summary"> 108 <input type="checkbox" />全选 109 div> 110 div> 111 body> 112 html>
- jQuery内容文本值：html()相当于JavaScript的innerHTML；text相当于JavaScript的innerText
parents("选择器")：可以返回指定的祖先元素
toFixed(number)：可以指定保留number位小数
- 遍历元素：给同一类元素做不同的操作
- 语法一：$("div").each(function(index, domEle){xxxx})
- each 方法遍历匹配每一个元素，主要用DOM处理，each每一个
- 里面的回调函数有2个参数，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象
- 想要使用jQuery方法，需要给这个dom元素转换为jQuery对象，$(domEle)
- 语法一：$("div").each(function(index, domEle){xxxx})
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 head> 8 <body> 9 <div>1div> 10 <div>2div> 11 <div>3div> 12 <script> 13 var color = ['pink','skyblue','orange']; 14 $("div").each(function(index,domEle){ 15 $(domEle).css("background-color",color[index]); 16 }) 17 script> 18 body> 19 html>
-
- 语法2：$.each(object,function(index,element){xxxx;})
- $.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
- 里面函数有两个参数：index是每个元素的索引号；element遍历内容
- 语法2：$.each(object,function(index,element){xxxx;})
- 创建、添加、删除元素
- 创建元素：$("");
- 添加元素
- 内部添加：element.append("内容")，放在最后；element.prepend("内容")，放在最前
- 外部添加：element.after("内容")，把内容放在目标元素后面；element.before("内容")，把内容放在目标元素前面
- 删除元素：element.remove()
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 head> 8 <body> 9 <ul> 10 <li>原先的lili> 11 ul> 12 <div class="test">我是原先的divdiv> 13 <script> 14 $(function(){ 15 // 1.添加元素：父子关系 16 var li = $("我是后来创建的li "); 17 // 添加元素 18 // -内部添加，并且放到 内容的最后面 19 $("ul").append(li); 20 // -内部添加，并且放到内容的最前面 21 // $("ul").prepend(li); 22 // 2.外部添加：兄弟关系 23 var div = $("我是后来创建的div") 24 $("div").after (div); 25 // 3.删除元素 26 // $("ul").remove();可以删除匹配的元素 27 // $("ul").empty();删除匹配元素的子节点 28 // $("ul").html("");删除匹配元素的子节点 29 }) 30 script> 31 body> 32 html>
- 品优购案例实现
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 <script type="text/javascript"> 8 $(function(){ 9 $(".kind input").click(function(){ 10 if($(this).prop("checked")){ 11 $(".product input").prop("checked","true"); 12 index = 3; 13 }else{ 14 $(".product input").prop("checked",""); 15 index = 0; 16 } 17 addColor() 18 }) 19 $(".summary input").click(function(){ 20 if($(this).prop("checked")){ 21 $(".product input").prop("checked","true"); 22 $(".kind input").prop("checked","true"); 23 index = 3; 24 }else{ 25 $(".product input").prop("checked",""); 26 $(".kind input").prop("checked",""); 27 index = 0; 28 } 29 addColor() 30 }) 31 var index = 0; 32 $(".product input").change(function(){ 33 if($(this).prop("checked")){ 34 index++ 35 }else{ 36 index--; 37 } 38 if(index === 3){ 39 $(".kind input").prop("checked","true"); 40 $(".summary input").prop("checked","true"); 41 } 42 addColor() 43 }) 44 // 加减操作 45 $(".count input.plus").click(function(){ 46 var num = $(this).siblings("input.num").val(); 47 num++; 48 $(this).siblings("input.num").val(num); 49 var price = +$(this).parent().siblings(".price").html().slice(1,-1); 50 $(this).parent().siblings(".subtotal").html("￥"+(price*num).toFixed(2)); 51 }) 52 $(".count input.sub").click(function(){ 53 var num = $(this).siblings("input.num").val(); 54 if(num == 1) 55 return false; 56 num--; 57 $(this).siblings("input.num").val(num); 58 var price = +$(this).parent().siblings(".price").html().slice(1,-1); 59 $(this).parent().siblings(".subtotal").html("￥"+(price*num).toFixed(2)); 60 }) 61 // 直接修改表单 62 $(".count input.num").change(function(){ 63 if($(this).val() <= 1){ 64 alert("对不起您的输入有误"); 65 $(this).val(1); 66 }else{ 67 var num = $(this).val(); 68 var price = +$(this).parent().siblings(".price").html().slice(1,-1); 69 $(this).parent().siblings(".subtotal").html("￥"+(price*num).toFixed(2)); 70 } 71 }) 72 // 商品总个数 73 function add(){ 74 var count = 0; 75 var money = 0; 76 $(".product .count .num").each(function(index,domEle){ 77 count += +$(domEle).val(); 78 money += +$(domEle).val()* +$(domEle).parent().siblings(".price").html().slice(1,-1);; 79 }) 80 $(".total").html("已经选"+count+"件商品"); 81 $(".global_value").html("￥"+money.toFixed(2)); 82 } 83 $(".product .count input").click(add) 84 $(".product .count .num").change(function(){ 85 var count = 0; 86 var money = 0; 87 $(".product .count .num").each(function(index,domEle){ 88 count += +$(domEle).val(); 89 money += +$(domEle).val()* +$(domEle).parent().siblings(".price").html().slice(1,-1);; 90 }) 91 $(".total").html("已经选"+count+"件商品"); 92 $(".global_value").html("￥"+money.toFixed(2)); 93 }) 94 95 // 从表单中删除 96 $(".del").click(function(){ 97 $(this).parent().remove(); 98 add(); 99 }) 100 // 删除选中的商品 101 $(".delAll").click(function(){ 102 $(".choice:checked").parent().remove(); 103 add(); 104 }) 105 106 // 选中商品添加背景 107 function addColor(){ 108 $(".choice:checked").parent().css("background-color","rgba(130, 225, 255,0.3)") 109 $(".choice").each(function(index,domEle){ 110 if(!$(domEle).prop("checked")) 111 $(this).parent().css("background-color","") 112 }) 113 } 114 $(".choice").click(addColor()); 115 }) 116 script> 117 <style type="text/css"> 118 * { 119 padding: 0; 120 margin: 0; 121 } 122 123 .box { 124 width: 1200px; 125 margin: 40px auto; 126 } 127 128 .kind { 129 background-color: rgb(240, 243, 240); 130 padding: 10px; 131 border-radius: 3px; 132 } 133 134 .kind em { 135 font-style: normal; 136 display: inline-block; 137 width: 130px; 138 } 139 140 .kind .product_slogan { 141 width: 480px; 142 } 143 144 .product div { 145 width: 1200px; 146 height: 250px; 147 border: rgb(240, 243, 240) solid 1px; 148 border-top: rgb(161, 164, 161) solid 2px; 149 margin-top: 20px; 150 } 151 152 .product .choice { 153 margin: 20px; 154 } 155 156 .summary { 157 background-color: palegoldenrod; 158 height: 30px; 159 width: 1182px; 160 margin-top: 20px; 161 padding-left: 20px; 162 } 163 164 .count { 165 display: inline-block; 166 width: 70px; 167 margin-left: 80px; 168 margin-top: 20px; 169 } 170 171 .product .count input{ 172 float: left; 173 width: 20px; 174 border-radius: 0; 175 border: 1px solid; 176 text-align: center; 177 } 178 179 .price { 180 margin-left: 570px; 181 margin-top: 20px; 182 } 183 184 .subtotal { 185 margin-left: 55px; 186 margin-top: 20px; 187 } 188 189 .global_value { 190 color: red; 191 font-weight: bold; 192 } 193 194 .total { 195 font-size: 10px; 196 color: rgb(161, 164, 161); 197 margin-left: 680px; 198 } 199 200 .del { 201 margin-left: 90px; 202 } 203 204 .del a{ 205 color: #000; 206 text-decoration: none; 207 } 208 209 .delAll { 210 margin-left: 40px; 211 } 212 213 .delAll a { 214 color: #000; 215 text-decoration: none; 216 font-size: 14px; 217 } 218 219 .delAll a:hover { 220 color: red; 221 } 222 style> 223 head> 224 <body> 225 <div class="box"> 226 <div class="kind"> 227 <input type="checkbox"/> 228 <em>全选em> 229 <em class="product_slogan">商品em> 230 <em>单价em> 231 <em>数量em> 232 <em>小计em> 233 <em>操作em> 234 div> 235 <div class="product"> 236 <div> 237 <input type="checkbox" class="choice"> 238 <span class="price">￥12.60span> 239 <span class="count"> 240 <input class="plus" type="button" value="+"/> 241 <input type="text" class="num" value="1" /> 242 <input class="sub" type="button" value="-"/> 243 span> 244 <span class="subtotal">￥12.60span> 245 <span class="del"><a href="#">删除a>span> 246 div> 247 <div> 248 <input type="checkbox" class="choice"> 249 <span class="price">￥24.80span> 250 <span class="count"> 251 <input class="plus" type="button" value="+"/> 252 <input type="text" class="num" value="1" /> 253 <input class="sub" type="button" value="-"/> 254 span> 255 <span class="subtotal"> 256 ￥24.80 257 span> 258 <span class="del"><a href="#">删除a>span> 259 div> 260 <div> 261 <input type="checkbox" class="choice"> 262 <span class="price">￥29.80span> 263 <span class="count"> 264 <input class="plus" type="button" value="+"/> 265 <input type="text" class="num" value="1" /> 266 <input class="sub" type="button" value="-"/> 267 span> 268 <span class="subtotal">￥29.80span> 269 <span class="del"><a href="#">删除a>span> 270 div> 271 div> 272 <div class="summary"> 273 <input type="checkbox" />全选 274 <span class="delAll"><a href="#">删除选中的商品a>span> 275 <span class="total">已经选3件商品 总价:span> 276 <span class="global_value">￥67.20span> 277 div> 278 div> 279 body> 280 html>
- jQuery尺寸
| 语法 | 用法 |
|
width()/height() |
取得匹配元素宽度和高度值 只算width和height |
| innerWidth()/innerHeight() | 取得匹配元素宽度和高度值，包含padding |
| outerWidth()/outerHeight() | 取得匹配元素宽度和高度值，包含padding、border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素宽度和高度值，包含padding、border、margin |
-
- 以上参数为空，则是获取相应值，返回的是数字型
- 如果参数为数字，则是修改相应的值，修改都是width/height
- 参数不必写单位
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 <style type="text/css"> 8 div { 9 width: 300px; 10 height: 300px; 11 margin: 20px; 12 border: 5px pink solid; 13 background-color: aqua; 14 padding: 10px; 15 } 16 style> 17 head> 18 <body> 19 <div>div> 20 <script type="text/javascript"> 21 // 1.width()/height()获取设置元素width和height大小 22 console.log($("div").width()); 23 // -修改直接在width里面赋值，不需要带单位 24 // 2.innerWidth()/innerHeight()获取设置元素的width和hight+padding的大小 25 console.log($("div").innerWidth()); 26 $("div").innerWidth(50); 27 // outerWidth()/outerHeight()直接把边框计算进去：height/width+padding+border 28 // console.log($("div").outerWidth()); 29 // $("div").outerWidth(50); 30 // outerWidth(true)/outerHeight(true) = ：height/width+padding+border+margin 31 console.log($("div").outerWidth(true)); 32 script> 33 body> 34 html>
- jQuery位置：offset()、position()、scrollTop()/scrollLeft()
- offset()：设置或获取元素偏移
- 设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
- 该方法有两个属性left、top，分别返回距离文档左侧或文档顶部的距离
- 可以设置元素的偏移：offset({top: 200,left: 300})
- position()：用于返回被选元素相对于带有定位父级元素偏移坐标
- 如果父级都没有定位，则以文档为准
- 这个方法只能获取不能设置偏移
- scrollTop()/scroolLeft()：设置或获取元素被卷曲头部和左侧
- 同样对括号进行赋值，可以使页面打开时，进行滚轮滑动的操作，滑到指定位置
- offset()：设置或获取元素偏移
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 <style type="text/css"> 8 .container { 9 width: 600px; 10 height: 1600px; 11 background-color: #00FFFF; 12 margin: 300px auto; 13 } 14 15 .back { 16 display: inline-block; 17 width: 64px; 18 background-color: pink; 19 height: 50px; 20 line-height: 50px; 21 display: none; 22 position: fixed; 23 margin-left: 1100px; 24 } 25 style> 26 head> 27 <body> 28 <div class="back">返回顶部div> 29 <div class="container">div> 30 <script> 31 $(function(){ 32 // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() 33 // 页面滚动事件 34 var boxTop = $(".container").offset().top; 35 $(window).scroll(function(){ 36 if($(document).scrollTop() >= boxTop){ 37 $(".back").show(); 38 }else{ 39 $(".back").hide(); 40 } 41 }) 42 }) 43 script> 44 body> 45 html>
- 品优购电梯导航案例
1 DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>title> 6 <script src="js/jquery-3.6.0.js">script> 7 <script type="text/javascript"> 8 $(function() { 9 //当我们点击了小li，不需要执行sroll里面的背景切换效果 10 //节流阀(互斥锁) 11 var flag = true; 12 function show() { 13 if ($("html,body").scrollTop() >= $(".advert").offset().top) { 14 $(".nav").stop().fadeIn(); 15 } else { 16 $(".nav").stop().fadeOut(); 17 } 18 if(flag){ 19 $(".box div").each(function(){ 20 if($("html,body").scrollTop() <= $(this).offset().top + 50){ 21 $(".nav li").eq($(this).index()).addClass("current"); 22 $(".nav li").eq($(this).index()).siblings().removeClass("current"); 23 if($("html,body").scrollTop()>=$(document).height()-$(window).height() - 100){ 24 $(".nav li").eq($(".box div").length - 1).addClass("current"); 25 $(".nav li").eq($(".box div").length - 1).siblings().removeClass("current"); 26 } 27 return false; 28 } 29 }) 30 } 31 } 32 show(); 33 $(window).scroll(show); 34 //点击电梯导航页面可以滚动到相应的位置 35 $(".nav li").click(function() { 36 flag = false; 37 var top = $(".box div").eq($(this).index()).offset().top; 38 $("body,html").stop().animate({ 39 scrollTop: top - 150 40 },function(){ 41 flag = true; 42 }); 43 //点击之后给当前的li添加背景颜色 44 $(this).addClass("current") 45 $(this).siblings().removeClass("current"); 46 }) 47 48 }) 49 script> 50 <style type="text/css"> 51 * { 52 padding: 0; 53 margin: 0; 54 } 55 56 .box { 57 margin: 20px auto; 58 width: 800px; 59 } 60 61 .box div { 62 height: 250px; 63 margin-bottom: 20px; 64 background-color: #FFC0CB; 65 } 66 67 .nav { 68 overflow: hidden; 69 position: fixed; 70 margin-top: 150px; 71 display: none; 72 } 73 74 .nav li { 75 width: 100px; 76 color: #696969; 77 text-align: center; 78 height: 40px; 79 line-height: 40px; 80 border-top: dimgrey solid 1px; 81 cursor: pointer; 82 } 83 84 .nav li:hover { 85 background-color: #FF0000; 86 color: white; 87 } 88 89 li.current { 90 background-color: #FF0000; 91 color: white; 92 } 93 94 .advert { 95 width: 1100px; 96 height: 200px; 97 margin: 50px auto 0px auto; 98 background-color: deepskyblue; 99 } 100 style> 101 head> 102 <body> 103 <div class="nav"> 104 <ul> 105 <li>家用电器li> 106 <li>手机通讯li> 107 <li>品质生活li> 108 <li>智能设备li> 109 <li>服饰搭配li> 110 <li style="border-bottom: dimgrey solid 1px;">饮食起居li> 111 ul> 112 div> 113 <div class="advert"> 114 我是广告 115 div> 116 <div class="box"> 117 <div>家用电器div> 118 <div>手机通讯div> 119 <div>品质生活div> 120 <div>智能设备div> 121 <div>服饰搭配div> 122 <div>饮食起居div> 123 div> 124 body> 125 html>