JQuery总结

最新推荐文章于 2026-06-27 07:12:10 发布

原创最新推荐文章于 2026-06-27 07:12:10 发布 · 440 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JQuery

JQuery总结

1、JQuery:是对JavaScript的封装，是一个轻量级的“写得少，做得多”的JavaScript 函数库，JQuery内容为JScript文件，所以可以通过<script>标签进行引入；

2、JQuery库包含的功能:

a) HTML元素选取

b) HTML元素操作

c) CSS操作

d) HTML事件函数

e) JavaScript特效和动画

f) HTML DOM遍历和修改

g) Ajax网络异步请求

h) Utilities

i) 其他插件

3、JQuery下载和引入方式

JQuery下载

Production version - 用于实际的网站中，已被精简和压缩；

Development version - 用于测试和开发(未压缩，为可读的代码)；

JQuery引入方式

文件离线引入

在线引入

4、JQuery语法结构

基础语法： $(selector).action()

JQuery通过选择器选取HTML元素，然后对其执行预期的操作；

格式详述:

1、美元符号定义 jQuery

2、选择符（selector）"查询"和"查找" HTML 元素

3、jQuery 的 action() 执行对元素的操作

5、文档就绪事件

文档就绪事件功能为防止文档未全部加载完成前执行JQuery代码；

6、JavaScript、JQuery 三种文档加载形式

<!--js代码在Html页面引入方式-->
<html>
	<head>
		<meta charset="utf-8"/>
		<title>js学习</title>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			<!--形式一-->
			window.onload=function(){
				var top = document.getElementById("top");
				top.innerHTML = "jquery学习";
			}
			<!--形式二-->
			$(document).ready(function(){
				var top = document.getElementById("top");
				top.innerHTML = "jquery文档加载方法一";
			});
			<!--形式三-->
			$(function(){
				var top = document.getElementById("top");
				top.innerHTML = "jquery文档加载方法二";
			});
			
		</script>
		
	</head>
	<body>
		<div id="top" >hello</div>
	</body>
</html>

7、JQuery选择器

a) 元素选择器

<html>
	<head>
		<meta charset = "utf - 8">
		<title>JQuery测试</title>
		<script src = "jquery-3.1.1.min.js"></script>
		<script type = "text/javascript">
			$(function(){
				$("h1").html("欢迎使用JQuery");
			})
		</script>
	</head>
	<body>
		<h1 id = "h1">JQuery测试</h1>
	</body>
</html>

b) ID选择器

<html>
	<head>
		<meta charset = "utf - 8">
		<title>JQuery测试</title>
		<script src = "jquery-3.1.1.min.js"></script>
		<script type = "text/javascript">
			$(function(){
				$("#h1").html("你好中国，我的祖国");
				$("#h1").css("color","red");
			})
		</script>
	</head>
	<body>
		<h1 id = "h1">JQuery测试</h1>
	</body>
</html>

c) 类选择器

<html>
	<head>
		<meta charset = "utf - 8">
		<title>JQuery测试</title>
		<script src = "jquery-3.1.1.min.js"></script>
		<script type = "text/javascript">
			$(function(){
				$("#h1").html("你好中国，我的祖国");
				$("#h1").css("color","red");
				$(".prograph").css("color","blue");
			})
		</script>
	</head>
	<body>
		<h1 id = "h1">JQuery测试</h1>
		<p class = "prograph">世上无难事，只怕有心人</p>
	</body>
</html>

d) 群组选择器

<html>
	<head>
		<meta charset = "utf - 8">
		<title>JQuery测试</title>
		<script src = "jquery-3.1.1.min.js"></script>
		<script type = "text/javascript">
			$(function(){
				$("#h1").html("你好中国，我的祖国");
				$("#h1,.prograph").css("color","red");
				$("#in").val("盼盼");
			})
		</script>
	</head>
	<body>
		<h1 id = "h1">JQuery测试</h1>
		<p class = "prograph">世上无难事，只怕有心人</p>
		用户名:<input type = "text" id = "in" value = "佳佳"/>
		用户密码:<input type = "password" id = "pass" value = "123"/> 
	</body>
</html>

e) *选择器(选择某一级下所有的元素)

<html>
	<head>
		<meta charset = "utf - 8">
		<title>JQuery测试</title>
		<script src = "jquery-3.1.1.min.js"></script>
		<script type = "text/javascript">
			$(function(){
				$("#h1").html("你好中国，我的祖国");
				$("#h1,.prograph").css("color","red");
				$("#in").val("盼盼");
				$("#elem *").css("color","green");
			})
		</script>
	</head>
	<body>
	<div id = "elem">
		<h1 id = "h1">JQuery测试</h1>
		<h2 >生活永远都是快乐的</h2>
		<p class = "prograph">世上无难事，只怕有心人</p>
		用户名:<input type = "text" id = "in" value = "佳佳"/>
		用户密码:<input type = "password" id = "pass" value = "123"/> 
	</div>
	</body>
</html>

f) 属性选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
       $(function () {
           $("p[class=p_c1]").css("color","red"); 
		   $("input[type='text']").val("李桃");   
	 
       })

   </script>
</head>
<body>
    <h3>前端核心技术</h3>
	<p class="p_c">class属性1</p>
	<p class="p_c1">class属性2</p>
	用户名:<input type="text" value="张三"/>
	密码:<input type="password" value="123"/>
  
</body>
</html>

g) 层级选择器

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
       /*
		
jQuery层次选择器
选择器       说明
$("M N")      后代选择器，选择M元素内部后代N元素（所有N元素）
$("M>N")     子代选择器，选择M元素内部子代N元素（所有第1级N元素，若N为*表示M元素内部所有元素）
$("M~N")     兄弟选择器，选择M元素后所有的同级N元素
$("M＋N")    相邻选择器，选择M元素相邻的下一个元素（M、N是同级元素,若下一个元素相同也会被选中）
	   */

       $(function () {
            $("#d1 p").css("color","red");  //后代选择器
 			$("#d1>p").css("color","red");  //子元素选择器
 			$("#d1~p").css("color","red");   //兄弟选择器
			$("#d1+p").css("color","red");    //相邻选择器
       })

   </script>
</head>
<body>
    <h3>前端核心技术</h3>
    <div id="list">
       <div id="d1">
            一级元素div
			<p>二级元素p</p>
       </div>
       <p>一级元素p1</p>
 	   
       <span>一级元素span</span>
		<p>一级元素p2</p>
   </div>
</body>
</html>

8、JQuery动作

a) html改变元素内容

b) Css改变元素样式

c) attr改变元素属性值

<html>
	<head>
		<meta charset="utf-8"/>
		<title>员工表</title>
		<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var h = $("h3").html();
				var t = $("p").text();
				var i = $("input").val();
				
				//alert(h + " " +t +" "+i);
				
				$("a").attr("href","http://www.baidu.com"); //改变元素属性值
			})
		</script>
	</head>
	<body>
	 
		<h3>HTML内容</h3>
		<p>纯文本内容</p>
		用户名:<input type="text" value="张三"/>
		<br>
		<br>
		<a href="#" >跳转页面</a>

	</body>
</html>

标签

#jquery #库 #总结