Java全栈大数据学习笔记NO.13（jQuery-2）

一、jq操作css样式

• addClass() 向被选元素添加一个或多个样式
• removeClass() 从被选元素删除一个或多个样式
• toggleClass() 对被选元素进行添加/删除样式(类)的切换操作

上面几条语句的用法如下，点击不同按钮应用不同功能

.important{/* css中写 */
	font-weight: bold;
	font-size: 40px;
}
.blue{
	color: blue;
}

<h1>标题1</h1> <!-- html中写-->
<h2>标题2</h2>
<p>段落1</p>
<p>段落2</p>
<div>这是一个文本</div>
<br>
<button id="btn1">给元素添加class</button>
<button id="btn2">给元素移除class</button>
<button id="btn3">给元素添加或移除class</button>
		 
<script type="text/javascript">
	$(function(){
		// 添加class
		$("#btn1").click(function(){
			// $("h1,h2,p").addClass("blue");
			// $("div").addClass("important");
			$("body div:first").addClass("important blue");
		})
		$("#btn2").click(function(){
			$("body div:first").removeClass("important");
		})
		$("#btn3").click(function(){
			$("body div:first").toggleClass("blue");
		})
	})
</script>

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

  <p id="p1" style="background-color: #0000FF;">段落1</p>
  <p id="p2" style="background-color: #00ff00;">段落2</p>
  <p id="p3" style="background-color: #ff0000;">段落3</p>
  <button id="btn1" type="button">点击返回第一个p元素的背景颜色</button><br>
  <button id="btn2" type="button">点击返回第一个p元素的背景颜色</button>
  		
  <script type="text/javascript">
  	$(function(){
  		$("#btn1").click(function(){
  			// 颜色除了rgba会正常显示，其余几种都会转换成rgb形式
  			alert("背景颜色="+$("#p1").css("background-color"));
  		})
  		$("#btn2").click(function(){
  			// 使用css()设置样式时，先写样式名再写属性值
  			$("#p2").css("background-color","yellow")
  			// 使用css()设置多个样式时采用 css({"样式名":"属性值","样式名":"属性值"})
  			$("#p3").css({"background-color":"yellow","font-size": "40px"})
  		})
  	})
  </script>
  

二、jq的尺寸

• width() 返回元素的宽度(不包括内边距、边框和外边距)
• height() 返回元素的高度(不包括内边距、边框和外边距)
• innerWidth() 返回元素的宽度(包括内边距)
• innerHeight() 返回元素的高度(包括内边距)
• outerWidth() 返回元素的宽度(包括内边距和边框)
• outerHeight() 返回元素的高度(包括内边距和边框)
• outerWidth(true) 返回元素的宽度(包括内边距、边框和外边距)
• outerHeight(true) 返回元素的高度(包括内边距、边框和外边距)

下面程序点击按钮后可将所有用法显示出来

<div id="div1" style="background-color: lightblue; width: 300px; height: 300px;
 padding: 10px; margin: 5px; border: 2px solid #0000FF; "></div><br>
<button id="btn1" type="button">显示div元素的尺寸</button>
 
<script type="text/javascript">
 	$(function(){
		$("#btn1").click(function(){
			var txt = "";
			txt+="div 宽度:"+$("#div1").width()+"<br>"
			txt+="div 高度:"+$("#div1").height()+"<br>"
			txt+="div 宽度innerWidth():"+$("#div1").innerWidth()+"<br>"
			txt+="div 高度innerHeight():"+$("#div1").innerHeight()+"<br>"
			txt+="div 宽度outerWidth():"+$("#div1").outerWidth()+"<br>"
			txt+="div 高度outerHeight():"+$("#div1").outerHeight()+"<br>"
			txt+="div 宽度outerWidth(true):"+$("#div1").outerWidth(true)+"<br>"
			txt+="div 高度outerHeight(true):"+$("#div1").outerHeight(true)+"<br>"
			$("#div1").html(txt);
		})
	})
</script>

三、json遍历

json遍历：用于根据其相对于其他元素的关系来查找元素，以某项选择开始，并沿着这个选择移动，直到抵达期望的元素为止，分为一下几种：

1. 祖先(父、祖父、曾祖父)，jq可以通过向上遍历查找元素的祖先
   parent() 返回被选元素的直接父元素
   parents() 返回被选元素的所有祖先元素直到
   parentsUntil() 返回介于两个给定元素之间的所有祖先元素
2. 后代(子、孙、曾孙)，jq可以通过向下遍历查找元素的后代
   children() 返回被选元素的所有直接子元素
   find() 返回被选元素的后代元素，一直到最后一个后代，括号里如果写元素则直接找到该元素
3. 同胞，拥有相同父元素的元素
   siblings() 返回被选元素的所有同胞元素
   next() 返回被选元素的下一个同胞元素
   nextAll() 返回被选元素的所有跟随的同胞元素
   nextUntil() 返回介于给定的两个参数之间的所有跟随的同胞元素
   prev() 返回被选元素的上一个同胞元素
   prevAll() 返回被选元素的所有前面的同胞元素
   prevUntil() 返回介于给定的两个参数之间的所有前面的同胞元素
4. 过滤
   first() 返回被选元素的首个元素
   last() 返回被选元素的最后一个元素
   eq() 返回被选元素中带有指定索引的元素，参数是从0开始的下标
   filter() 可以制定一个标准，返回符合该标准的元素，不符合的就会从集合中删掉(如指定相同的class)
   not() 返回不匹配的所有元素

用法全都类似于下面程序

<div class="ancestors">
	<div id="div1" style="width: 500px;">div(曾祖父元素)
		<ul>ul(祖父元素)
			<li>li(父元素)
				<span>span</span>
			</li>
		</ul>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		// 令span标签的直接父元素改变样式
		// $("span").parent().css({"color":"red","border":"2px solid red"});
		// $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
		$("#div1").find("li").css({"color":"red","border":"2px solid red"});
	})
</script>

四、jq的each循环

each()实现循环，用法：function(i,j) // i表示循环的次数，j表示循环的对象
演示如下：

<script type="text/javascript">
	var empList=[{"empid":"1","empname":"xxx","empage":22},
	{"empid":"2","empname":"yyy","empage":21},
	{"empid":"3","empname":"zzz","empage":20}]
	$(function(){
		$.each(empList,function(index,emp){
			console.log("empid="+emp.empid+"empname="+
			emp.empname+"empage="+emp.empage);
		})
	})
</script>