jQuery1

最新推荐文章于 2022-05-01 19:35:49 发布

270年前

最新推荐文章于 2022-05-01 19:35:49 发布

阅读量96

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_49344258/article/details/108608906

版权

https://www.runoob.com/jquery/jquery-tutorial.html

1.jQuery是一个JavaScript库。【js】

2.jQuery极大地简化了JavaScript编程。u

3.jQuery很容易学习。

JQuery简介

jQuery库可以通过一行简单的标记被添加到网页中。

您需要具备的基础知识

在开始学习jQuery之前，应该对以下知识有基本的了解：

HTML

CSS

javascript

什么是jQuery？

jQuery是一个轻量级的“写的少，做的多”的javascript函数库。【独立的javascript文件】

jQuery库包含以下功能：

1.HTML元素选取

2.HTML元素操作

3.CSS操作

4.HTML事件函数

4.1 在开始标记中添加事件

function test(){

}

</script>

4.2 通过匿名函数添加事件

document.getElementByld("but1").οnclick=function(){

}

</script>

5.javascript特效和动画

6.HTML DOM遍历和修改

7.AJAX

https://jquery.com/ 官网

jQuery安装

网页中添加Jquery

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

1.从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小，节省内存。

1.1通过script标记导入网页中


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--<script src="E:\网星学习\JQ\jquery-3.5.1.js"></script>-->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
			$(function(){
				alert("测试jquery")
			});
		</script>
	</head>
	<body>
	</body>
</html>

1.2通过网络地址导入jQuery


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--<script src="E:\网星学习\JQ\jquery-3.5.1.js"></script>-->
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></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="E:\网星学习\JQ\jquery-3.5.1.js"></script>
		<script>
			$(function(){
			//基础语法： $(selector).action()
			$("p").css("background-color","red");
			$("p.test1").css("color","yellow");
			$("#test2").css("color","blue");
			});
		</script>	
		
		
	</head>
	<body>
		<p>测试jquery的基础语法1</p>
		<p class="test1">测试jquery的基础语法2</p>
		<p id="test2">测试jquery的基础语法4</p>
	</body>
</html>

文档就绪事件--就是页面初始化事件

javascript的页面初始化事件

1.body中提供οnlοad="函数"

2.window.οnlοad=fuction(){}


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
			<!--<script>
				/*function testJavascriptonload(){
					alert("javascript"的页面初始化11")；
				}
				//可以出现多个，但是只执行最后一个，不会挨个执行
				window.onlod=function(){
					alert("javascript的页面初始化事件22");
				}
				window.onload=function(){
					alert("javascript的页面初始事件33");
				}
				window.onload=function(){
					alert("javascript"的页面初始化事件44);
				}
			</script>*/
	</script>-->
	<script src="E:\网星学习\JQ\jquery-3.5.1.js"></script>
	<script>
		/*//原始做法
		$(function).ready(fuction){
			alert("jquery的页面初始化事件---原始做法");
      });*/
	  //简化版本
	  $(function(){
		  alert("jquery的页面初始化事件--简化版本11");
	  });
	  $(function(){
		  alert("jquery的页面初始化事件--简化版22");
	  });
	  $(function(){
		  alert("jquery的页面初始化事件--简化版33");
	  });
			
	</script>
	</head>
	<!--body onload="testJavascriptonload()">-->
	<body>
	</body>
</html>

load和ready区别
	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括图片等），然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果第二次，那么第一次的执行会被覆盖	可以执行多次，第N此都不会被上一次覆盖
简写方案	无	$(function(){ });

jQuery选择器

jQuery选择器允许对HTML元素或者单个元素进行操作

1.元素选择器

jQuery元素选择器基于元素名称选取元素

2.#id选择器

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

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

3.class选择器

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

