Jquery 学习一

一、jQuery概述

1、Javascript代码库

在早期的项目开发中都是使用Javascript原生代码，一行一行编写。但是Javascript自身存在3个弊端：

① 复杂的DOM操作

② 不一致的浏览器体现

③ 便捷开发、调试工具的缺乏

所以在很长一段时间内，Javascript正在慢慢脱离开发者的视线。直到2005年，Ajax的出现又让Javascript重新回归到开发者的视线中。

为了简化Javascript的操作，兴起Javascript代码库，只需要通过简单的几行代码就可以实现复杂的功能。

2、比较流行的Javascript代码库

Prototype代码库，最早成型的Javascript代码库，实现对Javascript内置对象的封装以及扩展，很多早期的项目都是采用Prototype作为Javascript核心框架，但是由于成型比较早，其整体结构比较松散。

 

Dojo代码库，一款非常流行的Javascript代码库，其实现很多其他代码库不具有的功能，离线存储、SVG/VML图标集、Comet支持等等。但是其学习曲线陡，文档不齐全，更严重的是，其核心API不稳定，代码升级后可能导致某些功能失效。

 

YUI代码库（yahoo user interface），是一款非常不错并值得研究与学习的Javascript代码库，封装一套Javascript代码库与几个css文件（非常值得研究）。

 

ExtJS代码库，基于YUI框架实现的一款富媒体框架。ExtJS侧重于前端界面开发，其可以整合包括jQuery在内的其他代码库实现业务逻辑。但是由于其侧重于前端开发，所以其结构比较臃肿，而且其并不是免费的，如果用于商业用途必须进行授权。

 

Mootools代码库，一款简洁、轻量级的Javascript代码库，采用模块化以及面向对象的思想进行代码，核心代码非常精简，不足8k，即使完整版也不超过160k，是一款非常不错的Javascript代码库。

 

jQuery代码库，其拥有强大的选择器、快捷的链式操作、其还提供了对Ajax的支持等相关功能，是目前业界使用最多的Javascript代码库。

3、什么是jQuery代码库

jQuery是有John Resig在2006年开发的一款基于Javascript的代码库，其是免费且开源的。

4、如何使用jQuery代码库

下载jQuery源代码（http://www.jquery.com），下载后如下图所示：

jquery-1.8.3.js ：未压缩版，代码没有压缩，具有可读性。

jquery-1.8.3.min.js ：压缩版，去除了不必要的空格和回车，代码非常精简。

特别注意：在下载源代码时，尽量使用1.8.3以下版本，因为在1.9以上版本后，其官方明确声明，不在支持IE浏览器。

5、jQuery快速入门

例：实现一个元素的隐藏

① 引入jquery源代码到项目目录中并更名为jquery.js

② 创建html页面并编写源代码，如下图所示：

二、jQuery中的九大选择器

1、基本选择器

• #id ：根据元素的id属性获取元素
• .class ：根据元素的class属性获取元素
• element ：根据元素的名称获取元素
• selector1,selector2 ：群组选择器，同时选择多个元素，选择器之间使用逗号隔开

示例代码：

2、层级选择器

• ancetor descendant ：选择祖先元素下的所有后代元素 有同一个祖先
• parent > child ：选择父元素下的所有子元素
• prev + next ：选择上一个元素下紧邻的下一个元素
• prev~siblings ：选择上一个元素下的所有同级兄弟元素

示例代码：

3、简单选择器

• :first ：选择第一个元素
• :last ：选择最后一个元素
• :even ：选择所有偶数元素
• :odd ：选择所有奇数元素
• :eq(index) ：选择索引等于index的元素，index默认从0开始
• :gt(index) ：选择索引大于index的元素
• :lt(index) ：选择索引小于index的元素
• :not(selector) ：选择除指定选择器以外的其他元素

示例代码：

4、内容选择器

• :contains(text) ：匹配元素内容包含text文本的元素
• :empty ：匹配元素内容为空的元素
• :has(selector) ：匹配内容具有指定选择器的元素
• :parent ：匹配具有子元素的元素（匹配内容不为空的元素）

示例代码：

5、可见性选择器

• :hidden ：匹配所有隐藏元素，css属性(display:none)，隐藏表单
• :visible ：匹配所有可见元素

示例代码：

6、属性选择器

• [attribute] ：根据元素的属性获取元素
• [attribute=value] ：获取属性值等于value的元素
• [attribute!=value] ：获取属性值不等于value的元素
• [attribute^=value] ：获取属性值以value开始的元素
• [attribute$=value] ：获取属性值以value结尾的元素
• [attribute*=value] ：获取属性值包含value的元素
• [selector1][selector2][selectorN] ：如果一个元素同时具有多个属性，则匹配

示例代码：

7、子元素选择器

• :nth-child(index/even/odd) ：根据子元素的索引来获取元素，默认索引从1开始
• :first-child ：匹配第一个子元素
• :last-child ：匹配最后一个子元素
• :only-child ：如果一个元素是唯一的子元素，则匹配

示例代码：

8、表单元素选择器

• :input ：获取页面中的所有表单元素，包括textarea与select
• :text     ：匹配所有的文本框
• :password ：匹配所有的密码框
• :radio    ：匹配所有单选按钮
• :checkbox ：匹配所有的复选框
• :submit ：匹配所有submit按钮
• :reset ：匹配所有reset按钮
• :image ：匹配所有的图像域 <input type='image' />
• :button ：匹配所有的button按钮 <input type='button' />
• :file ：匹配所有的文件域
• :hidden ：匹配所有的隐藏表单

 

