JQuery总结

大 | 中 | 小
[不指定 2014/09/16 16:32 | by 刘新修 ]

1. 利用JQuery中如何判断元素中是否有文本

JavaScript代码
  1. <script type="text/javascript">  
  2. $(function(){  
  3.        $("body").each(function(){  
  4.               if($(this).find("h1").text().trim()==""){  
  5.                      $(this).css("background","blue");  
  6.               }else{  
  7.                      $(this).css("background","red");  
  8.               }                
  9.        });                                
  10. });  
  11. </script>  

注：//trim()方法是去空格，$.trim()函数删除提供字符串的所有换行符,空格（包括非中断空格

2. 判断ul标签下是否有li元素

JavaScript代码
  1. var jqObj = $(this);  
  2. if(!jqObj.has('li').length){  
  3. jqObj.hide();  
  4. }  

3. 遍历/判断子节点（带某些参数子节点）的个数，如果有少于1的给出提示.

JavaScript代码
  1. $("div[id^=div]").each(function(){  
  2.     //alert($(this).find(".subclass").children('ul').size());  
  3.     var lili=$(this).find(".subclass").children('ul').size();  
  4.     //alert(lili)  
  5.     if(lili<1){  
  6.      alert("ddd")  
  7.     }  
  8. });  
XML/HTML代码
  1. <div id="div1" class="topclass"><ul><li></li></ul><div class="subclass"><ul><li></li></ul><ul><li></li></ul></div></div>  
  2. <div id="div2" class="topclass"><ul><li></li></ul><div class="subclass"><ul><li></li></ul></div></div>  

YY项目中的例子：

JavaScript代码
  1. //限制每提最少选择一个答案  
  2. var stop=true;  
  3. $(".lisbox").each(function () {  
  4.     //alert($(this).find(".subclass").children('ul').size());  
  5.     var lili = $(this).find("input:checked").length;  
  6.     //alert(lili)  
  7.     if (lili < 1) {  
  8.       stop=false;  
  9.     }  
  10. });  
  11.   
  12. if(!stop){ alert("每个调查最少选择一个答案哦～");return false; }  
  13.   
  14. $.ajax({ ... })  

4. 检查某个元素是不是再另外一个元素中？

XML/HTML代码
  1. <ul><li></li></ul>  
  2.   
  3. <script>  
  4.   $("ul").append("<li>" + ($("ul").has("li").length ? "yes__" : "no_") + "</li>");  
  5.   $("ul").has("li").addClass("full");  
  6. </script>  

5. 遍历保存所有Input内地值

JavaScript代码
  1. <script>  
  2.     $("p").append( $("input").map(function(){  
  3.       return $(this).val();  
  4.     }).get().join(", ") );  
  5. </script>  
  6. ====================================================  
  7. Values: John, password, http://qq.com/  

6.邮件订阅提交

JavaScript代码
  1. <script type="text/javascript">  
  2. function subscribe(){  
  3.     $.post('/ebapi/subscribe.php', {"ispub":1, "email":$("input[name=email]").val()}, function(jsondata){  
  4.     if (jsondata.code == 1){  
  5.        $('.bu_success').css("display", "block");  
  6.        $('.bu_error').css("display", "none");  
  7.        $('.bu_success').html('订阅成功');  
  8.     }else{  
  9.        $('.bu_success').css("display", "none");  
  10.        $('.bu_error').css("display", "block");  
  11.        if (jsondata.code == 2)  
  12.          $('.bu_error').html('您已经订阅了，不需要重复订阅');  
  13.        else if (jsondata.code == -1)  
  14.          $('.bu_error').html('邮箱格式错误，请重新输入');  
  15.        else if (jsondata.code == 0)  
  16.          $('.bu_error').html('订阅失败');    
  17.     }  
  18.    }, 'json');  
  19. }  
  20. $('input[name="email"]').bind('keypress', function(event){  
  21.     if (event.keyCode == '13'){  
  22.         subscribe();  
  23.     }  
  24. });  
  25. $('#subscribeBtn').bind('click', function(){  
  26.    subscribe();  
  27. });  
  28. </script>  
  29. *********************************************  
  30. 返回Json格式:｛code: 1｝  

7.通用Tab选项卡

