jQuery Introduction in Chinese. Thinkhy@disandu.com

1. jQuery 介绍 05/23/10 www.disandu.com

4. 使用 JavaScript 框架

9. 基本 CSS 选择器 选择器 描述 * 匹配任何元素 E 匹配标签名称为 E 的所有元素 E F 匹配标签名称为 F 、作为 E 的后代节点的所有元素 E > F 匹配标签名称为 F 、作为 E 的直接子节点的所有元素 E + F 匹配前面是邻近兄弟节点 E 的所有元素 F （ E 和 F 紧挨着） E - F 匹配前面是任何兄弟节点 E 的所有元素 F(E 和 F 可以不紧挨） E.C 匹配带有类名 C 的所有元素 En 。 .C 等效于 *.C E#I 匹配 id 特征值为 I 的元素 E 。 #I 等效于 *#I E[A] 匹配带有特征 A 的所有元素 E( 不管特征 A 的值是什么 )

10. 选择器 1 HTML 元素 $(‘p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> HTML 元素加上 ID $(‘p#first’) $(‘#first’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> H TML 元素加上 class $(‘p.second’) $(‘.second’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div>

11. 选择器 2 后代节点元素 div 节点内所有 p 结点 $(‘div p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 直接子节点元素 div 下一级的 h1 节点 $(‘div > span’) 没有匹配节点 $(‘div > h1’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> 相邻节点 h1 节点之后的 p 节点 $(‘h1 + p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>

12. 选择器 3 混合元素 取两个元素的并集 $(‘div, p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 所有元素 $(‘*’) <div> <h1> Title </h1> <p id=‘first’> <span> TEST </span> </p> <p class=“second’> TEST2 </p> </div> 兄弟节点元素 取 h1 节点之后的所有 p 节点（与 h1 同一层次） $(‘h1 ~ p’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>

13. 选择器 4 选择器 描述 $(‘[href]’) 属性 $(‘[target=_blank]’) 属性 + 值 $(‘a[rel]’) 元素 + 属性 $(‘[rel!=nofollow]’) 属性值不等于 $(‘[href^=http]’) 属性值以 XX 开头 $(‘[href$=jquery.com]’) 属性值以 XX 结尾 $(‘[href*=jquery]’) 属性值包括 XX $(‘[href^=jquery][target=_blank]’) 元素的多个属性条件组合

14. 筛选器 1 $(‘p:first’) 最先匹配的元素 $(‘p:last’) 最后匹配的元素 $(‘p:not[class=bodytext]’) 对指定的筛选器求反 $(‘p:even’) 偶数次匹配的元素 $(‘p:odd’) 奇数次匹配的元素

15. 筛选器 2 第 n 个匹配元素 $(‘p:eq(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p> 第 n 个匹配元素之后的元素 $(‘p:gt(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p> 第 n 个匹配元素之前的元素 $(‘p:lt(2)’) <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p></p>

16. 筛选器 3 包含文本的元素 $(‘p:contains(TEST)’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’> TEST2 </p> </div> 包含节点的元素 $(‘p:has(span)’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div> 包含了后代节点的元素（排除了空节点） $(‘p:parent’) <div> <h1>Title</h1> <p id=‘first’> <span>TEST</span> </p> <p class=“second’>TEST2</p> </div>

19. 让 jQuery 做点什么！