jquery26個技巧

dna26 2013-07-23

展開全文

The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions.

1. 禁用右鍵點擊（Disable right-click）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

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

2. 禁用搜索文本框（Disappearing search field text）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

$(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. 新窗口打開鏈接（Opening links in a new window）

[javascript] view plain copy print ?

$(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." rel="external">open link</a>

[javascript] view plain copy print ?

$(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." rel="external">open link</a>

4. 檢測瀏覽器（Detect browser）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

$(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. 預加載圖片（Preloading images）

[javascript] view plain copy print ?

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);
}
}
// how to use
$.preloadImages("image1.jpg");
});
</arguments.length;>

[javascript] view plain copy print ?

$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)="" {="" jquery("<img="">").attr("src", arguments[i]);
}
}
// how to use
$.preloadImages("image1.jpg");
});
</arguments.length;>

6. 樣式篩選（CSS Style switcher）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

$(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. 列高度相同（Columns of equal height）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

$(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. 字體大小調(diào)整（Font resizing）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

$(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. 返回頁面頂部（Smooth(animated) page scroll）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

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

11. 獲取鼠標的xy坐標（Get the mouse cursor x and y axis）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

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

12. 驗證元素是否為空（Verify if an Element is empty）

[javascript] view plain copy print ?

$(document).ready(function() {
if ($('#id').html()) {
// do something
}
});

[javascript] view plain copy print ?

$(document).ready(function() {
if ($('#id').html()) {
// do something
}
});

13. 替換元素（Replace a element）

[javascript] view plain copy print ?

$(document).ready(function() {
$('#id').replaceWith('
<div>I have been replaced</div>
');
});

[javascript] view plain copy print ?

$(document).ready(function() {
$('#id').replaceWith('
<div>I have been replaced</div>
');
});

14. 延遲加載（jQuery timer callback functions）

[javascript] view plain copy print ?

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

[javascript] view plain copy print ?

$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});

15. 移除單詞（Remove a word）

[javascript] view plain copy print ?

$(document).ready(function() {
var el = $('#id');
el.html(el.html().replace(/word/ig, ""));
});

[javascript] view plain copy print ?

$(document).ready(function() {
var el = $('#id');
el.html(el.html().replace(/word/ig, ""));
});

16. 驗證元素是否存在（Verify that an element exists in jQuery）

[javascript] view plain copy print ?

$(document).ready(function() {
if ($('#id').length) {
// do something
}
});

[javascript] view plain copy print ?

$(document).ready(function() {
if ($('#id').length) {
// do something
}
});

17. 使整個DIV可點擊（Make the entire DIV clickable）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

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

18. id和class切換（Switch between classes or id’s when resizing the window）

[javascript] view plain copy print ?

$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$('body').addClass('large');
}
else {
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
});

[javascript] view plain copy print ?

$(document).ready(function() {
function checkWindowSize() {
if ( $(window).width() > 1200 ) {
$('body').addClass('large');
}
else {
$('body').removeClass('large');
}
}
$(window).resize(checkWindowSize);
});

19. 克隆對象（Clone a object）

[javascript] view plain copy print ?

$(document).ready(function() {
var cloned = $('#id').clone();
// how to use
<div id="id"></div>
});

[javascript] view plain copy print ?

$(document).ready(function() {
var cloned = $('#id').clone();
// how to use
<div id="id"></div>
});

20. 使元素居中屏幕（Center an element on the screen）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

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

21. 自定義選擇器（Write our own selector）

[javascript] view plain copy print ?

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

[javascript] view plain copy print ?

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

22. 統(tǒng)計元素個數(shù)（Count a element）

[javascript] view plain copy print ?

$(document).ready(function() {
$("p").size();
});

[javascript] view plain copy print ?

$(document).ready(function() {
$("p").size();
});

23. 自定義Bullets（Use Your Own Bullets）

[javascript] view plain copy print ?

$(document).ready(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("? ");
// how to use
ul.Replaced { list-style : none; }
});

[javascript] view plain copy print ?

$(document).ready(function() {
$("ul").addClass("Replaced");
$("ul > li").prepend("? ");
// how to use
ul.Replaced { list-style : none; }
});

24. 引用google分發(fā)的jQuery（Let Google host jQuery for you）

[javascript] view plain copy print ?

//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./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./ajax/libs/jquery/1.2.6/jquery.min.js"></script>

[javascript] view plain copy print ?

//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./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./ajax/libs/jquery/1.2.6/jquery.min.js"></script>

25. 禁用jQuery動畫（Disable jQuery animations）

[javascript] view plain copy print ?

$(document).ready(function() {
jQuery.fx.off = true;
});

[javascript] view plain copy print ?

$(document).ready(function() {
jQuery.fx.off = true;
});

26. 防止不兼容沖突（No conflict-mode）

[javascript] view plain copy print ?

$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});

[javascript] view plain copy print ?

$(document).ready(function() {
var $jq = jQuery.noConflict();
$jq('#id').show();
});

本站是提供個人知識管理的網(wǎng)絡存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導購買等信息，謹防詐騙。如發(fā)現(xiàn)有害或侵權內(nèi)容，請點擊一鍵舉報。