Web学习Day3

2024-02-01 22:00:34

JQuery

简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

JQuery·优势

1.极大的简化JS代码
2.可以像CSS选择器一样获取HTML代码
css中获取所有的div，给div添加样式
div{css属性…}
jQuery中获取所有的div，给div添加边框样式
$(“div”).css(“border”,“2px solid red”);

JS获取id为div1的元素
document.getElementById(“div1”);
jQuery获取id为div1的元素
$("#div1")

3.可以通过修改css属性控制页面的效果
4.可以兼容常用的浏览器

JQuery·引入

jQuery的函数库文件就是一个普通的js文件，引入JQuery和引入JS文件的方式一样
注意：
1.在使用jQuery之前，必须先引入jQuery的函数文件

2.在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，会出现如下错误：
$ is not defined

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script>
			var h1=document.getElementById("demo");
			alert(h1.innerHTML);
		</script>
	</head>
	<body>
		<h1 id="demo">jQuery的引入示例...</h1>
	</body>
</html>

问题描述：上面的代码在执行时，发生了错误Web学习Day3
原因描述：
在执行获取id为demo的元素时，h1元素还没有被浏览器加载到，所以获取不到h1元素
解决方式1：
将script标签移到body内部，也就是h1元素的后面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		
	</head>
	<body>
		<h1 id="demo">jQuery的引入示例...</h1>
		<script>
			var h1=document.getElementById("demo");
			alert(h1.innerHTML);
		</script>
	</body>
</html>

解决方式2：
将获取的元素的代码放在一个自定义函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才会获取h1元素，此时就能够获取到h1元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function fn1(){
			var h1=document.getElementById("demo");
			alert(h1.innerHTML);
		}
			
		</script>
		
	</head>
	<body>
		<h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
		
	</body>
</html>

解决办法3：
将获取元素的代码放在文档就绪函数中，文档就绪事件函数会在浏览器加载完所有的html元素后，立即执行
由于当前网页中的所有的元素都被加载了，h1也肯定被加载了，所以此时获取元素一定可以取到
jQuery提供的文档就绪函数格式(简写形式)

<script>
$(function(){
//在浏览器加载完整个页面后立即执行
});
</script>

//完整写法：

<script>
$(document).ready(function(){
//在浏览器加载完整个页面后立即执行
});
</script>

JS中也为我们提供了文档就绪函数

在这里插入代码片<script>
window.onload=function(){
//在浏览器加载完整个页面后立即执行
}
</script>

JQuery选择器

基本选择器

