博客列表 >jQuery入门第二课:jQuery遍历、获取及设置css 类、获取及设置内容--2019.4.2

jQuery入门第二课:jQuery遍历、获取及设置css 类、获取及设置内容--2019.4.2

斜杠菜鸟的博客
斜杠菜鸟的博客原创
2019年04月24日 11:38:36727浏览

一、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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:以上代码模拟了加入购物车的一个小案例

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议