JQuery
jQuery 是一个 JavaScript 的程序库之一,它是JavaScript对象和实用函数的封装。
jQuery 极大地简化了 JavaScript 编程。
什么是 jQuery ?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
为什么使用 jQuery ?
JavaScript本身存在两个弊端,一个是复杂的文档对象模型,另一个是不一致的浏览器实现,基于以上背景,为了简化JavaScript开发,解决浏览器之间的兼容问题,一些JavaScript程序库随之诞生,
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展
jQuery 安装
网页中添加 jQuery
可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:
从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
下载 jQuery
有两个版本的 jQuery 可供下载:
Production version - 用于实际的网站中,已被精简和压缩。
Development version - 用于测试和开发(未压缩,是可读的代码)
以上两个版本都可以从 jquery.com 中下载。
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
替代方案
如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
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” 的元素
文档就绪事件
$(document).ready(function(){
// 开始写 jQuery 代码...
});
我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败。
下面是两个具体的例子:
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
简洁写法(与以上写法效果相同):
$(function(){
// 开始写 jQuery 代码...
});