程序博客网 > js设置时间间隔

60个很实用的jQuery代码开发技巧收集

来源：互联网 发布：js设置时间间隔 编辑：程序博客网 时间：2024/04/30 19:40

偶然在网上看到这些不错的jQuery代码开发技巧。原文收集了30个，另外查找的时候发现了还有20个。加上另外十个实用的jQuery代码片段，共60个代码技巧，收集在一起分享给大家。

60个很实用的jQuery代码开发技巧收集

这些jQuery代码实用性比较强，有些忘了的地方可以现学现用。现在暂时没有用到以后应该会用到，觉得不错可以收藏一下。当然，觉得还不过瘾的可以去看看：

20款2014年最佳的免费jQuery插件

分享30个非常精美的jQuery Lightbox图片效果插件

如何用CSS3和jQuery创建一个动态的粘性头部(sticky header)

1. 创建一个嵌套的过滤器

  1. .filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

2. 重用你的元素查询

  1. var allItems = $("div.item");  
  2. var keepList = $("div#container1 div.item"); 
  3. <div>class names: 
  4. $(formToLookAt + " input:checked").each(function() {     keepListkeepList = keepList.filter("." + $(this).attr("name")); });
  5. </div>

3. 使用has()来判断一个元素是否包含特定的class或者元素

  1. //jQuery 1.4.* includes support for the has method. This method will find  
  2. //if a an element contains a certain other element class or whatever it is  
  3. //you are looking for and do anything you want to them. 
  4. $("input").has(".email").addClass("email_icon");

4. 使用jQuery切换样式

  1. //Look for the media-type you wish to switch then set the href to your new style sheet  
  2. $('link[media='screen']').attr('href', 'Alternative.css');

5. 限制选择的区域

  1. //Where possible, pre-fix your class names with a tag name  
  2. //so that jQuery doesn't have to spend more time searching  
  3. //for the element you're after. Also remember that anything  
  4. //you can do to be more specific about where the element is  
  5. //on your page will cut down on execution/search times  
  6. var in_stock = $('#shopping_cart_items input.is_in_stock');
  1. <ul id="shopping_cart_items">  
  2. <li>  
  3. <input value="Item-X" name="item" class="is_in_stock" type="radio"> Item X</li>  
  4. <li>  
  5. <input value="Item-Y" name="item" class="3-5_days" type="radio"> Item Y</li>  
  6. <li>  
  7. <input value="Item-Z" name="item" class="unknown" type="radio"> Item Z</li>  
  8. </ul>

6. 如何正确使用ToggleClass

  1. //Toggle class allows you to add or remove a class  
  2. //from an element depending on the presence of that  
  3. //class. Where some developers would use:  
  4. a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');  
  5. //toggleClass allows you to easily do this using  
  6. a.toggleClass('blueButton');

