摘要:一些元素位置設置的通用方法查找元素的左端位置代碼依賴來自查找元素的頂端位置設置元素和位置與當前位置無關的一對函數設置元素水平的函數設置元素垂直位置的函數在元素的水平位置上增加像素距離的函數在元素的垂直位置上增加像素距離的函數代碼來源元素相對
一些元素位置設置的通用方法
/** * 查找元素的左端位置, * 代碼依賴:getStyle來自 https://gist.github.com/hehongwei44/9abf63536accd0f2eeb7 * */ function posX(elem) { return parseInt(getStyle(elem, "left")); } /** * 查找元素的頂端位置 * */ function posY(elem) { return parseInt(getStyle(elem, "top")); } /*設置元素x和y位置(與當前位置無關)的一對函數*/ /** * 設置元素水平的函數 * */ function setX(elem, pos) { elem.style.left = pos + "px"; } /** * 設置元素垂直位置的函數 * */ function setY(elem, pos) { elem.style.top = pos + "px"; } /** * 在元素的水平位置上增加像素距離的函數 * */ function addX(elem, pos) { setX(posX(elem) + pos); } /** * 在元素的垂直位置上增加像素距離的函數 * */ function addY(elem, pos) { setY(posY(elem) + pos); }
代碼來源:https://gist.github.com/hehongwei44/7f0eca7c0a0ae19adc9f
元素相對于整個父親節點的left和top的輔助函數/** * 元素elem相對于父親元素的左端和頂端的位置 * 依賴腳本:https://gist.github.com/hehongwei44/8d33a6e35ee045722e75 * */ /** * 獲取元素相對于父親元素的水平位置 * */ function parentX(elem) { /** * 如果offsetParent是元素的父親,那么提前提出 * 否則,我們需要找到元素和元素的父親相對于整個頁面位置,并計算他們之間的差 * */ return elem.parentNode == elem.offsetParent ? elem.offsetLeft : pageX(elem) - pageX(elem.parentNode); } /** * 獲取元素相對于父親元素的頂端位置 * * */ function parentY(elem) { /** * 如果offsetParent是元素的父親,那么提前提出 * 否則,我們需要找到元素和元素的父親相對于整個頁面位置,并計算他們之間的差 * */ return elem.parentNode == elem.offsetParent ? elem.offsetTop : pageY(elem) - pageY(elem.parentNode); }
代碼來源:https://gist.github.com/hehongwei44/d8530ae974b1aabbab55
元素相對于整個文檔的left和top的輔助函數/*元素elem相對于整個文檔的左端和頂端的位置*/ /** * 獲取元素的水平位置 * */ function pageX(elem) { /** * 參看我們是否位于根元素 * 如果我們能繼續得到上一個元素,增加當前偏移量并繼續向下遞歸. * 否則,獲取當前的偏移量. * */ return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft; } /** * 獲取元素的頂端位置 * * */ function pageY(elem) { /** * 參看我們是否位于根元素 * 如果我們能繼續得到上一個元素,增加當前偏移量并繼續向下遞歸. * 否則,獲取當前的偏移量. */ return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop; }
代碼來源:https://gist.github.com/hehongwei44/8d33a6e35ee045722e75
事件模型的封裝/** * * @author Dean Edwards * @date 2005/10 * @link http://dean.edwards.name/weblog/2005/10/add-event/ * @transform https://github.com/hehongwei44 * @compatibility IE6+ ,FF, chrome * * */ //調用方式->addEvent(window, "load", function(){}) function addEvent(element, type, handler) { //如果瀏覽器原生支持W3C的標準行為addEventListener函數,則直接綁定函數句柄. if (element.addEventListener) { //flase表示不支持事件捕捉,主流瀏覽器都支持該標準,IE9+ element.addEventListener(type, handler, false); } else { // 為每一個事件句柄賦值一個獨立的ID,addEvent.guid的初始值為1. if (!handler.$$guid) handler.$$guid = addEvent.guid++; // 為元素建立一個事件類型的散列表 if (!element.events) element.events = {}; // 為每對元素/事件建立一個事件處理函數的散列表 var handlers = element.events[type]; if (!handlers) { handlers = element.events[type] = {}; // 存儲已有的事件處理函數(如果已存在一個),ps:用來特殊處理"on+type"的類型事件. if (element["on" + type]) { handlers[0] = element["on" + type]; } } // 在散列表中存儲該事件的處理函數. handlers[handler.$$guid] = handler; // 賦以一個全局事件處理函數來處理所有的工作 element["on" + type] = handleEvent; } } // 創建獨立ID的計數器 addEvent.guid = 1; function removeEvent(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else { // 從散列表中刪除事件處理函數 if (element.events && element.events[type]) { delete element.events[type][handler.$$guid]; } } } //事件處理函數 function handleEvent(event) { var returnValue = true; // 獲取事件對象(IE使用全局事件對象) event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event); // 獲取事件處理函數散列表的引用. var handlers = this.events[event.type]; // 依次執行每個事件處理函數 for (var i in handlers) { this.$$handleEvent = handlers[i]; //執行回調函數 if (this.$$handleEvent(event) === false) { returnValue = false; } } return returnValue; } //重新包裝event對象,使其兼容IE和W3C標準. function fixEvent(event) { // 增加W3C標準事件方法. event.preventDefault = fixEvent.preventDefault; event.stopPropagation = fixEvent.stopPropagation; return event; } //IE瀏覽器阻止默認行為的方式 fixEvent.preventDefault = function () { //this指向event對象 this.returnValue = false; } //IE瀏覽器阻止冒泡的方式 fixEvent.stopPropagation = function () { //this指向event對象 this.cancelBubble = true; };
代碼來源:https://gist.github.com/hehongwei44/3c9ec099751f8f2e197e
阻止事件冒泡和默認行為的通用函數/** * 阻止事件冒泡的通用函數 * */ function stopBubble(e) { if (e && e.stopPropagation) { e.stopPropagation(); } else { window.event.cancelBubble = true; } } /** * 防止發生默認瀏覽器行為的通用函數 * */ function stopDefault(e) { if (e && e.preventDefault) { e.preventDefault(); } else { window.event.returnValue = false; } return false; }
代碼來源:https://gist.github.com/hehongwei44/5fb2134a70ab8379849e
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/87693.html
摘要:把中的偽數組轉換為真數組在中,函數中的隱藏變量和用獲得的元素集合都不是真正的數組,不能使用等方法,在有這種需要的時候只能先轉換為真正的數組。檢測元素是否支持某個屬性代碼用法創建和使用命名空間使用方式 把JavaScript中的偽數組轉換為真數組 在 JavaScript 中, 函數中的隱藏變量 arguments 和用 getElementsByTagName 獲得的元素集合(Nod...
摘要:代碼來源一些常用的操作方法介紹查找相關元素的前一個兄弟元素的方法。查找元素指定層級的父元素。 DOM操作的增強版功能函數 /** * 將一個DOM節點、HTML字符串混合型參數 * 轉化為原生的DOM節點數組 * * */ function checkElem(a) { var r = []; if (a.constructor != Array) { ...
摘要:進制為代碼來源通過標簽解析通過標簽解析標簽參數是字符串,解析的目標通過測試創建一個標簽將賦值給標簽的屬性。協議主機名稱端口查詢字符串查詢參數文件名哈希參數路徑相對路徑路徑片段代碼來源 圖片預加載 // 更新: // 05.27: 1、保證回調執行順序:error > ready > load;2、回調函數this指向img本身 // 04-02: 1、增加圖片完全加載后的回調 2、提...
通過數組,拓展字符串拼接容易導致性能的問題 function StringBuffer() { this.__strings__ = new Array(); } StringBuffer.prototype.append = function (str) { this.__strings__.push(str); return this; } StringBuffer....
摘要:它會指出一個類是繼承自另一個類的。測試測試代碼來源頁面倒計時的一段運用倒計時的一段腳本。截止日期符合日期格式,比如等有效日期。截止的天數小時分鐘秒數組成的對象。 清楚節點內的空格 function cleanWhitespace(element) { //如果不提供參數,則處理整個HTML文檔 element = element || document; //...
閱讀 1456·2021-09-02 13:57
閱讀 1870·2019-08-30 15:55
閱讀 2407·2019-08-30 15:54
閱讀 2241·2019-08-30 15:44
閱讀 2733·2019-08-30 13:18
閱讀 480·2019-08-30 13:02
閱讀 628·2019-08-29 18:46
閱讀 1665·2019-08-29 11:25