javascript之表单操作
来源:互联网 发布:数据库如何使用boolean 编辑:程序博客网 时间:2024/06/05 09:43
- $(function(){
- $(":input").focus(function(){
- $(this).addClass("focus");
- }).blur(function(){
- $(this).removeClass("focus");
- });
- })
- //全选
- $("#CheckedAll").click(function(){
- //所有checkbox跟着全选的checkbox走。
- $('[name=items]:checkbox').attr("checked", this.checked );
- });
- $('[name=items]:checkbox').click(function(){
- //定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,提升程序效率。
- var $tmp=$('[name=items]:checkbox');
- //用filter方法筛选出选中的复选框。并直接给CheckedAll赋值。
- $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);
- /*
- //一行做过多的事情需要写更多注释。复杂选择器还可能影响效率。因此不推荐如下写法。
- $('#CheckedAll').attr('checked',!$('[name=items]:checkbox').filter(':not(:checked)').length);
- */
- });
- //输出值
- $("#send").click(function(){
- var str="你选中的是:\r\n";
- $('[name=items]:checkbox:checked').each(function(){
- str+=$(this).val()+"\r\n";
- })
- alert(str);
- });
- //全选
- $("#CheckedAll").click(function(){
- if(this.checked){ //如果当前点击的多选框被选中
- $('input[type=checkbox][name=items]').attr("checked", true );
- }else{
- $('input[type=checkbox][name=items]').attr("checked", false );
- }
- });
- $('input[type=checkbox][name=items]').click(function(){
- var flag=true;
- $('input[type=checkbox][name=items]').each(function(){
- if(!this.checked){
- flag = false;
- }
- });
- if( flag ){
- $('#CheckedAll').attr('checked', true );
- }else{
- $('#CheckedAll').attr('checked', false );
- }
- });
- //输出值
- $("#send").click(function(){
- var str="你选中的是:\r\n";
- $('input[type=checkbox][name=items]:checked').each(function(){
- str+=$(this).val()+"\r\n";
- })
- alert(str);
- });
- //全选
- $("#CheckedAll").click(function(){
- $('[name=items]:checkbox').attr('checked', true);
- });
- //全不选
- $("#CheckedNo").click(function(){
- $('[type=checkbox]:checkbox').attr('checked', false);
- });
- //反选
- $("#CheckedRev").click(function(){
- $('[name=items]:checkbox').each(function(){
- //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
- //$(this).attr("checked", !$(this).attr("checked"));
- //$(this).prop("checked", !$(this).prop("checked"));
- //直接使用JS原生代码,简单实用
- this.checked=!this.checked;
- });
- });
- //输出值
- $("#send").click(function(){
- var str="你选中的是:\r\n";
- $('[name=items]:checkbox:checked').each(function(){
- str+=$(this).val()+"\r\n";
- })
- alert(str);
- });
- })
只添加属性名称该属性就会生效应该使用prop(),只存在true/false的属性应该使用prop(),例如disabled和check,应该使用prop()方法,而不是使用attr()方法。
添加星号:
- //<![CDATA[
- $(function(){
- //如果是必填的,则加红星标识.
- $("form :input.required").each(function(){
- var $required = $("<strong class='high'> *</strong>"); //创建元素
- $(this).parent().append($required); //然后将它追加到文档中
- });
- });
- //]]>
CDATA的意义
- CDATA 内部的所有东西都会被解析器忽略。
- 假如文本中包含了大量的 "<" 和 "&" 字符 - 就像编程代码中经常出现的情况一样 - 那么这个 XML 元素就可以被定义为一个 CDATA 部分。
- CDATA 区段开始于 "<![CDATA[",结束于 "]]>":
- <script type="text/javascript">
- <![CDATA[
- function compare(a,b)
- {
- if (a < b)
- {alert("a小于b");}
- else if (a>b)
- {alert("a大于b");}
- else
- {alert("a等于b");}
- }
- ]]>
- </script>
- 在上面的例子中,在 CDATA 区段中的所有东西都会被解析器忽略。
- 关于 CDATA 区段的注释:
- CDATA 区段不能包含字符串 "]]>",所以,CDATA 区段的嵌套是不被允许的。
- 同时也需要确保在 "]]>" 字符串中没有空格或折行。
- 为什么要使用CDATA:
- XHTML的第二个改变是使用CDATA段。XML中的CDATA段用于声明不应被解析为标签的文本(XHTML也是如此),这样就可以使用特殊字符,如小于(<)、大于(>)、和号(&)和双引号("),而不必使用它们的字符实体。考虑下面的代码:
- <script type="text/javascript">
- function compare(a,b)
- {
- if (a < b)
- {alert("a小于b");}
- else if (a>b)
- {alert("a大于b");}
- else
- {alert("a等于b");}
- }
- </script>
- 这个函数相当简单,它比较数字a和b,然后显示消息说明它们的关系。但是,在XHTML中,这段代码是无效的,因为它使用了三个特殊符号,即小于、大于和双引号。要修正这个问题,必须分别用这三个字符的XML实体<、>和"替换它们:
- <script type="text/javascript">
- function compare(a,b)
- {
- if (a <b)
- {alert("a小于b");}
- else if (a>b)
- {alert("a大于b");}
- else
- {alert("a等于b");}
- }
- </script>
- 这段代码存在两个问题。首先,开发者不习惯用XML实体编写代码。这使代码很难读懂。其次,在JavaScript中,这种代码实际上将视为有语法错,因为解释程序不知道XML实体的意思。用CDATA段即可以以常规形式(即易读的语法)编写JavaScript代码。正式加入CDATA段的方法如下:
- <script type="text/javascript">
- <![CDATA[
- function compare(a,b)
- {
- if (a < b)
- {alert("a小于b");}
- else if (a>b)
- {alert("a大于b");}
- else
- {alert("a等于b");}
- }
- ]]>
- </script>
- 虽然这是正式方式,但还要记住,大多数浏览器都不完全支持XHTML,这就带来主要问题,即这在JavaScript中是个语法错误,因为大多数浏览器还不认识CDATA段。
- <script type="text/javascript">
- //<![CDATA[
- function compare(a,b)
- {
- if (a < b)
- {alert("a小于b");}
- else if (a>b)
- {alert("a大于b");}
- else
- {alert("a等于b");}
- }
- //]]>
- </script>
- 当前使用的解决方案模仿了“对旧浏览器隐藏”代码的方法。使用单行的JavaScript注释"//",可在不影响代码语法的情况下嵌入CDATA段:
- 现在,这段代码在不支持XHTML的浏览器中也可运行。
- 但是,为避免CDATA的问题,最好还是用外部文件引入JavaScript代码。
表单验证
- //<![CDATA[
- $(function(){
- //如果是必填的,则加红星标识.
- $("form :input.required").each(function(){
- var $required = $("<strong class='high'> *</strong>"); //创建元素
- $(this).parent().append($required); //然后将它追加到文档中
- });
- //文本框失去焦点后
- $('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('<span class="formtips onError">'+errorMsg+'</span>');
- }else{
- var okMsg = '输入正确.';
- $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
- }
- }
- //验证邮件
- if( $(this).is('#email') ){
- if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
- var errorMsg = '请输入正确的E-Mail地址.';
- $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
- }else{
- var okMsg = '输入正确.';
- $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
- }
- }
- }).keyup(function(){
- $(this).triggerHandler("blur");
- }).focus(function(){
- $(this).triggerHandler("blur");
- });//end blur
- //提交,最终验证。
- $('#send').click(function(){
- $("form :input.required").trigger('blur');
- var numError = $('form .onError').length;
- if(numError){
- return false;
- }
- alert("注册成功,密码已发到你的邮箱,请查收.");
- });
- //重置
- $('#res').click(function(){
- $(".formtips").remove();
- });
- })
- //]]>
表格变色
- $(function(){
- $("tbody>tr:odd").addClass("odd");
- $("tbody>tr:even").addClass("even");
- $('tbody>tr').click(function() {
- //判断当前是否选中
- var hasSelected=$(this).hasClass('selected');
- //如果选中,则移出selected类,否则就加上selected类
- $(this)[hasSelected?"removeClass":"addClass"]('selected')
- //查找内部的checkbox,设置对应的属性。
- .find(':checkbox').attr('checked',!hasSelected);
- });
- // 如果复选框默认情况下是选择的,则高色.
- $('tbody>tr:has(:checked)').addClass('selected');
- })
表格展开关闭
- $(function(){
- $('tr.parent').click(function(){ // 获取所谓的父行
- $(this)
- .toggleClass("selected") // 添加/删除高亮
- .siblings('.child_'+this.id).toggle(); // 隐藏/显示所谓的子行
- }).click();
- })
表格过滤
- $(function(){
- $("#filterName").keyup(function(){
- $("table tbody tr")
- .hide()
- .filter(":contains('"+( $(this).val() )+"')")
- .show();
- }).keyup();
- })
0 0
- javascript之表单操作
- javascript之表单操作
- JavaScript基础之操作表单
- 使用JavaScript操作表单
- 使用JavaScript操作表单
- 使用JavaScript操作表单
- javascript基础。表单操作
- javascript操作表单
- JavaScript中的表单操作
- javascript基础。表单操作
- javascript操作表单
- javascript-表单操作
- JavaScript基础(5)之form表单-基本操作
- javascript之表单
- JavaScript之表单
- JavaScript之表单脚本
- JavaScript之表单验证
- [JavaScript] 10.JS 表单操作
- 面向对象三要素
- CUDA的Threading:Block和Grid设定
- javascript之jquery 事件
- android 按后退键,最小化程序(不退出AC)
- javascript之jquery 动画
- javascript之表单操作
- Unity3D游戏开发之换装系统的实现
- angularjs调用springmvc action时,访问到action但是数据不能正确返回到angular controller中
- AutoTools记录
- javascript之jQuery 插件
- 一个手机游戏服务器的架构
- localhost和127.0.0.1的区别
- 购买vps和通过代理访问国外的网站
- UI篇 -- 手势