下拉框和单选按钮多选按钮及表格操作java.doc

Web前端 / 给全选按钮添加全选功能 $(#checkall2).toggle(function() $(inputname=groupId).each(function() $(this).attr(checked,true); ); $(this).attr(value,取消); ,function() $(inputname=groupId).each(function() $(this).attr(checked,false); ); $(this).attr(value,全选); ); /*获得TEXT.AREATEXT的值*/ var textval = $(“#text_id”).attr(“value”); /或者 var textval = $(“#text_id”).val(); /*获取单选按钮的值*/ var valradio = $(“inputtype=radiochecked“).val(); /*获取一组名为(items)的radio被选中项的值*/ var item = $(inputname=itemschecked).val(); /*获取复选框的值*/ var checkboxval = $(“#checkbox_id”).attr(“value”)； /*获取下拉列表的值*/ var selectval = $(#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： $(“inputtype=radio“).attr(“checked”,2);/设置value=2的项目为当前选中项 /下拉框select： $(“#select_id”).attr(“value”,test);/设置value=test的项目为当前选中项 $(“testtest2“).appendTo(“#select_id”)/添加下拉框的option $(“#select_id”).empty()；/清空下拉框 获取一组名为(items)的radio被选中项的值 var item = $(inputname=itemschecked).val();/若未被选中 则val() = undefined 获取select被选中项的文本 var item = $(“selectname=items optionselected“).text(); select下拉框的第二个元素为当前选中值 $(#select_id)0.selectedIndex = 1; radio单选组的第二个元素为当前选中值 $(inputname=items).get(1).checked = true; /重置表单 $(“form”).each(function() .reset(); );基本选择器： $(#myELement) 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $(div) 选择所有的div标签元素，返回div元素数组 $(.myClass) 选择使用myClass类的css的所有元素 $(*) 选择文档中的所有的元素 可以运用多种的选择方式进行联合选择：例如$(#myELement,div,.myclass) 层叠选择器： $(form input) 选择所有的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元素 属性过滤选择器： $(divid) 选择所有含有id属性的div元素 $(inputname=newsletter) 选择所有的name属性等于newsletter的input元素 $(inputname!=newsletter) 选择所有的name属性不等于newsletter的input元素 $(inputname=news) 选择所有的name属性以news开头的input元素 $(inputname$=news) 选择所有的name属性以news结尾的input元素 $(inputname*=man) 选择所有的name属性包含news的input元素 $(inputidname$=man) 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 子元素过滤选择器： $(ul li:nth-child(2),$(ul li:nth-child(odd),$(ul li:nth-child(3n + 1) $(div span:first-child) 返回所有的div元素的第一个子节点的数组 $(div span:last-child) 返回所有的div元素的最后一个节点的数组 $(div button:only-child) 返回所有的div中只有唯一一个子节点的所有子节点的数组 表单元素选择器： $(:input) 选择所有的表单输入元素，包括input, textarea, select 和 button $(:text) 选择所有的text input元素 $(:password) 选择所有的password input元素 $(:radio) 选择所有的radio input元素 $(:checkbox) 选择所有的checkbox input元素 $(:submit) 选择所有的submit input元素 $(:image) 选择所有的image input元素 $(:reset) 选择所有的reset input元素 $(:button) 选择所有的button input元素 $(:file) 选择所有的file input元素 $(:hidden) 选择所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器： $(:enabled) 选择所有的可操作的表单元素 $(:disabled) 选择所有的不可操作的表单元素 $(:checked) 选择所有的被checked的表单元素 $(select option: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.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() /点击触发事件 var str=选中的是：rn; /赋值 $(name=items:checkbox:checked).each(function() /循环每一个选中的复选框 str += $(this).val() + rn; /用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() /点击任一复选框 var flag = 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 = $(#select1 option:selected); /获取选中项 $options.appendTo(#select2); /追加给另一个下拉框 ); $(#addAll).click(function() var $options = $(#select1 option); /获取全部项 $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) /判断 var errorMsg = 请输入至少6位的用户名.; $parent.append( + errorMsg + ); /追加错误提示样式 else var okMsg = 输入正确.; $parent.append( + okMsg + ); /追加正确提示样式 / 验证邮箱 if ($(this).is(#email) if (this.value= | (this.value != & !/.+.+.a-zA-Z2,4$/.test(this.value) /判断 var errorMsg = 请输入正确的E-mail地址.; $parent.append( + errorMsg + ); /追加错误提示样式 else var okMsg = 输入正确.; $parent.append( + okMsg + ); /追加正确提示样式 ) 11 验证表单，阻止提交(P155) $(send).click(function() $(form .required:input).trigger(blur); /模拟触发blur()事件 var numError = $(form .onError).length; /定义numError变量 if (numError) return false; /判断错误提示个数（长度），如大于0（即存在错误提示）则阻止提交 alert(注册成功！); ) 12 实时验证（输入时验证，比blur()验证更及时）(P156) $(form :input).blur(function() /验证代码，见前文 ).keyup(function() $(this).triggerHandler(blur); /每次松开按键时模拟触发blur()事件以实时验证 ).focus(function() $(this).triggerHandler(blur); /每次得到焦点时模拟触发blur()事件以实时验证 21:14 浏览 (92) 评论 (0) 分类: jquery学习 2010-07-05缩略显示jQuery 鼠标经过Div底色变换（滑动变色）文章分类:Web前端 jQuery 鼠标经过Div底色变换 .divbox height:300px; width:200px; background:#ffffff; border:solid 1px #ccc; float:left; margin-right:10px; .divOver background:#eff8fe; border:solid 1px #d2dce3; #zztjcolor:#ffffff; #zztj a,#zztj a:link,#zztj a:visited,#zztj a:active color:#ffffff; #zztj a:hover color:#ffffff; $(function() /当鼠标滑入时将div的class换成divOver $(.divbox).hover(function() $(this).addClass(divOver); ,function() /鼠标离开时移除divOver样式 $(this).removeClass(divOver); ); ); 区块A 区块B 区块C 提示：第一次运行请刷新页面，因调用了远程的jquery插件，需要加载完成才能运行。 22:39 浏览 (404) 评论 (1) 分类: jquery学习 2010-07-03缩略显示jQuery对select操作文章分类:Web前端 /遍历option和添加、移除option function changeShipMethod(shipping) var len = $(selectname=ISHIPTYPE option).length if(shipping.value != CA) $(selectname=ISHIPTYPE option).each(function() if($(this).val() = 111) $(this).remove(); ); else $(UPS Ground).appendTo($(selectname=ISHIPTYPE); /取得下拉选单的选取值 $(#testSelect option:selected).text(); 或$(#testSelect).find(option:selected).text(); 或$(#testSelect).val(); / 记性不好的可以收藏下： 1,下拉框: var cc1 = $(.formc selectname=country optionselected).text(); /得到下拉菜单的选中项的文本(注意中间有空格) var cc2 = $(.formc selectname=country).val(); /得到下拉菜单的选中项的值 var cc3 = $(.formc selectname=country).attr(id); /得到下拉菜单的选中项的ID属性值 $(#select).empty();/清空下拉框/$(#select).html(); $(1111).appendTo(#select)/添加下拉框的option 稍微解释一下: 1.selectname=country optionselected 表示具有name 属性， 并且该属性值为country 的select元素 里面的具有selected 属性的option 元素； 可以看出有开头的就表示后面跟的是属性。 2,单选框: $(inputtype=radiochecked).val(); /得到单选框的选中项的值(注意中间没有空格) $(inputtype=radiovalue=2).attr(checked,checked); /设置单选框value=2的为选中状态.(注意中间没有空格) 3,复选框: $(inputtype=checkboxchecked).val(); /得到复选框的选中的第一项的值 $(inputtype=checkboxchecked).each(function() /由于复选框一般选中的是多个,所以可以循环输出 alert($(this).val(); ); 来源：(/s/blog_49cc672f0100cd28.html) - jQuery对select操作_龙虾_新浪博客 $(#chk1).attr(checked,);/不打勾 $(#chk2).attr(checked,true);/打勾 if($(#chk1).attr(checked)=undefined) /判断是否已经打勾 当然jquery的选择器是强大的. 还有很多方法. $(document).ready(function() $(#selectTest).change(function() /alert(Hello); /alert($(#selectTest).attr(name); /$(a).attr(href,xx.html); /window.location.href=xx.html; /alert($(#selectTest).val(); alert($(#selectTest optionselected).text(); $(#selectTest).attr(value, 2); ); ); aaass 11 22 33 44 55 66 jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值 var item = $(inputname=itemschecked).val(); 获取select被选中项的文本 var item = $(selectname=items optionselected).text(); select下拉框的第二个元素为当前选中值 $(#select_id)0.selectedIndex = 1; radio单选组的第二个元素为当前选中值 $(inputname=items).get(1).checked = true; 获取值： 文本框，文本区域：$(#txt).attr(value)； 多选框checkbox：$(#checkbox_id).attr(value)； 单选组radio： $(inputtype=radiochecked).val(); 下拉框select： $(#sel).val(); 控制表单元素： 文本框，文本区域：$(#txt).attr(value,);/清空内容 $(#txt).attr(value,11);/填充内容 多选框checkbox： $(#chk1).attr(checked,);/不打勾 $(#chk2).attr(checked,true);/打勾 if($(#chk1).attr(checked)=undefined) /判断是否已经打勾 单选组radio： $(inputtype=radio).attr(checked,2);/设置value=2的项目为当前选中项 下拉框select： $(#sel).attr(value,-sel3);/设置value=-sel3的项目为当前选中项 $(1111 2222).appendTo(#sel)/添加下拉框的option $(#sel).empty()；/清空下拉框 获取一组radio被选中项的值 var item = $(inputname=itemschecked).val(); 获取select被选中项的文本 var item = $(