简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery遍历、jQuery获取并设置 CSS 类、scrollTop()方法、商品选中添加购物车案例（1月22日）
Blogger Information
Blog 7
fans 1
comment 3
visits 6642
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery遍历、jQuery获取并设置 CSS 类、scrollTop()方法、商品选中添加购物车案例（1月22日）
熊哥的博客
Original
732 people have browsed it

 一、jQuery遍历：用一种相对的关系来查找html元素

1、向上查找（祖先元素） ：parent( ) 、parents( ) 、parentsUntil( )

 parent( ) 方法返回被选元素的直接父元素

$("span").parent().css("color","red");

 parents( ) 方法返回被选元素的所有祖先元素

$("span").parents().css("color","red"); 

//使用可选参数来过滤对祖先元素的搜索
$("span").parents("ul").css("color","red");
//返回所有span元素的所有祖先，并且它是ul元

 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

$("span").parentsUntil("div").css("border","2px solid red");
//返回介于span与div元素之间的所有祖先元素

 

2、向下查找（子元素）：children( )、find( )

children( ) 方法返回被选元素的所有直接子元素

$("div").children().css("border","2px solid red");
//返回所有div的直接子元素

$("div").children('.cl').css("border","2px solid red"); 
//返回所有div的直接子元素中，类名为cl的子元

find() 方法返回被选元素的后代元素

$("div").find("span"); //返回div中的子元素span，该方法可以找到div中的所有子元素

注意区别：

children( ) 方法返回被选元素的所有直接子元素 。直接子元素即只找儿子不要孙子。

find( ) 方法是在被选元素的子子孙孙中找所有某种元素。find(）方法括号里必须传参数，否者无效。

 

3、同级查找（同胞） ：

siblings( ) 方法返回被选元素的所有同胞元素

$("h2").siblings(); //该例返回h2的所有同级元素
$("h2").siblings("h1");  //该例返回所有与h2同级的,且是h1的元素

 

二、jQuery获取并设置 CSS 类

css( )设置或返回样式属性

$("div").css("样式名"); //返回指定的CSS属性的值
$("div").css("样式名","value"); //设置单个CSS属性
$("div").css({"样式名":"value","样式名":"value",...}); //设置多个CSS属性

addClass( )向被选元素添加一个或多个类

$("div").addClass("red");

 removeClass( ) 从被选元素删除一个或多个类

$("div").removeClass("red");

 

三、jQuery获得内容和属性  

获得内容：

text( )设置或返回所选元素的文本内容

html( )设置或返回所选元素的内容（包括 HTML 标记）

val( )设置或返回表单字段的值

 

获取属性：attr( )方法用于获取属性值

 

四、scrollTop( ) 定义和用法

scrollTop( ) 方法设置或返回被选元素的垂直滚动条位置。当滚动条位于最顶部时，位置是 0。

$("div").scrollTop();
// 当用于返回位置时：该方法返回第一个匹配div元素的滚动条的垂直位置。
$("div").scrollTop(100);
// 当用于设置位置时：该方法设置所有匹配div元素的滚动条的垂直位置为100px。

 

获取页面滚动值案例：

<!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: rgba(160,3,162,0.4)}
      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(){
      // scroll事件，当用户滚动指定的元素时触发
     $(window).scroll(function(){
          // 获取浏览器滚动条到顶部的垂直高度 (即网页被卷上去的高度)
        if($(window).scrollTop()>60){
          $('.content').css('display','none')
        }else{
          $('.content').css('display','block')
        }

         if($(window).scrollTop()>580){
          $('.content').addClass('content_2').css('display','block')
        }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;
		}

		.select {
			border: 2px solid red;
			width: 88px;
			height: 24px;
			color: red;
		}

		.bu2 {
			width: 120px;
			height: 35px;
			background: #C40000;
			color: white;
			border: 0px;
			margin-left: 5px;
		}

		.bu1 {
			width: 118px;
			height: 33px;
			background: white;
			color: #ccc;
			border: 1px solid #ccc;
			margin-left: 5px;
		}

		button:hover {
			cursor: pointer;
		}

		.notice {
			border: 0px;
		}
	</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;margin-left: 5px;">
		</p>

		<p style="margin-top:30px;margin-left:95px;">
			<button class="bu1" id='sub'>加入购物车</button>
		</p>
	</div>
	<script>
		$(function () {
			//商品选中样式
			$("span").click(function () {
				if ($(this).hasClass("select")) {
					$(this).removeClass("select");
				} else {
					$(this).addClass("select").siblings("span").removeClass("select");
				}
			})

			//如果信息没选完，提交按钮为灰色
			$("span").click(function () {
				if ($(".item").children("span.select").length != 7) {
					$("#sub").addClass("bu1").removeClass("bu2");
				} else {
					$("#sub").addClass("bu2").removeClass("bu1");
				}
			})

			//商品选中提交，返回商品信息对象
			$("#sub").click(function () {
				let form = {};
				let flag = true; //能不能加入购物车
				$(".item").each(function () {
					if ($(this).children("span.select").length != 1) {
						flag = false;
					} else {
						let key = $(this).attr("name");
						let value = $(this).children("span.select").text();
						form[key] = value;
					}
				})

				//判断数量最少为1
				if ($(".item1").children("input").val() < 1) {
					alert("数量最少为1");
					flag = false;
				} else {
					form["num"] = $(".item1 input").val();
					console.log(form);
				}

				if (flag) {
					alert("可以加入购物车了");
				}
			})

		})
	</script>
</body>

</html>

运行实例 »

点击商品选中效果.jpg

知识点：each( ) 方法为每个匹配元素规定要运行的函数。

$("button").click(function(){
		$("li").each(function(){
			alert($(this).text())
		});
	});  // 输出每个列表项li的值

 

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！