jQuery01笔记选择器Dom对象.docx

1、jQuery01笔记选择器Dom对象The Write Less,Do More目录The Write Less,Do More 1一、jQuery概述 21、Javascript代码库 22、比较流行的Javascript代码库 23、什么是jQuery代码库 24、如何使用jQuery代码库 35、jQuery快速入门 3二、jQuery中的九大选择器 31、基本选择器 32、层级选择器 43、简单选择器 54、内容选择器 65、可见性选择器 66、属性选择器 77、子元素选择器 88、表单元素选择器 89、表单对象属性选择器 9三、DOM对象与jQuery对象 101、什么是DOM对象

2、102、什么是jQuery对象 113、DOM对象与jQuery对象关系 124、证明：jQuery对象是DOM对象的集合 135、DOM对象与jQuery对象的互相转换 141）jQuery对象转化生成DOM对象 142）DOM对象转化生成jQuery对象 14四、jQuery对象的属性和方法 151、基本属性（attribute） 152、class属性 153、css属性（针对元素的style属性） 164、offset属性 175、尺寸操作 176、文本/值操作 18五、jQuery事件编程 191、页面载入 202、window.onload与ready方法区别 20一、jQuery

3、概述1、Javascript代码库在早期的项目开发中都是使用Javascript原生代码，一行一行编写。但是Javascript自身存在3个弊端： 复杂的DOM操作 不一致的浏览器体现 便捷开发、调试工具的缺乏所以在很长一段时间内，Javascript正在慢慢脱离开发者的视线。直到2005年，Ajax的出现又让Javascript重新回归到开发者的视线中。为了简化Javascript的操作，兴起Javascript代码库，只需要通过简单的几行代码就可以实现复杂的功能。2、比较流行的Javascript代码库Prototype代码库，最早成型的Javascript代码库，实现对Javascrip

4、t内置对象的封装以及扩展，很多早期的项目都是采用Prototype作为Javascript核心框架，但是由于成型比较早，其整体结构比较松散。Dojo代码库，一款非常流行的Javascript代码库，其实现很多其他代码库不具有的功能，离线存储、SVG/VML图标集、Comet支持等等。但是其学习曲线陡，文档不齐全，更严重的是，其核心API不稳定，代码升级后可能导致某些功能失效。YUI代码库（yahoo user interface），是一款非常不错并值得研究与学习的Javascript代码库，封装一套Javascript代码库与几个css文件（非常值得研究）。ExtJS代码库，基于YUI框架实现

5、的一款富媒体框架。ExtJS侧重于前端界面开发，其可以整合包括jQuery在内的其他代码库实现业务逻辑。但是由于其侧重于前端开发，所以其结构比较臃肿，而且其并不是免费的，如果用于商业用途必须进行授权。Mootools代码库，一款简洁、轻量级的Javascript代码库，采用模块化以及面向对象的思想进行代码，核心代码非常精简，不足8k，即使完整版也不超过160k，是一款非常不错的Javascript代码库。jQuery代码库，其拥有强大的选择器、快捷的链式操作、其还提供了对Ajax的支持等相关功能，是目前业界使用最多的Javascript代码库。3、什么是jQuery代码库jQuery是有Joh

6、n Resig在2006年开发的一款基于Javascript的代码库，其是免费且开源的。4、如何使用jQuery代码库下载jQuery源代码（），下载后如下图所示：jquery-1.8.3.js ：未压缩版，代码没有压缩，具有可读性。jquery-1.8.3.min.js ：压缩版，去除了不必要的空格和回车，代码非常精简。特别注意：在下载源代码时，尽量使用1.8.3以下版本，因为在1.9以上版本后，其官方明确声明，不在支持IE浏览器。5、jQuery快速入门例：实现一个元素的隐藏 引入jquery源代码到项目目录中并更名为jquery.js 创建html页面并编写源代码，如下图所示：二、jQu

7、ery中的九大选择器1、基本选择器 #id ：根据元素的id属性获取元素 .class ：根据元素的class属性获取元素 element ：根据元素的名称获取元素 selector1,selector2 ：群组选择器，同时选择多个元素，选择器之间使用逗号隔开示例代码：2、层级选择器 ancetor descendant ：选择祖先元素下的所有后代元素 parent child ：选择父元素下的所有子元素 prev + next ：选择上一个元素下紧邻的下一个元素 prevsiblings ：选择上一个元素下的所有同级兄弟元素示例代码：3、简单选择器 :first ：选择第一个元素 :last

8、 ：选择最后一个元素 :even ：选择所有偶数元素 :odd ：选择所有奇数元素 :eq(index) ：选择索引等于index的元素，index默认从0开始 :gt(index) ：选择索引大于index的元素 :lt(index) ：选择索引小于index的元素 :not(selector) ：选择除指定选择器以外的其他元素示例代码：4、内容选择器 :contains(text) ：匹配元素内容包含text文本的元素 :empty ：匹配元素内容为空的元素 :has(selector) ：匹配内容具有指定选择器的元素 :parent ：匹配具有子元素的元素（匹配内容不为空的元素）示例代码

