为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器。 当前流行的 JavaScript 库有: prototype、**、Ext JS、mootools、jQuery
jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库。 jQuery 理念: 写得少, 做得多. 优势如下:
轻量级强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 Ajax出色的浏览器兼容性链式操作方式……jQuery：helloworld
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script> <script type="text/javascript"> $(ddocument).ready(function(){ //等待dom元素加载完成，类似window.onload alert("hello world"); //弹出一个对话框 }); </script>jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法: (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象。
var $cr = $("#cr"); var cr = $cr[0];(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
var $cr = $("#cr"); var cr = $cr.get(0);对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象.
var cr = document.getElementById("cr"); var $cr = $(cr);转换后就可以使用 jQuery 中的方法了。
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。 jQuery 选择器的优点：
简洁的写法
完善的事件处理机制
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).
基本选择器示例
改变 id 为 one 的元素的背景色为 # bbffaa改变 class 为 mini 的所有元素的背景色为 # bbffaa改变元素名为<div> 的所有元素的背景色为 # bbffaa改变所有元素的背景色为 # bbffaa改变所有的<span>元素和 id 为 two 的元素的背景色为 # bbffaa如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取。
层次选择器示例 - 改变 <body> 内所有 <div> 的背景色为 # bbffaa - 改变<body>内子<div> 的背景色为 # bbffaa - 改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa - 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # bbffaa - 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 # bbffaa
过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
按照不同的过滤规则, 过滤选择器可以分为1.基本过滤, 2.内容过滤, 3.可见性过滤, 4.属性过滤, 5.子元素过滤, 6.表单对象属性过滤选择器.
基本过滤选择器示例
改变第一个 div 元素的背景色为 # bbffaa改变最后一个 div 元素的背景色为 # bbffaa改变class不为 one 的所有 div 元素的背景色为 # bbffaa改变索引值为偶数的 div 元素的背景色为 # bbffaa改变索引值为奇数的 div 元素的背景色为 # bbffaa改变索引值为大于 3 的 div 元素的背景色为 # bbffaa改变索引值为等于 3 的 div 元素的背景色为 # bbffaa改变索引值为小于 3 的 div 元素的背景色为 # bbffaa改变所有的标题元素的背景色为 # bbffaa改变当前正在执行动画的所有元素的背景色为 # bbffaa内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
内容过滤选择器示例
改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input type=“hidden”>)和 visible:hidden 之类的元素。
可见性过滤选择器示例
改变所有可见的div元素的背景色为 # bbffaa选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来，并设置其背景色为 # bbffaa选取所有的文本隐藏域, 并打印它们的值属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
属性过滤选择器示例
选取下列元素,改变其背景色为 # bbffaa含有属性title 的div元素.属性title值等于”test”的div元素.属性title值不等于”test”的div元素(没有属性title的也将被选中).属性title值 以”te”开始 的div元素.属性title值 以”est”结束 的div元素.属性title值 含有”es”的div元素.选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素.nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素子元素过滤选择器示例
选取下列元素,改变其背景色为 # bbffaa每个class为one的div父元素下的第2个子元素.每个class为one的div父元素下的第一个子元素每个class为one的div父元素下的最后一个子元素如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素此选择器主要对所选择的表单元素进行过滤
表单对象属性过滤选择器示例
利用 jQuery 对象的 val() 方法改变表单内可用 <input>元素的值利用 jQuery 对象的 val() 方法改变表单内不可用<input>元素的值利用 jQuery 对象的 length 属性获取多选框选中的个数利用 jQuery 对象的 text() 方法获取下拉框选中的内容DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件
DOM 操作的分类:
DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XMLHTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时, 有许多专属于 HTML-DOM 的属性CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性查找节点:
查找属性节点: 通过 jQuery 选择器完成.操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值操作文本节点：通过 text() 方法创建节点: 使用 jQuery 的工厂函数 (): (html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回.
注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个
元素, 可以使用$(“<p/>”) 或 $(“<p></p>”), 但不能使用 $(“<p>”)或 $(“<P>”)
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建动态创建 HTML 元素并没有实际用处, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点
以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动.
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
clone(true): 复制元素的同时也复制元素中的的事件
在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.
对匹配的元素进行特定的事件绑定: bind()
提示： 使用 jQuery 的 is() 方法判断元素是否可见
JQuery 可以通过$.get()或$.post()方法来加载 xml.
JQuery 解析 XML 与解析 DOM 一样, 可以使用 find(), children() 等函数来解析和用 each() 方法来进行遍历
