JQuery 基础原理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script src="js/jquery-1.11.0.min.js" type="text/javascript" ></script> <!-- 原来使用jquery(function(){})来表示window.onload(function(){}) 现在用$代替jquery(),节省代码$(function(){}) 1.DOM对象和JQuery对象互相不通用 DOM window.onload=function(){var input=document.getElementById("in");alert(input.value);} JQuery var $in=$("#in"); alert($in.val()); JQuery中函数val()获得值,不能调用.value拿值 2.把input变成JQuery对象 var $in2=$("input");穿上马甲 alert($in2.val()); 3.把Jquery对象变成Dom对象 俗称脱马甲 JQuery对象本质是存储多个DOM对象的数组 $(JQuery对象)[0]=DOM对象 例子 var in2= $in2[0]; alert(in2.value); 4.JQuery最厉害的是 选择器 ,提供了N多种方式,与样式表css是一样的 ../表示上一层文件夹 id选择器 $("#b1").click(function(){ 使用css函数修改 $("#one").css("background","red"); 且支持方法调用链 $("#one").css("background","red").css("color","green"); }); 标签选择器 $("#b2").click(function(){ $("div").css("background","red"); }) 类选择器 $("#b3").click(function(){ $(".mini").css("background","red"); }) 多个选择的选择器,可以写两个,也可以用,分开 $("#b4").click(function(){ $("span").css("background","red"); $("#two").css("background","red"); $("span,#two").css("background","red"); }) 二.层次选择器 1.所有后代div $("#b1").click(function(){ $("body div").css("background","red"); }) 2.只找子div $("#b2").click(function(){ $("body>div").css("background","red"); }) 3.下一个弟弟是红色的,但是他儿子不是红的 $("#b3").click(function(){ $("#one+div").css("background","red"); }) 4.同辈分的弟弟是红色的,但是他们儿子不是红的 $("#b4").click(function(){ $("#two~div").css("background","red"); }) 5.同辈分的所有兄弟是红色的,不包括自己,但是他们儿子不是红的 $("#b5").click(function(){ $("#two").sibling("div").css("background","red"); }) 三.属性选择器 1.div中含有属性title $("#b1").click(function(){ $("div[title]").css("background","red"); }) 2.div所有title属性是test $("#b2").click(function(){ $("div[title=test]").css("background","red"); }) 3.div所有title属性不是test 其他都变 $("#b3").click(function(){ $("div[title!=test]").css("background","red"); }) 4.div所有title属性是te开头 $("#b4").click(function(){ $("div[title^=te]").css("background","red"); }) 5.div所有title属性是xt结尾 $("#b5").click(function(){ $("div[title$=est]").css("background","red"); }) 6.div所有title属性含有es $("#b6").click(function(){ $("div[title*=es]").css("background","red"); }) 7.有id属性且有含有es $("#b7").click(function(){ $("div[id][title*=es]").sibling("div").css("background","red"); }) 三.基本过滤选择器 1.div中的第一个 $("#b1").click(function(){ $("div:first").css("background","red"); }) 2.div中的最后一个 $("#b2").click(function(){ $("div:last").css("background","red"); }) 3.div class不为one $("#b3").click(function(){ $("div:not(.one)").css("background","red"); }) 4.div索引值为偶数 索引算子索引 $("#b4").click(function(){ $("div:even").css("background","red"); }) 5.div索引值为奇数 索引算子索引 $("#b5").click(function(){ $("div:odd").css("background","red"); }) 6.div索引值大于3的 $("#b6").click(function(){ $("div:gt(3)").css("background","red"); }) 7.div索引值等于3的 $("#b7").click(function(){ $("div:eq(3)").css("background","red"); }) 8.div索引值小于3的 $("#b8").click(function(){ $("div:lt(3)").css("background","red"); }) 9.h1-h6 $("#b9").click(function(){ $(":header").css("background","red"); }) 10.h1-h6 $("#b10").click(function(){ $(":animated").css("background","red"); }) 四.基本过滤选择器 1.可用 属性 $("#b1").click(function(){ var $input=("input[type=text]:enabled"); alert($input.val());是拿值 $input.val(1);传值就是赋值$input.val("随便"); }) 2.不可用 $("#b2").click(function(){ var $input=("input[type=text]:disabled"); alert($input.val());是拿值 $input.val(1);传值就是赋值$input.val("随便"); }) 3.复选框被选中 $("#b3").click(function(){ $("input[type=checkbox]:checked").css("background","red"); }) 4.下拉菜单中被选中的选项 $("#b4").click(function(){ $("#job>option:selected").css("background","red"); for(var i=0;i<$select.length;i++){ 遍历变成DOM对象 var $text=$($select[i]).text(); alert($text); } html();也行,不传参获取,传参设置 }) 5.div索引值为奇数 索引算子索引 $("#b5").click(function(){ $("div:odd").css("background","red"); }) --> <script type="text/javascript"> $(function(){ // var $in=$("#in"); // alert($in.val()); var $in2=$("input"); // alert($in2.val()); var in2= $in2[0]; alert(in2.value); /*增加动画效果*/ $("#mover").slideUp(6000,function(){}); }) </script> <input type="text" value="swift" id="in"/> <div id="mover" width="100px" style="background-color: blue;"> </div> </body> </html>
JQuery 验证表单
<!DOCTYPE html> <html> <meta charset="utf-8"> <title></title> <head> <style type="text/css"> .errorspan { color: red; font-size: 12px; } </style> <!--<script type="text/javascript"> //定义一个正则 非空 var reg = /^\s*$/; //校验表单主方法 function run(){ clearSpan();//清空span校验信息 var flag1=checkNotNull("username");//用户名校验 var flag2=checkNotNull("pwd");//密码校验 var flag3=checkNotNull("pwd2");//确认密码校验 var flag4=checkIschoice("utype");//用户类型校验 var flag5=checkIsSelected("city");//所在城市校验 var flag6=checkpwd(flag2,flag3);//验证密码和确认密码是否一致 return flag1&&flag2&&flag3&&flag4&&flag5&&flag6; } //清空span校验信息 function clearSpan(){ document.getElementById("usernamespan").innerHTML=""; document.getElementById("pwdspan").innerHTML=""; document.getElementById("pwd2span").innerHTML=""; document.getElementById("utypespan").innerHTML=""; document.getElementById("cityspan").innerHTML=""; } //通过元素ID进行元素非空判断 function checkNotNull(nodeid){ //获取表单元素 var nodex = document.getElementById(nodeid); //获取span元素 var spann = document.getElementById(nodeid+"span"); if(reg.test(nodex.value)){ spann.innerHTML="不能为空"; return false; }else{ return true; } } //用户类型 radio checked=true function checkIschoice(nodename){ //获取表单元素 var nodex = document.getElementsByName(nodename); //获取span元素(显示校验信息) var spann = document.getElementById(nodename+"span"); //遍历数组 for(var i=0;i<nodex.length;i++){ if(nodex[i].checked){ return true; } } spann.innerHTML="不能为空"; return false; } //所在城市校验 option value function checkIsSelected(nodeid){ //获取select表单元素 var nodex = document.getElementById(nodeid); //获取span元素 var spann = document.getElementById(nodeid+"span"); //获取select option子元素 var options=nodex.options; //获取value var val=options[nodex.selectedIndex].value; //判断 if(reg.test(val)){ spann.innerHTML="不能为空"; return false; }else{ return true; } } var cities = new Array(4); cities[0] = new Array("昌平","丰台","大兴","海淀","顺义","延庆"); cities[1] = new Array("长春市","吉林市","松原市","延边市"); cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市"); cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市"); cities[4] = new Array("南京市","苏州市","扬州市","无锡市"); //通过选择的省,显示对应的所有的市 function selectCity(index){ //通过索引获得对应的所有的市 var allCity = cities[index]; // 获得city select 对象 var cityObj = document.getElementById("city"); cityObj.innerHTML = "<option value=''>----请-选-择-市----</option>"; //遍历所有的市 for(var i = 0 ; i < allCity.length ; i ++){ // 获得具体的市 var cityName = allCity[i]; // 创建option var option = document.createElement("option"); // 创建文本节点 var textNode = document.createTextNode(cityName); //将文本添加到option中 option.appendChild(textNode); // 将option追加到select中 cityObj.appendChild(option); } } //校验密码和确认密码是否一致 function checkpwd(a,b){ var pwd = document.getElementById("pwd"); var pwd2 = document.getElementById("pwd2"); //获取span(显示校验信息) var pwd2span = document.getElementById("pwd2span"); if(a&&b&&pwd.value!=pwd2.value){ //不一致 pwd2span.innerHTML="密码和确认密码不一致"; return false; }else{ return true; } } </script>--> <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> </head> <body> <form action="#" method="get" id="f1" οnsubmit="return run()"> <table> <tr> <td>用户名</td> <td><input type="text" name="username" id="username" /> <span id="usernamespan" class="errorspan"></span></td> </tr> <tr> <td>密码</td> <td><input type="password" name="pwd" id="pwd" /> <span id="pwdspan" class="errorspan"></span></td> </tr> <tr> <td>确认密码</td> <td><input type="password" name="pwd2" id="pwd2" /> <span id="pwd2span" class="errorspan"></span></td> </tr> <tr> <td>用户类型</td> <td><input type="radio" name="utype" value="vip" />vip<br/> <input type="radio" name="utype" value="normal" />一般用户<br/> <span id="utypespan" class="errorspan"></span> </td> </tr> <tr> <td>所在地区</td> <td> <select id="provinceId" οnchange="selectCity(this.value)" style="width:150px"> <option value="">----请-选-择-省----</option> <option value="0">北京</option> <option value="1">吉林省</option> <option value="2">山东省</option> <option value="3">河北省</option> <option value="4">江苏省</option> </select> <select id="city" style="width:150px"> <option value="">----请-选-择-市----</option> </select> <span id="cityspan" class="errorspan"></span> </td> </tr> <tr> <td></td> <td><input type="submit" value="注册提交" /> <input type="reset" value="重置" /></td> </tr> </table> </form> </body> <script type="text/javascript"> function run() { var flag1 = isnull("username"); var flag2 = isnull("pwd"); var flag3 = isnull("pwd2"); var flag4 = ischoice("utype"); var flag5 = isselect("city"); var flag6= pwdconfirm(flag2,flag3) return flag1 && flag2 && flag3&& flag4 && flag5&& flag6; } function isnull(id) { if(!$("#" + id).val()) { $("#" + id + "span").html("<b>不能为空</b>"); return false; } else { return true; } } function ischoice(id) { var choice = $("input[name=" + id + "]"); for(var x = 0; x < choice.length; x++) { if(choice[x].checked) { return true; } } $("#" + id + "span").html("<b>用户类型没有选择</b>"); return false; } // var regex=/^\s*$/; function isselect(id) { var select = $("#" + id); // alert(regex.test(select.val())); if(select.val()=="") { $("#" + id + "span").html("<b>所在城市没有选择</b>"); return false; } return true; } var cities = [ ["昌平", "丰台", "大兴", "海淀", "顺义", "延庆"], ["长春市", "吉林市", "松原市", "延边市"], ["济南市", "青岛市", "烟台市", "潍坊市", "淄博市"], ["石家庄市", "唐山市", "邯郸市", "廊坊市"], ["南京市", "苏州市", "扬州市", "无锡市"] ]; function selectCity(index) { $("#city").html("<option>----请-选-择-省----</option>"); for(var x = 0; x < cities[index].length; x++) { $("#city").html($("#city").html() + "<option value='"+x+"'>----" + cities[index][x] + "----</option>"); } } function pwdconfirm(a,b){ if(a&&b&&$("#pwd").val()==$("#pwd2").val()){ return true; }else{ $("#pwd2span").html("<b>两次密码不一致</b>"); return false; } } </script> </html>