js及jQuery总结（七）

编程语言 2018-09-29 10:17:00 阅读次数: 0

08.01_jQuery概述

* 是一个轻量级的JavaScript库
* jQuery的功能：
	* html元素的获取
	* html元素的操作
	* css操作
	* 事件函数
	* js中的特效和动画
	* DOM的操作
	* AJAX
* jQuery的好处：
	* 将js的代码简单化
	* 不需要关心兼容问题
	* 提供了大量的实用的函数
* jQuery的设计思想
	* 模拟css选择元素
	* 独有的语法方式
* jQuery的写法
	* 函数
	* 取值赋值一体化

08.02_ jQuery的选择器

* 选择器是jQuery的核心
* 支持css语法
* 分类：
	* 基本选择器
	* 层次选择器
	* 过滤选择器
	* 属性选择器
	* 表单选择器
* jQuery选择器的优势：
​	* a.代码更简化
​		举例：document.getElementById("divid");
​			    $("#divid")
	* b.支持css所有的语法【css1-css3】【html1--html5】
	* c.完善的检测机制

08.03_jQuery的安装

* 官网：jquery.com
* 本质上其实就是一个js文件，直接导入到工程中，在需要使用的页面中通过<script>标签引用

08.04_jQuery的使用

  • 1.基础语法
    • 通过美元符来定义jQuery
    • 基础语法格式为：$(选择器seclector).methodName()
    • seclector:是一个字符串表达式，用于识别DOM中的元素，
    • 多个jQuery操作可以连起来写：$(seclector).method1().methond2().method3()…
HelloJQuery
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div id="box">hehehe</div>
		<div class="box_class">hahaha</div>
		<p>"hello"</p>
	</body>
	<script type="text/javascript">
		/*$(document).ready(function(){
			alert("hello");
		})
		
		alert("world");
		
		window.onload = function(){
			alert("helloworld");
		}*/
		
		var $result = $("#box").html("hello");
//		alert($result.get(0));
		
		$(".box_class").html("heihei");
		$("p").html("houhou");
		
		$(".box_class,p").html("hihihi");
		
		$("*").html("hhh");
	</script>
</html>

08.05_jQuery选择器–基本选择器【5种】

  • 1.1ID选择器
    • 语法：$("#id")
    • 说明：相当于document.getElementById(“id”)
  • 1.2元素选择器【标签名称选择器】
    • 语法：$(“element”)
  • 1.3类名选择器
    • 语法：$(".class")
  • 1.4复合选择器
    • 语法：$(“选择器1，选择器2”)
  • 1.5通配符选择器
    • 语法：$("*")

08.06_jQuery选择器–层次选择器【4种】

  • 2.1 ancestor descendant选择器
    • 先辈后辈
    • 作用：获取ancestor 后的所有的descendant 标签【父子标签或者先辈和后辈关系】
    • 语法：$("ancestor descendant ") //类似于包含选择器
    • 说明：
      • ancestor 可以是任何有效的选择器
      • descendant 用于匹配元素的选择器,是ancestor 后辈或者子标签

​ .list li{}
例如：$(“ul li”)

  • 2.2 parent>child选择器
    • parent代表父元素，child代表子元素，使用该选择器只能选择指定父元素下的子元素
    • 语法：$(“parent>child”)
  • 2.3 prev+next选择器
    • 用于匹配紧跟在perv后面的next元素
    • 注意：prev和next是同辈关系【兄弟关系】
    • 语法：$(“prev+next”)
  • 2.4 prev~siblings选择器
    • 用于匹配紧跟在perv后面的所有的siblings元素，
    • 注意：prev和siblings是同辈关系【兄弟关系】
    • 语法：$(“prev~siblings”)