7. 设置IE指定的功能

  1. if ($.browser.msie) { // Internet Explorer is a sadist. }

8. 使用jQuery来替换一个元素

  1. $('#thatdiv').replaceWith('fnuh');

9. 验证一个元素是否为空

  1. if ($('#keks').html()) { //Nothing found ;}

10. 在无序的set中查找一个元素的索引

  1. $("ul > li").click(function () {  
  2.     var index = $(this).prevAll().length;  
  3. });

11. 绑定一个函数到一个事件

  1. $('#foo').bind('click', function() {  
  2.   alert('User clicked on "foo."');  
  3. });

12. 添加HTML到一个元素

  1. $('#lal').append('sometext');

13. 创建元素时使用对象来定义属性

  1. var e = $("", { href: "#", class: "a-class another-class", title: "..." });

14. 使用过滤器过滤多属性

  1. //This precision-based approached can be useful when you use  
  2. //lots of similar input elements which have different types  
  3. var elements = $('#someid input[type=sometype][value=somevalue]').get();

15. 使用jQuery预加载图片

  1. jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };  
  2. // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

16. 设置任何匹配一个选择器的事件处理程序

  1. $('button.someClass').live('click', someFunction);
  2.   //Note that in jQuery 1.4.2, the delegate and undelegate options have been
  3.   //introduced to replace live as they offer better support for context
  4.     //For example, in terms of a table where before you would use..
  5.   // .live()
  6.   $("table").each(function(){
  7.     $("td", this).live("hover", function(){
  8.     $(this).toggleClass("hover");
  9.     });
  10.   });
  11.   //Now use..
  12.   $("table").delegate("td", "hover", function(){
  13.   $(this).toggleClass("hover");
  14. });

17. 找到被选择到的选项(option)元素

  1. $('#someElement').find('option:selected');

18. 隐藏包含特定值的元素

  1. $("p.value:contains('thetextvalue')").hide();

19. 自动的滚动到页面特定区域

  1. jQuery.fn.autoscroll = function(selector) {
  2.   $('html,body').animate(
  3.     {scrollTop: $(selector).offset().top},
  4.     500
  5.   );
  6. }
  7. //Then to scroll to the class/area you wish to get to like this:
  8. $('.area_name').autoscroll();

20. 检测各种浏览器

  1. Detect Safari (if( $.browser.safari)),
  2. Detect IE6 and over (if ($.browser.msie &amp;&amp; $.browser.version &gt; 6 )),
  3. Detect IE6 and below (if ($.browser.msie &amp;&amp; $.browser.version &lt;= 6 )),
  4. Detect FireFox 2 and above (if ($.browser.mozilla &amp;&amp; $.browser.version &gt;= '1.8' ))

21. 替换字符串中的单词

  1. var el = $('#id');
  2. el.html(el.html().replace(/word/ig, ''));

22. 关闭右键的菜单

  1. $(document).bind('contextmenu',function(e){ return false; });

23. 定义一个定制的选择器

  1. $.expr[':'].mycustomselector = function(element, index, meta, stack){
  2. // element- is a DOM element
  3. // index - the current loop index in stack
  4. // meta - meta data about your selector
  5. // stack - stack of all elements to loop
  6. // Return true to include current element
  7. // Return false to explude current element
  8. };
  9. // Custom Selector usage:
  10. $('.someClasses:test').doSomething();

24. 判断一个元素是否存在

  1. if ($('#someDiv').length) {//hooray!!! it exists...}

25. 使用jQuery判断鼠标的左右键点击

  1. $("#someelement").live('click', function(e) {
  2.     if( (!$.browser.msie &amp;&amp; e.button == 0) || ($.browser.msie &amp;&amp; e.button == 1) ) {
  3.         alert("Left Mouse Button Clicked");
  4.     }
  5.     else if(e.button == 2)
  6.         alert("Right Mouse Button Clicked");
  7. });

 

26. 显示或者删除输入框的缺省值

  1. //This snippet will show you how to keep a default value
  2. //in a text input field for when a user hasn't entered in
  3. //a value to replace it
  4. swap_val = [];
  5. $(".swap").each(function(i){
  6.     swap_val[i] = $(this).val();
  7.     $(this).focusin(function(){
  8.         if ($(this).val() == swap_val[i]) {
  9.             $(this).val("");
  10.         }
  11.     }).focusout(function(){
  12.         if ($.trim($(this).val()) == "") {
  13.             $(this).val(swap_val[i]);
  14.         }
  15.     });
  16. });
  1. <INPUT class=swap value="Enter Username here.." type=text>

27. 指定时间后自动隐藏或者关闭元素(1.4支持）

  1. //Here's how we used to do it in 1.3.2 using setTimeout
  2. setTimeout(function() {
  3.   $('.mydiv').hide('blind', {}, 500)
  4. }, 5000);
  5. //And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
  6. $(".mydiv").delay(5000).hide('blind', {}, 500);

28. 动态创建元素到DOM

  1. var newgbin1Div = $('');
  2. newgbin1Div.attr('id','gbin1.com').appendTo('body');

29. 限制textarea的字符数量

  1. jQuery.fn.maxLength = function(max){
  2.   this.each(function(){
  3.     var type = this.tagName.toLowerCase();
  4.     var inputType = this.type? this.type.toLowerCase() : null;
  5.     if(type == "input" &amp;&amp; inputType == "text" || inputType == "password"){
  6.       //Apply the standard maxLength
  7.       this.maxLength = max;
  8.     }
  9.     else if(type == "textarea"){
  10.       this.onkeypress = function(e){
  11.         var ob = e || event;
  12.         var keyCode = ob.keyCode;
  13.         var hasSelection = document.selection? document.selection.createRange().text.length &gt; 0 : this.selectionStart != this.selectionEnd;
  14.         return !(this.value.length &gt;= max &amp;&amp; (keyCode &gt; 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) &amp;&amp; !ob.ctrlKey &amp;&amp; !ob.altKey &amp;&amp; !hasSelection);
  15.       };
  16.       this.onkeyup = function(){
  17.         if(this.value.length &gt; max){
  18.           this.value = this.value.substring(0,max);
  19.         }
  20.       };
  21.     }
  22.   });
  23. };
  24. //Usage:
  25. $('#gbin1textarea').maxLength(500);

30. 为函数创建一个基本测试用例

  1. //Separate tests into modules.
  2. module("Module B");
  3. test("some other gbin1.com test", function() {
  4.   //Specify how many assertions are expected to run within a test.
  5.   expect(2);
  6.   //A comparison assertion, equivalent to JUnit's assertEquals.
  7.   equals( true, false, "failing test" );
  8.   equals( true, true, "passing test" );
  9. });

31. 使用jQuery克隆元素

  1. var cloned = $('#gbin1div').clone();

32. 测试一个元素在jQuery中是否可见

  1. if($(element).is(':visible') == 'true') { //The element is Visible }

33. 元素屏幕居中

  1. jQuery.fn.center = function () {
  2.   this.css('position','absolute');
  3.   this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
  4.   this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;
  5. }
  6. //Use the above function as: $('#gbin1div').center();

34. 使用特定名字的元素对应的值生成一个数组

  1. var arrInputValues = new Array();
  2. $("input[name='table[]']").each(function(){
  3.      arrInputValues.push($(this).val());
  4. });

35. 剔除元素中的HTML

  1. (function($) {
  2.     $.fn.stripHtml = function() {
  3.         var regexp = /&lt;("[^"]*"|'[^']*'|[^'"&gt;])*&gt;/gi;
  4.         this.each(function() {
  5.             $(this).html(
  6.                 $(this).html().replace(regexp,"")
  7.             );
  8.         });
  9.         return $(this);
  10.     }
  11. })(jQuery);
  12. //usage:
  13. $('p').stripHtml();

36. 使用closest来得到父元素

  1. $('#searchBox').closest('div');

37. 使用firebug来记录jQuery事件

  1. // Allows chainable logging
  2. // Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');
  3. jQuery.log = jQuery.fn.log = function (msg) {
  4.       if (console){
  5.          console.log("%s: %o", msg, this);
  6.       }
  7.       return this;
  8. };

38. 点击链接强制弹出新窗口

  1. jQuery('a.popup').live('click', function(){
  2.   newwindow=window.open($(this).attr('href'),'','height=200,width=150');
  3.   if (window.focus) {newwindow.focus()}
  4.   return false;
  5. });

39. 点击链接强制打开新标签页

  1. jQuery('a.newTab').live('click', function(){
  2.   newwindow=window.open($(this).href);
  3.   jQuery(this).target = "_blank";
  4.   return false;
  5. });

40. 使用siblings()来处理同类元素

  1. // Rather than doing this
  2. $('#nav li').click(function(){
  3.     $('#nav li').removeClass('active');
  4.     $(this).addClass('active');
  5. });
  6. // Do this instead
  7. $('#nav li').click(function(){
  8.     $(this).addClass('active')
  9.         .siblings().removeClass('active');
  10. });

41. 选择或者不选页面上全部复选框

  1. var tog = false; // or true if they are checked on load
  2. $('a').click(function() {
  3.     $("input[type=checkbox]").attr("checked",!tog);
  4.     tog = !tog;
  5. });

42. 基于输入文字过滤页面元素

  1. //If the value of the element matches that of the entered text
  2. //it will be returned
  3. $('.gbin1Class').filter(function() {
  4.     return $(this).attr('value') == $('input#gbin1Id').val() ;
  5.  })

43. 取得鼠标的X和Y坐标

  1. $(document).mousemove(function(e){
  2. $(document).ready(function() {
  3. $().mousemove(function(e){
  4. $('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);
  5. });
  6. });

44. 使得整个列表元素(LI)可点击

  1. $("ul li").click(function(){
  2.   window.location=$(this).find("a").attr("href"); return false;
  3. });
  1. <UL>
  2. <LI><A href="#">GBin1 Link 1</A></LI>
  3. <LI><A href="#">GBin1 Link 2</A></LI>
  4. <LI><A href="#">GBin1 Link 3</A></LI>
  5. <LI><A href="#">GBin1 Link 4</A></LI>
  6. </UL>

45. 使用jQuery来解析XML

  1. function parseXml(xml) {
  2.   //find every Tutorial and print the author
  3.   $(xml).find("Tutorial").each(function()
  4.   {
  5.   $("#output").append($(this).attr("author") + "");
  6.   });
  7. }

46. 判断一个图片是否加载完全

  1. $('#theGBin1Image').attr('src', 'image.jpg').load(function() {
  2. alert('This Image Has Been Loaded');
  3. });

47. 使用jQuery命名事件

  1. //Events can be namespaced like this
  2. $('input').bind('blur.validation', function(e){
  3.     // ...
  4. });
  5. //The data method also accept namespaces
  6. $('input').data('validation.isValid', true);

48. 判断cookie是否激活或者关闭

  1. var dt = new Date();
  2. dt.setSeconds(dt.getSeconds() + 60);
  3. document.cookie = "cookietest=1; expires=" + dt.toGMTString();
  4. var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
  5. if(!cookiesEnabled)
  6. {
  7.   //cookies have not been enabled
  8. }

49.  强制过期cookie

  1. var date = new Date();
  2. date.setTime(date.getTime() + (x * 60 * 1000));
  3. $.cookie('example', 'foo', { expires: date });

50. 使用一个可点击的链接替换页面中所有URL

  1. $.fn.replaceUrl = function() {
  2.         var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&amp;%@!-/]))?)/gi;
  3.         this.each(function() {
  4.             $(this).html(
  5.                 $(this).html().replace(regexp,'<A href="$1">$1</A>')
  6.             );
  7.         });
  8.         return $(this);
  9.     }
  10. //usage
  11. $('#GBin1div').replaceUrl();

51: 在表单中禁用“回车键”

大家可能在表单的操作中需要防止用户意外的提交表单，那么下面这段代码肯定非常有帮助：

  1. $("#form").keypress(function(e) {
  2.   if (e.which == 13) {
  3.     return false;
  4.   }
  5. });

52: 清除所有的表单数据

可能针对不同的表单形式，你需要调用不同类型的清楚方法，不过使用下面这个现成方法，绝对能让你省不少功夫。

  1. function clearForm(form) {
  2.   // iterate over all of the inputs for the form
  3.   // element that was passed in
  4.   $(':input', form).each(function() {
  5.     var type = this.type;
  6.     var tag = this.tagName.toLowerCase(); // normalize case
  7.     // it's ok to reset the value attr of text inputs,
  8.     // password inputs, and textareas
  9.     if (type == 'text' || type == 'password' || tag == 'textarea')
  10.       this.value = "";
  11.     // checkboxes and radios need to have their checked state cleared
  12.     // but should *not* have their 'value' changed
  13.     else if (type == 'checkbox' || type == 'radio')
  14.       this.checked = false;
  15.     // select elements need to have their 'selectedIndex' property set to -1
  16.     // (this works for both single and multiple select elements)
  17.     else if (tag == 'select')
  18.       this.selectedIndex = -1;
  19.   });
  20. };

53: 将表单中的按钮禁用

下面的代码对于ajax操作非常有用，你可以有效的避免用户多次提交数据，个人也经常使用：

禁用按钮：

  1. $("#somebutton").attr("disabled", true);

启动按钮：

  1. $("#submit-button").removeAttr("disabled");

可能大家往往会使用.attr(‘disabled’,false);，不过这是不正确的调用。

54: 输入内容后启用递交按钮

这个代码和上面类似，都属于帮助用户控制表单递交按钮。使用这段代码后，递交按钮只有在用户输入指定内容后才可以启动。

  1. $('#username').keyup(function() {
  2.     $('#submit').attr('disabled', !$('#username').val()); 
  3. });

55: 禁止多次递交表单

多次递交表单对于web应用来说是个比较头疼的问题，下面的代码能够很好的帮助你解决这个问题：

  1. $(document).ready(function() {
  2.   $('form').submit(function() {
  3.     if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {
  4.       jQuery.data(this, "disabledOnSubmit", { submited: true });
  5.       $('input[type=submit], input[type=button]', this).each(function() {
  6.         $(this).attr("disabled", "disabled");
  7.       });
  8.       return true;
  9.     }
  10.     else
  11.     {
  12.       return false;
  13.     }
  14.   });
  15. });

56: 高亮显示目前聚焦的输入框标示

有时候你需要提示用户目前操作的输入框，你可以使用下面代码高亮显示标示：

  1. $("form :input").focus(function() {
  2.   $("label[for='" + this.id + "']").addClass("labelfocus");
  3. }).blur(function() {
  4.   $("label").removeClass("labelfocus");
  5. });

57: 动态方式添加表单元素

这个方法可以帮助你动态的添加表单中的元素，比如，input等：

  1. //change event on password1 field to prompt new input
  2. $('#password1').change(function() {
  3.         //dynamically create new input and insert after password1
  4.         $("#password1").append("<input type='text' name='password2' id='password2' />");
  5. });

58: 自动将数据导入selectbox中

下面代码能够使用ajax数据自动生成选择框的内容

  1. $(function(){
  2.   $("select#ctlJob").change(function(){
  3.     $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
  4.       var options = '';
  5.       for (var i = 0; i < j.length; i++) {
  6.         options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
  7.       }
  8.       $("select#ctlPerson").html(options);
  9.     })
  10.   })
  11. })