1.元素名选择器
$(“div”)–选中所有的div元素
$(“span”)–选中所有的span元素
2.类选择器
$(".s1")–选中所有class值为s1的元素
$(“span .s1”)–选中所有class值为s1的span元素
3.id选择器
$("#one")–选中id为one的元素
4.多元素选择器
$(“div,span,.s1,#one”)–选中所有的div元素，以及所有的span元素，及所有class值为s1的元素，以及id为one的元素
5.任意选择器
$("*")

1.选中id为b1的按钮并为其绑定点击事件，点击b1按钮，改变所有的div元素背景颜色为#FD5551

$(function(){
$("#b1").click(function(){
//为元素设置单个样式
$(“div”).css(“background-color”,"#FD5551");
//为元素设置多个样式
$(“div”).css({
“background-color”:"#FD5551",
“border”:“3px solid red”,
“color”:“green”,
“font-size”:20px
});
});
});

2.选中id为b2的按钮并为其绑定点击事件，点击b2按钮，改变id为one的元素背景色为#7fa728

$("#b2").click(function(){
$("#one").css(“background”,"#7fa728");
});

3.选中id为b3的按钮并为其绑定点击事件，点击b3按钮，改变class为mini的元素背景色为#EE82EE

$("#b3").click(function(){
$(".mini").css(“background”,"#EE82EE");
});

练习案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			<!--文档就绪函数：在浏览器加载完完整的网页后立即执行此时获取任何元素都可以取到-->
			window.onload=function(){
				var divArr=document.getElementsByTagName("div");
				for(var i=0;i<divArr.length;i++){
					console.log(divArr[i]);
				}
				console.log("-----------------------");
			var divArr2=document.getElementsByClassName("c1");
			for(var i=0;i<divArr2.length;i++){
				console.log(divArr2[i]);
			}
			}
			//点击链接删除所有的div元素
			function removeAllDiv(){
				//获取所有的div元素
				var divArr=document.getElementsByTagName("div");
				var len=divArr.length;
				//遍历所有div
				for(var i=0;i<len;i++)
				var parentEle=divArr[0].parentNode;
				parentEle.removeChild(divArr[0]);
			}
		</script>
	</head>
	<body>
		 <!--在这里这行代码表示的是这个链接不做跳转动作，执行onclick事件
		 也就是说当前用户不会发生任何事
		 因为void（0）计算为0，所以不会有任何效果-->
		 
		<a href="javascript:void(0)" onclick="removeAllDiv()">点击删除所有的div</a>
		<div class="c1">这是一个div1</div>
		<div class="c1">这是一个div2</div>
		<div class="c1">这是一个div3</div>
		<div>这是一个div4</div>
		<div>这是一个div5</div>
	</body>
</html>

练习案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/**
			 * 当select中的内容发生变化时，获取变化后的内容
			 * select标签中虽然没有value属性，但当我们选中一个
			 * option之后，select标签中的value值就等于被选中option的
			 * value值（如果option中没有value属性，就把option中的
			 * 内容当作value）
			 */
			function getCountry(){
				var oSel=document.getElementById("country");
				console.log(oSel.value+"被选中了...")
			}
		</script>
	</head>
	<body>
		<!--练习：二级联动下拉选框,在控制台上输出我们选择的国家 -->
		<select id="country" onchange="getCountry()">
			<option value="none">--选择国家--</option>
			<option value="中国">中国</option>
			<option value="美国">美国</option>
			<option value="日本">日本</option>
		</select>
		<br/><br/>
	</body>
</html>

练习案例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			
				/**
				 * data:是js的一种对象格式，是用大括号括起来的若干个
				 * key/value结构，key只能为字符串，value可以为数值，字符串
				 * 布尔值，数组，函数
				 * 这种格式后来发展为一种轻量的数据交换格式JSON
				 */
			var data={
				"吉林省":["长春","吉林","*"],
				"河北省":["石家庄","唐山","秦皇岛"],
				"辽宁省":["沈阳","大连","鞍山"],
				"山东省":["青岛","济南","烟台"]
			}
			function selectCity(){
				//1.首先获取用户所选中的省份
				var prov=document.getElementById("province").value;
				//2.通过选中的省份到data对象中，获取省份所对应的市区数组
				var arrcity=data[prov];
				console.log(arrcity);//["长春","吉林","*"]
				if(arrcity==undefined){
					return;//提前结束函数，后面的代码不会执行
				}
				//3.获取城市select标签
				var citySel=document.getElementById("city");
				//4.当添加当前省份对应的市区到下拉选框中，先清空之前的option
				citySel.innerHTML="<option>--选择城市--</option>";
				//5.遍历市区数组，将每个市区作为option添加进城市select中
				for(var i=0;i<arrcity.length;i++){
					//创建一个option标签，标签的内容就是当前遍历的市区
					var oOpt=document.createElement("option");
					oOpt.innerHTML=arrcity[i];//<option>沈阳</option>
					//将创建好的option添加城市select标签内部
					citySel.appendChild(oOpt);
				}
			}
		</script>
	</head>
	<body>
		<div>
			<select id="province" onchange="selectCity()">
				<option>--选择省市--</option>
				<option>吉林省</option>
				<option>河北省</option>
				<option>辽宁省</option>
				<option>山东省</option>
			</select>
			<select id="city">
				<option>--选择城市--</option>
			</select>
		</div>
	</body>
</html>

练习案例4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/**
			 * 练习：点击按钮，进行开灯或者关灯
			 */
			var flag="off";
			function changeImg(){
				var oImg=document.getElementById("img1");
				console.log(oImg);
				if(flag=="off"){
					oImg.src="imgs/on.gif";
					flag="on";
				}else{
					oImg.src="imgs/off.gif";
					flag="off";
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="开/关灯" onclick="changeImg()"/>
		<br /><br />
		<img id="img1" src="imgs/off.gif" />
	</body>
</html>
上一篇：NLP-Attention for Seq2Seq


下一篇：java运用二维数组随机数进行矩阵加减乘和转置