25大实用的
jQuery技巧和解决方案
1
去除页面的右键菜单
$ document ready function {
$ document bind "contextmenu" function e {
return false;
} ;
} ;
2 搜索输入框文字的消失
当鼠标获得焦点 失去焦点的时候 input输入框文字处理：
$ document ready function {
$ "input text1" val "Enter your search text here" ;
textFill $ "input text1" ;
} ;
function textFill input { input focus text function
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 新窗口打开页面
$ 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>
4 判断浏览器类型
注意：
jQuery 1 4中$ support 来代替以前的$ browser
$ 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
}
} ;
5 预
加载图片
$ document ready function {
jQuery pre
loadImages function
{
for var i 0; i<arguments length; i++ "" { ""
jquery " ""><img>" attr "src" arguments[i] ;
}
}
how to use
$ pre
loadImages "image1 jpg" ;
} ;
< arguments length;>
6 轻松切换css样式
$ 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 rel "stylesheet" href "default css" type "text css">
the links
<a href "#" class "Styleswitcher" rel "default css">Default Theme< a>
<a href "#" class "Styleswitcher" rel "red css">Red Theme< a>
<a href "#" class "Styleswitcher" rel "blue css">Blue Theme< a>
} ;
7 高度相等的列
如果您使用两个CSS列 以此来作为他们完全一样的高度
$ document ready function {
function equalHeight group {
tallest 0;
group each function {
thisHeight $ this height ;
if thisHeight > tallest {
tallest thisHeight;
}
} ;
group height tallest ;
}
how to use
$ document ready function {
equalHeight $ " left" ;
equalHeight $ " right" ;
} ;
} ;
8 简单字体变大缩小
$ document ready function {
Reset the font size back to default
var originalFontSize $ "html" css "font size" ;
$ " resetFont" click function {
$ "html" css "font size" originalFontSize ;
} ;
Increase the font size bigger font0
$ " increaseFont" click function {
var currentFontSize $ "html" css "font size" ;
var currentFontSizeNum parseFloat currentFontSize 10 ;
var newFontSize currentFontSizeNum 1 2;
$ "html" css "font size" newFontSize ;
return false;
} ;
Decrease the font size smaller font
$ " decreaseFont" click function {
var currentFontSize $ "html" css "font size" ;
var currentFontSizeNum parseFloat currentFontSize 10 ;
var newFontSize currentFontSizeNum 0 8;
$ "html" css "font size" newFontSize ;
return false;
} ;
} ;
9 返回头部滑动动画
$ "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>
10 获取鼠标位置
$ 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 ;
} ;
11 判断一个元素是否为空
if $ "#id" html {
do something
}
12 替换元素
$ "#id" replaceWith "
<div>I have been replaced< div>
" ;
13
jquery timer 返回函数
$ document ready function {
window setTimeout function {
do something
} 1000 ;
} ;
14
jquery也玩替换
$ document ready function {
var el $ "#id" ;
el html el html replace word ig "" ;
} ;
15 判断元素是否存在
$ document ready function {
if $ "#id" length {
do something
}
} ;
16 让div也可以click
$ "div" click function {
get the url from href attribute and launch the url
window location $ this find "a" attr "href" ; return false;
} ;
how to use
<div><a href "index html">home< a>< div>
17 使用
jquery来判断浏览器大小添加不同的class
$ document ready function {
function checkWindowSize {
if $ window width > 1200 {
$ "body" addClass "large" ;
}
else {
$ "body" removeClass "large" ;
}
}
$ window resize checkWindowSize ;
} ;
18 几个字符就clone
var cloned $ "#id" clone
19 设置div在屏幕中央
$ document ready function {
jQuery fn center function {
this css "position" "absolute" ;
this css "top" $ window height this height 2+$ window scrollTop + "px" ;
this css "left" $ window width this width 2+$ window scrollLeft + "px" ;
return this;
}
$ "#id" center ;
} ;
20 创建自己的选择器
$ document ready function {
$ extend $ expr[":"] {
moreThen1000px: function a {
return $ a width > 1000;
}
} ;
$ " box:moreThen1000px" click function {
creating a simple
js alert box
alert "The element that you have clicked is over 1000 pixels wide" ;
} ;
} ;
21 计算元素的数目
$ document ready function {
$ "p" size ;
} ;
22 设置自己的li样式
$ document ready function {
$ "ul" addClass "Replaced" ;
$ "ul > li" prepend " " ;
how to use
ul Replaced { list style : none; }
} ;
23 使用google的主机来
加载jquery库
<script src "http: www google com
jsapi">< script>
<script type "text javascript">
google
load "
jquery" "1 2 6" ;
google setOn
LoadCallback function {
do something
} ;
< script><script src "http: ajax googleapis com ajax libs
jquery 1 2 6
jquery min
js" type "text javascript">< script>
Example 2: the best and fastest way
<script type "text javascript" src "http: ajax googleapis com ajax libs
jquery 1 2 6
jquery min
js">< script>
24 关闭
jquery动画效果
$ document ready function {
jQuery fx off true;
} ;
25 使用自己的
jquery标识
$ document ready function {
var $jq
jQuery noConflict ;
$jq "#id" show ;
} ;">25大实用的
jQuery技巧和解决方案
1
去除页面的右键菜单
$ document ready function {
$ document bind "contextmenu" function e {
return false;
} ;
} ;
2 搜索输入框文字的消失
当鼠标获得焦点 失去焦点的时候 input输入框 [更多]
745
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
