JavaEE学习日志(六十一): jQuery的DOM操作，隔行变色，全选全不选，定时广告

最新推荐文章于 2021-06-25 16:55:23 发布

隔叶听风

最新推荐文章于 2021-06-25 16:55:23 发布

阅读量280

点赞数 1

分类专栏： JavaEE学习日志前端 Java练习文章标签： js css jquery html javascript

本文链接：https://blog.csdn.net/Sakuraaaaaaa/article/details/105220411

版权

JavaEE学习日志同时被 3 个专栏收录

168 篇文章 8 订阅

订阅专栏

Java练习

30 篇文章 1 订阅

订阅专栏

前端

29 篇文章 0 订阅

订阅专栏

JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）

JavaEE学习日志（六十一）

jQuery

jQuery

jQuery的DOM操作

jQuery函数的特点：

支持链式编程
支持多种调用方式

jQuery的DOM操作一

text()：获取文本
html()：获取标签和文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>标签文本操作</title>
		<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
		<script type="text/javascript">
			//页面加载完成
			$(function(){
				//获取张三
				alert($("#myinput").val())
				//获取标题文本
				alert($("#mydiv").text());
				//获取mydiv的后的所有内容
				alert($("#mydiv").html());
			});
		</script>
	</head>
	<body>
		<input id="myinput" type="text" name="username" value="张三" /><br />
		<div id="mydiv"><p><a href="#">标题标签</a></p></div>
	</body>
</html>

jQuery的DOM操作二

设置属性：attr(属性名,属性值)
获取属性：attr(属性名)
删除属性：removeAttr("属性名")
固有属性获取true和false，如checked=checked selected=selected。prop(属性名)，

<script type="text/javascript">
		/*
		 * 	属性操作：
		 * 		DOM对象中setAttribute和getAttribute
		 *  	jQuery中attr(属性名,属性值) attr(属性名)
		 */
		//获取北京节点的name属性值
		alert($("#bj").attr("name"));
		//设置北京节点的name属性的值为dabeijing
		$("#bj").attr("name","dabeijing");
		//新增北京节点的discription属性 属性值是didu
		$("#bj").attr("discription","didu")
		//删除北京节点的name属性并检验name属性是否存在
		$("#bj").removeAttr("name");
		//获得hobby的的选中状态
		alert($("#hobby").prop("checked"))
		/*
		 * 	jQuery新增函数
		 *  prop：适用于固有属性，如：checked=checked selected=selected
		 *  attr：适用于其他属性
		 */
	</script>

jQuery的DOM操作三

添加class样式：addClass("class名")
删除class样式：removeClass("class名")
切换class样式：toggleClass("新的class名")
获取样式：css("属性名")
设置样式：css("属性名","属性值")

<script type="text/javascript">
	
		 //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
		 $("#b1").click(function(){
		 	$("#one").attr("class","second");
		 });
		 //<input type="button" value=" addClass"  id="b2"/>
		  $("#b2").click(function(){
		  	$("#one").addClass("second");
		 });
		 
		 //<input type="button" value="removeClass"  id="b3"/>
		   $("#b3").click(function(){
		   	$("#one").removeClass("second");
		 });
		 //<input type="button" value=" 切换样式"  id="b4"/>
		   $("#b4").click(function(){
		   	$("#one").toggleClass("second");
		 });
		 
		 //<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
	   $("#b5").click(function(){
	   		alert($("#one").css("background-color"));
		 });
		 
		// <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
		$("#b6").click(function(){
			alert($("#one").css("background-color","green"));
		 });
	</script>

jQuery的DOM操作四

jQuery对象1.append(jQuery对象2)：将标签2放在标签1的后面
jQuery对象1.prepend(jQuery对象2)：将标签2放在标签1的最前面

<ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
</ul>
....省略
<script type="text/javascript">
	
		/**将反恐放置到city的后面*/
		$("#city").append($("#fk"));
		
		/**将反恐放置到city的最前面*/
		$("#city").prepend($("#fk"));
	</script>

jQuery的DOM操作五

remove()把自己删除了
empty()删除所有子节点

注意：DOM中，删除节点，需要父节点删除子节点。 jQuery支持自己删除自己

<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 <p class="hello">Hello</p> how are <p>you?</p> 
	</body>
	
	<script type="text/javascript">
	
	   //删除<li id="bj" name="beijing">北京</li>
	   /*
	    * DOM中，删除节点，需要父节点删除子节点
	    * jQuery支持自己删除自己
	    */
	   $("#bj").remove();
	   //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
	   	$("#city").empty();
	   //测试(id='city')并没有被删除
	</script>

jQuery的动画

在这里插入图片描述
演示一个：淡入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width:300px;
				height: 300px;
				background-color: cadetblue;
				display: none;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$("#div").fadeIn(3000)
			});
			
		</script>
	</head>
	<body>
		<div id="div">
			
		</div>
	</body>
</html>

隔行变色

jQuery两行代码实现隔行变色

<script type="text/javascript">
	$(function(){
		/*
		 * 偶数行背景色: even
		 * 奇数行背景色: odd
		 */
		$("tr:gt(1):even").css("background-color","darkgrey");
		$("tr:gt(1):odd").css("background-color","white");
	});
</script>

在这里插入图片描述

全选全不选

所有的分选框的属性checked=总选框的属性
checked属于固有属性，使用prop来获取

一行代码实现全选全不选

<script type="text/javascript">
	/*
	 * 点击事件实现功能
	 * 全选全不选：所有的分选框的属性checked=总选框的属性
	 * checked=属于固有属性，使用prop来获取
	 */
	function selectAll(){
		//获取分选框
		$(".itemSelect").prop("checked",$("#zong").prop("checked"));
	}
</script>

在这里插入图片描述

定时广告

页面打开后3秒，显示广告；动画效果实现，观看3秒后回去

<script type="text/javascript">
	/*
	 * 页面打开后3秒，显示广告
	 * 动画效果实现，观看3秒后回去
	 */
	$(function(){
		setTimeout(function(){
			$("#guanggao").slideDown(3000);
		},3000);
		setTimeout(function(){
			$("#guanggao").slideUp(3000);
		},9000);
	})
</script>

隔叶听风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaEE学习日志(六十一): jQuery的DOM操作，隔行变色，全选全不选，定时广告

JavaEE学习日志（六十一）jQuery：jQuery的DOM操作，jQuery的DOM操作一，jQuery的DOM操作二，jQuery的DOM操作三，jQuery的DOM操作四，jQuery的DOM操作五。jQuery的动画，隔行变色，全选全不选，定时广告。
复制链接

扫一扫