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>