26个Jquery使用小技巧

前段时间发布了
Jquery
类库
1.4
版本，使用者也越来越多，为了方便大家对
Jquery
的使用，下面列出了一些
Jquery
使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的
X
值
Y
值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于
Jquery
集合中、使
DIV
可点击、克隆对象、使元素居中、计算元素个数、使用
Google
主机上的
Jquery
类库、禁用
Jquery
效果、解决
Jquery
类库与其他
Javascript
类库冲突问题。具体如下：

1.
禁止右键点击

view plaincopy to clipboardprint?1.$(document).ready(
function(){2.$(document).bind(
"contextmenu",
function(e){3.returnfalse;4.});5.});

2.
隐藏搜索文本框文字[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$(
"input.text1").val(
"Enter your search text here");3.textFill($(
'input.text1'));4.});5.6.functiontextFill(input){
//input focus text function7.varoriginalvalue = input.val();8.input.focus(
function(){9.if( $.trim(input.val()) == originalvalue ){ input.val(
''); }10.});11.input.blur(
function(){12.if( $.trim(input.val()) ==
''){ input.val(originalvalue); }13.});14.}

3.
在新窗口中打开链接[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.//Example 1: Every link will open in a new window3.$(
'a[href^="http://"]').attr(
"target",
"_blank");4.5.//Example 2: Links with the rel="external" attribute will only open in a new window6.$(
'a[@rel$='external
']').click(
function(){7.this.target =
"_blank";8.});9.});10.// how to use11.<A href=
"http://www.opensourcehunter.com"rel=external>open link</A>

4.
检测浏览器

注:在版本jQuery 1.4中，$.support替换掉了$.browser变量。

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.// Target Firefox 2 and above3.if($.browser.mozilla && $.browser.version >=
"1.8"){4.// do something5.}6.7.// Target Safari8.if( $.browser.safari ){9.// do something10.}11.12.// Target Chrome13.if( $.browser.chrome){14.// do something15.}16.17.// Target Camino18.if( $.browser.camino){19.// do something20.}21.22.// Target Opera23.if( $.browser.opera){24.// do something25.}26.27.// Target IE6 and below28.if($.browser.msie && $.browser.version <= 6 ){29.// do something30.}31.32.// Target anything above IE633.if($.browser.msie && $.browser.version > 6){34.// do something35.}36.});

5.
预加载图片

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.jQuery.preloadImages =
function()3.{4.for(
vari = 0; i
").attr("src
", arguments[i]);5.}6.};7.// how to use8.$.preloadImages("image1.jpg");9.});

6.
页面样式切换

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$(
"a.Styleswitcher").click(
function() {3.//swicth the LINK REL attribute with the value in A REL attribute4.$(
'link[rel=stylesheet]').attr(
'href', $(
this).attr(
'rel'));5.});6.// how to use7.// place this in your header8.<LINK href=
"default.css"type=text/css rel=stylesheet>9.// the links10.<A
class=Styleswitcher href=
"#"rel=
default.css>Default Theme</A>11.<A
class=Styleswitcher href=
"#"rel=red.css>Red Theme</A>12.<A
class=Styleswitcher href=
"#"rel=blue.css>Blue Theme</A>13.});

7.
列高度相同

如果使用了两个
CSS
列，使用此种方式可以是两列的高度相同。view plaincopy to clipboardprint?1.$(document).ready(
function() {2.functionequalHeight(group) {3.tallest = 0;4.group.each(
function() {5.thisHeight = $(
this).height();6.if(thisHeight > tallest) {7.tallest = thisHeight;8.}9.});10.group.height(tallest);11.}12.// how to use13.$(document).ready(
function() {14.equalHeight($(
".left"));15.equalHeight($(
".right"));16.});17.});

8.
动态控制页面字体大小

用户可以改变页面字体大小view plaincopy to clipboardprint?1.$(document).ready(
function() {2.// Reset the font size(back to default)3.varoriginalFontSize = $(
'html').css(
'font-size');4.$(
".resetFont").click(
function(){5.$(
'html').css(
'font-size', originalFontSize);6.});7.// Increase the font size(bigger font08.$(
".increaseFont").click(
function(){9.varcurrentFontSize = $(
'html').css(
'font-size');10.varcurrentFontSizeNum = parseFloat(currentFontSize, 10);11.varnewFontSize = currentFontSizeNum*1.2;12.$(
'html').css(
'font-size', newFontSize);13.returnfalse;14.});15.// Decrease the font size(smaller font)16.$(
".decreaseFont").click(
function(){17.varcurrentFontSize = $(
'html').css(
'font-size');18.varcurrentFontSizeNum = parseFloat(currentFontSize, 10);19.varnewFontSize = currentFontSizeNum*0.8;20.$(
'html').css(
'font-size', newFontSize);21.returnfalse;22.});23.});