层次选择器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="box">
			<p>hello</p>
			<div>
				<p>world</p>
				<div>
					<p>helloworld</p>
				</div>
			</div>
		</div>
		
		<div id="box00">
			<div id="box01">"hello"</div>
			<div id="box02">"world"</div>
			<div id="box03"><p>"helloworld"</p></div>
		</div>
	</body>
	<script type="text/javascript">
		$(document).ready(function(){

			// ancestor descendant选择器
			var $box_p = $("#box p");
			console.log($box_p);
			
			// parent>child选择器
			var $box00 = $("#box00>div");
			console.log($box00);
			
			// prev+next选择器
			var $box04 = $("#box01+div");
			console.log($box04);
			
			// prev~siblings选择器
			var $box05 = $("#box00~div");
			console.log($box05);
		})
	</script>
</html>

08.07_ jQuery选择器–过滤选择器【5种】

  • 简单过滤器
    • XX：first 第一个
    • XX：last 最后一个
    • XX：even 偶数位
    • XX：odd 奇数位
    • XX：eq() 给定位置的元素
    • XX：gt() 大于给定位置的元素（不含）
    • XX：lt() 小于给定位置的元素（不含）
    • ：header() 匹配所有标题(

      标签)

    • p:not(.pp) 匹配除了.pp之外的元素
    • .pp:animated 匹配所有正在执行动画的元素
简单过滤器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<p class="pp">aaa</p>
		<p class="pp">bbb</p>
		<p class="pp">ccc</p>
		<p class="pp">ddd</p>
		<p class="pp11">ddd</p>
		<p class="pp12">ddd</p>
		
		<h1>aaa</h1>
		<h3>aaa</h3>
	</body>
		
	<script>
		$(document).ready(function(){
			//通过指定的条件筛选元素
			
			//类似于伪类选择器
			//:first 只匹配第一个元素的内容
			var $jqObj1 = $(".pp:first").html("hello");
			
			//:last   只匹配最后一个元素的内容
			var $jqObj2 = $(".pp:last").html("hello");
			
			//注意：标签从0开始编号的
			//:even   匹配索引值为偶数的元素
			var $jqObj3 = $(".pp:even").html("even~~~~");
			
			//:odd   匹配索引值为奇数的元素
			var $jqObj4 = $(".pp:odd").html("odd~~~~");
			
			//：eq(index)  匹配给定索引的元素
			var $jqObj5 = $(".pp:eq(1)").html("eq~~~~");
			
			//:gt(index)  匹配所有大于给定索引的元素
			//注意：不包含指定索引
			var $jqObj6 = $(".pp:gt(1)").html("gt~~~~");
			
			//:lt(index)  匹配所有小于给定索引的元素
			//注意：不包含指定索引
			var $jqObj7 = $(".pp:lt(1)").html("lt~~~~");
			
			//:header  匹配如h1,h2...的所有的元素
			var $jqObj8 = $(":header").html("header~~~~");
			
			//：not(selector)  去除所有与选择器匹配的元素
			var $jqObj9 = $("p:not(.pp)").html("pp~~~~");
			
			//:animated   匹配所有正在执行动画的元素
			var $jqObj10 = $(".pp:animated").html("pp~~~~");	
		})
	</script>
</html>
  • 内容过滤器
    • :contains(“字符串”) 匹配文本内容包含字符串的不元素
    • :empty 匹配文本为空的元素
    • :has(seclector) 匹配含有选择器所匹配的元素
    • :parent 匹配指定选择器的父元素
内容过滤器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<p class="pp">aaa</p>
		<p class="pp">bbbPython</p>
		<p class="pp">ccc</p>
		<p class="pp"></p>
		
		<table>
			<tr>
				<td>
					<p>good</p>
				</td>
				<td>
					<p>nice</p>
				</td>
				<td>
					<h1>aaa</h1>
				</td>
			</tr>
		</table>
	</body>
		
	<script>
		$(document).ready(function(){
			//:contains("字符串")  匹配文本内容包含字符串的不元素
			var $jqObj1 = $("p:contains('Python')");
			$jqObj1.html("hello");
			
			//:empty  匹配文本为空的元素   
			var $jqObj2 = $("p:empty").html("hello");
			
			//:has(seclector)  匹配含有选择器所匹配的元素
			var $jqObj3 = $("td:has(p)");
			console.log($jqObj3);
			
			//:parent   匹配指定选择器的父元素
			var $jqObj4 = $("p:parent");

// console.log($jqObj4);
})

  • 可见性过滤器
    • :hidden 匹配隐藏的元素
    • :visible 匹配可见的元素
