jQuery（一）

最新推荐文章于 2024-03-19 05:54:06 发布

哦吼~

最新推荐文章于 2024-03-19 05:54:06 发布

阅读量324

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_42727102/article/details/100716909

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

首先，在搜索jQuery，在官网上下载jquery-3.4.1.min或其更全面的版本文件，然后将此文件配置到js下即可。
1.框架：将一个又一个丰富多彩的程序功能进行封装，使其他人可以调用这些封装好的程序组件。
2.jQuery的优势：
(1)轻量级（耦合度比较低，依赖度低）
(2)强大的选择器
(3)出色的DOM操作封装
(4)可靠的事件处理机制
(5)出色的浏览器兼容性
3.基本选择器
(1)基本选择器是jQuery中常用的选择器，也是最简单的选择器。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--类似于Java中的导包 必须在所有jQuery代码之上-->
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script>
			/*
			 * $(document):得到当前文档对象    
			 * ready（） （页面主体部分加载完成执行）:页面加载函数类似于window.onload（页面完全加载完成执行）  参数为一个匿名函数
			 */
			/*$(document).ready(function(){ 
				document.write("Hello,World!");//输出内容到页面 会覆盖内容
			})*/
			
			function funA(){
				//$("#s1"):获取编号为s1的对象，规范期间jQuery对象以$开头
				var $obj1 = $("#s1");
				//设置$obj1对象的前景色为red
				$obj1.css("color","red");
			}
			function funB(){
				//$(".c1"):获取样式（class）为c1的对象集合
				var $list1 = $(".c1");
				//设置$list1集合中所有对象的前景色
				$list1.css("color","blue");
			}
			function funC(){
				//$("span"):获取元素为span的对象集合
				var $list1 = $("span");
				$list1.css("color","aqua");
			}
			function funD(){
				//设置所有人的前景色为黑色
				$("*").css("color","black");
			}
			function funE(){
				//将这三个对象前景色设为褐色
				$("#s1,#s2,#l2").css("color","burlywood");
			}
		</script>
	</head>
	<body>
		<span id="s1">a</span> <br />
		<span id="s2" class="c1">b</span> <br />
		<label id="l1" class="c1">c</label> <br />
		<span id="s3">d</span> <br />
		<span id="s5" class="c1">e</span> <br />
		<label id="l2" class="c1">f</label> <br />
		<span id="s5">g</span> <br />
		<label id="l3">h</label> <br />
		<button onclick="funA()" class="c1">funA()</button>
		<button onclick="funB()">funB()</button>
		<button onclick="funC()">funC()</button>
		<button onclick="funD()">funD()</button>
		<button onclick="funE()">funE()</button>
	</body>
</html>

