常见26个Jquery使用技巧（转）

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

1
$(document).ready(function(){

2
$(document).bind("contextmenu",function(e){

3
return  false;

4
});

5
});

2、隐藏搜索文本框文字

01
$(document).ready(function() {

02
$("input.text1").val("Enter  your search text here");

03
textFill($('input.text1'));

04
});

05
 
06
function textFill(input){ //input  focus text function

07
var originalvalue = input.val();

08
input.focus( function(){

09
if( $.trim(input.val())  == originalvalue ){ input.val(''); }

10
});

11
input.blur( function(){

12
if( $.trim(input.val()) == ''  ){ input.val(originalvalue); }

13
});

14
}

3、在新窗口中打开链接

01
$(document).ready(function()  {

02
//Example 1: Every link will open in a new window

03
$('a[href^="<a href="http://%22]%27%29.attr%28%22target/">http://"]').attr("target</a>","_blank");

04
 
05
//Example 2: Links  with the rel="external" attribute will only open in a new window

06
$('a[@rel$='external']').click(function(){

07
this.target = "_blank";

08
});

09
});

10
//  how to use

11
<A href="<a href="http://www.opensourcehunter.com/">http://www.opensourcehunter.com</a>" rel=external>open link</A>

4、检测浏览器注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。

01
$(document).ready(function()  {

02
// Target Firefox 2 and above

03
if  ($.browser.mozilla && $.browser.version >= "1.8" ){

04
// do something

05
}

06
 
07
// Target  Safari

08
if( $.browser.safari ){

09
// do  something

10
}

11
 
12
// Target Chrome

13
if(  $.browser.chrome){

14
// do something

15
}

16
 
17
// Target Camino

18
if( $.browser.camino){

19
// do  something

20
}

21
 
22
// Target Opera

23
if(  $.browser.opera){

24
// do something

25
}

26
 
27
// Target IE6 and below

28
if ($.browser.msie &&  $.browser.version <= 6 ){

29
// do something

30
}

31
 
32
// Target anything above IE6

33
if ($.browser.msie  && $.browser.version > 6){

34
// do something

35
}

36
});

5、预加载图片

1
$(document).ready(function() {

2
jQuery.preloadImages =  function()

3
{

4
for(var i = 0;  i").attr("src", arguments[i]);

5
}

6
};

7
// how to use

8
$.preloadImages("image1.jpg");

9
});

6、页面样式切换

01
$(document).ready(function() {

02
$("a.Styleswitcher").click(function() {

03
//swicth  the LINK REL attribute with the value in A REL attribute

04
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));

05
});

06
// how to use

07
// place this in your  header

08
<LINK href="default.css" type=text/css  rel=stylesheet>

09
// the links

10
<A  class=Styleswitcher href="#" rel=default.css>Default  Theme</A>

11
<A href="#"  rel=red.css>Red Theme</A>

12
<A  href="#" rel=blue.css>Blue Theme</A>

13
});

7、列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。

01
$(document).ready(function() {

02
function equalHeight(group)  {

03
tallest = 0;

04
group.each(function()  {

05
thisHeight = $(this).height();

06
if(thisHeight > tallest) {

07
tallest =  thisHeight;

08
}

09
});

10
group.height(tallest);

11
}

12
// how to use

13
$(document).ready(function() {

14
equalHeight($(".left"));

15
equalHeight($(".right"));

16
});

17
});

8、动态控制页面字体大小用户可以改变页面字体大小

01
$(document).ready(function() {

02
// Reset the font  size(back to default)

03
var originalFontSize =  $('html').css('font-size');

04
$(".resetFont").click(function(){

05
$('html').css('font-size', originalFontSize);

06
});

07
// Increase the font size(bigger font0

08
$(".increaseFont").click(function(){

09
var  currentFontSize = $('html').css('font-size');

10
var  currentFontSizeNum = parseFloat(currentFontSize, 10);

11
var  newFontSize = currentFontSizeNum*1.2;

12
$('html').css('font-size', newFontSize);

13
return false;

14
});

15
// Decrease the font size(smaller font)

16
$(".decreaseFont").click(function(){

17
var currentFontSize =  $('html').css('font-size');

18
var currentFontSizeNum =  parseFloat(currentFontSize, 10);

19
var newFontSize =  currentFontSizeNum*0.8;

20
$('html').css('font-size',  newFontSize);

21
return false;

22
});

23
});

9、返回页面顶部功能

