分享jQuery封裝好的一些常用操作
1. 禁止右鍵點(diǎn)擊
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});
2. 隱藏搜索文本框文字
$(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. 在新窗口中打開(kāi)鏈接
$(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 rel=external>open link</a>
4. 檢測(cè)瀏覽器
$(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ù)加載圖片
$(document).ready(function() {
jQuery.preloadImages = function()
{
for(var i = 0; i<ARGUMENTS.LENGTH; jQuery(?<img { i++)>").attr("src", arguments[i]);
}
}
// how to use
$.preloadImages("image1.jpg");
});
6. 返回頁(yè)面頂部功能
$(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>
});
7. 獲得鼠標(biāo)指針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>
});
8.檢查圖片是否加載完成
有時(shí)候你需要確保圖片完成加載完成以便執(zhí)行后面的操作:
$('img').load(function () {
console.log('image load successful');
});
你可以把 img 替換為其他的 ID 或者 class 來(lái)檢查指定圖片是否加載完成。
9.自動(dòng)修改破損圖像
如果你碰巧在你的網(wǎng)站上發(fā)現(xiàn)了破碎的圖像鏈接,你可以用一個(gè)不易被替換的圖像來(lái)代替它們。添加這個(gè)簡(jiǎn)單的代碼可以節(jié)省很多麻煩:
$('img').on('error', function () {
$(this).prop('src', 'img/broken.png');
});
即使你的網(wǎng)站沒(méi)有破碎的圖像鏈接,添加這段代碼也沒(méi)有任何害處。
10. jQuery延時(shí)加載功能
$(document).ready(function() {
window.setTimeout(function() {
// do something
}, 1000);
});
以上就是小編為大家整理的jQuery封裝好的一些常用的操作內(nèi)容,本文很實(shí)用建議大家可以收藏起來(lái),方便在日后使用,希望本文對(duì)大家學(xué)習(xí)jQuery有很好的幫助。
相關(guān)文章
jQuery網(wǎng)頁(yè)定位導(dǎo)航特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery網(wǎng)頁(yè)定位導(dǎo)航特效實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery網(wǎng)頁(yè)定位導(dǎo)航的功能描述、原理與核心實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12
淺談EasyUi ComBotree樹(shù)修改 父節(jié)點(diǎn)選擇的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺談EasyUi ComBotree樹(shù)修改 父節(jié)點(diǎn)選擇的問(wèn)題。2016-11-11
jQuery循環(huán)滾動(dòng)新聞列表示例代碼
jquery實(shí)現(xiàn)點(diǎn)擊公告的上一條下一條來(lái)查看滾動(dòng)條,示例代碼如下,希望對(duì)大家有所幫助2014-06-06
jquery ajax,ashx,json的用法總結(jié)
本篇文章主要是對(duì)jquery ajax,ashx,json的用法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jQuery組件easyui對(duì)話框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了jQuery組件easyui對(duì)話框?qū)崿F(xiàn)代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應(yīng)代碼,需要的朋友可以參考下。2010-10-10
jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全
這篇文章主要為大家詳細(xì)介紹了jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
jQuery插件windowScroll實(shí)現(xiàn)單屏滾動(dòng)特效
本文給大家分享的是一個(gè)使用jQuery插件windowScroll實(shí)現(xiàn)的單屏滾動(dòng)的特效,主要參考搜狗瀏覽器4.2版本首頁(yè)的上下滾動(dòng)效果。主要實(shí)現(xiàn)整個(gè)窗口的上下和左右滾動(dòng)邏輯,非常的實(shí)用。2015-07-07

