jQuery

最新推荐文章于 2021-07-19 17:21:19 发布

VIP文章通天云计算

最新推荐文章于 2021-07-19 17:21:19 发布

阅读量346

点赞数

分类专栏：大数据

本文链接：https://blog.csdn.net/WYJ____/article/details/103383818

版权

1.jQuery简介

2.jQuery的引入和使用

3.jQuery基本选择器

4.jQuery的基本使用

5.jQuery选择器

6.jQuery操作css属性

7.jQuery遍历数组的方式

8.属性操作

9.获取元素内容操作元素

10.案例

11.jQuery事件

12.扩展内容（插件）

一、jQuery简介

1.jQuery概念

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.jQuery的优势

1、兼容CSS3，CSS3风格的选择器，兼容各种浏览器。

2、使用非常广泛，说明文档详细，社区活跃。

3、丰富的插件。（表单校验插件、EasyUI）

3.jQuery版本说明

压缩版和非压缩版功能代码一模一样，区别仅为压缩版将所有的回车换行全部删掉，并且删除了绝大部分的注释，使得代码没有格式地堆在一起。这样虽然牺牲了代码的可读性，但可以大大减少回车换行和注释占用的空间，功能和原来也是相同的。

非压缩版适合于学习jQuery查看源码。

压缩版适合于正式开发。

jQuery2.0及后续版本不再支持IE6/7/8浏览器

二、jQuery的引入和使用

1.jQuery的引入

jQuery版本有很多，不同版本的jQuery之间方法和功能有一定改变。

（1）导入jQuery文件到项目中

链接：https://pan.baidu.com/s/11oLj9_SC4jnoWJ4SH_0Jcg
提取码：od0y

这里可以修改jQuery文件的文件名。重命名为 jquery.js

（2）在使用jQuery的html页面引入

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

2.jQuery入门案例

基本语法：

jQuery(选择器);
$(选择器); 常用

选择器的作用：选择html的某个或某些标签

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			onload = function(){
				
				//js方式获取对象，访问属性或方法
				var st = document.getElementById("dd1");
				alert(st.innerHTML);
				
				//jQuery方式获取对象，方法属性或方法
				//var st1 = jQuery("#dd1");
				var st1 = $("#dd1");
				alert(st1.html());
				
			}
			
		</script>
		
</head>
	<body>
		<div id="dd1">小兔子乖乖❤</div>
	</body>
</html>

以上代码，#dd1为jQuery的选择器中的一种（id选择器），简化了js的代码。

三、jQuery基本选择器

jQuery和CSS一样，也有选择器概念，即选择性获取某些标签对象。

jQuery有大量复杂选择器，这里先介绍三个最常用的基本选择器。

ID选择器    $('#标签id属性值')  
元素选择器   $('标签名')
类选择器   $('.标签class属性值')

（1）id选择器

作用：根据标签的id属性值，选择html页面的某个标签，获取jQuery对象。

语法：$('#标签id属性值')

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			onload = function(){
				var r01=$("#r01");
				alert(r01.val());
			}
			
		</script>
		
</head>
	<body>
		<input type="radio" name="hobby" value="敲代码" id="r01"/>
	</body>
</html>

（2）标签选择器

作用：根据标签名，选择html页面上的某个或某些对应的标签。获取到的是jQuery对象，也可能是数组。

语法：$('标签id属性值')

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			onload = function(){
				var ls = $("li");
				for(var i=0;i<ls.length;i++){//jQuery对象的数组使用for循环时，又变为js对象
					alert(ls[i].innerHTML);		
				}
			}
			
		</script>
		
</head>
	<body>
		<ul>
			<li>关羽</li>
			<li>张飞</li>
			<li>赵云</li>
			<li>韩信</li>
		</ul>
	</body>
</html>

（3）class选择器

作用：根据标签的class属性的值，选择html页面上的某个或某些对应的标签。获取到的是jQuery对象，也可能是数组。

