26个Jquery使用小技巧(jQuery tips, tricks & solutions)
前段时间发布了
Jquery
类库
1.4
版本，使用者也越来越多，为了方便大家对
Jquery
的使用，下面列出了一些
Jquery
使用技巧。比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的
X
值
Y
值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于
Jquery
集合中、使
DIV
可点击、克隆对象、使元素居中、计算元素个数、使用
Google
主机上的
Jquery
类库、禁用
Jquery
效果、解决
Jquery
类库与其他
Javascript
类库冲突问题。
具体如下：
1. 禁止右键点击
view plaincopy to clipboardprint?
1.
$(document).ready(
function
(){
2.
$(document).bind(
"contextmenu"
,
function
(e){
3.
return
false
;
4.
});
5.
});
2. 隐藏搜索文本框文字
view plaincopy to clipboardprint?
1.
$(document).ready(
function
() {
2.
$(
"input.text1"
).val(
"Enter your search text here"
);
3.
textFill($(
'input.text1'
));
4.
});
5.
6.
function
textFill(input){
//input focus text function
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. 在新窗口中打开链接
view plaincopy to clipboardprint?
1.
$(document).ready(
function
() {
2.
//Example 1: Every link will open in a new window
3.
$(
'a[href^="http://"]'
).attr(
"target"
,
"_blank"
);
4.
5.
//Example 2: Links with the rel="external" attribute will only open in a new window
6.
$(
'a[@rel$='
external
']'
).click(
function
(){
7.
this
.target =
"_blank"
;
8.
});
9.
});
10.
// how to use
11.
<A href=
"http://www.opensourcehunter.com"
rel=external>open link</A>
4. 检测浏览器
注: 在版本jQuery 1.4中，$.support 替换掉了$.browser 变量。
view plaincopy to clipboardprint?
1.
$(document).ready(
function
() {
2.
// Target Firefox 2 and above
3.
if
($.browser.mozilla && $.browser.version >=
"1.8"
){
4.
// do something
5.
}
6.
7.
// Target Safari
8.
if
( $.browser.safari ){
9.
// 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. 预加载图片
view plaincopy to clipboardprint?
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.
});
由于文章字数限制 其他内容请到http://www.cnblogs.com/ywqu/archive/2010/03/01/1675355.html 查看。