week15---12月16日 JQ基础（二）

一、复习

1、JQ的概念

2、$()的作用
3、选择符的使用

二、新课
（一）选择元素
1、自定义选择符

除了各种CSS选择符之外，jQuery还添加了独有的完全不同的自定义选择符。
项目任务：为表格每个一行添加底纹
1）一个表格时的操作：
注意点，：odd，：even两个自定义选择符的作用。——提醒，起始是以0开始。
$(document).ready(function() {

$('tr:even').addClass('alt');

})

2）那么有两个表格时，现象是怎样？
需要改进：
$(document).ready(function() {

$('tr:nth-child(odd)').addClass('alt');

});

注意：:nth-child()是jQuery中唯一从1开始计数的选择。

项目任务：为包含特定内容的表格添加样式

操作：$('td:contains(Henry)').addClass('highlight');

注意：contains（）区分大小写。

思考：从这个单元格出发的其他单元格能不能选择呢？

操作：

$('td:contains(Henry)').next().addClass('highlight');

总结：.next()方法只选择下一个最接近的同辈元素

.nextAll()方法选择后面的全部单元格

对应的还有.prev()和.prevAll()，即向前取元素

.siblings()能够选择处于相同DOM层次的所有其他元素，无论这些元素处于当前元素之前还是之后

2）基于表单的选择符

选 择 符 匹 配

:input 输入字段、文本区、选择列表和按钮元素

:button 按钮元素或type属性值为button的输入元素

:enabled 启用的表单元素

:disabled 禁用的表单元素

:checked 勾选的单选按钮或复选框

:selected 选择的选项元素

例如：使用$('input[type="radio"]:checked')可以选择所有选中的单选按钮

（二）实训操作

实验报告16