jQuery基础学习(一)—jQuery初识
一、jQuery概述
1.jQuery的优点
jQuery是一个优秀的JavaScript库，极大地简化了遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。它有以下几点优势。
(1)轻量级。
(2)强大的选择器。
(3)出色的DOM封装。
(4)可靠的事件处理机制。
(5)完善的Ajax。
2.jQuery类库说明
jQuery的库分为两种，分别是生产版和开发版。区别如下:
| 名称 | 大小 | 说明 |
| jquery.js(开发版) | 约229KB | 完整无压缩，主要用于测试、学习、开发。 |
| jquery.min.js(生产版) | 约31KB | 经过工具压缩主要用于产品和项目。 |
3.第一个HelloWorld
使用jQuery库之前先引入这个库。
<!-- 导入jQuery库 -->
<script type="text/javascript" src="jquery-2.2.3.js"></script>
$(function(){
$("#button").click(function(){
alert("Hello,World");
});
});
这段代码类似于JavaScript中的window.onload方法，但是还有点区别。
区别1: 执行时机不同。
window.onload必须等待网页中所有内容加载完毕后(包括图片)才能执行。
$(function(){})网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的元素并没有加载完。
区别2: 编写个数。
window.onload不能编写多个。
$(function(){})能同时编写多个。
二、jQuery和DOM对象
1.jQuery对象
jQuery对象就是通过"$()"函数包装DOM对象而产生的对象。
jQuery对象无法使用DOM对象中的任何方法，同时DOM对象也不能使用jQuery对象的任何方法。
格式: var variable = DOM对象;
var $variable = $(variable); Jquery对象
2.jQuery对象转换为DOM对象
jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法。
jQuery 提供了两种方法是将一个jQuery 对象转换成DOM对象，即[index]和get(index)。
(1)jQuery 对象是类似数组的对象，可以通过[index]的方法得到相应的DOM对象。
(2)另一种方法是jQuery 本身提供的，通过get(index)方法得到相应的DOM对象。
//1.获取一个jQuery对象
var $btn = $("#btn_test");
//2.jQuery是一个数组
alert($btn.length);//1
//3.jQuery--->DOM
var btn = $btn[0]; //第一种转换方式
var btn2 = $btn.get(0); //第二种转换方式
alert(btn.firstChild.nodeValue); //123
alert(btn2.firstChild.nodeValue); //123
3.DOM对象转换为jQuery对象
对于一个DOM对象，只需要用$()函数把DOM对象包装起来，就可以获得一个jQuery对象。
格式: $(DOM对象)
//DOM--->jQuery
var btn_test2 = document.getElementById("btn_test2");
var $btn_test2 = $(btn_test2);
alert($btn_test2.length); // 1
平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。
