JavaWeb之jQuery

最新推荐文章于 2023-03-05 21:43:42 发布

陌凨107

最新推荐文章于 2023-03-05 21:43:42 发布

阅读量183

点赞数

本文链接：https://blog.csdn.net/west_xia_616/article/details/79672063

版权

一、jQuery简介

1、jQuery是一个优秀的JavaScript库，其理念是“写得少，做的多(write less,do more)”

2、在jQuery中，$就是jQuery的一个简写形式。例如：$("#foo")和jQuery("#foo")是等价的；$.ajax和jQuery.ajax是等价的。

实例：jQuery实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>我的第一个jQuery网页</title>
	<!-- 引入jQuery库 -->
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function(){
		alert("hello,欢迎学习jQuery!");
	});
	</script>
</head>
<body>
	
</body>
</html>

显示结果：

在写jQuery之前要先引入jQuery库，跟之前在js中一样，在<script type="text/javascript"></script>标签中引入格式是：src="jquery-3.1.1.js"，jQuery库可以在我的网盘中下载https://pan.baidu.com/s/1lX5R-cM_J3rDz2twn04eWQ

二、DOM对象与jQuery对象

DOM对象与jQuery对象：

通过JavaScript中的getElementsByName、getElementById等方法获取元素节点，得到的就是DOM对象。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。

DOM对象与jQuery对象的相互转换

一个约定：如果获取的对象是jQuery对象，那么在变量的前面加上$，例如：

var $variable = jQUery对象。

如果获取的是DOM对象，则定义如下：

var variable=DOM对象

1、DOM对象转换成jQuery对象

对于一个DOM对象，只要用$()把DOM对象包装起来，就可以获得一个jQuery对象，即：$(DOM对象)。

2、jQuery对象转换成DOM对象

方式一：

由于jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。eg:

var $a = $("#a");

var a = $a[0];

方式二：

通过jQuery对象本身提供的get(index)方法。eg:

var $a = $("#a");

var a = $a.get(0);

三、$(document).ready(function(){})

在jQuery中，通过使用：

$(document),ready(function(){

//DOM结构绘制完毕后执行此处代码

});

可以编写DOM结构绘制完毕后执行的代码

该结构也可以简写成：

$(function(){

//DOM结构绘制完毕后执行此处代码

});

四、jQuery选择器

1、id选择器 $(#ID名称)

eg: $("#myDiv").css("border","3px solid red");

此代码对应的JavaScript的：

document.getElementById("myDiv").style.border='3px solid red';

2、通用选择器 $("*")

3、类选择器 $(".class")

4、复选框选择器 $(":checkbox")

5、后代选择器 $("ancestor descesndant")

6、子选择器 $("parent > child")

7、多元素选择器 $("selector1,selector2,selectorN")

实例：实现了id选择器、通用选择气、类选择器这三个常用的选择器，通过点击"ID点击变色"实现ID选择器的功能，点击"class点击变色"实现类选择器的功能，之前设置的背景颜色是黄色，但经过通用选择器的设置之后颜色改变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery选择器</title>
	<style type="text/css">
		.divclass{
			width: 200px;
			height:200px;
			background-color: yellow;
		}
	</style>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function(){
		//通用选择器
		$("*").css("background-color","#FAEBD7");

		//ID选择器
		$("#btn").bind("click",function() {
			$("#mydiv").css("background-color","#aabbcc");
		});
		
		$("#btn2").click(function() {
			//类选择器
			$(".divclass").css("background-color","red");
		});
	});
	</script>
</head>
<body>
	<div id="mydiv" class="divclass"></div>
	<input type="button" value="ID点击变色" id="btn" /><br/><br/>
	<input type="button" value="class点击变色" id="btn2">
	<div class="divclass"></div>
</body>
</html>

显示结果：

未点击按钮之前的颜色：

点击"ID点击变色"之后，上面的方框变成了灰蓝色

点击"class点击变色"之后，之前的灰蓝色方框变成了红色，并且在下方出现了红色的方框

五、事件冒泡

1、当在有包含关系的DOM层级上绑定事件时，事件会按照DOM层级结构顺序从内到外依次触发，这就是“事件冒泡”

2、停止事件冒泡的方法

在处理事件函数中加上event事件对象，调用event事件对象的stopPropagation()方法。

补充：阻止默认行为也是用event事件对象：event.preventDefault();

实例1：实现两个div的嵌套，childDiv被parentDiv包含着，当点击childDiv时弹框提示一句话，然后会停止事件冒泡，不会有parentDiv和body被点击了的提示语，当点击parentDiv时弹框提示，并且会提示body被点击了，因为没有调用停止方法，点击body时弹框提示一句话

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件冒泡</title>
	<style type="text/css">
		#parentDiv{
			width: 400px;
			height:400px;
			background-color: #7fff00;
		}
		#childDiv{
			width: 200px;
			height:200px;
			background-color: yellow;
			margin: 50px auto;
		}
	</style>
	<script type="text/javascript" src="jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function () {
		$("#parentDiv").bind("click",function () {
			alert("parentDiv被点击了");
		});
		$("#childDiv").bind("click",function (event) {
			alert("childDiv被点击了");
			event.stopPropagation();//停止事件冒泡
		});
		$("body").bind("click",function () {
			alert("body被点击了");
		});
	});
	</script>
</head>
<body>
	<div id="parentDiv">
		这是parentDiv里的内容
		<div id="childDiv">
		这是childDiv里的内容
		</div>
		这是parentDiv里的内容
	</div>
</body>
</html>

显示结果：

首先先点击childDiv，会弹出提示框，点击确定后，程序运行结束；

然后点击parentDiv时会弹框提示，当我们点击确定时，会继续弹框提示：body被点击了，点击确定之后程序结束

最后点击空白处，也就是body会弹框提示，点击确定之后，程序结束

陌凨107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb之jQuery

一、jQuery简介1、jQuery是一个优秀的JavaScript库，其理念是“写得少，做的多(write less,do more)”2、在jQuery中，$就是jQuery的一个简写形式。例如：$("#foo")和jQuery("#foo")是等价的；$.ajax和jQuery.ajax是等价的。实例：jQuery实例&lt;!DOCTYPE html&gt;&lt;html lang="...
复制链接

扫一扫