jQuery---操作指南
功能代码(1)---通过Jquery来处理复选框
实现以下功能:
1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中
2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中
3:当点击全不选按钮,上面四个全部取消
4:当点击反选按钮,选中的变没有选中,没有选中变选中
1 <script type="text/javascript" src="jquery-1.8.2.min.js"></script> //这个是文件,每一次都要看这段代码有没有写 2 </head> 3 <body> 4 <form method="post" action="" > 5 请选择你的爱好! 6 <br/> 7 <input type="checkbox" id="checkAll_2"/>全选/全不选<br/> 8 <input type="checkbox" name="items" value="足球"/>足球 9 <input type="checkbox" name="items" value="篮球"/>篮球 10 <input type="checkbox" name="items" value="游泳"/>游泳 11 <input type="checkbox" name="items" value="唱歌"/>唱歌 12 <br/> 13 <input type="button" id="checkAll" value="全选"/> 14 <input type="button" id="checkNo" value="全不选"/> 15 <input type="button" id="checkRev" value="反选"/> 16 <input type="button" id="send" value="提交"/> 17 </form> 18 19 <script type="text/javascript"> 20 //全选 21 $("#checkAll").click(function(){ 22 $("input[name=items]").attr("checked","checked"); //$中代表选中在input标签的前提下name属性为items标签,attr代表添加属性 23 }); 24 25 //全不选 26 $("#checkNo").click(function(){ 27 $("input[type=checkbox]").attr("checked",null); //$中代表选中在input前提下type为checkbox,把checked为null代表不选中 28 }); 29 //反选 30 $("#checkRev").click(function(){ 31 $("input[type=checkbox][name=items]").each(function(){ //也可以放多个属性,each这里代表迭代,迭代你选中的所有元素,因为这里满足条件的有四个 32 33 if(this.checked){ //.checked可以用来判断该复选框是否被选中 34 $(this).attr("checked",null); 35 }else{ 36 $(this).attr("checked","checked"); 37 } 38 }); 39 }); 40 //全选/全不选 41 $("#checkAll_2").click(function(){ 42 if(this.checked){ //这里代表如果选中,那么下面所有都选中 43 $("input[type=checkbox][name=items]").attr("checked","checked"); 44 }else{ 45 $("input[type=checkbox][name=items]").attr("checked",null); 46 } 47 }); 48 </script> 49 </body>
思考:33行中的this.checked没有加$(),而34行this为什么加$符号?
理解:如果是this那就代表它是个dom对象,而当你加上$(this)那就说明这就是一个Juery对象。
而.checked是dom对象的方法,.attr是Juery对象的方法。所有当你以后当前对象需要用到dom对象方法就用this,要用Juery对象的方法就用$(this)
【jQuery】(1)---初次接触Jquery
1.浅理解Jquery:jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
2.DOM对象和Jquery对象之前的转换
A)DOM转为Jquery对象:
很简单:
var usernameElement =document.getElementById("username");
var $usernameElement=$(usernameElement); //只要加上$(),把DOM对象放进来就是,同时为了方便调用是什么对象,在变量名前也加$这样好区分
alert($usernameElement.val()); //既然已经转为Jquery对象,那么取对象的value值也不是之前的点value而是已经封装好的方法.val()来获取value值
B)Jquery转DOM对象:
两种方法:
a)
//(1)Jquery对象是一个数组 可以通过下标[index]方法 来获相应的dom对象
var $username=$("#username"); //获得jquery对象
//转换为dom对象 根据下标取值即可
var usernameEle =$username[0]; //转为dom对象
alert(usernameEle.value);
b)
//(2)Jquery本身提供 .get(index) 方法获取相应的dom对象
var $username=$("#username"); //jquery对象
var usernameElement2=$username.get(0); //dom对象
alert(usernameElement2.value);
3.小案例:如何引用jquery点击文字,文字消失:
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> //代表引用,前提是要把jquery放到js文件中 2 <script type="text/javascript"> 3 $(document).ready(function(){ //$()代表就是jquery $(document).ready相当window.onload都是自动加载页面,但他们还是有一点区别的 4 $("p").click(function(){ //代表点击p标签是触发该方法 5 $(this).hide(); //this代表该标签本身,hide是 jquery已经封装好的方法,代表文字消失 6 }); 7 }); 8 </script> 9 <body> 10 <p>如果你点击我,我会消失</p> 11 <p> 点击我 我也会消失 </p> 12 // 这里有一点注意:如果去除$(document).ready(function(){},但点击时是无法触发click事件的,但是如果把它放到p标签下面它是可以触发的,如下: 13 <p> 点击我 我也会消失 </p> //这样同样可以触发事件,但如果他们调换位置是无法触发的 14 $("p").click(function(){ 15 $(this).hide(); 16 }); 17 //这个的原因我认为,因为放到body里按照顺序执行的,如果你把触发事件放在<p>标签上面,那就是触发事件先执行,但此次连<p>都没有执行到,怎么执行它的监听,而当放在<p>标签下面,但点击p标签就往下执行他的监听
4.$(document).ready和window.onload的区别:
首先他们都是自动加载页面,但他们在功能在有一点区别:
$(document).ready 等价于document.onload 但是 不是完全等价的 有所区别
不同点是 使用 $(document).ready 内容都会执行 不会发生覆盖
使用 document.onload 会发生覆盖
1 <script type="text/javascript"> //两个都会执行 2 $(document).ready(function(){ 3 alert("hello"); 4 }); 5 $(document).ready(function(){ 6 alert("world"); 7 }); 8 <script type="text/javascript"> //会发生覆盖:只执行bbbb,不执行aaaa 9 window.onload=function(){ 10 alert("aaaa"); 11 }; 12 window.onload=function(){ 13 alert("bbbb"); 14 }; 15 </script>
【jQuery】(2)---Jquery过滤选择器
1.基础选择器:
名称 | 说明 | 举例 |
#id | 根据元素Id选择 | $("divId") 选择ID为divId的元素 |
element | 根据元素的名称选择, | $("a") 选择所有<a>元素 |
.class | 根据元素的css类选择 | $(".bgRed") 选择所用CSS类为bgRed的元素 |
* | 选择所有元素 | $("*")选择页面所有元素 |
selector1, selector2, selectorN |
可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容. | $("#divId, a, .bgRed") |
2.基本过滤器
名称 | 说明 | 举例 |
:first | 匹配找到的第一个元素 | 查找表格的第一行:$("tr:first") |
:last | 匹配找到的最后一个元素 | 查找表格的最后一行:$("tr:last") |
:not(selector) | 去除所有与给定选择器匹配的元素 | 查找所有未选中的 input 元素: $("input:not(:checked)") |
:even | 匹配所有索引值为偶数的元素,从 0 开始计数 | 查找表格的1、3、5...行:$("tr:even") |
:odd | 匹配所有索引值为奇数的元素,从 0 开始计数 | 查找表格的2、4、6行:$("tr:odd") |
:eq(index) | 匹配一个给定索引值的元素 注:index从 0 开始计数 |
查找第二行:$("tr:eq(1)") |
:gt(index) | 匹配所有大于给定索引值的元素 注:index从 0 开始计数 |
查找第二第三行,即索引值是1和2,也就是比0大:$("tr:gt(0)") |
:lt(index) | 选择结果集中索引小于 N 的 elements 注:index从 0 开始计数 |
查找第一第二行,即索引值是0和1,也就是比2小:$("tr:lt(2)") |
:header | 选择所有h1,h2,h3一类的header标签. | 给页面内所有标题加上背景色: $(":header").css("background", "#EEE"); |
:animated | 匹配所有正在执行动画效果的元素 | 只有对不在执行动画效果的元素执行一个动画特效:
$("#run").click(function(){
|
3.内容过滤器
名称 | 说明 | 举例 |
:contains(text) | 匹配包含给定文本的元素 | 查找所有包含 "John" 的 div 元素:$("div:contains('John')") |
:empty | 匹配所有不包含子元素或者文本的空元素 | 查找所有不包含子元素或者文本的空元素:$("td:empty") |
:has(selector) | 匹配含有选择器所匹配的元素的元素 | 给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test"); |
:parent | 匹配含有子元素或者文本的元素 | 查找所有含有子元素或者文本的 td 元素:$("td:parent") |
4.可见性过滤器
名称 | 说明 | 举例 |
:hidden |
匹配所有的不可见元素 注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden. |
查找所有不可见的 tr 元素:$("tr:hidden") |
:visible | 匹配所有的可见元素 | 查找所有可见的 tr 元素:$("tr:visible") |
5.属性过滤器
名称 | 说明 | 举例 |
[attribute] | 匹配包含给定属性的元素 | 查找所有含有 id 属性的 div 元素: $("div[id]") |
[attribute=value] | 匹配给定的属性是某个特定值的元素 | 查找所有 name 属性是 newsletter 的 input 元素: $("input[name='newsletter']").attr("checked", true); |
[attribute!=value] | 匹配给定的属性是不包含某个特定值的元素 | 查找所有 name 属性不是 newsletter 的 input 元素: $("input[name!='newsletter']").attr("checked", true); |
[attribute^=value] | 匹配给定的属性是以某些值开始的元素 | $("input[name^='news']") |
[attribute$=value] | 匹配给定的属性是以某些值结尾的元素 | 查找所有 name 以 'letter' 结尾的 input 元素: $("input[name$='letter']") |
[attribute*=value] |
匹配给定的属性是以包含某些值的元素 |
查找所有 name 包含 'man' 的 input 元素: |
[attributeFilter1][attributeFilter2][attributeFilterN] | 复合属性选择器,需要同时满足多个条件时使用。 | 找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的: $("input[id][name$='man']") |
6.子元素过滤器
名称 | 说明 | 举例 |
:nth-child(index/even/odd/equation) |
匹配其父元素下的第N个子或奇偶元素 ':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的! 可以使用: |
在每个 ul 查找第 2 个li: $("ul li:nth-child(2)") |
:first-child |
匹配第一个子元素 ':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 |
在每个 ul 中查找第一个 li: $("ul li:first-child") |
:last-child |
匹配最后一个子元素 ':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素 |
在每个 ul 中查找最后一个 li: $("ul li:last-child") |
:only-child |
如果某个元素是父元素中唯一的子元素,那将会被匹配 如果父元素中含有其他元素,那将不会被匹配。 |
在 ul 中查找是唯一子元素的 li: $("ul li:only-child") |
7.表单选择器 (只对表单起作用好像都是type=""中的值)
名称 | 说明 | 解释 |
:input | 匹配所有 input, textarea, select 和 button 元素 | 查找所有的input元素: $(":input") |
:text | 匹配所有的文本框 | 查找所有文本框: $(":text") |
:password | 匹配所有密码框 | 查找所有密码框: $(":password") |
:radio | 匹配所有单选按钮 | 查找所有单选按钮 |
:checkbox | 匹配所有复选框 | 查找所有复选框: $(":checkbox") |
:submit | 匹配所有提交按钮 | 查找所有提交按钮: $(":submit") |
:image |
匹配所有图像域 |
匹配所有图像域: $(":image") |
:reset | 匹配所有重置按钮 | 查找所有重置按钮: $(":reset") |
:button | 匹配所有按钮 | 查找所有按钮: $(":button") |
:file | 匹配所有文件域 | 查找所有文件域: $(":file") |
8.表单过滤器
名称 | 说明 | 解释 |
:enabled |
匹配所有可用元素 |
查找所有可用的input元素: $("input:enabled") |
:disabled | 匹配所有不可用元素 | 查找所有不可用的input元素: $("input:disabled") |
:checked | 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option) | 查找所有选中的复选框元素: $("input:checked") |
:selected | 匹配所有选中的option元素 | 查找所有选中的选项元素: $("select option:selected") |
【jQuery】(3)---Jquery操作Dom
1 内部插入节点
1 <body> 2 <ul id="city"> 3 <li id="bj" name="beijing" >北京</li> 4 <li id="tj" name="tianjin"> 天津</li> 5 <li id="cq" name="chongqing">重庆</li> 6 </ul> 7 8 <ul id="love"> 9 <li id="fk" name="fankong" >反恐</li> 10 <li id="xj" name="xingji">星际</li> 11 </ul> 12 13 <script type="text/javascript"> 14 // $("#city").append($("#fk")); //将防恐标签位置移到了重庆下面 append向每个匹配的元素的内部的结尾处追加内容 15 // $("#fk").appendTo($("#city")); //效果和上面一样 appendTo将每个匹配的元素追加到指定的元素中的内部结尾处 16 // $("#city").prepend($("#fk")); //将将防恐标签位置移到了北京上面 prepend向每个匹配的元素的内部的开始处插入内容 17 // $("#fk").prependTo($("#city")); //效果和上面一样 prependTo将每个匹配的元素插入到指定的元素内部的开始处 18 </script> 19 </body>
2.创建节点和删除节点
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 2 <body> 3 <ul id="city"> 4 <li id="bj" name="beijing" >北京</li> 5 <li id="tj" name="tianjin"> 天津</li> 6 <li id="cq" name="chongqing">重庆</li> 7 </ul> 8 9 <script type="text/javascript"> 10 var $hz=$("<li></li>"); //创建<li></li> $("<li></li>")代表创建元素 11 $hz.attr("id","hz"); //添加属性<li id="hz" name="hangzhou"></li> attr代表添加元素 12 $hz.attr("name","hangzhou"); 13 $hz.text("杭州"); //添加文本 text代表添加文本 14 $("#city").append($hz); //把节点挂载到父节点下即可 15 16 //移除节点信息 17 var $cq=$("#cq").remove(); //可以获得移除节点 的元素 remove()代表删除节点 18 //移除属性信息 19 alert($cq.attr("name")); //移除属性信息 attr("name"),如果只有一个属性就代表通过name值得到属性名,这里得到chongqing 20 $("#city").empty(); ////清空节点 21 </script> 22 </body>
3.复制节点
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 2 <body> 3 <button>保存</button> 4 <p>段落</p> 5 <script type="text/javascript"> 6 $("button").click(function(){ 7 alert("点击按钮"); 8 }); 9 //克隆节点,不克隆事件 10 $("button").clone().appendTo($("p")); //相当于把第三行的button按钮复制到了p标签的后面 11 //克隆节点,克隆事件 12 $("button").clone(true).appendTo($("p")); //clone(true)里面添加true代表也克隆事件,因为上面有两个button按钮,所以两个都会被复制 13 </script> 14 </body>
4.替换节点
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> 2 <body> 3 <p>段落</p> 4 <button>登陆</button> 5 <script type="text/javascript"> 6 //replaceWith和replaceAll的功能完全相反, 7 // $("p").replaceWith("<button>登陆</button>"); //把p标签换成button按钮 8 // $("p").replaceAll("<button>登陆</button>"); //按照道理是把button标签变成p标签,但没有实现功能 9 </script> 10 </body>
【jQuery入门】(4)---jQuery常用事件
一.常用事件列表
1.blur() 当失去焦点时触发。包括鼠标点击离开和TAB键离开。
2.change() 当元素获取焦点后,值改变失去焦点事触发。
3.click() 当鼠标单击时触发。
4.dblclick() 当鼠标双击时触发。
5.focus() 当元素获取焦点时触发。注意:某些对象不支持。
6.select() 当input里的内容被选中时触发。
7.submit() 提交选中的表单。
二、事件常用方法
事件名称 | 说明 |
bind | 绑定事件 |
hover | 切换事件 |
toggle | 顺序执行事件 |
unbind | 移除事件 |
one | 仅执行一次的事件 |
trigger | DOM加载完毕后自动执行的事件 |
2.1事件绑定
1)方式一:语法:bind(type,[data],fn)
type参数可以是顶部的22个方法(注意:不能带括号); 参数data是属性值传递给事件对象的额外数据,fn是处理函数。可以bind多个事件,也可以为同一事件绑定多个函数。
$('#d1').bind('click',function(){//正式写法,常用于解决浏览器兼容性 $(this).html('hello java'); });
2)方式二(绑定的简写形式):click( function(){} );
$('#d1').click(function(){//简写形式 $(this).html('hello java'); });
2.2、切换事件
语法:hover(fn1,fn2); 鼠标移入执行第一个函数,鼠标移出执行第二个函数。相当于mouseenter与mouseleave。
$("#div1").hover(function(){alert("鼠标移入我啦");},function(){alert("鼠标移出我啦!");})
2.3、顺序执行事件
语法:toggle(fn1,fn2,fn3...) 当鼠标单击时,依次执行绑定的事件
$("#div1").toggle(function(){alert(1);},function(){alert(2);},function(){alert(3);})
2.4、unbind 移除事件
语法:unbind([type],[fn]) 移除元素已经绑定的事件,type:指定要移除的事件,fn指定要移除的方法。当没有参数时,所有的事件都移除。注意,用live()方法绑定的方法移出不了,live()绑定的方法要用它自己的die()来移出。
$(":button").unbind(); // 移除按钮的所有事件。 $(":button").unbind("click"); //移除按钮的单击事件。 $(":button").unbind("click",fn1); //移除按钮的单击事件中的fn1函数,如果该事件绑定了多个函数,对其他函数没影响。
2.5、one 仅执行一次的事件
语法:one(type,[data],fn) 绑定一个仅执行一次的事件
$("#div1").one("click",function(){ alert("我只执行一次!"); })
2.6、trigger DOM加载完毕后自动执行的事件
语法:trigger(type,[data]) DOM元素加载完成后自动执行
$("#div1").bind("bclick",function(){ alert("你好"); }); $("#div1").trigger("bclick"); //注意,trigger一定要放在绑定的事件之后,否则不执行。
2.7.ready() 当DOM元素加载完成后绑定处理事件
$(document).ready()
三. jQuery中事件处理
3.1 获得事件对象
click(function(e){ //e:对底层的事件对象做了一个封装 });
3.2 事件对象的属性
①event.type:事件类型 ②event.target:返回事件源(是DOM对象)
③event.pageX/pageY:返回点击的坐标
$(function(){ $('a').click(function(e){//对两个对象都绑定了click //依据事件对象获得事件源,e是jQuery对象(封装了底层的事件对象) var obj=e.target;//target属性返回的是一个dom对象 alert(obj.innerHTML); alert(e.pageX+","+e.pageY);//通过事件对象获得光标点击的X、Y坐标 alert(e.type); }); }); <a href="javascript:;">Cilck 1</a><a href="javascript:;">Cilck 2</a> //在开发过程中一般用$(this)获得当前对象
3.3 停止冒泡:event.stopPropagation()
$(function(){//e是Query封装后的对象,不能再用底层的cancelBubble属性 $('a').click(function(e){ alert('点击的是连接'); e.stopPropagation();//停止冒泡 }); $('div').click(function(e){ alert('点击的是div'); }); }); <div id="d1"><a href="javascript:;">Cilck Me</a></div> //停止冒泡个人理解:在这里a标签和div都绑定了click事件,同时a标签是div的子类,所以在不停止冒泡的情况下,当你点击a标签那也会触发父类div的click事件,停止冒泡可以防止这种事情发生。
3.4 停止默认行为:event.preventDefault()
注意事项:原来的写法为<a href="del.do" onclick="return false"></a>
$(function(){ $('a').click(function(e){ var flag=confirm('确定删除吗?'); if(!flag){ //阻止浏览器的默认行为,即不再向连接地址发请求 e.preventDefault(); } }); }); <a href="del.do">删除</a>
jQuery CSS
1.jQuery 文档操作方法
1. addClass() 方法: addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性,仅仅添加一个或多个 class 属性。
2.after() 方法: after() 方法在被选元素后插入指定的内容。在不同元素。
3.before() 方法:before() 方法在被选元素前插入指定的内容。在不同元素。
4.append() 方法:append() 方法在被选元素的结尾(仍然在内部)插入指定内容。在同一个元素里添加内容。
5.prepend()方法:prepend() 方法在被选元素的开头(仍位于内部)插入指定内容。在同一元素添加内容。
6.attr() 方法:attr() 方法设置或返回被选元素的属性值。
7.empty() 方法:empty() 方法从被选元素移除所有内容,包括所有文本和子节点。注意是清除元素里的内容而不是删除元素。
8.html() 方法:html() 方法返回或设置被选元素的内容 (inner HTML)。
9.val()方法: val() 方法返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
10.insertAfter()方法:insertAfter() 方法在被选元素之后插入 HTML 标记或已有的元素。
11.insertBefore() 方法:insertBefore() 方法在被选元素之前插入 HTML 标记或已有的元素。 注释:同上。
12.remove() 方法:remove() 方法移除被选元素,包括所有文本和子节点。
13.removeAttr() 方法:removeAttr() 方法从被选元素中移除属性。
jQuery validate插件
一、导入js库
先导入jQuery库,然后导入Validate插件,如果是中文提示还需要导入messages_zh.js。
注意Validate的导入要在jQuery库之后。代码如下:
<script src="jQuery.1.8.3.js" type="text/javascript"></script> <script src="jquery.validate.js" type="text/javascript"></script> <!-- 因为默认是用英文输出错误信息,如果导入下面包就可以默认用中文输出错误信息 --> <script src="messages_zh.js" type="text/javascript"></script>
二、常见默认校验规则
(1)、required:true 必输字段 (2)、email:true 必须输入正确格式的电子邮件 (3)、url:true 必须输入正确格式的网址 (4)、number:true 必须输入合法的数字(负数,小数) (5)、digits:true 必须输入整数 (6)、creditcard:true 必须输入合法的信用卡号 (7)、equalTo:"#password" 输入值必须和#password相同 (8)、accept: 输入拥有合法后缀名的字符串(上传文件的后缀) (9)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符) (10)、minlength:10 输入长度最小是10的字符串(汉字算一个字符) (11)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符) (12)、range:[5,10] 输入值必须介于 5 和 10 之间 (13)、max:5 输入值不能大于5 (14)、min:10 输入值不能小于10
三.submit提交校验案例
(1)register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript" src="../js/jquery-1.7.1.js"></script> <script type="text/javascript" src="../js/jquery.validate.min.js"></script> <!-- 上面两个导入就可以,下面这个自己写一个校验规则 --> <script type="text/javascript" src="../js/register.js"></script> <html> <head> <style type="text/css" rel="stylesheet"> .wrap{margin:0 auto;width:500px;} .palceholder{ border:solid 1px red;} </style> </head> <body> <div class="wrap"> <h1>注册</h1> <form action="" id="form_register"> <p>用 户 名: <input type="text" name="name" /></p> <p>密 码: <input type="text" name="password" /></p> <p>确认密码: <input type="text" name="password1" /></p> <p>电子邮件: <input type="text" name="emal" /></p> <p>年 龄: <input type="text" name="age" /></p> <p>爱 好:<select name="hobby" id="hobby"> <option value="">请选择</option> <option value="1">唱歌</option> <option value="2">跳舞</option> <option value="3">画画</option> </select> </p> <input type="submit" value="submit提交"> <input type="submit" value="button提交" id="hand" name="hand"> </form> </div> </body> </html>
先看界面效果:很普通的一个界面
(2)register.js
/*首先校验要在$(document).ready()里加入验证规则与错误提示位置*/ $(document).ready(function(){ $("#form_register").validate({
debug:true,//如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便。 // 错误提示 rules:{ name:{required:true}, password:{required:true}, password1:{required:true,equalTo: "#password"}, emal:{required:true}, //这里要注意select有个小细节,就是默认的"请选择"的value一定要是"",如果你设置了"-1",那它就默认有值,而不去校验 hobby:{required:true}, age:{required:true,digits:true}, }, messages:{ name:{required:"请输入用户名"}, password:{required:"请输入密码"}, password1:{required:"请输入密码",equalTo: "两次密码输入不一致"}, emal:{required:"请输入电子邮箱"}, hobby:{required:"请选择爱好"}, age:{required:"请输入年龄",digits:"必须为整数"}, }, /* 下面这个很关键: error:错误信息 element:指当前元素 */ errorPlacement:function(error, element){ //我往当前元素添加class属性,然后对这个css样式设置,这样就可以更加清晰显示错误 element.addClass('palceholder'); //添加placeholder属性,属性值就是error.html() element.attr({placeholder:error.html()}); } }); });
(3)当我在界面上点击submit提交的时候看界面
通过样式可以让错误信息更明显
如果我在register.js错误显示方式修改如下:
errorPlacement:function(error, element){ element.addClass('palceholder'); //默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面 error.appendTo(element.parent()); } });
看界面效果:
四.用button提交
我们知道,很多时候我们需要button进行ajax提交,在网上都是这样写:
$("#btn).click(function(){ if($("#form").valid()){ ...... } //本人亲自测试当button提交时这里的$("#form").valid()是不行,会报错
找了好多博客发现有一个是可以的,下面进行代码演示,其它都和上面一样,就register.js我重新写一个
$(document).ready(function(){ $("#hand").bind("click" ,function(){ //编写表单验证函数validform,在验证按钮注册按钮点击事件内调用验证函数对象 if(validform().form()){ alert(验证通过); } }); }); function validform(){ /*关键在此增加了一个return,返回的是一个validate对象,这个对象有一个form方法,返回的是是否通过验证*/ return $("#form_register").validate({ debug:true, rules:{ name:{required:true}, password:{required:true}, password1:{required:true,equalTo: "#password"}, emal:{required:true}, hobby:{required:true}, age:{required:true,digits:true}, }, messages:{ name:{required:"请输入用户名"}, password:{required:"请输入密码"}, password1:{required:"请输入密码",equalTo: "两次密码输入不一致"}, emal:{required:"请输入电子邮箱"}, hobby:{required:"请选择爱好"}, age:{required:"请输入年龄",digits:"必须为整数"}, }, errorPlacement:function(error, element){ element.addClass('palceholder'); error.appendTo(element.parent()); } }); }
当点击button提交按钮时,发现界面也可以进行校验
基本上就这么多,以后用到新的,以后再写。
jQueryAjax同步异步
今天在项目开发过程中,要实现这么一个功能
<!-- 当我点击就业的时候,触发onclick时间,check()方法里通过ajax请求返回数据, 如果该用户已经毕业可以跳转到job.html如果没有毕业不能跳转页面同时弹框提示 --> <a href="job.html" onclick="return check()">就业</a>
我们都知道onclick是优先执行于href属性的,只有onclick返回true才会执行href。接下来看js怎么写的
function check(){ var fal=false; $.post("URL", function(date){ if(date==null || date==""){ fal=true; return fal;//其实这个return也只是返回ajax中function的返回值。而不是check()的返回值 }else{ alert("请先毕业才能就业") } }) return fal; /*最终发现如果该用户已经毕业,a标签没有任何反应, 如果还没有毕业,会提示:请先毕业才能就业。界面也是没有反应*/ }
这就很纳闷了,明明返回数据是空,fal变成了ture,怎么最终返回还是false。这就是同步和异步的区别了。
首先,ajax默认情况下是异步的,那什么是异步呢
async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)
js举例:
$(function() { $.ajax({ type : 'post', async : true, url : '', cache : false, data : {}, success : function(data){ alert("1111"); } }); alert("22222"); }); /*在这里方法中,因为它是异步的,所以它在通过ajax向后端交互的同时,它还会向下执行js代码,就相当于有两个线程 所以这里是会先弹出"2222",才会弹出"1111",到这个时候,才知道为什么上面js为什么总是返回false,因为异步的时候 它先执行了下面的return fal,就已经返回flase了*/
所以我们只要把async的属性值改为false就变成同步了
$.post没有这个同步异步设置 ,如果一定要设置异步,只能在执行$.post之前加$.ajaxSettings.async = false; (同步执
行)
所以把最上面js改成同步,就可以实现相关功能了
function check(){ var fal=false; $.ajax({ type: "POST", url: "url", async:false, //同步方式 success: function(re){ if(re==null||re==""){ fal=true; }else{ alert("请先毕业才能就业"); } } }); return fal; }
同步和异步的区别
简单理解:同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载,页面出去假死状态,当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。
异步:在异步模式下,当我们使用AJAX发送完请求后,可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求,但是因为我们采用了异步执行方式,所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的,那么,这个时候就好比两条线程同时执行一样。
同步:在同步模式下,当我们使用AJAX发送完请求后,后续还有代码需要执行,我们同样将服务器响应交由另一个JS函数去处理,但是这时的代码执行情况是:在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时,包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样,请求发出后就进入阻塞状态,知道接触阻塞余下的代码才会继续执行。
一、AJAX 概述
1、什么是 AJAX?
特点
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。
2、Ajax的运行原理
页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到 服务器端,在这段时间里,客户端可以任意进行任意操作,直到服务器端
将数据返回 给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。
原理
二、Jquery Ajax概述
通过JavaScript实现的ajax我这里就不再多讲,其实就是围绕浏览器内内置的Ajax引擎对象进行学习的,要使用js原生的Ajax完成异步操作,有如下几个步骤:
1)创建Ajax引擎对象
2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
3)绑定提交地址
4)发送请求
5)接受响应数据
这篇主要讲Jquery 实现AJAX。
1、jQuery中的Ajax
jQuery AJAX 技术常用的方法:ajax() , get() , post() , load() , getscript() 等这几种方法
参数说明
options : 完整 AJAX 请求的所有键/值对选项
url : 被加载的数据的 URL(地址)
data : 发送到服务器的数据的键/值对象
callback : 当数据被加载时,所执行的函数
type : 被返回的数据的类型 (html,xml,json,jasonp,script,text)
在jQuery中,Ajax()方法属于最底层的方法,其它的方法都是对它进一步分装。第2层是load(),get(),和post()。第3层是getScript()和getJSON()方法。
下面会一个一个说明。
三、jQuery中Ajax方法详解
1、Ajax()方法
1)通用写法
$.ajax({
url: "http://www.oujiong.com", //请求的url地址
async: true, //请求是否异步,默认为异步(true)
data: { "id": "value" }, //设置的是请求参数
dataType: "json", //用于设置响应体的类型 注意 跟 data 参数没关系!!!
type: "GET", //请求方式
beforeSend: function(request) {
//请求前的处理
request.setRequestHeader("Content-type","application/json");
request.setRequestHeader("Source","100");
request.setRequestHeader("Token","aaw--wssw-ss...");
},
success: function(data) {
//请求成功时处理
},
complete: function() {
//请求完成的处理
},
error: function() {
//请求出错处理
}
});
2)、参数详解
url
String
(默认: 当前页地址) 发送请求的地址。
type
String
(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout
Number
设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async
Boolean
(默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
data
Object,String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
dataType
String
预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:
"xml": 返回 XML 文档,可用 jQuery 处理。
"html": 返回纯文本 HTML 信息;包含 script 元素。
"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。
"json": 返回 JSON 数据 。
"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,
如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。
success
Function
请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态function (data, textStatus) {
// data could be xmlDoc, jsonObj, html, text, etc...
}
2、get()方法
get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法
$.get(URL,data,function(data,status,xhr),dataType) //这里只有URL是必须的 其它三个是可选
示例
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/jquery/demo_test.asp",function(data,status){
alert("数据:" + data + "\n状态:" + status);
});
});
});
</script>
3、post() 方法
post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法
$.post(URL,data,callback); //URL必须 其它可选
示例
$("button").click(function(){
$.post("demo_test_post.asp", {
name:"小小",
age:4
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
4、load() 方法
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法
$('selector').load(URL,data,callback) //URL必须 其它可选
示例
demo_test.txt
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
通过load方法把文件 "demo_test.txt" 的内容加载到指定的 元素中:
$("#div1").load("demo_test.txt");
总结
其它的也不多讲了,详细的可以参考文档:jQuery API 中文文档