01
$(document).ready(function() {

02
$('a[href*=#]').click(function() {

03
if  (location.pathname.replace(/^///,'') ==  this.pathname.replace(/^///,'')

04
&&  location.hostname == this.hostname) {

05
var $target =  $(this.hash);

06
$target = $target.length &&  $target

07
|| $('[name=' + this.hash.slice(1) +']');

08
if ($target.length) {

09
var targetOffset =  $target.offset().top;

10
$('html,body')

11
.animate({scrollTop: targetOffset}, 900);

12
return false;

13
}

14
}

15
});

16
// how to use

17
// place  this where you want to scroll to

18
<A name=top></A>

19
// the link

20
<A href="#top">go to top</A>

21
});

10、获得鼠标指针ＸＹ值

1
$(document).ready(function() {

2
$().mousemove(function(e){

3
//display the x and y axis  values inside the div with the id XY

4
$('#XY').html("X  Axis : " + e.pageX + " | Y Axis " + e.pageY);

5
});

6
// how to use

7
<DIV id=XY></DIV>

8
 
9
});

11、验证元素是否为空

1
$(document).ready(function() {

2
if ($('#id').html()) {

3
// do something

4
}

5
});

12、替换元素

1
$(document).ready(function() {

2
$('#id').replaceWith('

3
<DIV>I have been  replaced</DIV>

4
 
5
');

6
});

13、jQuery延时加载功能

1
$(document).ready(function() {

2
window.setTimeout(function() {

3
// do something

4
}, 1000);

5
});

14、移除单词功能

1
$(document).ready(function()  {

2
var el = $('#id');

3
el.html(el.html().replace(/word/ig, ""));

4
});

16、验证元素是否存在于Ｊｑｕｅｒｙ对象集合中

1
$(document).ready(function() {

2
if ($('#id').length) {

3
// do something

4
}

5
});

17、使整个ＤＩＶ可点击

1
$(document).ready(function() {

2
$("div").click(function(){

3
//get the url from href  attribute and launch the url

4
window.location=$(this).find("a").attr("href"); returnfalse;

5
});

6
// how to use

7
<DIV><A  href="index.html">home</A></DIV>

8
 
9
});

18、ID与 Class之间转换当改变Window大小时，在ID与Class之间切换

01
$(document).ready(function() {

02
function  checkWindowSize() {

03
if ( $(window).width() > 1200 )  {

04
$('body').addClass('large');

05
}

06
else {

07
$('body').removeClass('large');

08
}

09
}

10
$(window).resize(checkWindowSize);

11
});

19、克隆对象

1
$(document).ready(function() {

2
var  cloned = $('#id').clone();

3
// how to use

4
<DIV id=id></DIV>

5
 
6
});

20、使元素居屏幕中间位置

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
return this;

7
}

8
$("#id").center();

9
});

21、写自己的选择器

01
$(document).ready(function() {

02
$.extend($.expr[':'], {

03
moreThen1000px: function(a) {

04
return $(a).width() > 1000;

05
}

06
});

07
$('.box:moreThen1000px').click(function() {

08
// creating a simple js alert box

09
alert('The element  that you have clicked is over 1000 pixels wide');

10
});

11
});

22、统计元素个数

1
$(document).ready(function() {

2
$("p").size();

3
});

23、使用自己的 Bullets

1
$(document).ready(function() {

2
$("ul").addClass("Replaced");

3
$("ul > li").prepend("‒  ");

4
// how to use

5
ul.Replaced { list-style :  none; }

6
});

24、引用Google主机上的Jquery类库Let Google host the jQuery script for you. This can be done in 2 ways.

01
//Example 1

02
<SCRIPT src="<a href="http://www.google.com/jsapi%22%3E%3C/SCRIPT">http://www.google.com/jsapi"></SCRIPT</a>>

03
<SCRIPT type=text/javascript>

04
google.load("jquery", "1.2.6");

05
google.setOnLoadCallback(function() {

06
// do something

07
});

08
</SCRIPT><SCRIPT src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>"  type=text/javascript></SCRIPT>

09
 
10
//  Example 2:(the best and fastest way)

11
<SCRIPT src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>"  type=text/javascript></SCRIPT>

25、禁用Jquery（动画）效果

1
$(document).ready(function() {

2
jQuery.fx.off = true;

3
});

26、与其他Javascript类库冲突解决方案

1
$(document).ready(function() {

2
var $jq = jQuery.noConflict();

3
$jq('#id').show();

4
});