50个JQuery代码技能让你变成js高手(1)

2012-07-26

50个JQuery代码技巧让你变成js高手(1)1. 创建一个嵌套的过滤器.filter(:not(:has(.selected))) //去掉所

50个JQuery代码技巧让你变成js高手(1)

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

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

2. 重用你的元素查询

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

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

//jQuery 1.4.* includes support for the has method. This method will find  //if a an element contains a certain other element class or whatever it is  //you are looking for and do anything you want to them. $(6. 如何正确使用ToggleClass//Toggle class allows you to add or remove a class  //from an element depending on the presence of that  //class. Where some developers would use:  a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');  //toggleClass allows you to easily do this using  a.toggleClass('blueButton'); 
7. 设置IE指定的功能if ($.browser.msie) { // Internet Explorer is a sadist. } 
8. 使用jQuery来替换一个元素$('#thatdiv').replaceWith('fnuh');
9. 验证一个元素是否为空if ($('#keks').html()) { //Nothing found ;}  
10. 在无序的set中查找一个元素的索引$("ul > li").click(function () {      var index = $(this).prevAll().length;  });
11. 绑定一个函数到一个事件$('#foo').bind('click', function() {    alert('User clicked on "foo."');  }); 
12. 添加HTML到一个元素$(14. 使用过滤器过滤多属性//This precision-based approached can be useful when you use  //lots of similar input elements which have different types  var elements = $('#someid input[type=sometype][value=somevalue]').get(); 
15. 使用jQuery预加载图片jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } };  // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');   
16. 设置任何匹配一个选择器的事件
27. 指定时间后自动隐藏或者关闭元素(1.4支持）//Here's how we used to do it in 1.3.2 using setTimeoutsetTimeout(function() {  $('.mydiv').hide('blind', {}, 500)}, 5000);//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)$(".mydiv").delay(5000).hide('blind', {}, 500);
28. 动态创建元素到DOMvar newgbin1Div = $('');newgbin1Div.attr('id','gbin1.com').appendTo('body');
29. 限制textarea的字符数量jQuery.fn.maxLength = function(max){  this.each(function(){    var type = this.tagName.toLowerCase();    var inputType = this.type? this.type.toLowerCase() : null;    if(type == "input" &amp;&amp; inputType == "text" || inputType == "password"){      //Apply the standard maxLength      this.maxLength = max;    }    else if(type == "textarea"){      this.onkeypress = function(e){        var ob = e || event;        var keyCode = ob.keyCode;        var hasSelection = document.selection? document.selection.createRange().text.length &gt; 0 : this.selectionStart != this.selectionEnd;        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);      };      this.onkeyup = function(){        if(this.value.length &gt; max){          this.value = this.value.substring(0,max);        }      };    }  });};//Usage:$('#gbin1textarea').maxLength(500);
30. 为函数创建一个基本测试用例//Separate tests into modules.module("Module B");test("some other gbin1.com test", function() {  //Specify how many assertions are expected to run within a test.  expect(2);  //A comparison assertion, equivalent to JUnit's assertEquals.  equals( true, false, "failing test" );  equals( true, true, "passing test" );});
31. 使用jQuery克隆元素var cloned = $('#gbin1div').clone();
32. 测试一个元素在jQuery中是否可见if($(element).is(':visible') == 'true') { //The element is Visible }
33. 元素屏幕居中
jQuery.fn.center = function () {  this.css('position','absolute');  this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');  this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;}//Use the above function as: $('#gbin1div').center();
34. 使用特定名字的元素对应的值生成一个数组var arrInputValues = new Array();$("input[name='table[]']").each(function(){     arrInputValues.push($(this).val());});
35. 剔除元素中的HTML(function($) {    $.fn.stripHtml = function() {        var regexp = /&lt;("[^"]*"|'[^']*'|[^'"&gt;])*&gt;/gi;        this.each(function() {            $(this).html(                $(this).html().replace(regexp,"")            );        });        return $(this);    }})(jQuery);//usage:$('p').stripHtml();
36. 使用closest来得到父元素$('#searchBox').closest('div');
37. 使用firebug来记录jQuery事件// Allows chainable logging// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');jQuery.log = jQuery.fn.log = function (msg) {      if (console){         console.log("%s: %o", msg, this);      }      return this;};
38. 点击链接强制弹出新窗口jQuery('a.popup').live('click', function(){  newwindow=window.open($(this).attr('href'),'','height=200,width=150');  if (window.focus) {newwindow.focus()}  return false;});
39. 点击链接强制打开新标签页jQuery('a.newTab').live('click', function(){  newwindow=window.open($(this).href);  jQuery(this).target = "_blank";  return false;});
40. 使用siblings()来处理同类元素// Rather than doing this$('#nav li').click(function(){    $('#nav li').removeClass('active');    $(this).addClass('active');});// Do this instead$('#nav li').click(function(){    $(this).addClass('active')        .siblings().removeClass('active');});
41. 选择或者不选页面上全部复选框var tog = false; // or true if they are checked on load$('a').click(function() {    $("input[type=checkbox]").attr("checked",!tog);    tog = !tog;});
42. 基于输入文字过滤页面元素//If the value of the element matches that of the entered text//it will be returned$('.gbin1Class').filter(function() {    return $(this).attr('value') == $('input#gbin1Id').val() ; })
43. 取得鼠标的X和Y坐标$(document).mousemove(function(e){$(document).ready(function() {$().mousemove(function(e){$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);});});
44. 使得整个列表元素(LI)可点击$("ul li").click(function(){  window.location=$(this).find("a").attr("href"); return false;});<UL><LI><A href="#">GBin1 Link 1</A></LI><LI><A href="#">GBin1 Link 2</A></LI><LI><A href="#">GBin1 Link 3</A></LI><LI><A href="#">GBin1 Link 4</A></LI></UL> 
45. 使用jQuery来解析XMLfunction parseXml(xml) {  //find every Tutorial and print the author  $(xml).find("Tutorial").each(function()  {  $("#output").append($(this).attr("author") + "");  });}
46. 判断一个图片是否加载完全$('#theGBin1Image').attr('src', 'image.jpg').load(function() {alert('This Image Has Been Loaded');});
47. 使用jQuery命名事件//Events can be namespaced like this$('input').bind('blur.validation', function(e){    // ...});//The data method also accept namespaces$('input').data('validation.isValid', true);
48. 判断cookie是否激活或者关闭var dt = new Date();dt.setSeconds(dt.getSeconds() + 60);document.cookie = "cookietest=1; expires=" + dt.toGMTString();var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;if(!cookiesEnabled){  //cookies have not been enabled}
49.? 强制过期cookievar date = new Date();date.setTime(date.getTime() + (x * 60 * 1000));$.cookie('example', 'foo', { expires: date });
50. 使用一个可点击的链接替换页面中所有URL(转载注明出处：[url=http://www.d9732.com]澳门博彩[/url][url=http://www.tdtf.org]易博网[/url])
$.fn.replaceUrl = function() {        var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&amp;%@!-/]))?)/gi;        this.each(function() {            $(this).html(                $(this).html().replace(regexp,'<A href="$1">$1</A>')            );        });        return $(this);    }//usage$('#GBin1div').replaceUrl();

热点排行

JavaScript

50个JQuery代码技能让你变成js高手(1)

1. 创建一个嵌套的过滤器
.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

2. 重用你的元素查询
var allItems = $("div.item"); var keepList = $("div#container1 div.item"); <div>class names: $(formToLookAt + " input:checked").each(function() { keepListkeepList = keepList.filter("." + $(this).attr("name")); });</div>

7. 设置IE指定的功能
if ($.browser.msie) { // Internet Explorer is a sadist. }

8. 使用jQuery来替换一个元素
$('#thatdiv').replaceWith('fnuh');

9. 验证一个元素是否为空
if ($('#keks').html()) { //Nothing found ;}

10. 在无序的set中查找一个元素的索引
$("ul > li").click(function () { var index = $(this).prevAll().length; });

11. 绑定一个函数到一个事件
$('#foo').bind('click', function() { alert('User clicked on "foo."'); });

14. 使用过滤器过滤多属性
//This precision-based approached can be useful when you use //lots of similar input elements which have different types var elements = $('#someid input[type=sometype][value=somevalue]').get();

15. 使用jQuery预加载图片
jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

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

28. 动态创建元素到DOM
var newgbin1Div = $('');newgbin1Div.attr('id','gbin1.com').appendTo('body');

31. 使用jQuery克隆元素
var cloned = $('#gbin1div').clone();

34. 使用特定名字的元素对应的值生成一个数组
var arrInputValues = new Array();$("input[name='table[]']").each(function(){ arrInputValues.push($(this).val());});

35. 剔除元素中的HTML
(function($) { $.fn.stripHtml = function() { var regexp = /<("[^"]"|'[^']'|[^'">])*>/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,"") ); }); return $(this); }})(jQuery);//usage:$('p').stripHtml();

36. 使用closest来得到父元素
$('#searchBox').closest('div');

37. 使用firebug来记录jQuery事件
// Allows chainable logging// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');jQuery.log = jQuery.fn.log = function (msg) { if (console){ console.log("%s: %o", msg, this); } return this;};

38. 点击链接强制弹出新窗口
jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()} return false;});