语法：$('#标签class属性值')

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			onload = function(){
				var dd = $(".aaa");
				for(var i=0;i<dd.length;i++){
					alert(dd[i].value);
				}
			}
			
		</script>
		
</head>
	<body>
		<input type="checkbox" name="分路" value="上单" />
		<input type="checkbox" name="分路" value="中单" class="aaa" />
		<input type="checkbox" name="分路" value="下单" class="aaa" />
	</body>
</html>

四、jQuery的基本使用

1.jQuery对象和JS对象互相转换

jQuery对象只能调用jQuery中的属性和方法，不能调用js对象中的属性和方法

js对象只能调用js中的属性和方法，不能调用jQuery对象中的属性和方法

但是：实际开发中，经常会涉及到这两种对象的混用，需要学习jQuery对象和JS对象的互转。

（1）jQuery对象转成js对象

开发中，为了使用JS方法和属性，我们也会选择将jQuery对象转回JS对象。

语法格式：var js对象 = jQuery对象[0]; 或 var js对象 = jQuery对象.get(0);

Jq对象，本质：是一个js数组

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			onload = function(){
				var js1 = $("#dd")[0];
				var js2 = $("#dd").get(0);
				alert(js1.innerHTML);
				alert(js2.innerHTML);
			}
			
		</script>
		
</head>
	<body>
		<div id="dd">别找了找不到了</div>
	</body>
</html>

（2）js对象转成jQuery对象

开发中，我们为了方便开发，会将JS对象转为jQuery对象使用；

格式：var jQuery对象 = $(js对象)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			onload = function(){
				var js = document.getElementById("dd");
				var jq = $(js);
				alert(jq.html());
			}
			
		</script>
		
</head>
	<body>
		<div id="dd">别找了找不到了</div>
	</body>
</html>

2.jQuery页面加载完成时执行代码

页面加载完成时执行某个函数

（1）js两种方式

1、<body onload="" >
2、window.onload = function(){
}

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			window.onload = function(){
				var js = document.getElementById("dd");
				alert(js.innerHTML);
			}
			
		</script>
		
</head>
	<body>
		<div id="dd">I loved you with the fire red</div>
	</body>
</html>

（2）jQuery三种方式

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

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			$(document).ready(function(){
				var jq1 = $("#dd");
				alert("第一种方式："+jq1.html());
			})
			
			$().ready(function(){
				var jq2 = $("#dd");
				alert("第二种方式："+jq2.html());
			})
			
			$(function(){
				var jq3 = $("dd");
				alert("第三种方式："+jq3.html());
			})
			
		</script>
		
</head>
	<body>
		<div id="dd">I loved you with the fire red</div>
	</body>
</html>

注意： jQuery的方式会先于 window.onload执行。因为jQuery的方式是document加载完成后执行。

3.jQuery的动画效果

以下所有动画效果方法中都有两个参数：

speed 动画效果的持续时间，单位：毫秒

一般快速效果设置500，正常效果设置1000即可（也可使用字符串slow）

fn 动画效果成功展示完成后，回来调用的函数。（回调函数）

（1） 基本效果（放大缩小滑动）

属性名	属性说明
show(speed,fn);	显示元素
hide(speed,fn);	隐藏元素
toggle(speed,fn);	1、使得显示元素隐藏 2、使得隐藏元素显示

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<script src="js/jquery.js" ></script>
		<script>
			
			function myhide(){
				//$("img").hide();
				//$("img").hid

最低0.47元/天解锁文章

通天云计算

关注

0
点赞
踩
2

收藏

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

1.jQuery简介2.jQuery的引入和使用3.jQuery基本选择器4.jQuery的基本使用5.jQuery选择器6.jQuery操作css属性7.jQuery遍历数组的方式8.属性操作9.获取元素内容操作元素10.案例11.jQuery事件12.扩展内容（插件）一、jQuery简介1.jQuery概念 jQuery...
复制链接

扫一扫