jQuery学习--Chapter01小结(jQuery介绍)

jQuery学习--Chapter01小结(jQuery介绍)

1.jQuery简介

Jquery是继 prototype 之后又一个优秀的 Javascript框架 。它是轻量级的js库 ，它兼容CSS3，还兼容各种 浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理 HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的 插件 可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

注：当$()的参数是DOM对象时，该对象不需要使用双引号包裹起来，如果获取的是document对象，则写作$(document).

2. jQuery用途

(1). 访问和操作DOM元素

(2). 控制页面样式

(3). 对页面事件的处理

(4). 方便地使用jQuery插件

(5). 与Ajax技术的完美结合

3. jQuery的优势

jQuery的主旨是write less, do more (以更少的代码，实现更多的功能)。jQuery独特的选择器、链式操作、事件处理机制和封装，以及完善的Ajax都是其他JavaScript库望尘莫及的。总体来说jQuery有以下优势。

(1). 轻量级

(2). 强大的选择器

(3). 出色的DOM封装

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

(5). 出色的浏览器兼容性

(6). 隐式迭代

(7). 丰富的插件支持

4.jQuery库的类型分两种，分别是开发版（未压缩版）和发布版（压缩版）：

开发版：jquery-版本号.js

发布版：jquery-版本号.min.js

5.jQuer语法结构

$(selector).action();

(1). 工厂函数  $()

在jQuery中 $()=jQuery()

注：当 $() 的参数是 DOM 对象时，该对象不需要使用双引号包裹起来，如果获取的事 document 对象，则写作 $(document)。

(2). 选择器 selector

$("#username")      //获取DOM中id为username的元素

$("div")            //获取DOM中所有div元素

$(".textbox")       //获取DOM中class为textbox的元素

(3). 方法 action()

鼠标单击事件 click()

添加类样式 addClass()

6.DOM模型

(1). DOM—Document Object Model,它是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。

(2). DOM是以层次结构组织的节点或信息片断的集合。文档对象模型（Document Object Model）是给HTML与XML文件使用的一组API。DOM的本质是建立网页与脚本语言或程序语言沟通的桥梁。

(3).DOM里的节点通常分为3种类型：即元素节点、文本节点和属性节点。

7. jQuery对象与DOM对象的相互转化

(1). DOM对象：在Javascript中使用getElementById()或者getElementsByTagName()来获取的元素节点就是DOM对象。var objName=DOM对象;

(2). jQuery对象：jQuery对象就是通过jQuery包装DOM对象后产生的对象。var $objName=jQuery 对象;

(3). jQuery对象转DOM对象

方式一：

var $objName=$("#odj");     //jQuery对象
var  objName=$objName[0];     //DOM对象

方式二：

var $objName=$("#obj");     //jQuery对象
var objNam=$objName.get(0)     //DOM对象

(4). DOM对象转jQuery对象

var objName=document.getElementById("obj");     //DOM对象
var $objName=$(objName);     //jQuery对象