閱讀944 返回首頁    go 阿裏雲 go 技術社區[雲棲]

常見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
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

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">https://www.google.com/jsapi"></SCRIPT<https://yq.aliyun.com/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:/https://yq.aliyun.com/ajax.googleapis.comhttps://yq.aliyun.com/ajax/libs/jquery/1.2.6/jquery.min.js">http:/https://yq.aliyun.com/ajax.googleapis.comhttps://yq.aliyun.com/ajax/libs/jquery/1.2.6/jquery.min.js<https://yq.aliyun.com/a>"  type=text/javascript></SCRIPT>
09  
10 //  Example 2:(the best and fastest way)
11 <SCRIPT src="<a href="http:/https://yq.aliyun.com/ajax.googleapis.comhttps://yq.aliyun.com/ajax/libs/jquery/1.2.6/jquery.min.js">http:/https://yq.aliyun.com/ajax.googleapis.comhttps://yq.aliyun.com/ajax/libs/jquery/1.2.6/jquery.min.js<https://yq.aliyun.com/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 });

最後更新：2017-04-02 06:51:36

  上一篇：go 傳智播客培訓2.21 XML編程
  下一篇：go 關於基於xfire webservice框架開發webservice的總結