JQuery,顾名思义,也就是JavaScript和查询(Query),是一个快速,小巧,轻量的,免费开源的JS函数库,能够极大的简化JS代码。并且它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历和操作,事件处理,动画和Ajax更加简单。通过多功能性和可扩展性的结合,jQuery改变了数百万人编写JavaScript的方式。
下载 jQuery
可以从 jquery.com 中下载。有两个版本的 jQuery 可供下载:
- Production version - 用于实际的网站(即上线项目)中,已被精简和压缩的版本:jquery-3.3.1.min.js 。
- Development version - 用于测试和开发(未压缩的版本:jquery-3.3.1.js ,是可读的代码)。
网页中jQuery库的引入与使用
如需使用 jQuery,您需要下载 jQuery 库,然后把它包含在希望使用的网页中。
jQuery 函数库本身是一个 JavaScript 文件。使用 HTML 的 <script> 标签引用它。
PS:请注意,<script> 标签应该位于页面的 <head> 部分。
1、本地引入 jQuery 文件
<head> <!-- 引入jQuery 的函数库 --> <script src="jquery-3.3.1.min.js"></script> </head>
2、从 CDN 公共库中载入 jQuery 文件
如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。
<head> <!-- Staticfile CDN --> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <!-- 百度 CDN --> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <!-- 又拍云 CDN --> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script> <!-- 新浪 CDN --> <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> <!-- Google CDN 不大推荐使用Google CDN来获取版本,因为Google产品在中国很不稳定。 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <!-- Microsoft CDN --> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script> </head>
jQuery 基础语法
jQuery 语法是通过选取(查询,query) HTML 元素,并对选取的元素执行某些“操作”(actions)。
基础语法:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery 语法实例。演示 jQuery hide() 函数
- $(this).hide() - 隐藏当前的 HTML 元素
- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
- $(".test").hide() - 隐藏所有 class="test" 的所有元素
文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
<script> <!-- 两种方式实现文档就绪后执行 jQuery 方法 --> //jQuery 入口函数 $(document).ready(function(){ // 开始写 jQuery 代码... }); //简洁写法(与以上写法效果相同) $(function(){ // 开始写 jQuery 代码... }); //JavaScript 入口函数: window.onload = function () { // 执行代码 } </script>
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数,操作可能失败。
本文地址:http://aszhi.com/jishu/jquery/60.html
关注我们:请关注一下微信号:扫描二维码
版权声明:本文为原创文章,版权归 小智 所有,欢迎分享本文,转载请保留出处!
关注我们:请关注一下微信号:扫描二维码
版权声明:本文为原创文章,版权归 小智 所有,欢迎分享本文,转载请保留出处!