jQuery的实用小技巧

时间:2024-01-16 12:31:14

1. 禁止右键点击

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

2. 隐藏搜索文本框文字

 $(function(){
$('input.text').val('enter text here');
textFill($('input.text'));
}); function textFill(text){
var originalValue = input.val();
input.focus(function(){
if($.trim(input.val())==originalValue ) { input.val(''); }
});
input.blur(function(){
if($.trim(input.val())=='') { input.val(originalValue); }
});
}

3. 在新窗口中打开链接

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

4. 页面样式切换

 $(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>
});