JQuery表格和表单

最新推荐文章于 2024-03-18 21:12:53 发布

尝胆

最新推荐文章于 2024-03-18 21:12:53 发布

阅读量374

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/qq_38809741/article/details/88427981

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

复选框

<!--
比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,
值为"checked"但没选中获取值就是undefined。
jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，
以前我们使用attr获取checked属性时返回"checked"和"",现在使用prop方法获取属性则统一返回true和false。
什么时候使用attr()，什么时候使用prop()？
1.是有true,false两个属性使用prop();
2.其他则使用attr();

-->

    <script src="../js/jquery-3.1.1.js"></script>
    <script>
       $(function(){
       	//全选
       	$("#checkedAll").click(function(){
       		$("input[name='items']").prop("checked",true);
       	})
       	//全不选
       	$("#checkedNo").click(function(){
       		$("input[name='items']").prop("checked",false);
       	})
       	//反选
       	$("#checkRev").click(function(){       		
       		//方法一
//     		$("input[name='items']").each(function(){
//     			this.checked=!this.checked;
//     		})
       		
       		//方法二
       		$("input[name='items']").each(function(){
       	   		$(this).prop("checked",!$(this).prop("checked"))
			})
             
       	})
       	
       	//获取选中复选框的值
       	$("#checkValue").click(function(){
       		var res="";
       		$("input[name='items']").each(function(){
       			if(this.checked){
       				res+=$(this).val();
       			}
       			
       		})
       		alert(res);
       		      		
       	})
       	
       	//全选/全不选

       	$("#selectAll").change(function(){	
       		$("input[name='items']").prop("checked",this.checked);
       	})
       	      	
       })
    </script>

表格

    <script src="../js/jquery-3.1.1.js"></script>
    <script>
	$(function(){
		//设置thead背景颜色
		$("thead").css("background","#0050D0");
		
		//tbody隔行换色
		$("tbody>tr:even").addClass("even");//偶数行
		$("tbody>tr:odd").addClass("odd");//偶数行
		
		//设置选中的背景颜色
		$("tbody>tr").click(function(){
			//判断是否被选中
			if($(this).hasClass("selected")){
				//如果有selected移除该样式
				//find();当前上下文查找符合条件后代
				$(this).removeClass("selected").find(":checkbox").prop("checked",false);
			}else{
				$(this).addClass("selected").find(":checkbox").prop("checked",true);
			}
		})
		
		//全选全变色
	
		
		$("thead input[name='choice']").change(function(){
			$("tbody input[name='choice']").prop("checked",this.checked);
		
		
		if($(this).prop("checked")){
			$("tbody>tr").addClass("selected");
		}else{
			$("tbody>tr").removeClass("selected");
		}
		})
		
	})
    </script>