问题：说出$('input')与$(':input')的区别？

答：$(':input')匹配的是所有表单元素，也包括textarea与select标签，但是$('input')只能匹配以input打头的input标签（一共有10种）。

示例代码：

9、表单对象属性选择器

• :enabled ：匹配所有可用表单元素
• :disabled ：匹配所有不可用表单元素，设置disabled属性为true的表单元素
• :checked ：匹配所有选中的元素
• :selected ：匹配所有选中的下拉元素

问题：在表单元素中，可以定义disabled属性与readonly属性来禁止表单元素的编辑功能，两者之间有何不同呢？

答：readonly定义的文本框是可以在服务器端页面进行正常接收的，但是disabled属性设置的表单元素在服务器端是无法接收的！

三、DOM对象与jQuery对象

1、什么是DOM对象

在原生Javascript代码中，通过document方式获取的对象都是DOM对象。

使用调试工具，调试DOM对象，如下图所示：

2、什么是jQuery对象

在jQuery源代码中，通过$函数获取的对象都是jQuery对象。

使用调试工具，调试jQuery对象，如下图所示：

IE调试工具说明：

逐语句：代码一行一行向下执行，遇到函数，则直接跳入函数内部一步一步执行

逐过程：代码一行一行向下执行，遇到函数，则直接返回执行结果而不跳入函数内部执行

 

通过以上测试可知，虽然DOM对象与jQuery对象都是对象，但是通过对其结构的分析得出一个结论：DOM对象不等于jQuery对象，两者是完全不同的！

3、DOM对象与jQuery对象关系

继续调试jQuery对象，如下图所示：

我们发现jQuery对象是一个DOM对象的集合，其结构类似于Javascript中的数组。所以也可以说jQuery对象是一个类数组对象，其每一个数组元素都是一个DOM对象。

4、证明：jQuery对象是DOM对象的集合

调试结果如下图所示：

jQuery对象获取元素的原理图：

5、DOM对象与jQuery对象的互相转换

1）jQuery对象转化生成DOM对象

第一种转换方式：

DOM对象 = jQuery对象[索引];

 

第二种转换方式：

DOM对象 = jQuery对象.get(索引);

2）DOM对象转化生成jQuery对象

jQuery对象 = $(DOM对象);

四、jQuery对象的属性和方法

1、基本属性（attribute）

• attr(name) ：获取元素的name属性值
• attr(key,value) ：设置元素的属性值（key代表属性，value代表属性值）
• attr(properties) ：一次为元素设置多个属性，要求参数是一个json格式的数据
• attr(key,fn) ：通过函数的返回值设置元素的属性
• removeAttr(name) ：移除元素的name属性

例如：<img src='属性值' />

示例代码：

2、class属性

• addClass(class) ：为元素添加class样式
• removeClass(class) ：移除元素的class样式
• toggleClass(class) ：切换元素的class样式
• hasClass(class) ：判断元素是否具有class样式，返回布尔值

例如：<div class='cls1 cls2 cls3'></div>

示例代码：

3、css属性（针对元素的style属性）

• css(name) ：获取元素的css属性
• css(name,value) ：设置元素的css属性
• css(properties) ：一次为元素设置多个css属性

例如：<div style='width:400px; height:200px; background-color:#f00;'></div>

示例代码：

4、offset属性

• offset() ：获取元素的位置信息，返回一个json格式数据，包含left和top两个属性
• offset(coordinates) ：设置元素的位置，参数必须是一个json数据且必须包含left和top两个属性

示例代码：

5、尺寸操作

• width() ：获取元素的宽度
• width(value) ：设置元素的宽度
• height() ：获取元素的高度
• height(value) ：设置元素的高度

示例代码：

6、文本/值操作

• html()
• html(val)

html方法相当于原生Javascript代码中的innerHTML属性，用于获取双标签元素的内容

• val()
• val(val)

val方法相当于原生Javascript代码中的value属性，用于获取表单元素的内容

• text()
• text(val)

text方法相当于原生Javascript代码中的innerText属性，功能与innerHTML类似，但是略有不同

示例代码：

通过以上代码测试可知：html方法与text方法，其在获取与设置文本标签时，效果时一致的，但是其两者针对html标签的处理结果又是不同的：

① html方法可以获取到html子标签

② text方法只能用于获取标签中的文本信息（无论层级）

③ html在设置元素内容时，如果包含html标签，可以正常解析，而text在设置时则直接当做普通文本直接输出

五、jQuery事件编程

• 页面载入
• 基本事件
• 事件切换
• 事件处理

1、页面载入

在原生Javascript代码中，我们可以通过window.onload方式实现页面载入事件。在jQuery中，其官方也提供了一种页面载入方式，定义方法如下：

$(document).ready(事件处理程序);

示例代码：

以上方式中，由于document是文档对象，所以在编写代码时可以省略不写：

其除了以上两种方式，官方还提供了一种简写方式，如下图所示：

2、window.onload与ready方法区别

在Javascript中，window.onload方法与ready方法其都是实现页面载入事件，在效果上两者是一致的，但是在执行流程上两者还是有区别的：

window.onload必须等待页面中的DOM结构以及外部资源（图片、文件）等全部载入完毕后，才开始执行。

而ready方法，只要等待页面中的DOM结构加载完毕后就会立即执行，可能外部资源还没有加载完毕，所以ready方法要明显略快于window.onload方式。

 

证明以上结论：