JQuery 学习笔记2

最新推荐文章于 2025-02-25 09:51:17 发布

原创最新推荐文章于 2025-02-25 09:51:17 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #Chrome #CSS #Safari #Opera #ViewUI

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

jQuery小技巧

1.禁止右键点击

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
   return false;
  });
});

2.在新窗口中打开链接

$(document).ready(function() {     
	//Example 1: Every link will open in a new window     
	$('a[href^="http://"]').attr("target", "_blank");     
	//Example 2: Links with the rel="external" attribute will only open in a new window     
	$('a[@rel$='external']').click(function(){     
       this.target = "_blank";     
	});     

});     
// how to use     
<A href="http://www.opensourcehunter.com" rel=external>open link</A>

3.检测浏览器

 $(document).ready(function() {     
// Target Firefox 2 and above     
   if ($.browser.mozilla && $.browser.version >= "1.8" ){     
    // do something     
  
    }     
// Target Safari     
 if( $.browser.safari ){     
 // do something     
}     
 // Target Chrome     
 if( $.browser.chrome){     
 // do something     
 
}     
 // Target Camino     
if( $.browser.camino){     
// do something     
 
 }     
// Target Opera     
 if( $.browser.opera){     
 // do something     
  
}     
 // Target IE6 and below     
 if ($.browser.msie && $.browser.version <= 6 ){     
 // do something     
  
 }     
 // Target anything above IE6     
 if ($.browser.msie && $.browser.version > 6){     
 // do something     
}     
 });

4.页面样式切换

$(document).ready(function() {     
 
$("a.Styleswitcher").click(function() {     
 //swicth the LINK REL attribute with the value in A REL attribute     
$('link[rel=stylesheet]').attr('href' , $(this).attr('rel'));     
 
  });     
 
// how to use     
// place this in your header     
 
<LINK href="default.css" type=text/css rel=stylesheet>     
// the links     
<A class=Styleswitcher href="#" rel=default.css>Default Theme</A>     
<A class=Styleswitcher href="#" rel=red.css>Red Theme</A>     
<A class=Styleswitcher href="#" rel=blue.css>Blue Theme</A>     
});

5.返回页面顶部功能

$(document).ready(function() {     
$('a[href*=#]').click(function() {     
   if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')     
   && location.hostname == this.hostname) {     
   var $target = $(this.hash);     
$target = $target.length && $target     
  || $('[name=' + this.hash.slice(1) +']');     
  if ($target.length) {     
 
var targetOffset = $target.offset().top;     
 
$('html,body')     
  .animate({scrollTop: targetOffset}, 900);     
  return false;     
}     
 
}     
});     
 
// how to use     
// place this where you want to scroll to     
 
<A name=top></A>   
    
// the link     
<A href="#top">go to top</A>     
});

6.获得鼠标指针XY值

   $(document).ready(function() {     
   $().mousemove(function(e){     
     //display the x and y axis values inside the div with the id XY     
   $('#XY').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);     
 
});     
 
// how to use     
 
<DIV id=XY></DIV>     
});

7.验证元素是否为空

  $(document).ready(function() {     
    if ($('#id').html()) {     
    // do something     
  }     
});

8.替换元素

$(document).ready(function() {     
$('#id').replaceWith('    
   <DIV>I have been replaced</DIV>    
   );     
 });

9.延时加载功能

$(document).ready(function() {     
 
    window.setTimeout(function() {     
 
    // do something     
 
     }, 1000);     
 
});

10.移除单词功能

 $(document).ready(function() {     
 
   var el = $('#id');     
  
   el.html(el.html().replace(/word/ig, ""));     
  
 });

11.克隆对象

$(document).ready(function() {     
  
   var cloned = $('#id').clone();     
  
   // how to use     
  
 <DIV idid=id></DIV>     
 });

12.统计元素个数

$(document).ready(function() {     
$("p").size();     
});

13.禁用jQuery（动画）效果

$(document).ready(function() {     
 
   jQuery.fx.off = true;     
 
});