9、：5、可见性选择器 :hidden ：匹配所有隐藏元素，css属性(display:none)，隐藏表单 :visible ：匹配所有可见元素示例代码：6、属性选择器 attribute ：根据元素的属性获取元素 attribute=value ：获取属性值等于value的元素 attribute!=value ：获取属性值不等于value的元素 attribute=value ：获取属性值以value开始的元素 attribute$=value ：获取属性值以value结尾的元素 attribute*=value ：获取属性值包含value的元素 selector1selector2sele

10、ctorN ：如果一个元素同时具有多个属性，则匹配示例代码：7、子元素选择器 :nth-child(index/even/odd) ：根据子元素的索引来获取元素，默认索引从1开始 :first-child ：匹配第一个子元素 :last-child ：匹配最后一个子元素 :only-child ：如果一个元素是唯一的子元素，则匹配示例代码：8、表单元素选择器 :input ：获取页面中的所有表单元素，包括textarea与select :text ：匹配所有的文本框 :password ：匹配所有的密码框 :radio ：匹配所有单选按钮 :checkbox ：匹配所有的复选框 :submit

11、 ：匹配所有submit按钮 :reset ：匹配所有reset按钮 :image ：匹配所有的图像域 :button ：匹配所有的button按钮 :file ：匹配所有的文件域 :hidden ：匹配所有的隐藏表单问题：说出$(input)与$(:input)的区别？答：$(:input)匹配的是所有表单元素，也包括textarea与select标签，但是$(input)只能匹配以input打头的input标签（一共有10种）。示例代码：9、表单对象属性选择器 :enabled ：匹配所有可用表单元素 :disabled ：匹配所有不可用表单元素，设置disabled属性为true的表单元

12、素 :checked ：匹配所有选中的元素 :selected ：匹配所有选中的下拉元素问题：在表单元素中，可以定义disabled属性与readonly属性来禁止表单元素的编辑功能，两者之间有何不同呢？答：readonly定义的文本框是可以在服务器端页面进行正常接收的，但是disabled属性设置的表单元素在服务器端是无法接收的！三、DOM对象与jQuery对象1、什么是DOM对象在原生Javascript代码中，通过document方式获取的对象都是DOM对象。使用调试工具，调试DOM对象，如下图所示：2、什么是jQuery对象在jQuery源代码中，通过$函数获取的对象都是jQuery对

13、象。使用调试工具，调试jQuery对象，如下图所示：IE调试工具说明：逐语句：代码一行一行向下执行，遇到函数，则直接跳入函数内部一步一步执行逐过程：代码一行一行向下执行，遇到函数，则直接返回执行结果而不跳入函数内部执行通过以上测试可知，虽然DOM对象与jQuery对象都是对象，但是通过对其结构的分析得出一个结论：DOM对象不等于jQuery对象，两者是完全不同的！3、DOM对象与jQuery对象关系继续调试jQuery对象，如下图所示：我们发现jQuery对象是一个DOM对象的集合，其结构类似于Javascript中的数组。所以也可以说jQuery对象是一个类数组对象，其每一个数组元素都是一个

14、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代表属性值） a

15、ttr(properties) ：一次为元素设置多个属性，要求参数是一个json格式的数据 attr(key,fn) ：通过函数的返回值设置元素的属性 removeAttr(name) ：移除元素的name属性例如：示例代码：2、class属性 addClass(class) ：为元素添加class样式 removeClass(class) ：移除元素的class样式 toggleClass(class) ：切换元素的class样式 hasClass(class) ：判断元素是否具有class样式，返回布尔值例如：示例代码：3、css属性（针对元素的style属性） css(name) ：获取

16、元素的css属性 css(name,value) ：设置元素的css属性 css(properties) ：一次为元素设置多个css属性例如：示例代码：4、offset属性 offset() ：获取元素的位置信息，返回一个json格式数据，包含left和top两个属性 offset(coordinates) ：设置元素的位置，参数必须是一个json数据且必须包含left和top两个属性示例代码：5、尺寸操作 width() ：获取元素的宽度 width(value) ：设置元素的宽度 height() ：获取元素的高度 height(value) ：设置元素的高度示例代码：6、文本/值操作 h

17、tml() html(val)html方法相当于原生Javascript代码中的innerHTML属性，用于获取双标签元素的内容 val() val(val)val方法相当于原生Javascript代码中的value属性，用于获取表单元素的内容 text() text(val)text方法相当于原生Javascript代码中的innerText属性，功能与innerHTML类似，但是略有不同示例代码：通过以上代码测试可知：html方法与text方法，其在获取与设置文本标签时，效果时一致的，但是其两者针对html标签的处理结果又是不同的： html方法可以获取到html子标签 text方法只能用

18、于获取标签中的文本信息（无论层级） 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方式。证明以上结论：