下拉框和单选按钮多选按钮及表格操作javaWord文档下载推荐.docx

下拉框和单选按钮多选按钮及表格操作javaWord文档下载推荐.docx

《下拉框和单选按钮多选按钮及表格操作javaWord文档下载推荐.docx》由会员分享，可在线阅读，更多相关《下拉框和单选按钮多选按钮及表格操作javaWord文档下载推荐.docx（15页珍藏版）》请在冰豆网上搜索。

vartextval=$（“#text_id”）.val（）;

/*获取单选按钮的值*/

varvalradio=$（“input[@type=radio][@checked]“）.val（）;

/*获取一组名为（items）的radio被选中项的值*/

varitem=$（‘input[@name=items][@checked]‘）.val（）;

/*获取复选框的值*/

varcheckboxval=$（“#checkbox_id”）.attr（“value”）；

/*获取下拉列表的值*/

varselectval=$（‘#select_id’）.val（）;

//文本框，文本区域：

$（“#text_id”）.attr（“value”,”）;

//清空内容

$（“#text_id”）.attr（“value”,’test’）;

//填充内容

//多选框checkbox：

$（“#chk_id”）.attr（“checked”,”）;

//使其未勾选

$（“#chk_id”）.attr（“checked”,true）;

//勾选

if（$（“#chk_id”）.attr（‘checked’）==true）//判断是否已经选中

//单选组radio：

$（“input[@type=radio]“）.attr（“checked”,’2′）;

//设置value=2的项目为当前选中项

//下拉框select：

$（“#select_id”）.attr（“value”,’test’）;

//设置value=test的项目为当前选中项

$（“testtest2“）.appendTo（“#select_id”）//添加下拉框的option

$（“#select_id”）.empty（）；

//清空下拉框

获取一组名为（items）的radio被选中项的值

//若未被选中则val（）=undefined

获取select被选中项的文本

varitem=$（“select[@name=items]option[@selected]“）.text（）;

select下拉框的第二个元素为当前选中值

$（‘#select_id’）[0].selectedIndex=1;

radio单选组的第二个元素为当前选中值

$（‘input[@name=items]‘）.get

（1）.checked=true;

//重置表单

$（“form”）.each（function（）{

.reset（）;

}）;

基本选择器：

$（"

#myELement"

） 

选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素

div"

选择所有的div标签元素，返回div元素数组

.myClass"

选择使用myClass类的css的所有元素

*"

选择文档中的所有的元素

可以运用多种的选择方式进行联合选择：

例如$（"

#myELement,div,.myclass"

）

层叠选择器：

forminput"

选择所有的form元素中的input元素

#main>

*"

选择id值为main的所有的子元素

label+input"

选择所有的label元素的下一个input元素节点

经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素

#prev~div"

同胞选择器

该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

基本过滤选择器：

tr:

first"

选择所有tr元素的第一个

last"

选择所有tr元素的最后一个

input:

not（:

checked）+span"

过滤掉：

checked的选择器的所有的input元素

even"

选择所有的tr元素的第0，2，4......个元素（注意：

因为所选择的多个元素时为数组，所以序号是从0开始）

odd"

选择所有的tr元素的第1，3，5......个元素

td:

eq

（2）"

选择所有的td元素中序号为2的那个td元素 

gt（4）"

选择td元素中序号大于4的所有td元素

ll（4）"

选择td元素中序号小于4的所有的td元素

:

header"

div:

animated"

内容过滤选择器：

contains（'

John'

）"

选择所有div中含有John文本的元素

empty"

选择所有的为空（也不包括文本节点）的td元素的数组

has（p）"

选择所有含有p标签的div元素

parent"

选择所有的以td为父节点的元素数组

可视化过滤选择器：

hidden"

选择所有的被hidden的div元素

visible"

选择所有的可视化的div元素

属性过滤选择器：

div[id]"

选择所有含有id属性的div元素

newsletter'

选择所有的name属性等于'

的input元素

