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时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，知道接触阻塞余下的代码才会继续执行。
jquery ajax
一、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 中文文档
jQuery---操作指南的更多相关文章
- Jquery 操作 select 的操作指南
这里我们以一个简单的select作为原型来进行说明: <select> <option value="a1">香蕉1</option> < ...
- 【项目管理】GitHub使用操作指南
GitHub使用操作指南 作者:白宁超 2016年10月5日18:51:03> 摘要:GitHub的是版本控制和协作代码托管平台,它可以让你和其他人的项目从任何地方合作.相对于CVS和SVN的联 ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十八】
<Web 前端开发精华文章推荐>2013年第六期(总第十八期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Tourist.js – 简单灵活的操作指南和导航插件
Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...
- jQuery弹出窗口完整代码
jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
随机推荐
- NASA的食物计划
NASA的食物计划 题目传送门 题目告诉我们要在体积和重量都不超过的情况下输出最大卡路里,稍微思考一下就可以发现这题是一道01背包的变形题(01背包不会的点这里). 并且01背包需要空间优化. 那我们 ...
- UUID和雪花(Snowflake)算法该如何选择？
UUID 和 Snowflake 都可以生成唯一标识,在分布式系统中可以说是必备利器,那么我们该如何对不同的场景进行不同算法的选择呢,UUID 简单无序十分适合生成 requestID, Snowfl ...
- F650A光猫的一些命令(一）
查看有 / # uname -a Linux F650A 4.1.25 #12 SMP Tue Aug 15 21:57:30 CST 2017 armv7l GNU/Linux / # cat /p ...
- Git 浅克隆后拉取其他分支
对于已浅克隆的项目 $ git clone --depth=1 <git-repo-url> repo $ cd repo 现在浅克隆了一个Git仓库repo.但仓库里查询远程分支只有一个 ...
- 怎么实时更新echarts图标数据？
function getData(){ var request . nem XPHLHttpRequest () ; request . open("get",'http://lo ...
- uni-app项目分包后子包中静态资源丢失
前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验非常棒,公司项目就是主推uni-app. 坑位 随着项目越做越 ...
- nrm安装后无法使用
前情 在使用node.js的过程中,经常会时不是遇到有些包下载安装慢或者失败,有时可以尝试切换源来解决这类问题 坑 通过npm install nrm -g安装完nrm后运行nrm一直报错 Why? ...
- 虚拟机 ubuntu18 树莓派4 QT5.14.2 交叉编译
编译过程主要参考了 <为树莓派4交叉编译QT5.14.2(带EGLFS支持)>,可以按照教程一步一步进行,在整个过程中,有2个地方需要注意. 1. sudo rpi-update 因为网络 ...
- 鸿蒙NEXT开发案例：世界时间表
[引言] 本案例将展示如何使用鸿蒙NEXT框架开发一个简单的世界时钟应用程序.该应用程序能够展示多个城市的当前时间,并支持搜索功能,方便用户快速查找所需城市的时间信息.在本文中,我们将详细介绍应用程序 ...
- openwrt交换机配置命令-swconfig
swconfig swconfig 是交换接口 (switch) 配置命令. 交换机是二层设备,是我们用来配置vlan的必备利器. 使用swconfig list可以列出当前可用的 SWITCH 设备 ...