jQuery基础学习，一—jQuery初识

1.jQuery的优点

jQuery是一个优秀的JavaScript库，极大地简化了遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。它有以下几点优势。

(1)轻量级。

(2)强大的选择器。

(3)出色的DOM封装。

(4)可靠的事件处理机制。

(5)完善的Ajax。

2.jQuery类库说明

jQuery的库分为两种，分别是生产版和开发版。区别如下:

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对象的制造工厂。