資訊專欄INFORMATION COLUMN
摘要：元素屏幕居中獲取頁面路徑相關(guān)參數(shù)值值值值刪除內(nèi)聯(lián)樣式長度限制并截取外鏈新窗口打開測試與其它庫沖突情況測試沖突代碼避免沖突加載即使掉線加載遮罩層，點擊移除元素固頂注意調(diào)整邊界值禁止右鍵菜單對象插件模版代碼公有方法私有方法延伸閱讀處理表單的
1 元素屏幕居中
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;
}
$("#myDiv").center();
2 獲取頁面路徑相關(guān)參數(shù)
//值：http://42du.cn/list#jq
var url = document.URL;
//值：http:
var protocol = location.protocol;
//值：42du.cn
var host = location.host;
//值：jq
var hashP = document.URL.split("#")[1];
3 刪除內(nèi)聯(lián)樣式
$("*[style]").attr("style", "");
4 長度限制并截取
var $elem = $("#title");
if($elem.text().length > 30) {
$elem.text($elem.text().substr(0, 27)+"...");
}
5 外鏈新窗口打開
$("a[@href^="http"]").attr("target","_blank");
6 測試JQuery與其它庫沖突情況
//測試沖突代碼
$("#jqtest").click( function() {
alert("jQuery is working!");
});
//避免沖突
var $jq = jQuery.noConflict();
$jq("#jqtest").click( function() {
alert("jQuery is working!");
});
7 加載JQuery即使CDN掉線
")8 加載遮罩層，點擊移除
$("")
.css({
position : "fixed",
top : 0,
left : 0,
right : 0,
bottom : 0,
opacity : 0.6,
background : "black",
display : "none"
})
.appendTo("body")
.fadeIn("normal")
.click(function () {
$(this).fadeOut("normal", function () {
$(this).remove();
})
});
9 元素固頂
//注意調(diào)整邊界值
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$("#navbar").css({"position" : "fixed", "top" : 0});
} else {
$("#navbar").css({"position" : "relative", "top" : "none"});
}
});
10 禁止右鍵菜單
$(document).bind("contextmenu", function () {
return false;
})
11 對象插件模版代碼
(function($){
var MyPlugin = function(element, options) {
var elem = $(element);
var obj = this;
var settings = $.extend({param: "defaultValue"}, options || {});
// 公有方法
this.publicMethod = function(){
console.log("public method called!");
};
// 私有方法
var privateMethod = function() {
console.log("private method called!");
};
};
$.fn.myplugin = function(options) {
return this.each(function(){
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data("myplugin")) return;
// pass options to plugin constructor
var myplugin = new MyPlugin(this, options);
// Store plugin object in this element"s data
element.data("myplugin", myplugin);
});
};
})(jQuery);
12 延伸閱讀
處理表單的JQuery代碼
提升性能的JQuery代碼
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83260.html
1 只接受數(shù)字輸入 $(#uAge).keydown(function(event) { // 允許退格和刪除鍵 if ( event.keyCode == 46 || event.keyCode == 8 ) { } else { // 保證輸入的是數(shù)字鍵 if (event.keyCode < 48 || event.keyCod...
摘要：目的是為了減少工作量。入口在選擇圖示的文件，那么這里就是可以自定義的代碼片斷的地方。我舉一個例子你們就明白了，看代碼打印在這段代碼中，是指你要提示的代碼前綴，效果如圖第二個就是我們自定義的代碼片段選擇之后的效果這個就是我們在代碼中定義的。 作為一名前端開發(fā)工程師，我們每天都想著代碼怎么抽成組件，公共方法。目的是為了減少工作量。但是你有沒有想過我們一直在寫重復(fù)的代碼，比如每天都會寫 im...
摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續(xù)更新… 一、...
摘要：筆者作為一位，將工作以來用到的各種優(yōu)秀資料神器及框架整理在此，畢竟好記性不如爛鍵盤，此前端知識點大百科全書前端掘金，，不定期更新技巧前端掘金技巧，偶爾更新。計算數(shù)組的極值技巧使你的更加專業(yè)前端掘金一個幫你提升技巧的收藏集。 CSS 樣式畫各種圖形 - 前端 - 掘金下面是一些我在 CSS 中經(jīng)常用到的圖案，還有一些是在css-tricks看到的。記錄一下，以后會用到。會持續(xù)更新… 一、...
閱讀 887·2023-04-25 19:17
閱讀 2184·2021-09-10 11:26
閱讀 1902·2019-08-30 15:54
閱讀 3416·2019-08-30 15:53
閱讀 2683·2019-08-30 11:20
閱讀 3397·2019-08-29 15:12
閱讀 1235·2019-08-29 13:16
閱讀 2391·2019-08-26 12:19
