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

【推荐】50个JQuery代码技巧让你变成js高手(2)

?

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

//This snippet will show you how to keep a default value//in a text input field for when a user hasn't entered in//a value to replace itswap_val = [];$(".swap").each(function(i){    swap_val[i] = $(this).val();    $(this).focusin(function(){        if ($(this).val() == swap_val[i]) {            $(this).val("");        }    }).focusout(function(){        if ($.trim($(this).val()) == "") {            $(this).val(swap_val[i]);        }    });});

<INPUT class=swap value="Enter Username here.." type=text> 

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. 动态创建元素到DOM

var 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" && 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 > 0 : this.selectionStart != this.selectionEnd;        return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);      };      this.onkeyup = function(){        if(this.value.length > 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 = /<("[^"]*"|'[^']*'|[^'">])*>/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 });

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(); 

?