4.jQuery对象就是通过jQuery包装DOM对象后产生的对象。
5.jQuery对象是jQuery独有的。
6.jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的任何方法。
7.建议约定：如果获取的是jQuery对象，那么要在变量前面加上$
8.jQuery对象转换为DOM对象：
(1)jQuery对象是一个数组对象，可以通过[index]的方法得到对应的DOM对象
$(“#msg”)[0]
(2)使用jQuery中的get（index）方法得到相应的DOM对象
$(“ m s g ”) . g e t (0) 9 . D O M 对象转换为 j Q u e r y 对象： (1) 对于一个 D O M 对象，只需要用$ （）将DOM对象包装起来（jQuery对象就是通过jQuery包装DOM对象后产生的对象），就可以获得一个jQuery对象
$(document.getElementById(“msg”))

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script>
			function funA(){
				var $obj = $("#d1");
				var obj = $obj.get(0)//$obj[0];
				obj.innerHTML = "我是DOM中的innerHTML加入进来的";
			}
			function funB(){
				var obj = document.getElementById("d1");
				var $obj = $(obj);
				$obj.html("我是jQuery中的html（）加入进来的");
			}
		</script>
	</head>
	<body>
		<div id="d1"></div>
		<button onclick="funA()">DOM</button>
		<button onclick="funB()">jQuery</button>
	</body>
</html>

10.层次选择器
(1)如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器
在这里插入图片描述
(2)第一个选择器中间有空格
(3)第三个选择器注意紧接着
(4)第四个选择器选择的是后面所有同辈的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script>
			function funA(){
				//获取到编号为d1的所有span后代
				var $list = $("#d1 span");
				$list.css("color","aqua");
			}
			function funB(){
				//获取到编号为d1的所有span儿子
				var $list = $("#d1>span");
				$list.css("color","red");
			}
			function funC(){
				//获取到编号为s2的下一个span
				var $after = $("#s2+span");
				$after.css("color","yellow");
			}
			function funD(){
				//获取到编号为s2的下一群span
				var $afters = $("#s2~span");
				$afters.css("color","blue");
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<span id="s1">a</span><br/>
			<span id="s2">b</span> <!--加上换行 funC（）不起作用，颜色不变 -->
			<span id="s3">c</span><br/>
			<div>
				<span id="s4">d</span><br/>
				<span id="s5">e</span><br/>
				<span id="s6">f</span><br/>
			</div>
			<span id="s7">g</span><br/>
			<label id="l1">h</label><br/>
			<span id="s8">i</span><br/>
			<label id="l2">j</label><br/>
			<button onclick="funA()">后代</button>
			<button onclick="funB()">儿子</button>
			<button onclick="funC()">弟弟</button>
			<button onclick="funD()">弟弟们</button>
		</div>
	</body>
</html>

11.基本过滤选择器
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script>
			function funA(){
				var $obj1 = $("p:first");
				var $obj2 = $("p:last");
				$obj1.css("color","red");
				$obj2.css("color","darkorange");
			}
			function funB(){
				var $list1 = $("p:even");
				var $list2 = $("p:odd");
				$list1.css("color","aqua");
				$list2.css("color","blanchedalmond");
			}
			function funC(){
				var $obj1 = $("p:gt(3)");
				var $obj2 = $("p:lt(3)");
				var $obj3 = $("p").eq(3);//$("p:eq(3)");
				$obj1.css("color","red");
				$obj2.css("color","blue");
				$obj3.css("color","green");
			}
			function funD(){
				//除p3之外
				var $obj = $("p:not(#p3)");
				$obj.css("color","white");
			}
		</script>
	</head>
	<body>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p id="p3">6</p>
		<p>7</p>
		<button onclick="funA()">funA</button>
		<button onclick="funB()">funB</button>
		<button onclick="funC()">funC</button>
		<button onclick="funD()">funD</button>
	</body>
</html>

12.内容过滤选择器
(1)内容过滤选择器的过滤规则主要体现在它包含的子元素和文本内容上
在这里插入图片描述
第一个选择器括号内要加引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.4.1.min.js" ></script>
		<style>
			div{
				width: 600px;
				height: 100px;
				background-color:aquamarine;
			}
		</style>
		<script>
			function funA(){
				$("div:contains('h')").css("background-color","red");
			}
			function funB(){
				$("div:has(span)").css("background-color","blueviolet");
			}
			function funC(){
				$("div:parent").css("background-color","green");
			}
			function funD(){
				$("div:empty").css("background-color","black");
			}
		</script>
	</head>
	<body>
		<div>asfahhj</div><hr/>
		<div><span>abcdh</span></div><hr/>
		<div></div><hr/>
		<button onclick="funA()">funA</button>
		<button onclick="funB()">funB</button>
		<button onclick="funC()">funC</button>
		<button onclick="funD()">funD</button>
	</body>
</html>

13.可见性过滤选择器
元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。因此，可见性过滤器也有两种，一种是匹配所有可见元素的:visible过滤器，另一种是匹配所有不可见元素的:hidden过滤器。
在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配到。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<style>
			div{
				width: 300px;
				height: 200px;
				background-color: #FAEBD7;
				display: none;
			}
		</style>
		<script>
			//同时改变宽高和透明度
			function funA(){
				$("div:hidden").show(2000);//没有参数，立即显示；有参数，单位为毫秒
			}
			function funB(){
				$("div:visible").hide(2000);//参数说明同上
			}
			function funC(){
				$("div").toggle(3000);//切换
			}
			function funD1(){
				$("div:hidden").slideDown(2000);//幕布  下降
			}
			function funD2(){
				$("div:visible").slideUp(2000);//幕布 上升
			}
			function funD3(){
				$("div").slideToggle(3000);//幕布 切换
			}
			//渐隐渐进
			function funE1(){
				$("div:hidden").fadeIn(3000);//渐显（即显示到屏幕）fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
			}
			function funE2(){
				$("div:visible").fadeOut(3000);//渐隐（即隐藏）
			}
			function funE3(){
				$("div").fadeToggle(3000);//切换
			}
		</script>
	</head>
	<body>
		<button onclick="funA()">funA</button>
		<button onclick="funB()">funB</button>
		<button onclick="funC()">funC</button>
		<button onclick="funD1()">funD1</button>
		<button onclick="funD2()">funD2</button>
		<button onclick="funD3()">funD3</button>
		<button onclick="funE1()">funE1</button>
		<button onclick="funE2()">funE2</button>
		<button onclick="funE3()">funE3</button>
		<div></div>
	</body>
</html>

14.文档操作、属性操作、css操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script>
			function funA1(){
				/*
				 * val() 方法返回或设置被选元素的值。
					元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
					如果该方法未设置参数，则返回被选元素的当前值。
				 */
				var val = $("#input1").val();//val方法（必须有value属性），没参数，获取值；有参数，设置值；
				alert(val);
			}
			function funA2(){
				//设置value属性的值
				$("#input1").val("abcd");
			}
			function funB1(){
		//html() 方法返回或设置被选元素的内容 (inner HTML)。
		//如果该方法未设置参数，则返回被选元素的当前内容。
				var val = $("#d1").html();
				alert(val);
			}
			function funB2(){
				//当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。
				$("#d1").html("<font>aaaaa</font>");
			}
			function funC1(){
				//text() 方法设置或返回被选元素的文本内容。
				//当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
				var val = $("#d1").text();
				alert(val);
			}
			function funC2(){
				//当该方法用于设置值时，它会覆盖被选元素的所有内容。
				$("#d1").text("<font>aaaaa</font>");
			}
			function funD1(){
				var val = $("#d1").css("color");
				alert(val);
			}
			function funD2(){
				$("#d1").css("color","aqua");
			}
			function funE1(){
				//attr() 方法设置或返回被选元素的属性值。
				//根据该方法不同的参数，其工作方式也有所差异。
				//返回被选元素的属性值。
				var val = $("#input1").attr("type");
				alert(val);
			}
			function funE2(){
				//设置被选元素的属性和值。
				$("#input1").attr("type","password");
			}
		</script>
	</head>
	<body>
		<input id="input1"/>
		<button onclick="funA1()">获取Value</button>
		<button onclick="funA2()">设置Value</button>
		<hr color="aqua" size="2"/>
		<div id="d1"></div>
		<button onclick="funB1()">获取innerHTML</button>
		<button onclick="funB2()">设置innerHTML</button>
		<hr color="aqua" size="2"/>
		<button onclick="funC1()">获取innerText</button>
		<button onclick="funC2()">设置innerText</button>
		<hr color="aqua" size="2"/>
		<button onclick="funD1()">获取CSS</button>
		<button onclick="funD2()">设置CSS</button>
		<hr color="aqua" size="2"/>
		<button onclick="funE1()">获取属性</button>
		<button onclick="funE2()">设置属性</button>
	</body>
</html>

哦吼~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery（一）

首先，在搜索jQuery，在官网上下载jquery-3.4.1.min或其更全面的版本文件，然后将此文件配置到js下即可。1.框架：将一个又一个丰富多彩的程序功能进行封装，使其他人可以调用这些封装好的程序组件。2.jQuery的优势：(1)轻量级（耦合度比较低，依赖度低）(2)强大的选择器(3)出色的DOM操作封装(4)可靠的事件处理机制(5)出色的浏览器兼容性3.基本选择器(1...
复制链接

扫一扫

专栏目录