jQuery简介

最新推荐文章于 2023-05-31 08:33:36 发布

weixin_45846263

最新推荐文章于 2023-05-31 08:33:36 发布

阅读量246

点赞数

本文链接：https://blog.csdn.net/weixin_45846263/article/details/106051229

版权

jQuery简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情极大地简化了 JavaScript 编程。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

主要功能
1.像CSS那样访问和操作DOM
2.修改CSS控制页面外观
3.简化JavaScript代码操作
4.重新封装方法，让操作DOM属性更简单
5.各种动画效果使用方便
6.让Ajax技术更加完美
7.基于jQuery大量插件
8.插件扩展开发，可扩展性强
9.链式操作

缺点
不能向后兼容 每一个新版本不能兼容早期的版本。举例来说，有些新版本不再支持某些selector，新版jQuery却没有保留对它们的支持，而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。
插件兼容性 与上一点类似，当新版jQuery推出后，如果开发者想升级的话，要看插件作者是否支持。通常情况下，在最新版jQuery版本下，现有插件可能无法正常使用。开发者使用的插件越多，这种情况发生的几率也越高。
多个插件冲突 在同一页面上使用多个插件时，很容易碰到冲突现象，尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题，但却又确实是一个难于调试和解决的问题。

版本
2.0、3.0版不再支持IE 6/7/8，相较1.x版，代码小了12%，代码运行效率更高！

jQuery获取方式
官网下载链接
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
在这里插入图片描述
jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script>标签引用它：

<head>
<script src="js/jquery-3.5.1.js"></script>
</head>

将下载的文件放在网页的同一目录下，html页面引入，就可以使用jQuery。

jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

文档就绪事件
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。

$(document).ready(function(){
 	// 开始写 jQuery 代码...
});
//简写
$(function(){
	// 开始写 jQuery 代码...
});

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

简单的例子：
点击按钮，如果元素隐藏点击按钮显示如果元素显示点击按钮隐藏

<head>
<script src="js/jquery-3.5.1.js"></script>
</head>

<body>    
<button>隐藏/显示</button>    
<div></div>    
<script>        
	$(function(){          
		$("button").click(function(){            
			$("div").toggle();          
	 	});        
	});  
	</script>
</body>

在这里插入图片描述
参考

weixin_45846263

关注

0
点赞
踩
0

收藏

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

jQuery简介jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情极大地简化了 JavaScript 编程。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1
复制链接

扫一扫