jQuery学习笔记(1)

谁偷了我的小松鼠

于 2019-09-20 15:49:08 发布

阅读量176

点赞数

文章标签：前端 jquery

本文链接：https://blog.csdn.net/weixin_41049260/article/details/101051308

版权

jQuery是一个java script库设计理念:write less,do more

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。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的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

一 jQuery 对象和 DOM 对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- 导入 jQuery 库 -->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
	
	//$(function(){}) 相当于 window.onload, 代码卸载 {} 之间
	$(function(){
		//1. 选取 button: $("button")
		//2. 为 button 添加 onclick 响应函数: $("button").click(function(){})
		//代码编写在 function 的 {} 中. 
		$("button").click(function(){
			//3. 弹出 helloworld
			alert("helloworld");
			alert($(this).text());
			
			//jQuery 和 DOM 对象
			//1. 由 jQuery 对象转为 DOM 对象
			//1). 获取一个 jQuery 对象
			var $btn = $("button");
		
			//2). jQuery 对象是一个数组. 
			//alert($btn.length);
	
			//3). 可以通过数组的下标转为 DOM 对象
			//alert($btn[1].firstChild.nodeValue);
			
			//2. 由 DOM 对象转为 jQuery 对象
			//1). 选取一个 DOM 对象
			var btn = document.getElementById("btn");
			
			//2). 把 DOM 对象转为一个 jQuery 对象: 使用 $() 进行包装
			alert("--" + $(btn).text())
		});
		
	})
	
</script>

</head>
<body>

	<button id="btn">ClickMe</button>
	<br><br>
	<button>ClickMe2</button>

</body>
</html>

二基本选择器

在这里插入图片描述

<!-- 导入 jQuery 库 -->
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			
			$(function(){
				//1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")
				//2. 为选择的 jQuery 对象添加 onclick 响应函数: 
				// $("#btn1").click(function(){}), 响应函数的代码
				//写在 function(){} 的中括号中.
				$("#btn1").click(function(){
					$("#one").css("background", "#ffbbaa");
				});
				$("#btn2").click(function(){
					$(".mini").css("background", "#ffbbaa");
				});
				$("#btn3").click(function(){
					$("div").css("background", "#ffbbaa");
				});
				$("#btn4").click(function(){
					$("*").css("background", "#ffbbaa");
				});
				$("#btn5").click(function(){
					$("span,#two").css("background", "#ffbbaa");
				});
			})
		
		</script>
		
	</head>
	<body>		
		<input type="button" value="选择 id 为 one 的元素" id="btn1" />
		<input type="button" value="选择 class 为 mini 的所有元素" id="btn2" />
		<input type="button" value="选择 元素名是 div 的所有元素" id="btn3" />
		<input type="button" value="选择 所有的元素" id="btn4" />
		<input type="button" value="选择 所有的 span 元素和id为two的元素" id="btn5" />
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
	</body>
</html>

三层次选择器

在这里插入图片描述

<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
		
			$(function(){
				
				$("#btn1").click(function(){
					$("body div").css("background", "#ffbbaa");
				});
				$("#btn2").click(function(){
					$("body > div").css("background", "#ffbbaa");
				});
				$("#btn3").click(function(){
					$("#one + div").css("background", "#ffbbaa");
				});
				
				$("#btn4").click(function(){
					$("#two ~ div").css("background", "#ffbbaa");
				});
				$("#btn5").click(function(){
					$("#two").siblings("div").css("background", "#ffbbaa");
				});
				$("#btn6").click(function(){
					//以下选择器选择的是近邻 #one 的 span 元素, 若该span
					//和 #one 不相邻, 选择器无效. 
					//$("#one + span").css("background", "#ffbbaa");
					$("#one").nextAll("span:first").css("background", "#ffbbaa");
				});
				$("#btn7").click(function(){
					$("#two").prevAll("div").css("background", "#ffbbaa");
				});
				
			})
		
		</script>
	</head>
	<body>		
		<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
		<input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
		<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
		<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
		<input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
		<input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" />
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" size="8">
		</div>
		<span id="span">^^span元素^^</span>
		<span id="span">--span元素--</span>

四基本过滤选择器

在这里插入图片描述

谁偷了我的小松鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记(1)

jQuery是一个java script库设计理念:write less,do morejQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的J...
复制链接

扫一扫