语法	描述
$("*")	选取所有元素
$(this)	选取当前HTML元素
$("p intro")	选取class为intro的<p>元素
$("ul li:first")	选取第一个<ul>元素的第一个<li>元素
$("ul li:first-child")	选取每个<ul>元素的第一个<li>元素
$("[href]")	选取带有href属性的元素
$("a[target=_blank]")	选取所有target属性值等于”_blank"的<a>元素
$("a[target!=_blank]")	选取所有target属性值不等于"_blank"的<a>元素
$(":button")	选取所有type="button"的<input>元素和<button>元素
$("tr:even")	选取偶数位置的<tr>元素
$("tr:odd")	选取奇数位置的<tr>元素
$("p:first")	选取第一个<p>元素


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="\网星学习\JQ\jquery-3.5.1.js"></script>
		<script>
			$(function(){
				//元素选择器
				$("p").css("backgroud-clolr","black");
				//.class选择器
				$("p.test1").css("color","yellow");
				//id选择器
				$("#test2").css("color","blue");
				$("p:first").css("color","green");
				$("ul li:first").css("font-size","100px");
				$("ul li:last-child").css("font-size","50px");
				$("[herf]").css("font-size","30px");
				$(":button").css("width","200px");
				$("table").css("width","480px");
				$("tr:even").css("background-color","blue");
				$("tr:odd").css("background-color","blue");
			});
			
		</script>
	</head>
	<body>
		<p>测试jquery的测试基础语法1</p>
		<p class="test1">测试jquery的基础语法2</p>
		<p id="test2">测试jqurey的基础语法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>adderss=beida</li>
		</ul>
		<ul>
			<li><a href="#">name=jiagui</a></li>
			<li><a href="#">age=23</a></li>
			<li><a href="#">address=xian</a></li>
		</ul>
		<input type="button" value="测试按钮1"/>
		<input type="button" value="测试按钮2"/>
		<table border="1px">
			<tr><td>9527</td><td>张富贵</td><td>30</td></tr>
			<tr><td>9527</td><td>李大有</td><td>31</td></tr>
			<tr><td>9527</td><td>李二毛</td><td>22</td></tr>
			<tr><td>9527</td><td>王有财</td><td>25</td></tr>
		</table>
	</body>
</html>

jQuery事件

常见的DOM事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblcick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	ubload
hover

jQuery事件方法语法

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。

页面中指定一个点击事件：

$("p") click();

下一步是定义什么时间触发事件。可以通过一个事件函数实现：

$("p")click(function(){//动作触发后执行的代码!!});

常用的jQuery事件方法

1.$(document)ready（function）文档完全加载后执行函数4

2.click（function)方法是当按钮点击事件触发时会调用一个函数

3.dblclick(function)双击元素时，会发生dblclick事件。

4.mouseenter(function)当鼠标指针穿过元素时，会发生mouseenter事件。

5.mouseleave(function)当鼠标指针离开元素时，会发生mouseleave事件。

6.hover(function)方法用于模拟光标悬停事件

7.focus(function)当元素获得焦点时，发生focus事件

8.blur(function)当元素失去焦点时，发生blur事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="\网星学习\JQ\jquery-3.5.1.js"></script>
		<script>
			$(document).ready(function(){
				alert("$(document).ready(fuction)文档完全加载完成后执行函数");
			    });
			    $(document).ready(function(){
				$("#but1").click(function(){
					alert("click(function) 方法是当按钮点击事件被触发时会调用一个函数");	
				});
			    $("#but2").dblclick(function(){
				    alert("dblick(functon)双击元素时，会发生dblclick事件。");
			    });	
			    $("#h2").mouseenter(function(){
				   alert("4.mouseleave(fuction)当鼠标指针穿过元素时，会发生mouseenter事件");
			    });
			    $("#h2").mouseleave(function(){
				   alert("5.mouseleave(function)当鼠标指针离开元素时，会发生mouseleave事件。");
			    });
			    $("#a1").hover(function(){
				   alert("6.hover(fuction)用于模拟光标悬停事件。");
			    });
			    $("#text1").focus(function(){
			       $(this).val("background-color");
			    });
			    $("#text1").blur(function(){
				   alert($(this).val());
			    });
			});
		</script>
	</head>
	<body>
		<input id="but1" type="button" value="测试单次点击事件"><br>
		<input id="but2" type="button" value="测试双次点击事件"><br>
		<h2 id="h2">测试鼠标进入和移出事件</h2>
		<a id="al" href="#">测试光标悬停事件</a><br><br><br>
		<input id="text1" type="text" value="测试获得焦点和失去焦点"><br>
	</body>
</html>

270年前

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery1

https://www.runoob.com/jquery/jquery-tutorial.html1.jQuery是一个JavaScript库。【js】2.jQuery极大地简化了JavaScript编程。3.jQuery很容易学习。JQuery简介jQuery库可以通过一行简单的标记被添加到网页中。<script src="js/query.js"></script>您需要具备的基础知识在开始学习jQuery之前，应该对以下知识有基本的了解：.
复制链接

扫一扫