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