JQuery教程讲解.ppt

属性过滤选择器示例 选取下列元素,改变其背景色为 # 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() 方法获取下拉框选中的内容 表单选择器 练习 1. 给网页中所有的 p 元素添加 onclick 事件 2. 是一个特定的表格隔行变色 3. 对多选框进行操作, 输出选中的多选框的个数 jQuery 中的 DOM 操作 DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性 CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性 查找节点 查找节点: 查找元素节点: 通过 jQuery 选择器完成. 查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 创建节点 创建节点: 使用 jQuery 的工厂函数 $(): $(html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回. 注意: 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中; 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个p元素, 可以使用 $(“p/”) 或 $(“p/p”), 但不能使用 $(“p”) 或 $(“P”) 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建 插入节点(1) 动态创建 HTML 元素并没有实际用处, 还需要将新创建的节点插入到文档中, 即成为文档中某个节点的子节点 插入节点(2) 以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动. 删除节点 remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用. empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点). 复制节点 clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为. clone(true): 复制元素的同时也复制元素中的的事件 替换节点 replaceWi