39. 点击链接强制打开新标签页
jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href); jQuery(this).target = "_blank"; return false;});

40. 使用siblings()来处理同类元素
// Rather than doing this$('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active');});// Do this instead$('#nav li').click(function(){ $(this).addClass('active') .siblings().removeClass('active');});

41. 选择或者不选页面上全部复选框
var tog = false; // or true if they are checked on load$('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog;});

42. 基于输入文字过滤页面元素
//If the value of the element matches that of the entered text//it will be returned$('.gbin1Class').filter(function() { return $(this).attr('value') == $('input#gbin1Id').val() ; })

43. 取得鼠标的X和Y坐标
$(document).mousemove(function(e){$(document).ready(function() {$().mousemove(function(e){$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);});});

44. 使得整个列表元素(LI)可点击
$("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false;});<UL><LI><A href="#">GBin1 Link 1</A></LI><LI><A href="#">GBin1 Link 2</A></LI><LI><A href="#">GBin1 Link 3</A></LI><LI><A href="#">GBin1 Link 4</A></LI></UL>

45. 使用jQuery来解析XML
function parseXml(xml) { //find every Tutorial and print the author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); });}

46. 判断一个图片是否加载完全
$('#theGBin1Image').attr('src', 'image.jpg').load(function() {alert('This Image Has Been Loaded');});

47. 使用jQuery命名事件
//Events can be namespaced like this$('input').bind('blur.validation', function(e){ // ...});//The data method also accept namespaces$('input').data('validation.isValid', true);

48. 判断cookie是否激活或者关闭
var dt = new Date();dt.setSeconds(dt.getSeconds() + 60);document.cookie = "cookietest=1; expires=" + dt.toGMTString();var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;if(!cookiesEnabled){ //cookies have not been enabled}

49.? 强制过期cookie
var date = new Date();date.setTime(date.getTime() + (x * 60 * 1000));$.cookie('example', 'foo', { expires: date });

JavaScript

50个JQuery代码技能让你变成js高手(1)

1. 创建一个嵌套的过滤器.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

2. 重用你的元素查询var allItems = $("div.item"); var keepList = $("div#container1 div.item"); <div>class names: $(formToLookAt + " input:checked").each(function() { keepListkeepList = keepList.filter("." + $(this).attr("name")); });</div>

7. 设置IE指定的功能if ($.browser.msie) { // Internet Explorer is a sadist. }

8. 使用jQuery来替换一个元素$('#thatdiv').replaceWith('fnuh');

9. 验证一个元素是否为空if ($('#keks').html()) { //Nothing found ;}

10. 在无序的set中查找一个元素的索引$("ul > li").click(function () { var index = $(this).prevAll().length; });

11. 绑定一个函数到一个事件$('#foo').bind('click', function() { alert('User clicked on "foo."'); });

14. 使用过滤器过滤多属性//This precision-based approached can be useful when you use //lots of similar input elements which have different types var elements = $('#someid input[type=sometype][value=somevalue]').get();

15. 使用jQuery预加载图片jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

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

28. 动态创建元素到DOMvar newgbin1Div = $('');newgbin1Div.attr('id','gbin1.com').appendTo('body');

31. 使用jQuery克隆元素var cloned = $('#gbin1div').clone();

34. 使用特定名字的元素对应的值生成一个数组var arrInputValues = new Array();$("input[name='table[]']").each(function(){ arrInputValues.push($(this).val());});

35. 剔除元素中的HTML(function($) { $.fn.stripHtml = function() { var regexp = /&lt;("[^"]*"|'[^']*'|[^'"&gt;])*&gt;/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,"") ); }); return $(this); }})(jQuery);//usage:$('p').stripHtml();

