码迷,mamicode.com
首页 > Web开发 > 详细

Jquery笔记

时间:2017-11-26 20:32:28      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:1.5   another   错误   contains   data   资源   UI   enable   val   

 

一、选择器:

1.1基本选择器

Id选择器:

$(#one).css(bcakground,red);

类选择器:

$(.mimn).css(background,red);

标签选择器:

$(div).css(background,red);

通配符选择器:

$(*)..css(background,red);

组合选择器:

$(span,#one).css(background,red);

总结:

JQuery中的基本选择器:

 ID选择器    类选择器             标签选择器     通配符选择器     群组选择器

$("#id");  $(".className"); $("div");   $("*");    $("h2,h3,.cc");

1.2层次选择器

选择body内的所有div元素:

$(body div).css(background,red)

body内选择子元素是div

$("body > div").css("background","red");

Idone 的下一个兄弟元素:

  $("#one + div").css("background","red");

idtwo的元素后面的所有div兄弟元素:

  $(“#one ~ div”).css("background","red");

 

层次选择器:从父子关系和兄弟关系来进行选择页面节点

 $("a b");   :a节点的所有后代节点b都被选中

 $("a > b"); :a节点的所有子节点b都被选中

 $("a + b"); :a节点之后的第一个兄弟节点b

 $("a ~ b"); :a节点之后的所有兄弟节点b

1.3过滤选择器

1.1.1 基本过滤选择器

选择第一个DIV元素

$(div : first).css("background","red");

选择最后一个div元素

$("div:last").css("background","red");

选择class不为one的所有div元素

$("div:not(.one)").css("background","red");

选择索引值为偶数的div元素 even:偶数 odd:奇数

$("div:even").css("background","red");

选择索引值为奇数的div元素

$("div:odd").css("background","red");

选择索引值等于3的元素

$("div:eq(3)").css("background","red");

选择索引值大于3的元素

$("div:gt(3)").css("background","red");

选择索引值小于3的元素

$("div:lt(3)").css("background","red");

选择所有的标题元素

$(":header").css("background","red");

选择当前正在执行动画的所有元素

$(":animated").css("background","red");

基本过滤选择器:

      从位置的角度来对页面的标签进行过滤选择

      $("tagName:first");

      $("tagName:last");

      $("tagName:eq(2)");

      $("tagName:gt(2)");

      $("tagName:lt(2)");

      $("tagName:odd");

      $("tagName:even");

      $(":header");

      $(":animated");

      $("tagName:not(.one)")

1.1.2 内容过滤选择器

选取含有文本"di"div元素

$("div:contains(‘di‘)").css("background","red");

选取不包含子元素(或者文本元素)div空元素.

$("div:empty").css("background","red");

选取含有classmini元素 的div元素. $("tagName:has(.mini)")

1.选中的是DIV元素  2.子元素中的class值为mini

$("div:has(.mini)").css("background","red");

选取含有子元素(或者文本元素)div元素.

$("div:parent").css("background","red");

内容过滤选择器总结:节点值是否为空,节点上的文本中是否包含指定的字符串,子元素中的class值是否为指定的值

$("tagName:empty");  

$("tagName:parent");

$("tagName:contains(‘aaa‘)");

$("tagName:has(.one)");

1.1.3 属性过滤选择器:

选取含有属性titlediv元素.

$("div[title]").css("background","red");

选取属性title值等于testdiv元素.

$("div[title=‘test‘]").css("background","red");

选取属性title值不等于testdiv元素.

$("div[title!=‘test‘]").css("background","red");

选取属性title值以te开始 的div元素.

$("div[title^=‘te‘]").css("background","red");

选取属性title值以est结束的div元素.

$("div[title$=‘est‘]").css("background","red");

选取属性title值含有esdiv元素.   

$("div[title*=‘es‘]").css("background","red");

组合属性选择器,首先选取有属性iddiv元素,然后在结果中 选取属性title值 含有 es 的元素.

$("div[id][title*=‘es‘]").css("background","red");

属性过滤选择器:从节点的属性来过滤筛选节点:有无属性,属性值等于,不等于,包含,**开头,**结尾,多重过滤

  $("tagName:[id]");

  $("tagName:[id=‘cc‘]");

  $("tagName:[id!=‘cc‘]");

  $("tagName:[title^=‘cc‘]");

  $("tagName:[title$=‘cc‘]");

  $("tagName:[title*=‘cc‘]");

  $("tagName:[title*=‘cc‘][name=‘ee‘][id!=‘ff‘]");

1.1.4 可见性过滤选择性:

选中所有可见的div元素 $("div:visible"),设置样式;

$("div:visible").css("background","blue");

1.选中不可见的所有元素 $("body :hidden").lenth;  

    2.选中不可见的DIV元素  $("div:hidden");

3.选中所有不可见的文本隐藏域 $("input:hidden")

4.让所有不可见的DIV元素3秒内显示并且设置其为背景色$dm.show(3000).css("background","red");

 

选中body元素下看不到的元素,包含隐藏表单组件 ,这里有空格,代表层次选择器

alert($("body :hidden").length);

alert($("div:hidden").length);

alert($("input:hidden").length);

所有不可见的div元素在3秒内显示

$("div:hidden").show(3000);

可见性选择器:根据页面上的元素是否显示来选择节点

 $("tagName:visible");

  $("tagName:hidden");

 $("tagName :hidden"); 选中标签tagName下所有隐藏的元素,包括隐藏表单组件slow normal fast

1.1.5 元素过滤选择器

选取classonediv下的第2个子元素

$("div.one :nth-child(2)").css("background","blue");

选取classonediv下的第1个子元素  

$("div.one :first-child").css("background","blue");

选取每个父元素下的最后一个子元素

$("div.one :last-child").css("background","blue");

如果父元素下的仅仅只有一个子元素,那么选中这个子元素  

$("div.one :only-child").css("background","blue");

子元素过滤选择器:选择父元素下的子元素(1,最后1,唯一的一个,第几个子元素)

$("tagName :first-child");  $("tagName :last-child");

$("tagName :only-child");   $("tagName :nth-child(2)");

1.1.6 表单对象属性过滤选择器

选中所有可用元素 $("input:enabled")

$("input:enabled").val("AAA");

选中所有不可用元素 $("input:disabled")

$("input:disabled").val("BBB");

总结:从表单组件的可用还是不可用来进行选择节点

1.4表单选择器

 选中页面上的2个按钮<input type="button"/> <button>

alert($("#form1 :button").length);

选中表单下的<button>

alert($("#form1 button").html("AAA"));

alert($("#form1 :checkbox").length);

$("#form1 :checkbox:eq(0)").attr("checked","true");

选中idform1的表单小的input开头的组件

alert($("#form1 input").length);

选中idform1下的所有表单组件 包括textarea button select

alert($("#form1 :input").length);

选中idform1表单下的所有不可见元素

alert($("#form1 :hidden").length);

二、JQueryDom节点操作

2.1查找节点

获取p节点

var $pDm=$("p");

输出p节点的title属性

alert($pDm.attr("title"));

 //获取第2li节点   

 var $li_2=$("ul li:eq(1)");

 //输出第2li节点的title属性

alert($li_2.attr("title"));

//输出第2li节点的文本内容

alert($li_2.html());

2.2创建节点

  创建2li节点,要求这2li节点包含文本包含属性title

 var $dm1=$("<li title=‘西瓜44‘>西瓜</li>");

 var $dm2=$("<li title=‘香蕉55‘>香蕉</li>");

 //将新创建的第1li节点追加到ul节点下的最后一个子节点

$("ul").append($dm1);

$("ul").append($dm1);

//将新创建的第2li节点追加到ul节点下的第一个子节点

$("ul").prepend($dm2);

2.3插入节点

  var $dm1=$("<li title=‘葡萄44‘>葡萄</li>");

 var $dm2=$("<li title=‘西瓜55‘>西瓜</li>");

 var $dm3=$("<li title=‘香蕉66‘>香蕉</li>");

 var $ulDm=$("ul");

 var $li_2=$("ul li:eq(1)");

//2种方式来将创造的第1个节点添加到ul下的最后一个子节点

  //$ulDm.append($dm1);

  //$dm1.appendTo($ulDm);

  

  //2种方式来讲创造的第2个节点添加到ul下的第一个子节点

  //$ulDm.prepend($dm2);

  //$dm2.prependTo($ulDm);

  

  //2种方式将创造的li节点追加到第2个已经存在的li节点之后

  //$li_2.after($dm3);

  //$dm3.insertAfter($li_2);

  

  //2种方式将创造的li节点追加到第2个已经存在的li节点之前

  //$li_2.before($dm3);

  //$dm3.insertBefore($li_2);

2.4删除节点

 自杀:直接找到我们要操作的节点删除即可.

 $("ul li:eq(1)").remove();

 jquery种删除掉的节点还可以继续获得

var $dm=$("ul li:eq(1)").remove();

$dm.appendTo($("ul"));

JQuery中删除节点可以加过滤条件

$("ul li").remove("li[title!=菠萝]"); 

获取第2li节点后,将其元素中的内容清空

$("ul li:eq(1)").empty();

2.5属性操作

 JQuery中有很多类似的操作,获取节点的文本,获取节点的属性,

   $dm.html();   $dm.html("AAAA");

$dm.attr("title");   $dm.attr("title","BBBBB");

2.6样式操作

 获取样式

alert($("p").attr("class"));

设置样式 原先的样式不存在

$("p").attr("class","high")

追加样式 原先的样式还存在

$("p").addClass("high")

删除全部样式

$("p").removeClass()

删除指定样式

$("p").removeClass("high");

重复切换样式 $dm.toggleClass("another");

$("p").toggleClass("high");

判断元素p是否含有某样式 $dm.hasClass("another")

alert($("p").hasClass("high"));

 JQuery提供了丰富的API让我们操作节点的样式:

获取节点的样式,设置节点的样式,追加节点的样式,删除节点的样式(全部,指定)

重复切换样式,判读节点是否包含指定的样式

 

2.7CSS-DOM

alert($("p").css("color"));    

设置<p>元素的color

$("p").css("color","red");  

设置<p>元素的fontSizebackgroundColor $dm.css({"k1":v1,"k2":v2});

$("p").css({"fontSize":30,"backgroundColor":‘pink‘});

获取<p>元素的高度

alert($("p").height());

获取<p>元素的宽度

alert($("p").width());

设置<p>元素的高度  

$("p").height("100px");

设置<p>元素的宽度

 $("p").width("300px");  

获取<p>元素的的左边距和上边距  $dm.offset(); $dm.left $dm.top

var obj=$("p").offset();

alert(obj.left);

alert(obj.top);

 JQuery中对节点的样式操作,2种实现方案:

     第一种是将节点的样式作为节点的一个属性来进行整体操作

      $dm.attr("class","myClass");

     第二种方案通过节点的CSSDOM来控制节点的样式

      $dm.css("background","red");

      $dm.css("background");

2.8遍历节点数

利用JQuerychldren方法来获取页面上所有的body子元素

alert($("body").children().length);

var dms=$("body").children();

for(var i=0;i<dms.length;i++){

alert(dms[i].innerHTML);

页面加载完毕之后,获取p节点后的同辈元素,输出其文本内容

页面加载完毕之后,获取p节点前的同辈元素,输出其文本内容

页面加载完毕之后,获取p节点所有的同辈元素

window.onload=function(){

      //获取p节点之后所有的同辈元素

      var dms=$("p").nextAll();

      //for(var i=0;i<dms.length;i++){

        // alert(dms[i].innerHTML);

      //}

      

      //获取节点P之前所有的兄弟节点

      //dms=$("p").prevAll();

      //for(var i=0;i<dms.length;i++){

        // alert(dms[i].innerHTML);

      //}

      

      //获取p节点所有的兄弟节点

      dms=$("p").siblings();

      for(var i=0;i<dms.length;i++){

         alert(dms[i].innerHTML);

      }

2.9设置和获取HTML文本和值

获取<p>元素的HTML代码 $dm.html();

如果p节点中有HTML标签,那么标签也会被返回

alert($("p").html());

获取<p>元素的文本

通过方法text返回节点的内容,如果节点上包含HTML标签,那么这些标签不会被返回,仅仅返回文本信息

 alert($("p").text());

PS: $dm.html();  $dm.text();  区别:

设置<p>元素的HTML代码 $dm.html("夹杂HTML标签");

 //如果文本中包含对应的HTML标签,那么这些标签将会被浏览器作为普通标签来识别

  $("p").html("<span style=‘background:red‘>DDDDD</span>");

设置<p>元素的文本  $dm.text("不夹杂html标签");

 $("p").text("FFFFFF");

设置<p>元素的文本 $dm.text("夹杂HTML标签");

如果文本中包含了HTML标签,那么这些标签将会作为内容来识别

 $("p").text("<span style=‘background:red‘>DDDDD</span>");

获取当前按钮的value值  

alert($("#btn1").val());

设置当前按钮的value

$("#btn2").val("我是后来设置的内容");

  JQuery中获取和设置节点的文本有2种方式:$dm.html() $dm.text();

     注意区分2者的不同之处

     获取:

     1html()不仅能获取文本内容,还可以获取标签内容

     2text()仅仅获取文本内容

     设置:

     1html()设置的文本中含有标签时,会被浏览器进行解析

     2text()设置的文本内容中含有标签时,不会被浏览器进行解析,作为字符串处理

    获取和设置节点的value值用 $dm.val();

 

 JQuery的方式为页面上的按钮绑定事件  

   $("#address").bind("focus",function(){

      if(this.value==‘请输入邮箱地址‘){

         this.value="";

      }

   });

   

   $("#address").bind("blur",function(){

      if(this.value==‘‘){

         this.value="请输入邮箱地址";

三、Jquery的事件

3.1Window.onload$(document).ready()

window.onload=function(){

alert("BBBBB");

}

 

JQuery提供的 页面加载完毕之后执行function中的代码

$(document).ready(function(){

alert("CCCCCC");

});

简写形式

$(function(){

alert("DDDDDD");

});

区别:

1.window.onload的方式来加载页面:必须等页面上所有的元素(图片,.js文件,CSS文件)全部传递到客户端之后才去执行其中的代码

2.JQuery的形式来加载页面,页面上的DOM树形成了,无需等到所有资源加载完毕之后才去执行代码

3.可以绑定的函数不一样 window.onload只能绑定1个函数 用JQuery的形式可以绑定多个     

 

3.2JQuery完善的事件处理机制

JQuery为节点pv绑定事件之前已经做过判断处理了

window.onload=function(){

  var dm=document.getElementById("pvv");

  //为了保证代码的健壮性,为页面中的 节点绑定各种事件之前需要做大量的判断

  if(dm!=null){

  dm.onclick=function(){alert("ZZZZ");}

  }

  alert("ZZZZZZZ");

}

 

  $("#pvv").bind("click",function(){alert("AAAAAA");});

  alert("AAAAAAA");

});

3.3事件绑定与合成

获取idpanel下的class的值为headh5元素,

 * 为这个元素用JQuery的原始方式绑定点击事件

 * 让当前元素的下一个兄弟节点显示

$("#panel h5.head").bind("click",function(){

 $(this).next().show();

});

JQuery的这种事件绑定方式可以很方便的实现 代码和内容分离, html标签和JS代码没有任何掺杂.

 

 * 页面加载完毕之后为idpanel下的class值为headh5元素用原始方式绑定一个click事件,

 * 获取当前节点的下一个兄弟元素$content

 * $coantent元素为的状态为可见状态是$dm.is(":visible")让节点$content节点隐藏.

 * 否则让节点$content节点隐藏.

$("#panel h5.head").bind("click",function(){

    var $dm=$(this).next();

    //判断当前节点是否是显示

    if($dm.is(":visible")){

        $dm.hide(); //让当前节点隐藏

    }else{

        $dm.show(); //让当前节点显示

    }

 

* 页面加载完毕之后,

* idpanel下的class的值为headh5元素用原始方式绑定mouseover事件,

* 让当前节点的下一个兄弟节点显示

* idpanel下的class的值为headh5元素用原始方式绑定mouseout事件,

* 让当前节点的下一个兄弟节点隐藏

$("#panel h5.head").bind("mouseover",function(){

$(this).next().show();

});

 

$("#panel h5.head").bind("mouseout",function(){

$(this).next().hide();

});*/

 

JQuery支持链式操作

$("#panel h5.head").bind("mouseover",function(){

$(this).next().show();

}).bind("mouseout",function(){

$(this).next().hide();

});

 

 

 

 

 

 

 * 等待页面加载完毕之后,

 * idpanel下的class值为headh5元素用简写形式绑定一个mouseover事件,让当前节点的下一个兄弟节点显示

 * idpanel下的class值为headh5元素用简写形式绑定一个mouseout事件,让当前节点的下一个兄弟节点隐藏

   

用简写形式为节点绑定事件

   $("#panel h5.head").mouseover(function(){

       $(this).addClass("highlight");

       $(this).next().show();

   }).mouseout(function(){

    $(this).removeClass("highlight");

       $(this).next().hide();

   })

合成事件

 * 为元素"h5.head"绑定hover事件,

  * 分别让当前节点的兄弟显示和隐藏

  * hover事件是模拟了页面上的鼠标悬停和鼠标移开事件

 $("h5.head").hover(function(){

 $(this).next().show();

  },function(){

        $(this).next().hide();

     });

 

  * 为元素"h5.head"绑定toggle事件,

  * 分别让当前元素的下一个兄弟节点显示和隐藏

  * toggle模拟了鼠标的连续点击事件

 $("h5.head").toggle(function(){

 alert("1111");

 },function(){

  alert("22222");

},function(){

  alert("3333");

 });

 

 $("h5.head").toggle(function(){

    $(this).next().show();

 },function(){

    $(this).next().hide();

 });

 

 

 

 

  *  为元素绑定click事件,让当前节点下一个兄弟节点切换显示$dm.next().toggle();

  *  2种方式实现  面试:toggle2种用法分别代表什么?

$("h5.head").click(function(){

   //如果将toggle当做一个函数来调用的话,可以切换当前节点的显示状态

$(this).next().toggle();

});

 

 

  * 为元素绑定toggle事件.

  *   1.当前节点增加样式.highlight 当前节点的下一个兄弟节点显示

  *   2.为当前节点移除样式.highlight,当前节点的下一个兄弟节点隐藏

   $(".head").toggle(function(){

       $(this).addClass("highlight");

       $(this).next().show();

   },function(){

    $(this).removeClass("highlight");

       $(this).next().hide();

   });

 

});

 

  事件的简写绑定

  基本的合成事件:hover toggle

               toggle2种用法

  面试: window.onloadJquery中的$(document).ready();区别?

       Jquery完善的事件处理机制是什么?   

四、Juery动画

五、JQueryAjax操作

5.1 load

 页面加载完毕为 #send绑定点击事件 $("#resText").load("test.html");

$(function(){

  $("#send").click(function(){

      //加载服务端的test.html页面,将加载到的页面中的信息填充到idresText的区域中

      $("#resText").load("test.html");

  });

});

 

页面加载完为#send绑定点击事件

$("#resText").load("test.html .para",function(resonpseText,textStatus,XMLHttpRequest){

 *   this代表的值,回调函数3个值的含义

 * });;

$(function(){

  $("#send").click(function(){

      //加载服务端的test.html页面,将加载到的页面中的信息填充到idresText的区域中

      //在显示test.html中的数据是,我们只显示class的值为para下的数据  $("#resText").load("test.html .para",function(responseText,textStatus,XMLHttpRequest){

          //alert("TTTTTT");

          //回调函数中第一个变量的代表的是响应到客户端的所有内容

          //alert(responseText);

          

          //代表响应状态

          //alert(textStatus);

          

          //核心对象

          //alert(XMLHttpRequest);

      });

  });

5.2 get/post

 我们通过Ajax和服务端交互数据一般有3种情况,

      1.当交互的数据量很小,可以用字符串的方式来进行交互

      2.数据量稍微多点,数据有明显的格式,例如从ServerClient通过Ajax返回一个学生的信息

        学号,姓名,性别,年龄,电话等. 此时我们可用JSON格式的字符串来进行传递    

Var str=

{"stuNum":"001","stuName":"tom","stuSex":"female","stuAge":18,"stuPhone":"123456"}

        var dt=eval("("+str+")");

      3.数据量比较大,同时数据的格式比较复杂.例如,Server-->Client传递一大堆的学生,

          XML数据来进行传递

 

字符串:

$(function(){

  $("#send").click(function(){  

$.post();--->$.post("");--->$.post("",{});-->$.post("",{},function(a,b,c){}

   $.post("demo1.jsp",{"username":"tom","content":"123"},function(dt){

 $("#resText").html(dt);

 });

     

     $.post("demo1.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){

         $("#resText").html(dt);

     });

     

  });

});

Xml:

 xml格式的数据:数据要求很严格:第一个行必须是指定的内容

$(function(){

  $("#send").click(function(){

 $.post("demo2.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){

         //alert(dt);

         var um=$(dt).find("comments comment").attr("username");

         var up=$(dt).find("comments content").text();

         $("#resText").html(um+up);

     });   

  });

});

Json:

$(function(){

$("#send").click(function(){

$.post("demo3.jsp",{"username":$("#username").val(),"content":$("#content").val()},function(dt){

        //alert(dt);

        //var dd=eval("("+dt+")");

        //$("#resText").html(dd.username+dd.content);

        //PS:有的时候虽然我们明确说明返回来的是JSON格式的字符串.但是在执行alert(dt)的时候看到的不是对象,意味着没有正确转换为JSON对象,我们只需要手动转换一下即可.  

var dd=eval("("+dt+")");    

        $("#resText").html(dt.username+" "+dt.content);

     },"json");

  });

});

5.3Ajax

$(function(){ * $.ajax({url:‘‘,data:{},type:‘‘,dataType:‘json‘,success:function(dt){},error:function(){}});

 *  $.ajaxJQueryajax最底层的一个包装,之前的loadpost,get都可以用.ajax方法来实现

$("#send").click(function(){

    $.ajax({

       url:"demo.jsp",

data:{"username":$("#username").val(),"content":$("#content").val()},

       type:"post",

       dateType:"json",

       success:function(dt){

          //alert(dt);

          var dd=eval("("+dt+")");

          $("#resText").html(dd.username+""+dd.content);

          

       },

       error:function(){}

    });

});

})

六、JQuery插件开发

JQuery的方法有2,一种是类级别的,一种是对象级别的

类级别的方法: $.post();  $.get();

对象级别的方法: $("#id").html();  $(".aa").css("background","red");

那么对应的插件开发也有2,分别为类级别的插件开发和对象级别的插件开发.

如果在开发中你遇到了百年不遇的问题,需要你自己实现插件,参考文档:JQuery插件开发

面试:

  你用过JQuery?

   必须的了.几乎90%的项目中都用到了.

  那么你用过哪些JQuery插件呢?

   jquery.validate.js  jquery.zTree.js

   jquery.date_input.js jquery.jUploader.js

   jquery.zoom.js  

   EasyUI中的各种小插件

(function($){

  //扩展JQuery对象级别的方法

  $.fn.max=function(a,b){

  if(a>b){

return a;

}else{

return b;

}

  }

  $.fn.notice=function(arg){

  alert("notice:"+arg);

  }

})(jQuery);

七、JQuery常用API拓展

Trim:

var str="  abc  ";

alert("@"+str+"@");

var str2=$.trim(str);

alert("@"+str2+"@");

var arr=[100,200,300];

Each:

//JQuery为我们提供的非常方便的遍历数组和节点的方法

$.each(arr,function(index,obj){

   alert(index+" "+obj);

});

ParseJson:

$(function(){

  $("button").click(function(){

     $.post("test.jsp",{},function(dt){

        //JQuery的方式转换JSON字符串,必须保证JSON字符串的格式是

        //标准的JSON格式的字符串,所有的键都要用引号括起来

        var dd=$.parseJSON(dt);

        alert(dd.result+dd.msg);

     });

  });

});

First:

$(function(){

   //$("ul li:eq(0)");

   alert($("li").first().text());

   alert($("li").last().text());

});

 

$.trim(); $.each()  $.parseJSON();

$.find();  $.children();  

$dm.first(); $dm.last(); $dm.slice(start,end);

alert($.inArray(300,arr));

var lis=$("li").toArray();

八、插件的使用

8.1验证插件:

1.页面加载完毕

 * 2.获取#commentForm,调用其validate方法,传递入一个对象

 * 3.validate函数内的对象内放置4个键值对,

 *   键的名字分别为rules,messages,errorElementsuccess

 *    rulesmessages对应的值均为一个对象

 *    errorElement对应的为一个字符串"em" errorElement:‘em‘,代表出错时提示的标签,

 *       可以更换为其他标签,但是对应的样式也必须修改

 *    success对应的为一个函数   

 *      success: function(label) {

 *//label指向上面那个错误提示信息标签em

 *label.text(" ")//清空错误提示消息

 *.addClass("success");//加上自定义的success

 *}   

 * 4.rules对应的值对象的内部也是多个键值对

 *      username:{required: true,minlength: 2},

 *email:{required: true,email: true},

 *url:"url",

 *comment: "required"

 * 5.messages对应的值对象内部也为多个键值对

 *   eg:

 *          username: {required: ‘请输入姓名‘,minlength: ‘请至少输入两个字符‘},

 *email:{required: ‘请输入电子邮件‘,email: ‘请检查电子邮件的格式‘},

 *url: ‘请检查网址的格式‘,

 *comment: ‘请输入您的评论

 *

 *      这个版本为validate插件最终的版本,实现了内容和行为分离,自定义规则的实现

 *

 */  

 $(function(){

    $("#commentForm").validate({

       rules:{

         username:{required: true,minlength: 2},

  email:{required: true,email: true},

  url:"url",

  comment: "required"},

       messages:{

         username: {required: ‘请输入姓名‘,minlength: ‘请至少输入两个字符‘},

 email:{required: ‘请输入电子邮件‘,email: ‘请检查电子邮件的格式‘},

 url: ‘请检查网址的格式‘,

 comment: ‘请输入您的评论

       },

       errorElement:"em",

       success:function(label){

       //清空错误提示消息

       label.text(" ")

  .addClass("success");//加上自定义的success

       }

    });

 });

 

Jquery笔记

标签:1.5   another   错误   contains   data   资源   UI   enable   val   

原文地址:http://www.cnblogs.com/duan2/p/7899928.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!