JQuery基础（1）

最新推荐文章于 2023-06-11 13:49:24 发布

晚风yY

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量74

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/m0_55689351/article/details/115121049

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery简介

jQuery 是一个 JavaScript 库。[.js]
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery 库可以通过一行简单的标记被添加到网页中。

例如：

<script  src=”js/jquery.js”></script>

什么是JQuery？

jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]

JQuery的作用？

jQuery库包含以下功能：

1.HTML 元素选取

2.HTML 元素操作

3.CSS 操作

4.HTML 事件函数

5.JavaScript 特效和动画

6.HTML DOM 遍历和修改

7.AJAX

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库

production jQuery 3.5.1--- https://code.jquery.com/jquery-3.5.1.min.js

development jQuery 3.5.1---https://code.jquery.com/jquery-3.5.1.js

如果开发测试使用development jQuery 3.5.1，有注释可以查看具体的内容。

如果发布使用production jQuery 3.5.1，小，节省内存。

通过script标记导入到网页中

例如：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				alert("测试导入jquery");
			});
		</script>
	</head>
	<body>
	</body>
</html>

通过网络地址导入jquery

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--<script src="jquery-3.5.1.js"></script>-->
		<!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			$(function(){
				alert("测试导入jquery");
			});
		</script>
	</head>
	<body>
	</body>
</html>

jQuery语法

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

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

1.美元符号定义 jQuery

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

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

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				//基础语法： $(selector).action()
				$("p").css("background-color","yellow");
				$("p.test1").css("color","red");
				$("#test2").css("color","blue");
			});
		</script>
	</head>
	<body>
		  <p>测试jquery的基础语法1</p>
		  <p class="test1">测试jquery的基础语法2</p>
		  <p>测试jquery的基础语法3</p>
		  <p id="test2">测试jquery的基础语法4</p>
	</body>
</html>

页面初始化事件

JavaScript：

body中提供οnlοad=“函数”
Window.οnlοad=function(){}----[只能执行一次，如果第二次，那么第一次的执行会被覆盖]

JQuery：

$(docunment).ready()----[可以执行多次，第N次都不会被上一次覆盖]

jQuery选择器

1.元素选择器：jQuery 元素选择器基于元素名选取元素。

2.#id 选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

3.class 选择器：jQuery 类选择器可以通过指定的 class 查找元素。

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.js"></script>
		<script>
			$(function(){
				//元素选择器
				$("p").css("background-color","black");
				//.class选择器
				$("p.test1").css("color","red");
				//id选择器
				$("#test2").css("color","blue");
				$("p:first").css("color","green");
				$("ul li:first").css("font-size","30px");
				$("ul li:last-child").css("font-size","40px");
				$("[href]").css("font-size","20px");
				$(":button").css("width","180px");
				$("table").css("width","480px");
				$("tr:even").css("background-color","red");
				$("tr:odd").css("background-color","blue");
			});
		</script>
	</head>
	<body>
		<p>测试jquery的基础语法1</p>
		<p class="test1">测试jquery的基础语法2</p>
		<p>测试jquery的基础语法3</p>
		<p id="test2">测试jquery的基础语法4</p>
		<ul>
			<li>name=zhangsan</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>
		<ul>
			<li>name=lisi</li>
			<li>age=23</li>
			<li>address=xian</li>
		</ul>
		<ul>
			<li><a href="#">name=wangwu</a></li>
			<li><a href="#">age=23</a></li>
			<li><a href="#">address=xian</a></li>
		</ul>
		<input type="button" value="测试button1"/>
		<input type="button" value="测试button2"/>
		<table border="1px">
			<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
			<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
			<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
			<tr><td>1001</td><td>zhangsan</td><td>23</td><td>西安</td></tr>
			<tr><td>1003</td><td>王五</td><td>24</td><td>西安</td></tr>
			<tr><td>1002</td><td>lisi</td><td>25</td><td>西安</td></tr>
		</table>
	</body>
</html>

晚风yY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础（1）

JQuery简介jQuery 是一个 JavaScript 库。[.js] jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 jQuery 库可以通过一行简单的标记被添加到网页中。例如：<script src=”js/jquery.js”></script>什么是JQuery？jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]JQuery的作用？...
复制链接

扫一扫

专栏目录