可见性过滤器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<!--元素的可见状态：显示/隐藏-->
		<input type="text" value="aaa" />
		<!--设置隐藏-->
		<!--方式一-->
		<input type="hidden" value="bbb" />
		<!--方式二-->
		<input type="text" value="ccc"  style="display:none"/>
	</body>
		
	<script>
		$(document).ready(function(){
			//:hidden  匹配隐藏的元素
			//:visible 匹配可见的元素
			var $jqObj1 = $("input:visible");
			//修改匹配出来的input标签的value值
			//类似于   标签对象.value  = 具体的值
			$jqObj1.val("hello");
			
			var $jqObj2 = $("input:hidden:last");
		})
	</script>
</html>
  • 表单对象的属性过滤器
    • :checked 匹配所有被选中的元素
    • :disabled 匹配的是所有不可用的元素
    • :enabled 匹配的是所有可用的元素
    • :selected 匹配的是select标签下有selected属性的option标签
表单对象的属性过滤器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		
		<form>
			<input type="checkbox" checked="checked" value="复选框1"/>
			<input type="checkbox" checked="checked" value="复选框2"/>
			<input type="checkbox" value="复选框3"/>
			
			<input type="button" value="按钮" disabled />
			
			<select onchange="selectVal()">
				<option value="选项1" selected="selected">选项1</option>
				<option value="选项2">选项2</option>
				<option value="选项3">选项3</option>
			</select>
		</form>
	</body>
		
	<script>
		$(document).ready(function(){
			//:checked   匹配所有被选中的元素
			var $jqObj1 = $("input:checked:eq(1)").val("aaa");
			
			//:disabled 匹配的是所有不可用的元素
			var $jqObj2 = $("input:disabled");
			
			//:enabled  匹配的是所有可用的元素
			var $jqObj3 = $("input:enabled");
			
			//:selected 匹配的是select标签下有selected属性的option标签
			function selectVal(){
				//匹配的是select标签下有selected属性的option标签
				var $jqObj4 = $("select option:selected");
			}
		})
	</script>
</html>
  • 表单子元素过滤器
    • ：first-child 匹配所有给定元素的第一个子元素
    • : last-child 匹配所有给定元素的最后一个子元素
    • : only-child 如果某个父元素只有一个子元素，那么将会被匹配
    • : nth-child(index) 匹配父元素下的第index个子元素（注意：index从1开始）
表单子元素过滤器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<ul>
			<li>选项1</li>
			<li>选项2</li>
			<li>选项3</li>
			<li>选项4</li>
			<li>选项5</li>
		</ul>
		
		<ul>
			<li>aaa</li>
		</ul>
	</body>
		
	<script>
		$(document).ready(function(){
			
			//类似于结构选择器
			//：first-child  匹配所有给定元素的第一个子元素
			var $jqObj1 = $("ul li:first-child");
			
			//:last-child   
			var $jqObj2 = $("ul li:last-child");
			
			//:only-child  如果 某个父元素只有一个子元素，那么将会被匹配
			var $jqObj3 = $("ul li:only-child");
			
			//:nth-child(index)  匹配父元素下的第index个子元素
			//注意：index从1开始
			var $jqObj4 = $("ul li:nth-child(3)");
		})
	</script>
</html>

