jQuery讲义2：选择DOM元素.ppt

DOM对象 文档对象模型(DOM，Document Object Model)。每一份DOM都可以表示一棵树。 选择DOM元素 html head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title1-4/title /head body h3例子1-4/h3 p title=选择你最喜欢的水果. 你最喜欢的水果是?/p ul li苹果/li li橘子/li li菠萝/li li其他/li /ul /body /html jQuery 对象 jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法，例如： $(“#tab”).html(); jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法,比如$(#id).innerHTML、$(#id).checked之类的写法都是错误的。同样，DOM对象也不能使用jQuery的里方法， 比如document.getElementById(id).html()也会报错， jQurey对象和DOM对象的相互转换 约定：如果一个获取的是jQuery对象，那么我们在变量前面加上$，如： var $variable = jQuery 对象 ; 如果获取的是DOM对象，则这么定义： var variable = DOM对象; jQuery 选择器 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法 完善的事件处理机制 简单的CSS选择器示例 示例 描述 a 匹配所有的链接元素a #specialID 匹配id为specialID的元素 .specialClass 匹配拥有CSS类specialClass的元素 a#specialID.specialClass 匹配id为specialID并且拥有CSS类specialClass的链接元素 p a.specialClass 匹配拥有CSS类specialClass的链接元素,并且这个元素是p的子节点 div, tr 复合选择器，此例用于匹配所有的div元素+所有的tr元素 属性过滤选择器 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素 层次选择器 如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器 示例 描述 E F 匹配标签名为F的所有元素，这些元素是E元素的子节点 EF 匹配标签名为F的所有元素，这些元素是E元素的直接子节点 E+F 匹配标签名为F的所有元素，这些元素是E元素后面的第一个兄弟节点(E元素可能有多个) E~F 匹配标签名为F的所有元素，这些元素是E元素后面的兄弟节点之一 过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器又可分为位置过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器. 位置过滤选择器 内容过滤选择器 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上 可见性过滤选择器 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素 可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (input type=“hidden”)和 visible:hidden 之类的元素 子元素过滤选择器 nth-child() 选择器详解如下： (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素 (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素 (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素 (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素 表单对象属性过滤选择器 此选择器主要对所选择的表单元素进行过滤 表单选择器 练习 1. 给网页中所有的 p 元素添加 onclick 事件 2. 是一个特定的表格隔行变色 3. 对多选框进行操作, 输出选中的多选框的个数