JavaScript代码
  1. //tab标签切换  
  2. var $tabcon=$(".tabbox .tabcon .tcon");  
  3. var $tabconliN=$(".tabbox li");  
  4. var $tabconliH=$(".tabbox li[name='tabH']");  
  5. var $tabconliC=$(".tabbox li[name='tabC']");  
  6.   
  7. $tabconliH.hover(function(){  
  8.     $(this).siblings().removeClass("current").addClass("current");  
  9.     var index = $tabconliN.index(this);  
  10.     $tabcon.eq(index).show().siblings('.tcon').hide();  
  11. });  
  12. $tabconliC.click(function(){  
  13.     $(this).siblings().removeClass("current").addClass("current");  
  14.     var index = $tabconliN.index(this);  
  15.     $tabcon.eq(index).show().siblings('.tcon').hide();  
  16. });  
XML/HTML代码
  1. <div class="tabbox">  
  2.     <div class="tit">  
  3.         <ul>  
  4.             <li name="tabC">aaaaaaaaaa</li>  
  5.             <li name="tabC">bbbbbbbbbb</li>  
  6.             <li name="tabC">cccccccccc</li>  
  7.         </ul>  
  8.     </div>  
  9.     <div class="tabcon">  
  10.         <div class="tcon">1111</div>  
  11.         <div class="tcon">2222</div>  
  12.         <div class="tcon">3333</div>  
  13.     </div>  
  14. </div><!-- tabbox -->  

8. 提交问卷实例（抓取页面中所有被选中的Input_value值，及对应的问题ID，输出Json）

JavaScript代码
  1. function showVal(){  
  2. var val=$('.lisbox').map(function(){  
  3.     var pid=$(this).attr('id');  
  4.     var val=$('input:checked',this).map(function(){  
  5.         return $(this).val();      
  6.     }).get();  
  7.     var obj={key:pid,id:val};  
  8.     return obj;  
  9. }).get();  
  10. alert(JSON.stringify(val));  
XML/HTML代码
  1. <div class="lisbox" id="120">  
  2. <div class="lisT l-h-30 co30">1.你从哪里知道的我们的？</div>  
  3. <input type="radio" name="an0" value="316" id="316"><label for="316">电视广告</label>    
  4. <input type="radio" name="an0" value="318" id="318"><label for="318">地铁公交广告</label>  
  5. <input type="radio" name="an0" value="317" id="317"><label for="317">互联网文字广告</label>  
  6. <input type="radio" name="an0" value="315" id="315"><label for="315">互联网视频广告</label>  
  7. <input type="radio" name="an0" value="327" id="327"><label for="327">亲朋好友介绍</label>  
  8. </div>  
  9.   
  10. <div class="lisbox" id="120">  
  11. <div class="lisT l-h-30 co30">2.你从哪里知道的我们的？</div>  
  12. <input type="checkbox" name="an0" value="316" id="316"><label for="316">电视广告</label>    
  13. <input type="checkbox" name="an0" value="318" id="318"><label for="318">地铁公交广告</label>  
  14. <input type="checkbox" name="an0" value="317" id="317"><label for="317">互联网文字广告</label>  
  15. <input type="checkbox" name="an0" value="315" id="315"><label for="315">互联网视频广告</label>  
  16. <input type="checkbox" name="an0" value="327" id="327"><label for="327">亲朋好友介绍</label>  
  17. </div>  
  18. <input type="submit" onClick="showVal()">  

9.JS定期器

XML/HTML代码
  1. clearTimeout()和clearInterval() ：  
  2. JS里设定延时：  
  3. 使用SetInterval和设定延时函数setTimeout 很类似。  
  4. setTimeout 运用在延迟一段时间，再进行某项操作。  
  5. setTimeout("function",time) 设置一个超时对象  
  6. setInterval("function",time) //设置一个超时对象  
  7. SetInterval为自动重复，setTimeout不会重复。  
  8. clearTimeout(对象) 清除已设置的setTimeout对象  
  9. clearInterval(对象) 清除已设置的setInterval对象  

 10.JQ(Ajax)实例

JavaScript代码
  1. $("#bt1").click(function(){    
  2.     var name =$("#tx1").val();    
  3.     var URL = "../validate?name="+name+"&date="+new Date().getTime();    
  4.     $.ajax({    
  5.         type:"GET",    
  6.         url:URL,    
  7.         dataType:"xml",    
  8.         success:function(msg){    
  9.             alert(msg);    
  10.             var jqueryObj =$(msg) ;//把后台传来的对象转为JQuery对象    
  11.             alert(jqueryObj);    
  12.             var content = jqueryObj.text();    
  13.             $("#sp1").text(content);    
  14.                 
  15.         }    
  16.     });    
  17. })  

 

 

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(5192)