一、jQuery遍历
jQuery遍历(用一种相对的关系来查找html元素)
向上查找(祖先元素)
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素;
parents() 方法会使用可选参数来过滤对祖先元素的搜索
向下查找(子元素)
children() 方法返回被选元素的所有直接子元素(可以过滤搜索指定元素)
find() 方法返回被选元素的后代元素
find内部必须写入参数
同级查找(同胞)
siblings() 方法返回被选元素的所有同胞元素 (可以过滤搜索指定元素)
二、jQuery获取及设置css 类
css()设置属性;
设置多个CSS属性:css({"样式名":"value","样式名":"value",...});
返回css()属性语法:css("样式名");
addClass()向被选元素添加一个或多个类;class
removeClass()从被选元素删除一个或多个类;
hasClass()检查被选元素是否包含指定的class
三、jQuery获取及设置内容
text()设置或返回所选元素的文本内容;
html()设置或返回所选元素的内容(包括 HTML 标记);
val()设置或返回表单字段的值;
四、案例:模拟加入购物车效果
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模拟加入购物车效果</title> <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} .top{ width: 402px; height: 35px; line-height: 35px; text-align:center; margin-top: 50px; background: #C40000; color:#fff; } .main { width: 400px; height: 400px; border: 1px solid #C40000; } p { width: 400px; height: 26px; margin-top:10px; } b { width: 90px; height: 26px; line-height: 26px; text-align: center; font-size: 12px; color:#838383; border: 1px solid #ccc; float: left; margin-left: 5px; } span { width: 90px; height: 26px; line-height: 26px; text-align: center; font-size: 12px; color:#838383; border: 1px solid #ccc; display: block; float: left; margin-left: 5px; } span:hover {cursor: pointer;} button { width: 120px; height: 35px; background: #C40000; color: white; border: 0px; } button:hover {cursor: pointer;} .notice{border:0px;} .notice+input{ width:60px; margin-left: 6px; text-align: center; } .select{ border:2px solid red; width: 88px;height: 24px;color: red;line-height: 24px; } </style> <script type="text/javascript"> $(function(){ $('span').click(function(){ if($(this).hasClass('select')){ $(this).removeClass('select') }else{ $(this).addClass('select').siblings('span').removeClass('select') } }) $('#sub').click(function(){ var form={};//创建一个空对象,用于存储数据 var flag=true; //判断能不能加入购物车 //判断是否每个选项都选中; 没选中则弹窗警告; 选中了则添加至需要发送的表单数据里面 $('.item').each(function(){ if($(this).children('span.select').length !=1){ flag=false; }else{ var key=$(this).attr('name') var value=$(this).children('span.select').html() form[key]=value; } }) if($('.item1 input').val()<=0){ flag=false; }else{ form['num']=$('.item1 input').val() console.log(form) } if(flag){ alert('加入购物车') } }) }) </script> </head> <body> <div class="top">请选择信息后加入购物车</div> <div class="main"> <p class="item" name="version"> <b class="notice">版本</b> <span>ONE A2001</span> <span>ONE A0001</span> <span>ONE A1001</span> </p> <p class="item" name="color"> <b class="notice">机身颜色</b> <span>白色</span> <span>黑色</span> <span>金色</span> </p> <p class="item" name="type"> <b class="notice">套餐类型</b> <span>标配</span> <span>套餐一</span> <span>套餐二</span> </p> <p class="item" name="ram"> <b class="notice">运行内存</b> <span>2GB</span> <span>3GB</span> <span>4GB</span> </p> <p class="item" name="rom"> <b class="notice">机身内存</b> <span>16GB</span> <span>32GB</span> <span>64GB</span> </p> <p class="item" name="location"> <b class="notice">产地</b> <span>中国大陆</span> <span>港澳台</span> </p> <p class="item" name="price"> <b class="notice">价格</b> <span>999元抢购</span> </p> <p class="item1" name="num"> <b class="notice">数量</b> <input type="number" value="1" > </p> <p style="margin-top:30px;margin-left:95px;"> <button class="bu1" id='sub'>加入购物车</button> </p> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:以上代码模拟了加入购物车的一个小案例