input[name!

='

选择所有的name属性不等于'

input[name^='

news'

选择所有的name属性以'

开头的input元素

input[name$='

结尾的input元素

input[name*='

man'

选择所有的name属性包含'

input[id][name$='

可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素

子元素过滤选择器：

ulli:

nth-child

（2）"

）,$（"

nth-child（odd）"

nth-child（3n+1）"

divspan:

first-child"

返回所有的div元素的第一个子节点的数组

last-child"

返回所有的div元素的最后一个节点的数组

divbutton:

only-child"

返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

input"

选择所有的表单输入元素，包括input,textarea,select和button

text"

选择所有的textinput元素

password"

选择所有的passwordinput元素

radio"

选择所有的radioinput元素

选择所有的checkboxinput元素

submit"

选择所有的submitinput元素

image"

选择所有的imageinput元素

reset"

选择所有的resetinput元素

选择所有的buttoninput元素

file"

选择所有的fileinput元素

选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

enabled"

选择所有的可操作的表单元素

disabled"

选择所有的不可操作的表单元素

checked"

选择所有的被checked的表单元素

selectoption:

selected"

选择所有的select的子元素中被selected的元素

∙15:

37

∙浏览（67）

∙评论（0）

∙分类:

jquery学习

2010-07-07

缩略显示

推荐jquery学习之jQuery对表单应用的操作各种演示

文章分类:

一、表单应用

1获取和失去焦点改变样式（P142）

$（function（）{

）.focus（function（）{//获取焦点触发事件

$（this）.addClass（"

focus"

//增加样式

}）.blur（function（）{//失去焦点触发事件

$（this）.removeClass（"

//移除样式

}）

2多行文本框触发事件改变文本框高度（P144）

var$comment=$（"

#comment"

//获取文本框

.bigger"

）.click（function（）{//点击放大按钮（.bigger）触发事件

if（$comment.height（）<

500）{//判断实际高度

$comment.height（$comment.height（）+50）;

//放大高度

}

.smaller"

）.click（function（）{//点击缩小按钮（.smaller）触发事件

if（!

$comment.is（"

））{//判断是否处于动画队列中，避免堆积动画队列

if（$comment.height（）>

$comment.animate（{height:

"

+=50"

},400）;

//以动画方式缩小高度

3文本框滚动条高度变化（P145）

#（"

.up"

）.click（function（）{//点击向上滚动按钮（.up）触发事件

if（!

$comment.animate（{scrollTop:

-=50"

//以动画方式向上滚动滚动条

//（向下滚动代码从略）

4复选框全选、全不选、反选等（P146）

#checkedAll"

）.click（function（）{//点击触发全选事件

$（'

[name=items]:

checkbox'

）.attr（'

//使用attr方法更改checked属性（注意属性选择器），反选设置false值即可

#checkedRev"

）.click（function（）{//点击触发反选事件

）.each（function（）{//循环每一个复选框

$（this）.attr（"

!

））;

//设置反值（jQuery方法）

//如下使用原生JavaScript设置反选更简单

checkedRev"

）.click（function（）{

this.checked=!

this.checked;

//设置反值（JS原生方法）

5输出复选框选中的值（P148）

#send"

）.click（function（）{//点击触发事件

varstr="

选中的是：

\r\n"

;

//赋值

checkbox:

）.each（function（）{//循环每一个选中的复选框

str+=$（this）.val（）+"

//用val（）方法获值并循环赋值

alert（str）;

//输出str

6用一个复选框来控制全部复选框的全选和反选（P149）

）.click（function（）{//触发事件

if（this.checked）{

）.attr（"

true）;

//判断赋值

}else{

//因为控制全选的复选框的checked和所有复选框的checked的值是相同的，所以可以省略判断如下

this.checked）;

7全选状态下，任一复选框取消选中，控制全选的复选框则也取消选中；

所有复选框同时选中时，控制全选的复选框则也被选中（联动）（P149）

//思路1：

）.click（function（）{//点击任一复选框

varflag=true;

//定义flag变量，初始值为true

）.each（function（）{//循环复选框组

this.checked）{

flag=false;

//判断当存在一个未选中的复选框时，flag=false

#checkedAll'

flag）;

//将flag变量赋给控制全选的复选框的checked属性

//思路2：

var$tmp=$（'

//定义临时变量（避免重复使用选择器）

$tmp.length==$tmp.filter（'

）.length）;

//使用filter（）方法筛选出选中的复选框，和全部复选框的对象比较length，

//然后将返回的布尔值直接赋给#checkedAll

8下拉框应用，将一个下拉框中已选中的选项（或者全部选项）添加到另一个下拉框中（P150）

#add'

var$options=$（'

#select1option:

selected'

//获取选中项

$options.appendTo（'

#select2'

//追加给另一个下拉框

#addAll'

#select1option'

//获取全部项

#select1'

）.dblclick（function（）{//双击某个选项将其追加给另一个下拉框

var$options=$（"

option:

this）;

//获取选中项（注意选择器）

9表单验证，在每一个有requred类的文本框后加入“*”以提示必填项（P153）

form:

input.required"

var$required=$（"

strongclass='

high'

>

*<

/strong>

//创建元素

$（this）.parent（）.append（$required）;

//追加到文档中，注意parent（）方法的使用

10验证表单的用户名和邮箱格式是否正确（P154）

input'

）.blur（function（）{//失去焦点事件

var$parent=$（this）.parent（）;

//定义临时变量

$parent.find（"

.formtips"

）.remove（）;

//删除以前的提醒元素，避免堆积重复提醒

//验证用户名

if（$（this）.is（'

#username'

））{

if（this.value=="

||this.value.length<

6）{//判断

varerrorMsg='

请输入至少6位的用户名.'

$parent.append（'

spanclass="

onErrorformtips"

'

+errorMsg+'

/span>

//追加错误提示样式

varokMsg='

输入正确.'

onSuccessformtips"

+okMsg+'

//追加正确提示样式

//验证邮箱

if（$（this）.is（"

#email"

||（this.value!

="

&

&

!

/.+@.+\.[a-zA-Z]{2,4}$/.test（this.value）））{

//判断

请输入正确的E-mail地址.'

11验证表单，阻止提交（P155）

send'

form.required:

）.trigger（'

blur'

//模拟触发blur（）事件

varnumError=$（'

form.onError'

）.length;

//定义numError变量

if（numError）{

returnfalse;

//判断错误提示个数（长度），如大于0（即存在错误提示）则阻止提交

alert（"

注册成功！

12实时验证（输入时验证，比blur（）验证更及时）（P156）

）.blur（function（）{

//验证代码，见前文

}）.keyup（function（）{

$（this）.triggerHandler（"

blur"

//每次松开按键时模拟触发blur（）事件以实时验证

}）.focus（