登录  /  注册
博主信息
博文 42
粉丝 2
评论 0
访问量 52216
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jq进阶(jq遍历 jq获取并设置css类 获得设置文本内容 获得设置表单的value 案例:获取鼠标滚动值 案例:购物车多行选中、漏选判断及输出详情)2019年1月23日22时03分
小明的博客
原创
1131人浏览过

      今天学习了jq的一些进阶内容:jq遍历就是通过相对的关系来查找元素,包括:向上(parent parents parenrUntil)、向下(children  find)、同级(sibings),都可以传递参数进行选取想要的元素;jq可以获取、设置css和css类,用.css('样式名',‘属性值’)设置,用.css(‘样式名’)获取,还可以对一个和多个css类进行添加和移除,addClass添加,removeClass移除,hasClass检查是否有相应的class类;还可以直接对css的样式值进行设置和获取,例如.height(),获取的是一个数值;设置获取文本内容可以text  html吗,他们的区别就是html输出有标签格式,最后针对表单还可以回去他的value值,用.val()。

      结合以上内容今天做了两个案例,分别是获取鼠标滚动值、购物车多行选中漏选判断及输出详情。

一、鼠标滚动值

实例

<!DOCTYPE html>
<html>
<head>
  <title>获取滚动值案例</title>
  <link rel="icon" type="image/x-icon" href="images/2.png"> 
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <style type="text/css">
      *{margin: 0;padding: 0;}
      .content{ width:100%;height:60px;
                background: rgba(160,3,162,0.1);
                box-shadow: 1px 3px 7px #ccc;
                line-height: 60px;
                position: fixed;
              }
      .content_2 {
        background-color: rgba(160,3,162,0.8);
      }
      form{width: 500px;height: 35px;position: relative;margin: 0 auto;}
      input{width:480px;height: 35px;border-radius: 20px;border:none;outline: none;padding-left:20px;}
      button{width: 70px;height:35px;order:none; 
            border-top-right-radius: 20px;border-bottom-right-radius: 20px;border: none;
            color: #fff;position: absolute;right:0;top:14px;
            outline: none;font-weight: bold;
            background: rgba(160,3,162,0.4);
          }
      [placeholder]{color:rgba(160,3,162,0.6)}
      .pic{width: 70%;height: 580px;background: url(images/3.jpg);margin: 0 auto;}
      .box{width: 70%;height:1200px;background:rgba(108,108,106,0.1);margin: 0 auto; }
   </style>

</head>
<body> 
<!-- 顶部导航 -->
 <div class="content">
   <form>
    <input type="text" placeholder="# 请输入关键词 #">
    <button>全网搜</button>
  </form>
 </div>
 <!-- 轮播图 -->
 <div class="pic"></div>
 <!-- 页面详情 -->
 <div class="box"></div>
  <script>
    $(function(){
      $(window).scroll(function(){
        // window窗口滚动过了60  导航消失
        if ($(window).scrollTop() > 60) {
          $('.content').hide();
        } else {
          $('.content').show();
        }

        // window滚动过了580  导航显示 并且背景加深
        if ($(window).scrollTop() > 580) {
          $('.content').show().addClass('content_2');
        } else {
          $('.content').removeClass('content_2');
        }
      })



    })
  </script>
</body>
</html>

运行实例 »

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

二、购物车多行选中漏选判断及输出详情

实例

<!DOCTYPE HTML>
<html>
<head>
<title>点击商品选中效果</title>
<meta charset="utf-8"/>
 <link rel="icon" type="image/x-icon" href="images/2.png"> 
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
 <style type="text/css">
	* {margin: 0px auto;padding: 0px;}
	.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;
	}
	.select {
		border: 2px solid #C40000;
		width: 88px;
		height: 24px;
		line-height: 24px;
	}

</style>

</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" style="width:40px;height:26px;">
		</p>

		<p style="margin-top:30px;margin-left:95px;">
			<button class="bu1" id='sub'>加入购物车</button>
		</p>		
  </div>
  <script>
	  $(function(){
		$('span').click(function(){
			// 如果这个span有class select 就清除class select
			if ($(this).hasClass('select')) {
				$(this).removeClass('select')
			} else {
				// 如果没有  那就添加  同时让其他的同级清除 class select
				$(this).addClass('select').siblings().removeClass('select')
			}	
		}) 
		// 判断有select样式的span有多少个 如果与item的参数相等那么就成功添加购物车 输出商品明细
		$('.bu1').click(function(){
			// 被选中有select样式的数目
			var scount = $('.item').children('.select').length;
			// 参数类目的个数
			var count = $('.item').length;
			// 初始化一个对象 准备建数据放进去
			var text = {};
			if (scount === count ) {
				alert('成功加入购物车')
				// for循环 吧参数类目相应的选的的参数组放进对象里呈现
				for (var i = 0; i < scount; i++) {
					 text[$('.item').eq(i).attr('name')] =  $('.item').children('.select').eq(i).text();
				}
				console.log(text)
			} else {
				alert('有空白参数没有填')
			}
		})  
	  })
  </script>
</body>
</html>

运行实例 »

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

总结:

1、jq遍历中都可以添加参数来选择指定的元素,需要注意的是这里都是选择的元素,还有一些选取方法课上没有讲到,有一些遍历选取的是节点,这里要区别于元素,例如contents()和children()差不多就是他选取的是所有子节点;

2、获取css值中.css获取的是带有px值的字符串,.height则是直接获取的数值

3、滚动事件scroll一般是窗口($(window))来执行,scrollTop获取滚动条到窗口顶端的值,同时在这个案例中if判断的逻辑思考的时候有点含糊需要再加强

4、购物车选取需要判断是否有相应的class类,这里用hasClass,逻辑上是如果有就移除(removeClass),没有就添加(addClass),在添加的同时还需要同级的其他也要保证清除class,这样就实现了只能选中一个,再点取消选中。判断是否参数全选,就是要判断有select样式的数量是否与参数的类的数目相同,这里重点就是查找相应的元素然,然后他是个元素集合可以获取他的length;最后输出相应的值,这里我考虑是个元素集合要用到for循环出相应的值,为了能够使得循环中的i和集合中的下标对应,我们这里用到了eq(),然后再用对象的[]赋值键,然后对象相应的值。


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学