一、什么是jQuery?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
二、JavaScript库的概念
- JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。
- 把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。(animate.js、common.js)
- 常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个
- jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery的优点好处
jQuery设计的宗旨是’Write Less,Do More’,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的操作,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。
体验jQuery
<input type="button" value="显示" id="btn1">
<input type="button" value="结束" id="btn2">
<div>请欣赏动画</div>
<div>千呼万唤始出来</div>
<img src="img/1.jpg" style="display:none">
<img src="img/2.jpg" style="display:none">
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function () {
$('#btn1').click(function () {
$('img').show(2000);
});
$('#btn2').click(function () {
$('div').text('下集再见');
$('img').hide(2000);
});
});
</script>
总结:
- 查找元素的方法多种多样,非常灵活
- 拥有隐式迭代(自动循环遍历)特性,因此不再需要手写for循环了。
- 完全没有兼容性问题。
- 实现动画非常简单,而且功能更加的强大。
- 代码简单、粗暴。
jQuery中页面加载事件
使用jQuery的三个步骤:
- 引入jQuery文件
- 入口函数(定义页面加载事件)
- 功能实现
关于jQuery的入口函数:
// 第一种写法
$(document).ready(function() {
});
// 第二种写法
$().ready(function() {
});
// 第三种写法
$(function() {
});
jQuery入口函数与window.onload的对比
JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。