jQuery开发基础教程第6章 使用 jQuery操作表单和表格.ppt

6.3.1 控制表格颜色显示 1. 隔行换色 实现表格的隔行换色，首先需要为表格的奇数行和偶数行设定样式，之后使用jQuery为表格的奇数行和偶数行分别添加样式，代码如下： $(tr:odd).addClass(odd); // 为表格奇数行添加样式 $(“tr:even”).addClass(“even”); // 为表格偶数行添加样式 注意：$(“tr:odd”)和$(“tr:even”)选择器中索引是从0开始的，因此第一行是偶数行。 【例6-15】 表格的隔行换色 （1）创建一个名称为index.html的文件，在该文件的head标记中应用下面的语句引入jQuery库。 script type=text/javascript src=../js/jquery-1.11.1.min.js/script 【例6-5】 在页面中分别创建一个普通按钮和一个提交按钮，普通按钮用来关闭该页面，提交按钮用来提交表单。代码如下所示，运行效果如图6-6所示。 !-- 表单提交到一个邮箱地址 -- form action=mailto:mingrisoft@ !-- 使用submit提交表单 -- 提交按钮：input type=submit value=提交表单页面 /br / !-- onclick为鼠标单击事件，window.close()为关闭该页面的方法 -- 普通按钮：input type=button value=关闭当前页面 onclick=window.close(); / /form 图6-6 单击普通按钮的效果 在HTML中还有一种特殊定义的文本样式，称为文字域或文本域。它与文字字段的区别在于可以添加多行文字，从而可以输入更多的文本。这类控件在一些留言板中最为常见。具体语法如下： textarea name=”textname” value=”text_value” rows=rows_value cols=cols_value value=”value” 这些属性的含义如表6-6所示。 6.1.3 文本域标记textarea 文本域标记属性 描述 name 文本域的名称 rows 文本域的行数 cols 文本域的列数 value 文本域的默认值 【例6-6】 创建一个留言板页面，使用在页面中使用文本域。代码如下所示，运行效果如图6-7所示。 form h3 align=center留言板/h3 标题：input type=text name=username size=50br /br / !-- 设置一个文本域，设置该文本域的行数为10列数为70 -- 内容：br /textarea name=word rows=10 cols=70/textarea /form 图6-7 在页面中添加文本域 菜单列表类的控件主要是为了节省页面空间而设计的。菜单和列表都是通过select和option标记来实现的。 菜单是一种最节省空间的方式，正常状态下只能看到一个选项，单击按钮打开菜单后才能看到全部的选项。 列表可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来观看各选项。具体语法如下： select name=’select_name’ size=select_size multiple option value=”option_value” selected选项/option option value=”option_value” 选项/option /select 这些属性的含义如表6-7所示。 6.1.4 菜单和列表标记select，option 菜单和列表标记属性 描述 name 菜单和列表的名称 size 显示的选项数目 multiple 列表中的项目多卷 value 选项值 selected 默认选项 【例6-7】 利用select标签创建一个用来做学生业余生活调查的页面。代码如下所示，运行效果如图6-8所示。 form h3学生业余生活调查/h3 调查人姓名：input type=text name=username size=10 /brbr 爱好的体育运动：select name=hobby option value=游泳 selected游泳/option option value=足球足球/option option value=篮球篮球/option option value=跑步跑步/option /selectbrbr 周末一般都在哪：brbr s