jQuery新手入门知识点

一、什么是jQuery？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

二、JavaScript库的概念

1. JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。
2. 把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）
3. 常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个
4. 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的三个步骤：

1. 引入jQuery文件
2. 入口函数（定义页面加载事件）
3. 功能实现

关于jQuery的入口函数：

// 第一种写法
$(document).ready(function() {
	
});

// 第二种写法
$().ready(function() {
	
});

// 第三种写法
$(function() {
	
});

jQuery入口函数与window.onload的对比

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。

jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。