08.08_jQuery选择器–属性选择器【1种】

  • 属性选择器：
    • 通过元素的属性作为过滤条件
    • 类似于css中的属性过滤器
    • [attr] 匹配给定属性的元素
    • [attr=value] 匹配给定属性,并且值为value的元素
    • [attr!=value] 匹配给定属性,并且值不为value的元素
    • [attr*=value] 匹配给定属性,并且值含有value的元素
    • [attr^=value] 匹配给定属性,并且值以value开头的元素
    • [attr$=value] 匹配给定属性,并且值以value结尾的元素
    • [selector1][selector2][selector3].复合属性选择器，需要同时满足多个条件时进行匹配
属性选择器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<!--通过元素的属性作为过滤条件-->
		<div name="div1">第1个div</div>
		<div name="div2">第2个div</div>
		<div name="div3">第3个div</div>
		<div name="div4">第4个div</div>
		<div name="div5">第5个div</div>
		
		<div id="id" name="box1">第6个div</div>
		<div name="box2">第7个div</div>
	</body>
		
		<script>
		$(document).ready(function(){
			//类似于css中的属性过滤器
			//[attr]  匹配给定属性的元素
			var $jqObj1 = $("div[name]");
			
			//[attr=value]  匹配给定属性,并且值为value的元素
			var $jqObj2 = $("div[name='div3']");
			
			//[attr!=value]  匹配给定属性,并且值不为value的元素
			var $jqObj3 = $("div[name!='div3']");
			
			//[attr*=value]  匹配给定属性,并且值含有value的元素
			var $jqObj4 = $("div[name*='box']");
			
			//[attr^=value]  匹配给定属性,并且值以value开头的元素
			var $jqObj5 = $("div[name^='box']");
			
			//[attr$=value]  匹配给定属性,并且值以value结尾的元素
			var $jqObj6 = $("div[name$='x1']");
			
			//复合属性选择器
			//[selector1][selector2][selector3]...  需要同时满足多个条件时进行匹配
			var $jqObj7 = $("div[id][name='box1']");
		})
	</script>
</html>

08.09_jQuery选择器–表单选择器【1种】

  • 表单选择器
    • attr；给指定的标签添加属性并且设置属性的值
表单选择器案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form>
			复选框：<input type="checkbox" />
			单选框：<input type="radio" />
			文件：<input type="file" />
			普通输入框：<input type="text" />
			密码：<input type="password" />
			邮箱：<input type="email" />
			按钮：<input type="button" />
			提交：<input type="submit" />
			重置：<input type="reset" />
			隐藏域：<input type="hidden" />
		</form>
	</body>
		
	<script>
		$(document).ready(function(){
			//本质上还是一个过滤选择器
			//attr；给指定的标签添加属性并且设置属性的值
			$(":checkbox").attr("checked","checked");
			
			$(":radio").attr("checked","checked");
			
			$(":file").hide();
			
			$(":password").val("123");
			
			$(":text").val("文本");	
		})
	</script>
</html>

08.10_使用jQuery选择器的注意事项

  • 使用jQuery选择器的注意事项
    • 1.注意空格
    • 2.避免含有特殊符号:. # ( []
使用jQuery选择器的注意事项案例
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入jQuery文件-->
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div class="name">
			<div style="display: none;">小科</div>
			<div style="display: none;">小金</div>
			<div style="display: none;">小王</div>
			<div style="display: none;">小张</div>
			<div style="display: none;" class="name">老张</div>
		</div>
		
		<div style="display: none;" class="name">aaa</div>
		<div style="display: none;" class="name">bbb</div>
		
		<div id="box#test" style="width:200px;"></div>
	</body>
		
	<script>
		$(document).ready(function(){
			//1.注意空格
			//针对：层次选择器：父子标签和   先辈与后辈标签
			var $jq_1 = $(".name :hidden");
			var $jq_2 = $(".name:hidden");
			
			console.log($jq_1.length);//5
			console.log($jq_2.length);//3
			
			//2.含有特殊符号:.   #   (   []
			
			//转义：\\
			$("#box\\#test")
		})
	</script>
</html>

如有错误，请在下面评论。好及时更正，谢谢！

猜你喜欢

转载自blog.csdn.net/wujialaoer/article/details/82883171
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022