jQuery的实用小技巧

 

1. 禁止右键点击

1 $(function(){
2    $(document).bind('contextmenu', function(e){
3       return false;     
4     }) 
5 })

 

2. 隐藏搜索文本框文字

 1 $(function(){
 2   $('input.text').val('enter text here');
 3   textFill($('input.text'));
 4 });
 5 
 6 function textFill(text){
 7   var originalValue = 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. 在新窗口中打开链接

 1 $(function(){
 2   //符合要求的链接会在新窗口打开
 3   $('a[href^="http://"]').attr('target', '_blank');
 4   
 5   //attribute rel='external' will only open in a new window
 6   $('a[@rel$="external"]').click(function(){
 7     this.target='_blank';
 8   });
 9 });
10 
11 
12 <A href="http://www.baidu.com" rel=external>open link</A>

 

4. 页面样式切换

 1 $(function(){
 2   $('a.Styleswitcher').click(function(){ 
 3      //swicth the LINK REL attribute with the value in A REL attribute 
 4      $('link[rel=stylesheet]').attr('href' , $(this).attr('rel')); 
 5   }); 
 6   // how to use 
 7   // place this in your header 
 8   <link href="default.css" type="text/css" rel="stylesheet"> 
 9   // the links 
10   <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 });

 

posted @ 2015-07-21 16:16  泥wawa  阅读(173)  评论(0)  编辑  收藏  举报