下拉框

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>下拉框</title>
    <script src="../js/jquery-3.1.1.js"></script>
    <script>
    	$(function(){
    		//移动到右边
    		$("#btnAdd").click(function(){
    			$("#select1 option:selected").appendTo("#select2");
    		});
    		//全部移动到右边
    		$("#btnAdd_all").click(function(){
    			$("#select1 option").appendTo("#select2");
    		});
    		
    		//从右边移动到左边
    		$("#btnRemove").click(function(){
    			$("#select2 option:selected").appendTo("#select1");
    		});
    		
    		//全部移动到左边
    		$("#btnRemove_all").click(function(){
    			$("#select2 option").appendTo("#select1");
    		});
    	})
    </script>
    <style>
        .centent {
            float: left;
            margin-left: 10px;
        }

        button {
            text-align: center;
            width: 50px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="centent">
        <select multiple="multiple" id="select1" style="width:100px;height:160px;">
            <option value="1" >篮球</option>
            <option value="2">足球</option>
            <option value="3">排球</option>
            <option value="4">台球</option>
            <option value="5">乒乓球</option>
            <option value="6">羽毛球</option>
            <option value="7">冰球</option>
        </select>
    </div>
    <div class="centent">
        <button id="btnAdd">&gt;</button><br />
        <button id="btnAdd_all">&gt;&gt;</button><br />
        <button id="btnRemove">&lt;</button><br />
        <button id="btnRemove_all">&lt;&lt;</button>
    </div>

    <div class="centent">
        <select multiple="multiple" id="select2" style="width: 100px;height:160px;">
            <option value="8">棒球</option>
        </select>
    </div>


</body>
</html>

表单验证

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册</title>
    <style>
        .register {
            width: 500px;
            margin: 0px auto;
        }

        .field {
            width: 100%;
            text-align: left;
            height: 30px;
            margin-left: 10px;
        }

        label:first-child {
            display: inline-block;
            width: 70px;
        }

        .default {
            font-size: 12px;
            color:#aaa;
        }

        .success {
            font-size: 12px;
            color: green;
        }

        .fail {
            font-size: 12px;
            color: red;
        }

        .focus {
            border: 1px solid gray;
        }

        .blur {
            border: 1px solid red;
        }
        .contorl {
            padding-left:100px;
        }
    </style>
    <script src="../js/jquery-3.1.1.js"></script>
    <script>
    	$(function(){
    		var result_name;
    		var result_pwd;
    		var result_pwd1;
    		//验证用户名
    		//获取焦点添加焦点样式
    		$("#userName").focus(function(){
    			$(this).addClass("focus");
    		}).blur(function(){
    			//用户名正则
    			var pattern_userName=/^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
    			//判断用户输入的用户名是否正确
    			if(!pattern_userName.test($(this).val())){
    				$(this).addClass("blur");
    				$(this).next().text("用户格式不正确").removeClass("default").addClass("fail");
    			}else{
    				$(this).removeClass("blur");
    				$(this).next().text("ok").removeClass("fail").addClass("success");
    				result_name=true;//验证通过
    			}
    		});
    		
    		//密码
    		$("#userPwd").focus(function(){
    			$(this).addClass("focus");
    		}).blur(function(){
    			//用户名正则
    			var pattern_pwd=/^[a-zA-Z]\w{5,17}$/;
    			//判断用户输入的用户名是否正确
    			if(!pattern_pwd.test($(this).val())){
    				$(this).addClass("blur");
    				$(this).next().text("用户密码不规范").removeClass("default").addClass("fail");
    			}else{
    				$(this).removeClass("blur");
    				$(this).next().text("ok").removeClass("fail").addClass("success");
    				result_pwd=true;//验证通过
    			}
    		});
    		
    		//确认密码
    		$("#userSPwd").focus(function(){
    			$(this).addClass("focus");
    		}).blur(function(){
    			//获取用户输入的密码
    			var pwd=$("#userPwd").val();
    			//判断用户输入的用户名是否正确
    			if(pwd!=$(this).val()){
    				$(this).addClass("blur");
    				$(this).next().text("两次输入的密码不一致").removeClass("default").addClass("fail");
    			}else{
    				$(this).removeClass("blur");
    				$(this).next().text("ok").removeClass("fail").addClass("success");
    				result_pwd1=true;//验证通过
    			}
    		});
    		
    		//邮箱
    		
    		//手机号
    		
    		//提交表单
    		$("#btnRegister").click(function(){
    			if(result_name&&result_pwd&&result_pwd1){
    				//表单通过
    				$("form").submit();//表单提交
    			}else{
    				alert("请填写完整信息");
    				return false;
    			}
    		})
    		
    	})
    </script>
</head>
<body>
    <div class="register">
        <fieldset>
            <legend><strong>用户注册</strong></legend>
            <form action="" method="">
                <div class="field">
                    <label for="userName">用户名:</label>
                    <input type="text" name="username" id="userName" value="" required placeholder="请输入用户名" />
                    <span class="default">用户名由6-20位以字母开头或数字组成</span>
                </div>
                <div class="field">
                    <label for="userPwd">密码:</label>
                    <input type="password" name="password" id="userPwd" value="" required placeholder="请输入密码" />
                    <span class="default">密码由6到20位字母和数字组成</span>
                </div>
                <div class="field">
                    <label for="userSPwd">确认密码:</label>
                    <input type="password" name="spassword" id="userSPwd" value="" required placeholder="确认密码" />
                    <span class="default">再次输入密码</span>
                </div>
                <div class="field">
                    <label>性别:</label>
                    <input type="radio" name="gender" value="male" checked="checked" id="rdoMale" /><label for="rdoMale">男</label>
                    <input type="radio" name="gender" value="female" id="rdoFemale" /><label for="rdoFemale">女</label>
                </div>
                <div class="field">
                    <label for="userEmail">邮箱:</label>
                    <input type="email" name="useremail" id="userEmail" value="" />
                    <span class="default"></span>
                </div>
				<div class="field">
                	<label for="userPhone">手机:</label>
                	<input type="text" name="phone" id="userPhone" value="" />
                	<span class="default"></span>
           		 </div>
                <div class="contorl">
                    <input type="button" name="register" id="btnRegister" value="注册" />
                </div>
            </form>
        </fieldset>
    </div>
</body>
</html>

尝胆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery表格和表单

复选框 &lt;!-- 比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值, 值为"checked"但没选中获取值就是undefined。 jq提供新的方法“prop”来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回"checked"和...
复制链接

扫一扫