下拉框和单选按钮多选按钮及表格操作java.docx
《下拉框和单选按钮多选按钮及表格操作java.docx》由会员分享，可在线阅读，更多相关《下拉框和单选按钮多选按钮及表格操作java.docx（15页珍藏版）》请在冰豆网上搜索。
下拉框和单选按钮多选按钮及表格操作java
Web前端
//给全选按钮添加全选功能
$（'#checkall2'）.toggle（function（）{
$（"input[name='groupId[]']"）.each（function（）{
$（this）.attr（'checked',true）;
}）;
$（this）.attr（'value','取消'）;
},function（）{
$（"input[name='groupId[]']"）.each（function（）{
$（this）.attr（'checked',false）;
}）;
$（this）.attr（'value','全选'）;
}
）;
/*获得TEXT.AREATEXT的值*/
vartextval=$（“#text_id”）.attr（“value”）;
//或者
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被选中项的值
varitem=$（‘input[@name=items][@checked]‘）.val（）;//若未被选中则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元素的第一个
$（"tr:
last"） 选择所有tr元素的最后一个
$（"input:
not（:
checked）+span"）
过滤掉：
checked的选择器的所有的input元素
$（"tr:
even"） 选择所有的tr元素的第0，2，4......个元素（注意：
因为所选择的多个元素时为数组，所以序号是从0开始）
$（"tr:
odd"） 选择所有的tr元素的第1，3，5......个元素
$（"td:
eq
（2）"） 选择所有的td元素中序号为2的那个td元素
$（"td:
gt（4）"） 选择td元素中序号大于4的所有td元素
$（"td:
ll（4）"） 选择td元素中序号小于4的所有的td元素
$（":
header"）
$（"div:
animated"）
内容过滤选择器：
$（"div:
contains（'John'）"） 选择所有div中含有John文本的元素
$（"td:
empty"） 选择所有的为空（也不包括文本节点）的td元素的数组
$（"div:
has（p）"） 选择所有含有p标签的div元素
$（"td:
parent"） 选择所有的以td为父节点的元素数组
可视化过滤选择器：
$（"div:
hidden"） 选择所有的被hidden的div元素
$（"div:
visible"） 选择所有的可视化的div元素
属性过滤选择器：
$（"div[id]"） 选择所有含有id属性的div元素
$（"input[name='newsletter']"） 选择所有的name属性等于'newsletter'的input元素
$（"input[name!
='newsletter']"） 选择所有的name属性不等于'newsletter'的input元素
$（"input[name^='news']"） 选择所有的name属性以'news'开头的input元素
$（"input[name$='news']"） 选择所有的name属性以'news'结尾的input元素
$（"input[name*='man']"） 选择所有的name属性包含'news'的input元素
$（"input[id][name$='man']"） 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器：
$（"ulli:
nth-child
（2）"）,$（"ulli:
nth-child（odd）"）,$（"ulli:
nth-child（3n+1）"）
$（"divspan:
first-child"） 返回所有的div元素的第一个子节点的数组
$（"divspan:
last-child"） 返回所有的div元素的最后一个节点的数组
$（"divbutton:
only-child"） 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器：
$（":
input"） 选择所有的表单输入元素，包括input,textarea,select和button
$（":
text"） 选择所有的textinput元素
$（":
password"） 选择所有的passwordinput元素
$（":
radio"） 选择所有的radioinput元素
$（":
checkbox"） 选择所有的checkboxinput元素
$（":
submit"） 选择所有的submitinput元素
$（":
image"） 选择所有的imageinput元素
$（":
reset"） 选择所有的resetinput元素
$（":
button"） 选择所有的buttoninput元素
$（":
file"） 选择所有的fileinput元素
$（":
hidden"） 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器：
$（":
enabled"） 选择所有的可操作的表单元素
$（":
disabled"） 选择所有的不可操作的表单元素
$（":
checked"） 选择所有的被checked的表单元素
$（"selectoption:
selected"） 选择所有的select的子元素中被selected的元素
∙15:
37
∙浏览（67）
∙评论（0）
∙分类:
jquery学习
2010-07-07
缩略显示
推荐jquery学习之jQuery对表单应用的操作各种演示
文章分类:
Web前端
一、表单应用
1获取和失去焦点改变样式（P142）
$（function（）{
$（":
input"）.focus（function（）{//获取焦点触发事件
$（this）.addClass（"focus"）;//增加样式
}）.blur（function（）{//失去焦点触发事件
$（this）.removeClass（"focus"）;//移除样式
}）;
}）
2多行文本框触发事件改变文本框高度（P144）
$（function（）{
var$comment=$（"#comment"）;//获取文本框
$（".bigger"）.click（function（）{//点击放大按钮（.bigger）触发事件
if（$comment.height（）<500）{//判断实际高度
$comment.height（$comment.height（）+50）;//放大高度
}
}）;
$（".smaller"）.click（function（）{//点击缩小按钮（.smaller）触发事件
if（!
$comment.is（":
animated"））{//判断是否处于动画队列中，避免堆积动画队列
if（$comment.height（）>500）{//判断实际高度
$comment.animate（{height:
"+=50"},400）;//以动画方式缩小高度
}
}
}）;
}）
3文本框滚动条高度变化（P145）
$（function（）{
var$comment=$（"#comment"）;//获取文本框
#（".up"）.click（function（）{//点击向上滚动按钮（.up）触发事件
if（!
$comment.is（":
animated"））{//判断是否处于动画队列中，避免堆积动画队列
$comment.animate（{scrollTop:
"-=50"},400）;//以动画方式向上滚动滚动条
}
}）;//（向下滚动代码从略）
}）
4复选框全选、全不选、反选等（P146）
$（function（）{
$（"#checkedAll"）.click（function（）{//点击触发全选事件
$（'[name=items]:
checkbox'）.attr（'checked',true）;
//使用attr方法更改checked属性（注意属性选择器），反选设置false值即可
}）;
$（"#checkedRev"）.click（function（）{//点击触发反选事件
$（'[name=items]:
checkbox'）.each（function（）{//循环每一个复选框
$（this）.attr（"checked",!
$（this）.attr（"checked"））;//设置反值（jQuery方法）
}）;
}）;
}）;
//如下使用原生JavaScript设置反选更简单
$（function（）{
$（"checkedRev"）.click（function（）{
$（'[name=items]:
checkbox'）.each（function（）{//循环每一个复选框
this.checked=!
this.checked;//设置反值（JS原生方法）
}）;
}）;
}）
5输出复选框选中的值（P148）
$（"#send"）.click（function（）{//点击触发事件
varstr="选中的是：
\r\n";//赋值
$（'[name=items]:
checkbox:
checked'）.each（function（）{//循环每一个选中的复选框
str+=$（this）.val（）+"\r\n";//用val（）方法获值并循环赋值
}）;
alert（str）;//输出str
}）
6用一个复选框来控制全部复选框的全选和反选（P149）
$（"#checkedAll"）.click（function（）{//触发事件
if（this.checked）{
$（'[name=items]:
checkbox'）.attr（"checked",true）;//判断赋值
}else{
$（'[name=items]:
checkbox'）.attr（"checked",false）;//判断赋值
}
}）;
//因为控制全选的复选框的checked和所有复选框的checked的值是相同的，所以可以省略判断如下
$（"#checkedAll"）.click（function（）{
$（'[name=items]:
checkbox'）.attr（"checked",this.checked）;
}）
7全选状态下，任一复选框取消选中，控制全选的复选框则也取消选中；所有复选框同时选中时，控制全选的复选框则也被选中（联动）（P149）
//思路1：
$（'[name=items]:
checkbox'）.click（function（）{//点击任一复选框
varflag=true;//定义flag变量，初始值为true
$（'[name=items]:
checkbox'）.each（function（）{//循环复选框组
if（!
this.checked）{
flag=false;//判断当存在一个未选中的复选框时，flag=false
}
}）;
$（'#checkedAll'）.attr（'checked',flag）;//将flag变量赋给控制全选的复选框的checked属性
}）;
//思路2：
$（'[name=items]:
checkbox'）.click（function（）{//点击任一复选框
var$tmp=$（'[name=items]:
checkbox'）;//定义临时变量（避免重复使用选择器）
$（'#checkedAll'）.attr（'checked',$tmp.length==$tmp.filter（':
checked'）.length）;
//使用filter（）方法筛选出选中的复选框，和全部复选框的对象比较length，
//然后将返回的布尔值直接赋给#checkedAll
}）
8下拉框应用，将一个下拉框中已选中的选项（或者全部选项）添加到另一个下拉框中（P150）
$（'#add'）.click（function（）{
var$options=$（'#select1option:
selected'）;//获取选中项
$options.appendTo（'#select2'）;//追加给另一个下拉框
}）;
$（'#addAll'）.click（function（）{
var$options=$（'#select1option'）;//获取全部项
$options.appendTo（'#select2'）;//追加给另一个下拉框
}）;
$（'#select1'）.dblclick（function（）{//双击某个选项将其追加给另一个下拉框
var$options=$（"option:
selected",this）;//获取选中项（注意选择器）
$options.appendTo（'#select2'）;//追加给另一个下拉框
}）
9表单验证，在每一个有requred类的文本框后加入“*”以提示必填项（P153）
$（"form:
input.required"）.each（function（）{
var$required=$（"*"）;//创建元素
$（this）.parent（）.append（$required）;//追加到文档中，注意parent（）方法的使用
}）
10验证表单的用户名和邮箱格式是否正确（P154）
$（'form:
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（''+errorMsg+''）;
//追加错误提示样式
}else{
varokMsg='输入正确.';
$parent.append（''+okMsg+''）;
//追加正确提示样式
}
}
//验证邮箱
if（$（this）.is（"#email"））{
if（this.value==""||（this.value!
=""&&!
/.+@.+\.[a-zA-Z]{2,4}$/.test（this.value）））{
//判断
varerrorMsg='请输入正确的E-mail地址.';
$parent.append（''+errorMsg+''）;
//追加错误提示样式
}else{
varokMsg='输入正确.';
$parent.append（''+okMsg+''）;
//追加正确提示样式
}
}
}）
11验证表单，阻止提交（P155）
$（'send'）.click（function（）{
$（"form.required:
input"）.trigger（'blur'）;//模拟触发blur（）事件
varnumError=$（'form.onError'）.length;//定义numError变量
if（numError）{
returnfalse;//判断错误提示个数（长度），如大于0（即存在错误提示）则阻止提交
}
alert（"注册成功！
"）;
}）
12实时验证（输入时验证，比blur（）验证更及时）（P156）
$（'form:
input'）.blur（function（）{
//验证代码，见前文
}）.keyup（function（）{
$（this）.triggerHandler（"blur"）;//每次松开按键时模拟触发blur（）事件以实时验证
}）.focus（
升级会员 