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)
 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>1</div>
10         <div>2</div>
11         <div>3</div>
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遍历内容
  • 创建、添加、删除元素
    • 创建元素：$(“<div></div>”);
    • 添加元素
      • 内部添加：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>原先的li</li>
11         </ul>
12         <div class="test">我是原先的div</div>
13         <script>
14             $(function(){
15                 // 1.添加元素：父子关系
16                 var li = $("<li>我是后来创建的li</li>");
17                 // 添加元素 
18                 //     -内部添加，并且放到 内容的最后面
19                 $("ul").append(li);
20                 //     -内部添加，并且放到内容的最前面
21                 // $("ul").prepend(li);
22                 // 2.外部添加：兄弟关系
23                 var div = $("<div>我是后来创建的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.60</span>
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.60</span>
245                     <span class="del"><a href="#">删除</a></span>
246                 </div>
247                 <div>
248                     <input type="checkbox" class="choice">
249                     <span class="price">￥24.80</span>
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.80</span>
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.80</span>
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件商品&nbsp;&nbsp;&nbsp;总价:</span>
276                 <span class="global_value">￥67.20</span>
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()：设置或获取元素被卷曲头部和左侧
      • 同样对括号进行赋值，可以使页面打开时，进行滚轮滑动的操作，滑到指定位置
 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>

 

版权声明：本文为Miraitowa56原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Miraitowa-fan/p/16079374.html