首页 / 脚本样式 / JavaScript / Jquery常用技巧收集整理篇

比如有禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片等等。具体如下：
禁止右键点击
复制代码 代码如下:
$（document）.ready（function（）{
$（document）.bind（"contextmenu",function（e）{
return false;
}）;
}）;

隐藏搜索文本框文字
复制代码 代码如下:
$（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）; }
}）;
}

在新窗口中打开链接
复制代码 代码如下:
$（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>

检测浏览器
注: 在版本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
}
}）;

预加载图片
复制代码 代码如下:
$（document）.ready（function（） {
jQuery.preloadImages = function（）
{
for（var i = 0; i"）.attr（"src", arguments[i]）;
}
};
// how to use
$.preloadImages（"image1.jpg"）;
}）;

页面样式切换
复制代码 代码如下:
$（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>
}）;

列高度相同
如果使用了两个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"））;
}）;
}）;

动态控制页面字体大小
复制代码 代码如下:
$（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;
}）;
}）;

返回页面顶部功能
复制代码 代码如下:
$（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>
}）;

获得鼠标指针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>
}）;

验证元素是否为空
复制代码 代码如下:
$（document）.ready（function（） {
if （$（"#id"）.html（）） {
// do something
}
}）;

替换元素
复制代码 代码如下:
$（document）.ready（function（） {
$（"#id"）.replaceWith（"
<DIV>I have been replaced</DIV>
）;
}）;

jQuery延时加载功能
复制代码 代码如下:
$（document）.ready（function（） {
window.setTimeout（function（） {
// do something
}, 1000）;
}）;

移除单词功能
复制代码 代码如下:
$（document）.ready（function（） {
var el = $（"#id"）;
el.html（el.html（）.replace（/word/ig, ""））;
}）;

验证元素是否存在于jQuery对象集合中
复制代码 代码如下:
$（document）.ready（function（） {
if （$（"#id"）.length） {
// do something
}
}）;

使整个DIV可点击
复制代码 代码如下:
$（document）.ready（function（） {
$（"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>
}）;

ID与Class之间转换当改变Window大小时，在ID与Class之间切换
复制代码 代码如下:
$（document）.ready（function（） {
function checkWindowSize（） {
if （ $（window）.width（） > 1200 ） {
$（"body"）.addClass（"large"）;
}
else {
$（"body"）.removeClass（"large"）;
}
}
$（window）.resize（checkWindowSize）;
}）;

克隆对象
复制代码 代码如下:
$（document）.ready（function（） {
var cloned = $（"#id"）.clone（）;
// how to use
<DIV idid=id></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（）;
}）;

写自己的选择器
复制代码 代码如下:
$（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"）;
}）;
}）;

统计元素个数
复制代码 代码如下:
$（document）.ready（function（） {
$（"p"）.size（）;
}）;

使用自己的Bullets
复制代码 代码如下:
$（document）.ready（function（） {
$（"ul"）.addClass（"Replaced"）;
$（"ul > li"）.prepend（"‒ "）;
// how to use
ul.Replaced { list-style : none; }
}）;

引用Google主机上的jQuery类库
复制代码 代码如下:
//Example 1
<SCRIPT src="http://www.google.com/jsapi"></SCRIPT>
<SCRIPT type=text/javascript>
google.load（"jquery", "1.2.6"）;
google.setOnLoadCallback（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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type=text/javascript></SCRIPT>

禁用jQuery（动画）效果
复制代码 代码如下:
$（document）.ready（function（） {
jQuery.fx.off = true;
}）;

与其他JavaScript类库冲突解决方案
复制代码 代码如下:
$（document）.ready（function（） {
var $jq = jQuery.noConflict（）;
$jq（"#id"）.show（）;
}）;