9.
返回页面顶部功能

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$(
'a[href*=#]').click(
function() {3.if(location.pathname.replace(/^/
//,'') == this.pathname.replace(/^///,'')4.&& location.hostname ==
this.hostname) {5.var$target = $(
this.hash);6.$target = $target.length && $target7.|| $(
'[name='+
this.hash.slice(1) +
']');8.if($target.length) {9.vartargetOffset = $target.offset().top;10.$(
'html,body')11..animate({scrollTop: targetOffset}, 900);12.returnfalse;13.}14.}15.});16.// how to use17.// place this where you want to scroll to18.<A name=top></A>19.// the link20.<A href=
"#top">go to top</A>21.});

11.
获得鼠标指针ＸＹ值

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$().mousemove(
function(e){3.//display the x and y axis values inside the div with the id XY4.$(
'#XY').html(
"X Axis : "+ e.pageX +
" | Y Axis "+ e.pageY);5.});6.// how to use7.<DIV id=XY></DIV>8.9.});

12.
验证元素是否为空

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.if($(
'#id').html()) {3.// do something4.}5.});

13.
替换元素

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$(
'#id').replaceWith(
'3.<DIV>I have been replaced</DIV>4.5.');6.});

14. jQuery
延时加载功能[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.window.setTimeout(
function() {3.// do something4.}, 1000);5.});

15.
移除单词功能[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.varel = $(
'#id');3.el.html(el.html().replace(/word/ig,
""));4.});

16.
验证元素是否存在于Ｊｑｕｅｒｙ对象集合中[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.if($(
'#id').length) {3.// do something4.}5.});

17.
使整个ＤＩＶ可点击[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$(
"div").click(
function(){3.//get the url from href attribute and launch the url4.window.location=$(
this).find(
"a").attr(
"href");
returnfalse;5.});6.// how to use7.<DIV><A href=
"index.html">home</A></DIV>8.9.});

18.ID
与
Class
之间转换[/code]
当改变
Window
大小时，在
ID
与Class之间切换view plaincopy to clipboardprint?1.$(document).ready(
function() {2.functioncheckWindowSize() {3.if( $(window).width() > 1200 ) {4.$(
'body').addClass(
'large');5.}6.else{7.$(
'body').removeClass(
'large');8.}9.}10.$(window).resize(checkWindowSize);11.});

19.
克隆对象[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.varcloned = $(
'#id').clone();3.// how to use4.<DIV id=id></DIV>5.6.});

20.
使元素居屏幕中间位置[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.jQuery.fn.center =
function() {3.this.css(
"position",
"absolute");4.this.css(
"top", ( $(window).height() -
this.height() ) / 2+$(window).scrollTop() +
"px");5.this.css(
"left", ( $(window).width() -
this.width() ) / 2+$(window).scrollLeft() +
"px");6.returnthis;7.}8.$(
"#id").center();9.});

21.
写自己的选择器[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$.extend($.expr[
':'], {3.moreThen1000px:
function(a) {4.return$(a).width() > 1000;5.}6.});7.$(
'.box:moreThen1000px').click(
function() {8.// creating a simple js alert box9.alert(
'The element that you have clicked is over 1000 pixels wide');10.});11.});

22.
统计元素个数[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$(
"p").size();3.});

23.
使用自己的
Bullets
[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.$(
"ul").addClass(
"Replaced");3.$(
"ul > li").prepend(
"‒");4.// how to use5.ul.Replaced { list-style : none; }6.});

24.
引用
Google
主机上的
Jquery
类库[/code]
Let Google host the jQuery script for you. This can be done in 2 ways.view plaincopy to clipboardprint?1.//Example 12.<SCRIPT src=
"http://www.google.com/jsapi"></SCRIPT>3.<SCRIPT type=text/javascript>4.google.load(
"jquery",
"1.2.6");5.google.setOnLoadCallback(
function() {6.// do something7.});8.</SCRIPT><SCRIPT src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type=text/javascript></SCRIPT>9.10.// Example 2:(the best and fastest way)11.<SCRIPT src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"type=text/javascript></SCRIPT>

25.
禁用
Jquery
（动画）效果

view plaincopy to clipboardprint?1.$(document).ready(
function() {2.jQuery.fx.off =
true;3.});

26.
与其他
Javascript
类库冲突解决方案[/code]
view plaincopy to clipboardprint?1.$(document).ready(
function() {2.var$jq = jQuery.noConflict();3.$jq(
'#id').show();4.});英文地址：
http://www.opensourcehunter.com/2010/02/27/26-cool-and-usefull-jquery-tips-tricks-solutions/