jQuery的基础
jQuery框架的概念:jQuery框架是在JavaScript的基础上,将常用操作进行封装,使页面特效实现更加容易、快速。
一、jQuery的概念
jQuery是一个JavaScript函数库。另外,jQuery也是一个轻量级“写得少,做得多”的JavaScript库。其实,这就跟Java中的那个API很相似。
jQuery库包含以下功能:
- HTML元素选取;
- HTML元素操作;
- CSS操作;
- HTML事件函数;
- JavaScript特效和动画;
- HTML DOM遍历和修改;
- AJAX;
- Utilities;
- jQuery还提供了大量的插件。
二、jQuery优势
jQuery强调的理念是“写得少,做得多”。jQuery独特的选择器、链式操作、事件处理机制和封装完善的AJAX都是其他JavaScript库做不到的。概括起来,jQuery具有以下的优势:
- 轻量级:jQuery非常轻巧,采用UglifyJS压缩后,大小保持在30KB左右;
- 强大的选择器:jQuery允许开发者使用CSS1至CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器;
- 出色的DOM操作的封装:jQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序时能够得心应手。jQuery可以轻松地完成各种原本非常复杂的操作,使其更容易编写程序;
- 可靠的事件处理机制:jQuery的事件处理机制吸引了JavaScript专家编写的事件处理函数的精华,使jQuery在处理事件绑定时相关可靠;
- 完善的AJAX:jQuery将所有的AJAX操作封装到函数$.ajax( )中,使开发者处理AJAX时能够专心处理业务逻辑而无须关心浏览器的兼容性及XMLHttpRequest对象的创建和使用问题;
- 丰富的插件支持:jQuery的易扩展性,吸引来自全球的开发者编写jQuery的扩展插件;
- 完善的文档:无论是英文还是中文,jQuery的文档都非常丰富;
- 开源:jQuery是一个开源的产品,也就是说,它是任何人都可以使用的。
补充:配置jQuery
当了解完jQuery后,我们要使用jQuery的第一步就是学会如何配置jQuery(重点)。
- 首先要到官网上下载jQuery库文件(注:有两个版本——未压缩版和压缩版);
- 然后jQuery库引入到所要编写jQuery项目的文件中,形成jQuery.js文件;
- 最后要在html中引入jQuery的格式为:;
以下是验证jQuery是否引入成功的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>验证jQuery的测试(是否引入成功)</title>
<script src = "../jQuery.js"></script>
<style>
div{
width: 200px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<!--通过测试可以得出:
入口函数的用法:
jQuery的入口函数是在HTML所有标签(DOM)都加载之后再执行的
-->
<script>
$(document).ready(function () {
$('div').hide();
}) //hide方法的作用是:隐藏
$(document).ready(function () { //等待DOM元素加载完毕
alert("成功引入jQuery"); //弹框
});
//注释:这段代码的作用类似于传统JavaScript中的windows.onload方法,这时为了防止文档在完全加载(就绪)之前运行jQuery代码,
//即在DOM加载完成之后才可以对DOM进行操作。如果在文档之前没有完全加载之前就运行函数,操作可能会失败。
</script>
<div></div>
</body>
</html>
解释:在没有使用jQuery时,页面显示的结果为一个红色的边框。当使用jQuery时,调用了hide方法将div给隐藏起来了,而调用alert方法将显示弹框(弹框内容为成功引入jQuery)。
三、jQuery语法(重点)
jQuery语法通过选取HTML元素,并对选取的元素执行某些操作。
jQuery的基础语法如下:
$(selector).action( )
- 美元符号定义jQuery;
- 选择符(selector)“查询”和“查找”HTML元素;
- jQuery action( )执行对元素的操作。
实例如下:
- $(this).hide( ):隐藏当前元素;
- $(“p”).hide( ):隐藏所有
元素;
- $(“p.test”).hide( ):隐藏所有class = "test"的
元素;
- $("#test").hide( ):隐藏所有id = "test"的元素。
jQuery的入口函数与JavaScript的入口函数:(重点)
jQuery入口函数如下:
$(document).ready(function (){
//执行代码
})
或者
$(function(){
//执行代码
})
JavaScript入口函数如下:
window.onload = function(){
//执行代码
}
jQuery入口函数与JavaScript入口函数的全部如下:
jQuery的入口函数是在HTML所有标签(DOM)都加载之后再执行;
JavaScript的window.onload事件是等所有内容(包括外部图片之类的文件)加载完之后才会执行的;
jQuery入口函数可以书写多个,而对于JavaScript入口函数不能写多个(因为,当JavaScript每写一个入口函数就会把前一个入口函数覆盖掉);
执行时机不同:jQuery入口函数要快于window.onload;
jQuery入口函数要等待页面上DOM树加载完毕后执行。
四、总结
对于jQuery的基础学习,我们需要掌握以下的内容:
- 什么是jQuery?——jQuery是一个JavaScript函数库,它是在JavaScript的基础上,将常用操作进行封装,使页面特性实现更加简便。快速;
- jQuery的优势——对于这一知识点,我们只需要了解即可;
- jQuery的语法是一个非常重要的知识点——这个是必须要掌握的(如果没有掌握,会对后期的学习产生困难)(重点);
- 最后就是jQuery入口函数与JavaScript入口函数的区别和其写法**(重点)**。