提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

【web前端(三十七)】javascript_jquery核心对象的三种用法、并集选择器

JavaScriptjQueryWeb对象前端 用法 核心 三种
2023-09-11 14:20:37 时间

首先，我们要取www.jquery.com上下载一个jquery脚本文件：

 

然后，我们再另存为我们项目文件下的一个脚本文件就行了。

 

 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>jquery核心对象的三种用法</title>
		<style>
			/**
			 * 给块标签设置样式的选择器:
			 * （与下面的第二种方法相对应）
			 * /
			
			
			/**重定义标签的选择器**/
			/*div{
				background-color: #00FF00;
			}*/
			
			.a1 {
				background-color: #00FFFF;
			}
			
			.a2 {
				color: red;
			}
			
			/**
			 * 并集选择器：
			 * 同时运用他俩的，才能运用该样式。
			 */
			.a1.a2 {
				width: 100px;
				height: 100px;
			}
			
			div.a1 {
				border: 5px double #000;
			}
		</style>

		<script type="text/javascript" src="../js/jQuery/jquery-3.4.1.min.js"></script>
	</head>

	<body>
			<!--这里是一个集合对象-->
		<div id="aaa" class="a1">Hello</div>
		<div class="a1">Hello</div>
		<div>Hello</div>
		<div>Hello</div>

		<script type="text/javascript">
			/**
			 * jquery有三种用法
			 */

		/*1.加载页面后执行*/
				//给document对象，挂接时间。
				//该事件很重要，他是所有事件注册和实现动态效果的基础，
				//onload事件只有在整个页面加载完了，它才执行。
				//正是加载完了之后，页面中的任何一个标签都可找得到，
				//所以往往将事件写到onload事件下。
				//
			//document.onload=function(){
			//				
			//}
	

				jquery的核心函数：$();
				//这种写法，同上面onload的作用一样。
				//但是相比于下面的写法，还是有些麻烦。
				//
			//$.ready(
			//	function(){
			//
			//	}
			//)

				//同上面的用法一样，可以自动设置onload函数。
			$(
				function() {
					console.log("页面加载");
				}
			);




		/* 2.通过标签选择器字符串，返回标签对象的jquery包装对象*/
				//但是，我们这里标签没有在$();函数里写，
				//所以我们得要将标签写到上面的div块里。
			//var div=document.getElementsByTagName("div")[0];//DOM对象找法
			
				//在这里，我们要知道的是。jquery在选择对象的时候，
				//实际上用的是css选择器（包括id选择器、后代选择器等）。
				//所以，我们下面就要用css选择器来表现jquery的用法。
				//但是，要注意的是，这里返回的是由$包装过的jquery对象，
				//由于返回的对象不止一个，所以这里返回的是jquery的一个集合对象。
				//这里之所以要包装成jquery对象，是因为jquery给DOM对象添加了许多方法。
				//我们后面学的一些方法，都是jquery对象给附加上去的。
			var div = $("#aaa"); //这样就返回块上面的选择器，
			
				//这里有jquery附加方法的DOM对象方法
				//$包装过的对象是jquery对象。
			//for(var i=0;i<div.length;i++){
			//	div[i]
			//}
			
				//css为设置style样式的方法：
				//括号里，逗号前面为属性，后面为值。
				//如果这里用的是DOM对象的方法的话，
				//我们需要去便利上面四个块里的对象，
				//然后再给加样式。
				//但是，这里用了jquety对象的方法，
				//我们就不用去便利了。
			div.css("background-color", "red");
			
				//这里为并集选择，如果只是div，
				//就会将div块里的四个Hello对象都选中，
				//但是加了".a1"，就是一个类。
				//作用就是只选中了包含类a1的div标签。
				//即只选中了<div class="a1">Hello</div>。
			var div1 = $("div.a1");
			
				//给选中的div对象加边框。
			div1.css("border","1px solid #000");




		/* 3.第三种用法把DOM对象转换成jquery对象*/
			var div = document.getElementsByTagName("div");
				//我们向里面传DOM对象，将其变成jquery对象。
			var jqy = $(div);
				//层叠，此时为style样式，优先级最高。
			jqy.css("color", "white");
			jqy.css("background-color", "deeppink");



			
		/*4.jquery第四种用法：创建DOM的jquery对象*/
			        //用字符串创建jquery对象：
 				//追加表格也可用该种方法。
 				//这里我们要注意，p是p变量，"p"是p标签。
			//var p=$("<p>asdfghjkl</p>");
			//$("p").append(p);
		</script>
	</body>

</html>

 

第二种方法的效果：

第三种用法的效果：

第四种用法的效果：

相关文章