36. 使用closest来得到父元素$('#searchBox').closest('div');

37. 使用firebug来记录jQuery事件// Allows chainable logging// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');jQuery.log = jQuery.fn.log = function (msg) { if (console){ console.log("%s: %o", msg, this); } return this;};

38. 点击链接强制弹出新窗口jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()} return false;});

39. 点击链接强制打开新标签页jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href); jQuery(this).target = "_blank"; return false;});

40. 使用siblings()来处理同类元素// Rather than doing this$('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active');});// Do this instead$('#nav li').click(function(){ $(this).addClass('active') .siblings().removeClass('active');});

41. 选择或者不选页面上全部复选框var tog = false; // or true if they are checked on load$('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog;});

42. 基于输入文字过滤页面元素//If the value of the element matches that of the entered text//it will be returned$('.gbin1Class').filter(function() { return $(this).attr('value') == $('input#gbin1Id').val() ; })

43. 取得鼠标的X和Y坐标$(document).mousemove(function(e){$(document).ready(function() {$().mousemove(function(e){$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);});});

44. 使得整个列表元素(LI)可点击$("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false;});<UL><LI><A href="#">GBin1 Link 1</A></LI><LI><A href="#">GBin1 Link 2</A></LI><LI><A href="#">GBin1 Link 3</A></LI><LI><A href="#">GBin1 Link 4</A></LI></UL>

45. 使用jQuery来解析XMLfunction parseXml(xml) { //find every Tutorial and print the author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); });}

46. 判断一个图片是否加载完全$('#theGBin1Image').attr('src', 'image.jpg').load(function() {alert('This Image Has Been Loaded');});

47. 使用jQuery命名事件//Events can be namespaced like this$('input').bind('blur.validation', function(e){ // ...});//The data method also accept namespaces$('input').data('validation.isValid', true);

48. 判断cookie是否激活或者关闭var dt = new Date();dt.setSeconds(dt.getSeconds() + 60);document.cookie = "cookietest=1; expires=" + dt.toGMTString();var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;if(!cookiesEnabled){ //cookies have not been enabled}

49.? 强制过期cookievar date = new Date();date.setTime(date.getTime() + (x * 60 * 1000));$.cookie('example', 'foo', { expires: date });

1. 创建一个嵌套的过滤器
.filter(":not(:has(.selected))") //去掉所有不包含class为.selected的元素

2. 重用你的元素查询
var allItems = $("div.item"); var keepList = $("div#container1 div.item"); <div>class names: $(formToLookAt + " input:checked").each(function() { keepListkeepList = keepList.filter("." + $(this).attr("name")); });</div>

7. 设置IE指定的功能
if ($.browser.msie) { // Internet Explorer is a sadist. }

8. 使用jQuery来替换一个元素
$('#thatdiv').replaceWith('fnuh');

9. 验证一个元素是否为空
if ($('#keks').html()) { //Nothing found ;}

10. 在无序的set中查找一个元素的索引
$("ul > li").click(function () { var index = $(this).prevAll().length; });

11. 绑定一个函数到一个事件
$('#foo').bind('click', function() { alert('User clicked on "foo."'); });

14. 使用过滤器过滤多属性
//This precision-based approached can be useful when you use //lots of similar input elements which have different types var elements = $('#someid input[type=sometype][value=somevalue]').get();

15. 使用jQuery预加载图片
jQuery.preloadImages = function() { for(var i = 0; i').attr('src', arguments[i]); } }; // Usage $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');

28. 动态创建元素到DOM
var newgbin1Div = $('');newgbin1Div.attr('id','gbin1.com').appendTo('body');

31. 使用jQuery克隆元素
var cloned = $('#gbin1div').clone();

34. 使用特定名字的元素对应的值生成一个数组
var arrInputValues = new Array();$("input[name='table[]']").each(function(){ arrInputValues.push($(this).val());});

35. 剔除元素中的HTML
(function($) { $.fn.stripHtml = function() { var regexp = /<("[^"]"|'[^']'|[^'">])*>/gi; this.each(function() { $(this).html( $(this).html().replace(regexp,"") ); }); return $(this); }})(jQuery);//usage:$('p').stripHtml();

36. 使用closest来得到父元素
$('#searchBox').closest('div');

37. 使用firebug来记录jQuery事件
// Allows chainable logging// Usage: $('#someDiv').hide().log('div hidden').addClass('someClass');jQuery.log = jQuery.fn.log = function (msg) { if (console){ console.log("%s: %o", msg, this); } return this;};

38. 点击链接强制弹出新窗口
jQuery('a.popup').live('click', function(){ newwindow=window.open($(this).attr('href'),'','height=200,width=150'); if (window.focus) {newwindow.focus()} return false;});

39. 点击链接强制打开新标签页
jQuery('a.newTab').live('click', function(){ newwindow=window.open($(this).href); jQuery(this).target = "_blank"; return false;});

40. 使用siblings()来处理同类元素
// Rather than doing this$('#nav li').click(function(){ $('#nav li').removeClass('active'); $(this).addClass('active');});// Do this instead$('#nav li').click(function(){ $(this).addClass('active') .siblings().removeClass('active');});

41. 选择或者不选页面上全部复选框
var tog = false; // or true if they are checked on load$('a').click(function() { $("input[type=checkbox]").attr("checked",!tog); tog = !tog;});

42. 基于输入文字过滤页面元素
//If the value of the element matches that of the entered text//it will be returned$('.gbin1Class').filter(function() { return $(this).attr('value') == $('input#gbin1Id').val() ; })

43. 取得鼠标的X和Y坐标
$(document).mousemove(function(e){$(document).ready(function() {$().mousemove(function(e){$('#XY').html("Gbin1 X Axis : " + e.pageX + " | Gbin1 Y Axis " + e.pageY);});});

44. 使得整个列表元素(LI)可点击
$("ul li").click(function(){ window.location=$(this).find("a").attr("href"); return false;});<UL><LI><A href="#">GBin1 Link 1</A></LI><LI><A href="#">GBin1 Link 2</A></LI><LI><A href="#">GBin1 Link 3</A></LI><LI><A href="#">GBin1 Link 4</A></LI></UL>

45. 使用jQuery来解析XML
function parseXml(xml) { //find every Tutorial and print the author $(xml).find("Tutorial").each(function() { $("#output").append($(this).attr("author") + ""); });}

46. 判断一个图片是否加载完全
$('#theGBin1Image').attr('src', 'image.jpg').load(function() {alert('This Image Has Been Loaded');});

47. 使用jQuery命名事件
//Events can be namespaced like this$('input').bind('blur.validation', function(e){ // ...});//The data method also accept namespaces$('input').data('validation.isValid', true);

48. 判断cookie是否激活或者关闭
var dt = new Date();dt.setSeconds(dt.getSeconds() + 60);document.cookie = "cookietest=1; expires=" + dt.toGMTString();var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;if(!cookiesEnabled){ //cookies have not been enabled}

49.? 强制过期cookie
var date = new Date();date.setTime(date.getTime() + (x * 60 * 1000));$.cookie('example', 'foo', { expires: date });