javaWeb-day08-jQuery

最新推荐文章于 2024-04-23 15:19:32 发布

重庆森林呼呼呼

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量270

点赞数

本文链接：https://blog.csdn.net/qq_34681728/article/details/106120033

版权

jQuery简介

jQuery:JavaScript Query JS查询
jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架）
jQuery可以极大的简化JS代码

jQuery引入

jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样

<!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>

01引入jQuery.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	
	<!-- 使用jQuery,得先引入jQuery的函数库文件(js文件) -->
	<script src="js/jquery-1.8.3.js"></script>
	<script>
		// 使用jQuery中提供的函数, 测试jQuery是否引入成功!
		// $()这是在调用jQuery中的函数  $ == jQuery
		$( function(){
			// 当前这个function会在浏览器加载完整个网页后立即执行!
			alert("如果能够看到这个弹窗,则说明jQuery引入成功!");
		} );
	</script>
</head>
<body>

</body>
</html>

文档就绪事件函数

如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。

可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<!-- 引入jQuery函数库文件, 才能使用jQuery提供的功能! -->
	<script src="./js/jquery-1.8.3.js"></script>
	
	<script>
		/* 文档就绪事件函数: 在浏览器加载完整个网页后, 立即触发执行! 
			由于函数执行时, 整个网页都加载完了, 此时获取任何的元素都可以获取到!
		window.onload = function(){
			//获取id为demo的元素中的内容
			//获取id为demo的元素
			var oH1 = document.getElementById("demo");
			//通过获取的oH1, 获取元素中的所有内容
			alert( oH1.innerHTML );
		}  */
		
		/* jQuery提供的文档就绪事件函数：在浏览器加载完整个网页后，
			立即执行，此时再获取任何元素都可以获取到！*/
		$( function(){
			//获取id为demo的元素中的内容
			//获取id为demo的元素
			var oH1 = document.getElementById("demo");
			//通过获取的oH1, 获取元素中的所有内容
			alert( oH1.innerHTML );
		} );
	</script>
</head>
<body>
	<h1 id="demo" >欢迎大家来到达内学习Java培优课程!!</h1>
	
</body>
</html>

jQuery选择器

基本选择器

