免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

<label id="hn5js"><dfn id="hn5js"></dfn></label>

打開APP

未登錄

開通VIP，暢享免費(fèi)電子書等14項(xiàng)超值服

首頁(yè)

好書

留言交流

下載APP

聯(lián)系客服

jquery26個(gè)技巧

userphoto

dna26 >《前端開發(fā)》

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. 禁用右鍵點(diǎn)擊（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.opensourcehunter.com" 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.opensourcehunter.com" rel="external">open link</a>

4. 檢測(cè)瀏覽器（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. 預(yù)加載圖片（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. 返回頁(yè)面頂部（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. 獲取鼠標(biāo)的xy坐標(biāo)（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. 驗(yàn)證元素是否為空（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. 驗(yàn)證元素是否存在（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. 使整個(gè)DIV可點(diǎn)擊（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. 克隆對(duì)象（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)計(jì)元素個(gè)數(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.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>

[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.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>

25. 禁用jQuery動(dòng)畫（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();
});

本站僅提供存儲(chǔ)服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊舉報(bào)。

打開APP，閱讀全文并永久保存查看更多類似文章

猜你喜歡

類似文章

jQuery 1.4實(shí)用技巧大放送

開發(fā)中可能會(huì)用到的幾個(gè) jQuery 小提示和技巧

每個(gè)程序員都會(huì)的 35 個(gè) jQuery 小技巧(3)

JQUERY 選擇器大全

熊子川：體驗(yàn)設(shè)計(jì)師該學(xué)習(xí)的一點(diǎn)前端技術(shù)

jQuery VS JavaScript原生API | 晚晴幽草軒

更多類似文章 >>

生活服務(wù)

聯(lián)系我們

分享收藏導(dǎo)長(zhǎng)圖關(guān)注下載文章

綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)！

如果VIP功能使用有故障，
可點(diǎn)擊這里聯(lián)系客服！

聯(lián)系客服

先別劃走！

送你5元優(yōu)惠券，購(gòu)買VIP限時(shí)立減！

5元

優(yōu)惠券

優(yōu)惠券還有10:00過(guò)期

×

<object id="yt0qk"><strike id="yt0qk"></strike></object>