59: 判断一个复选框是否被选中

代码很简单，如下：

  1. $('#checkBox').attr('checked');

60: 使用代码来递交表单

代码很简单，如下：

  1. $("#myform").submit();

希望大家觉得这些jQuery代码会对你的开发有帮助，如果你也有类似的jQuery代码或者jQuery插件，欢迎一起分享！

注：部分代码原文应该是英文的。但是看见转的几个链接已经打不开了。所以就这样吧。

转载请注明：欲思博客 » 60个很实用的jQuery代码开发技巧收集

0 0
js设置时间间隔 js设置时间间隔
原创粉丝点击
热门IT博客
android ndk linux armandroid ndk linux arm
大话数据库在线大话数据库在线
安全座椅选择 知乎
qq飞车浮宫魅影数据
广告设计软件免费下载
linux yum使用缓存安装
电力猫网络稳定吗
linux查看端口是否开放
事业单位网络监控
必读国学经典知乎
mysql删除表某字段
java new thread
mac ps2017cc怎么破解
js斗地主源码
ubuntu下php环境搭建
网站流量统计软件
淘宝二手市场发布
xvideos软件中文版下载
linux cp cannot stat
使用ant编译java文件
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 短发怎么盘头发简单好看 中等头发怎么扎又简单又漂亮 编头发花样图片 编头发步骤图片 儿童女孩扎头发大全 女孩扎头发的方法图片 披头发的发型图解 披头发的发型 小学生扎头发简单漂亮 夏季扎头发简单发型 圆脸扎头发好看图解 宝宝扎头发大全 短发盘头发简单好看的步骤 斜编头发的步骤及图片 半扎头发的方法100种 花式扎头发 扎头发的方法100种好看又简单 编头发步骤 花样头发编法图片 头发的编法 散着头发怎么弄好看图解 头发编发步骤图解法 自己编头发 编头发步骤大全图解 儿童编头发 头发编织的各种方法和图片 短发扎头发好看图解 长头发怎样扎好看图片 头发大全 梳头发图片 梳头发方法 各种梳头发的方法 梳头发时掉头发怎么办 头发一梳就掉好多 简单的梳头发的方法 梳头发的方法有哪些 头发一梳就掉怎么办 头发往后梳 女孩梳头发的方法 头发梳直要多少钱 女孩梳头发

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里