(1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素

(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素

(3)id选择器
$("#one") -- 选中id为one的元素

(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素

层级选择器

$("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素

$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素

$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素

$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素

基本过滤选择器

(1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)

(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)

(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)

选择器练习

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器练习</title>
<style type="text/css">
	body{ font-family:"微软雅黑"; font-size:20px;padding-bottom:300px;}
	input{font-size:18px;margin-top:10px;}
	div,span{width:300px;border:1px solid #000;padding-left:10px;background:#bed4ef;;}
	span{display:block;}
	body>div,body>span{height:100px;margin:10px 0px 0px 20px;display:inline-block;vertical-align:middle;}
	#one{width:300px;height:185px;}
	div>span,div>div{width:250px;height:35px;margin:10px;}
</style>

<!-- 引入jquery函数库文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/* 文档就绪事件函数(即在浏览器加载完最后一个html元素后立即执行) */
	$(function() {
		/* -------一、基本选择器练习------- */
		/* 1、选中id为b1的按钮,为b1按钮绑定点击事件，点击b1按钮：
			改变所有 div 元素的背景色为 #FD5551 */
		$("#b1").click(function(){
			//改变所有 div 元素的背景色为 #FD5551
			//$("div").css("background-color", "#FD5551");
			//css()函数也可以同时设置多个样式
			$("div").css({
				"background-color" : "#FD5551",
				"border" : "3px solid blue",
				"color" : "green",
				"font-size" : "20px"
			});
		});
		
		/* 2、选中id为b2的按钮,为b2按钮绑定点击事件，点击b2按钮：
			改变 id 为 one 的元素的背景色为 #91BF2F */
		$("#b2").click(function(){
			$("#one").css("background-color", "#91BF2F");
		});
		
		/* 3、选中id为b3的按钮,为b3按钮绑定点击事件，点击b3按钮：
		改变 class 为 mini 的所有元素的背景色为 #EE82EE */
		$("#b3").click(function(){
			$(".mini").css("background", "#EE82EE");
		});

		/* ---------二、层级选择器------- */
		/* 4、选中id为b4的按钮,为b4按钮绑定点击事件，点击b4按钮：
			改变 div 内所有 span 的背景色为 #DC21D2 */
		$("#b4").click(function(){
			//匹配div内部的所有span元素
			$("div span").css("background-color", "#DC21D2");
			// $("div,span") -- 匹配所有div元素和所有span元素
		});
		
		/* 5、选中id为b5的按钮,为b5按钮绑定点击事件，点击b5按钮：
			改变 id为two 元素的下一个相邻的 div元素 的背景色为 #2CADAA */
		$("#b5").click(function(){
			// 匹配id为two的元素的下一个相邻的div兄弟元素
			//$("#two+div").css("background-color", "#2CADAA");
			$("#two").next("div").css("background", "#2CADAA");
			// 匹配id为two的元素的前一个相邻的div兄弟元素
			$("#two").prev("div").css("background", "#2CADAA");
			
		});
		
		/* 6、选中id为b6的按钮,为b6按钮绑定点击事件，点击b6按钮：
			改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #ECD822 */
		$("#b6").click(function(){
			// 匹配id为two的元素后面所有的div兄弟元素
			//$("#two~div").css("background-color", "#ECD822");
			$("#two").nextAll("div").css("background-color", "#ECD822");
			$("#two").prevAll("div").css("background-color", "#ECD822");
		});
		
		/* 7、选中id为b7的按钮,为b7按钮绑定点击事件，点击b7按钮：
			改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #EE0077 */
		$("#b7").click(function(){
			//$("#two").nextAll("div").css("background-color", "#ECD822");
			//$("#two").prevAll("div").css("background-color", "#ECD822");
			// 等价于<=====>
			$("#two").siblings("div").css("background-color", "#EE0077");
		});
		
		/* ---------三、基本过滤选择器------- */
		/* 8、选中id为b8的按钮,为b8按钮绑定点击事件，点击b8按钮：
			改变第一个以及最后一个 div 元素的背景色为 #0074E8 */
		$("#b8").click(function(){
			// 匹配所有div中的第一个div元素
			//$("div:first").css("background-color", "#0074E8");
			//$("div:eq(0)").css("background-color", "#FF0000");
			$("div").eq(0).css("background-color", "#FF0000");
			
			// 匹配所有div中的最后一个div元素
			//$("div:last").css("background-color", "#0074E8");
			//$("div:eq(-1)").css("background-color", "#FF0000");
			$("div").eq(-1).css("background-color", "#FF0000");
		});
		/* 9、选中id为b9的按钮,为b9按钮绑定点击事件，点击b9按钮：改变第4个 div 元素的背景色为 #D917C6 */
		$("#b9").click(function(){
			//匹配下标为3的(即第四个)div元素
			$("div").eq(3).css("background", "#D917C6");
		}); 
	});
</script>
</head>

<body>
	基本选择器→：
	<!-- 按钮,id为b1 -->
	<input type="button" id="b1" value="b1,改变所有 div 元素的背景色为 #FA8072" />
	<!-- 按钮,id为b2 -->
	<input type="button" id="b2" value="b2,改变 id 为 one 的元素的背景色为 #9ACD32"/>
	<!-- 按钮,id为b3 -->
	<input type="button" id="b3" value="b3,改变 class 为 mini 的所有元素的背景色为 #EE82EE"/>
	<hr/>
	层级选择器→：
	<!-- 按钮,id为b4 -->
	<input type="button" id="b4" value="b4,改变 div 内所有 span 的背景色为 #7CFC00"/>
	<!-- 按钮,id为b5 -->
	<input type="button" id="b5" value="b5,改变 id为two 元素的下一个相邻的 div元素 的背景色为 #48D1CC"/>
	<!-- 按钮,id为b6 -->
	<input type="button" id="b6" value="b6,改变 id为two 元素的后面所有的div兄弟元素 的背景色为 #D2FA7E"/>
	<!-- 按钮,id为b7 -->
	<input type="button" id="b7" value="b7,改变 id为two 元素的前、后所有的div兄弟元素 的背景色为 #FF69B4"/>
	<hr/>
	基本过滤选择器→：
	<!-- 按钮,id为b8 -->
	<input type="button" id="b8" value="b8,改变第一个/最后一个 div 元素的背景色为 #1E90FF"/>
	<!-- 按钮,id为b9 -->
	<input type="button" id="b9" value="b9,改变第4个 div 元素的背景色为 #EA3AD8"/>

	<h3>点击按钮查看效果...</h3>

	<div id="one">
		这是一个div1
		<div class="one01">这是一个div11</div>
		<span class="mini">这是一个span,class为mini</span>
		<span class="mini">这是一个span,class为mini</span>
	</div>
	<div>这是一个div2
		<input type="button" value="按钮1"/>
		<input type="button" value="按钮2"/>
	</div>
	<div id="two">这是一个div3,id是two
		<span>这是一个span</span>
	</div>
	<div>这是一个div4</div>
	<div>这是一个div5</div>
	<span class="mini">这是一个span,class为mini</span>
	<div>这是一个div6</div>
	<span class="mini01">这是一个span,class为mini01</span>
	<span class="mini">这是一个span,class为mini</span>

</body>
</html>

创建表格元素
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>创建表格</title>

<style type="text/css">
	/* 为表格定义CSS样式 */
	body{padding-left:15px;font-size:20px;}
	table{ border:1px solid #0099FF; width:70%; border-collapse:collapse; }
	table td{ border:#0099FF 1px solid; padding:10px 20px 3px 1px; }
	input[type='text']{width:150px;height:20px;vertical-align:text-bottom;text-indent:5px;font-size:20px;}
	input[type='button']{font-size:20px;}
</style>

<!-- 引入jquery函数库文件 -->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/** 练习1：创建单行单列的表格 */
	function createTable1(){
		//创建table元素
		var $table = $("<table></table>");
		//创建tr元素
		var $tr = $("<tr></tr>");
		//创建td元素并为td添加内容
		var $td = $("<td>Hello,我是td</td>");
		//将td添加到tr上
		$tr.append($td);	
		//将tr添加到table上
		$table.append($tr);
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}

	/** 练习2：创建5行6列的表格 */
	function createTable2(){
		//创建table元素
		var $table = $("<table></table>");
		for(var r=0;r<5;r++){//循环5次,table中添加5个tr
			//创建tr元素
			var $tr = $("<tr></tr>");
			for(var c=0;c<6;c++){//循环6次,tr中添加6个td
				//创建td元素并为td添加内容
				var $td = $("<td>Hello,我是td</td>");
				//将td添加到tr上
				$tr.append($td);	
			}
			//将tr添加到table上
			$table.append($tr);
		}
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}

	/** 练习3：创建指定行和列的表格 */
	function createTable3(){
		var rows = $("#rows").val();//获取指定的行数
		var cols = $("#cols").val();//获取指定的列数
		//创建table元素
		var $table = $("<table></table>");
		for(var r=0;r<rows;r++){//循环5次,table中添加5个tr
			//创建tr元素
			var $tr = $("<tr></tr>");
			for(var c=0;c<cols;c++){//循环6次,tr中添加6个td
				//创建td元素并为td添加内容
				var $td = $("<td>Hello,我是td</td>");
				//将td添加到tr上
				$tr.append($td);	
			}
			//将tr添加到table上
			$table.append($tr);
		}
		//将创建的整个table添加到body内部
		$("body").append($table);
		$("body").append("<hr/>");
	}
</script>
</head>
<body>
	<!-- 练习1：点击下列按钮创建单行单列表格 -->
	<input type="button" value="创建单行单列表格" onclick="createTable1()" /><br/><br/>

	<!-- 练习2：点击下列按钮创建5行6列表格 -->
	<input type="button" value="创建表格(5行6列)" onclick="createTable2()" /><br/><br/>

	<!-- 练习3：点击下列按钮创建指定行、指定列的表格 -->
	<input type="button" value="创建表格（输入行数和列数）" onclick="createTable3()" /><br/>
	行数：<input type="text" id="rows"/><br/>
	列数：<input type="text" id="cols"/><br/><br/>

	<!-- 将创建的表格添加到body内部(追加到最后) --><hr/>
	
</body>
</html>

仿qq好友分组
在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>仿QQ好友分组</title>
<style type="text/css">
	table{border:#09f 1px solid;width:100px;border-collapse:collapse;margin:15px 10px;width:10%;margin:20px 20px;}
	table td{border:#06f 1px solid;background-color:#6f5f3e;text-align:center;padding:5px 0;}
	table td div{background-color:#ff9;text-align:left;line-height:28px;padding-left:14px;text-indent:padding-left:20px;}
	table td span{color:#fff;font-size:19px;width:100%;border:none;display:block;cursor:pointer;}
	table td a:hover{color:#0c0}
</style>

<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/** 通过jQuery实现仿QQ列表好友列表 */
	function openDiv(thisobj){
		//在展开当前分组之前, 先关闭其他三个分组
		//>>选中其他三个分组并关闭.
		$(thisobj).parents("tr").siblings().find("div").hide();
		//点击当前分组, 切换分组的状态(如果展开则关闭, 如果关闭则展开)
		$(thisobj).next().toggle();
	}
	
	/** 通过javascipt实现仿QQ列表好友列表 
	function openDiv(thisobj){
		//1.获取当前分组内好友列表div
		var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
		//2.判断当前分组div是展开还是关闭
		if(oDiv.style.display == "block"){
			//3.如果当前div是打开的, 只需关闭该div即可
			oDiv.style.display = "none";
		}else{
			//4.如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的  
			//获取所有分组内的div,遍历依次关闭所有分组
			var aDiv = document.getElementsByTagName("div");
			for(var i=0;i<aDiv.length; i++){
				aDiv[i].style.display = "none";
			}
			//再打开当前分组
			oDiv.style.display = "block";
		}
	} */
</script>
</head>
<body>
<table>
	<tr>
		<td>
			<span onclick="openDiv(this)">君王好友</span>
			<div style="display:none">
				秦始皇<br />
				刘邦<br />
				李世民<br />
				康熙<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">三国好友</span>
			<div style="display:none">
				刘备<br />
				关羽<br />
				张飞<br />
				赵云<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">美女好友</span>
			<div style="display:none">
				西施<br />
				貂蝉<br />
				杨贵妃<br />
				王昭君<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">IT好友</span>
			<div style="display:none">
				王海涛<br />
				马云<br />
				李开复<br />
				俞敏洪<br />
			</div>
		</td>
	</tr>
</table>
</body>
</html>

模拟员工信息管理系统

在这里插入图片描述

<!DOCTYPE HTML>
<html>
<head>
<title>模拟员工信息管理系统</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
	body{font-family: "微软雅黑"}
	h2, h4{ text-align: center; }
	div#box1, div#box2 {text-align:center;}
	hr{margin: 20px 0;}
	table{margin: 0 auto;width:70%;text-align: center;border-collapse:collapse;}
	td, th{padding: 7px; width:20%;}
	th{background-color: #DCDCDC;}
	input[type='text']{width:130px;}
</style>
<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
	/* --- 添加一个新员工 --- */
	function addEmp(){
		//1.获取新员工的信息
		var id = $("#box1").find("input[name='id']").val().trim();
		var name = $("#box1").find("input[name='name']").val().trim();
		var email = $("#box1").find("input[name='email']").val().trim();
		var salary = $("#box1").find("input[name='salary']").val().trim();

		//2.检查员工信息是否符合格式(信息不能为空)
		if( id == "" || name == "" || email == "" || salary == ""){
			alert("员工信息不能为空!!!");
			return;
		}
		//3.检查ID是否已存在
		/* 获取当前所有员工的id, 循环遍历, 比较id是否存在 */
		var flag = true;
		$("table tr").each(function(){
			if(id == $(this).find("td:eq(1)").text()){
				alert("id已存在!!!");
				flag = false;
			}
		});
		if(!flag){
			return;
		}
		//4.将新员工信息添加到员工信息列表中(table)
		var $td1 = $("<td><input type='checkbox'/></td>");
		var $td2 = $("<td>"+id+"</td>");
		var $td3 = $("<td>"+name+"</td>");
		var $td4 = $("<td>"+email+"</td>");
		var $td5 = $("<td>"+salary+"</td>");
		var $tr = $("<tr></tr>");
		$tr.append($td1).append($td2).append($td3).append($td4).append($td5);

		//5.将tr挂载到table上
		$("table").append($tr);
	}
	/* --- 删除选中的员工 --- */
	function delEmp(){
		//1.获取被选中的员工
		$(":checked").parents("tr").each(function(){
			//如果当前行是表头, 不要删除
			if($(this).find("th").length == 0){
				$(this).remove();
			}
		});
	}
	/* --- 修改指定id的员工 --- */
	function updEmp(){
		//1.获取要修改的员工信息
		var id = $("#box2").find("input[name='id']").val().trim();
		var name = $("#box2").find("input[name='name']").val().trim();
		var email = $("#box2").find("input[name='email']").val().trim();
		var salary = $("#box2").find("input[name='salary']").val().trim();
		//2.检查员工信息是否符合格式(不能为空)
		if(id == "" || name == "" || email == "" || salary == ""){
			alert("修改员工信息不能为空!!!");
		}
		//3.检查ID是否存在(必须要存在)
		var flag = true;
		$("table tr").each(function(){
			if(id == $(this).find("td:eq(1)").text()){
				//4.进行修改
				//>>修改姓名
				$(this).find("td:eq(2)").text(name);
				//>>修改邮箱
				$(this).find("td:eq(3)").text(email);
				//>>修改工资
				$(this).find("td:eq(4)").text(salary);
				flag = false;
			}
		});
		if(flag){
			alert("您修改的员工id不存在!!!");
		}
	}
	/* 点击全选设置 员工所在的行全选或者全不选 */
	function checkAll(){
		//获取全选复选框的选中状态（true表示选中，false表示取消选中）
		var isCheck = $("#all").prop("checked");
		//将全选复选框的选中状态设置给所有员工所在行的复选框
		$("input[type='checkbox']").prop("checked", isCheck);
	}
</script>
</head>

<h2>添加新员工</h2>
<div id="box1">
	ID：<input type="text" name="id"/>
	姓名：<input type="text" name="name"/>
	邮箱：<input type="text" name="email"/>
	工资：<input type="text" name="salary"/>
	<input type="button" onclick="addEmp()" id="add" value="添加新员工"/>
</div>
<hr/>
<table border="1">
	<tr>
		<th>
			<!-- 全选复选框 -->
			<input type="checkbox" onclick="checkAll()" id="all"/>
		</th>
		<th>ID</th>
		<th>姓名</th>
		<th>邮箱</th>
		<th>工资</th>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>1</td>
		<td>宋江</td>
		<td>sj@163.com</td>
		<td>12000</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>2</td>
		<td>武松</td>
		<td>ws@163.com</td>
		<td>10500</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox"/>
		</td>
		<td>3</td>
		<td>孙二娘</td>
		<td>sen@163.com</td>
		<td>11000</td>
	</tr>
</table>
<h4><a href="javascript:void(0)" onclick="delEmp()" id="del">删除选中员工</a></h2>
<hr/>

<div id="box2">
	ID：<input type="text" name="id"/>
	姓名：<input type="text" name="name"/>
	邮箱：<input type="text" name="email"/>
	工资：<input type="text" name="salary"/>
	<input type="button" onclick="updEmp()" id="upd" value="根据ID修改员工信息"/>
</div>
</body>
</html>

jQuery总结

html元素操作

1.创建元素

$("<div></div>") -- 创建一个div元素，返回的是一个表示div元素的jQuery对象
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个表示div元素的jQuery对象

2.添加子元素

$parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素

3.删除元素

$("div").remove() -- 删除所有的div元素

JS删除所有div元素：
//获取所有的div元素(返回的是所有div组成的数组)
var divArr = document.getElementsByTagName("div"); //div数组
//遍历div数组,依次删除每一个div元素
var len = divArr.length;
for(var i=0;i<len;i++){
    //通过当前元素的父元素删除当前元素(始终删除第一个)
    divArr[0].parentNode.removeChild( divArr[0] );
}

4.替换元素

$("div").replaceWith("<p>我是来替换的…</p>")

html元素内容和值的操作

1.html()函数

$("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容

2.text()函数

$("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容

3.val()函数
获取或设置表单项元素的value值（input/select/option/textara）

$("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值

元素属性和css属性操作

<input type="text" name="username" id="inp"/>

1.prop()函数
用于获取或设置元素的属性值

$("input[type='checkbox']").prop("checked")
-- 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
-- 设置所匹配的复选框元素为选中状态

$("#inp").prop("name"); //获取id为inp元素的name属性值, 返回useranme
$("#inp").prop("name","user"); //为id为inp的元素设置name属性值, name属性值就会变成user

2.css()函数
用于获取或设置元素的css属性值

$("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
	"width" : "200px",
	"height" : "150px",
	"border" : "5px solid red",
	"background" : "pink"
}); // 设置id为div1元素的宽度为200px、高度为150px、边框以及背景颜色等样式

其他函数

1.each()函数

$(selector).each(function( index,element ){})
-- each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
-- function中的index -- 表示遍历的元素的下标
-- function中的element -- 表示当前正在遍历的元素(也可以通过this获取)

2.show()/hide()函数
show() – 设置元素由隐藏变为显示
hide() – 设置元素由显示变为隐藏

$("div").show() -- 设置所有的div元素为显示

等价于：

$("div").css("display", "block");
$("div").hide() -- 设置所有的div元素为隐藏

等价于：

$("div").css("display", "none")

2.toggle()/slideToggle()
toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() --切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态

重庆森林呼呼呼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaWeb-day08-jQuery

jQuery简介jQuery:JavaScript Query JS查询jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架）jQuery可以极大的简化JS代码jQuery引入jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样<script src="js/jquery-1.8.3.js"></script>01引入jQuery
复制链接

扫一扫