jQuery基础学习(一)—jQuery初识

时间:2021-12-19 07:07:20

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