2019獨角獸企業重金招聘Python工程師標準>>>

原生js封裝，實現jquery中常用 方法

//定義一個對象 - 名字是$ var $$ = function() {this.init() }; //第二種寫法 $$.prototype = {init:function(){this.fnExtend()this.strExtend()this.arrayExtend()this.DateExtend()this.numExtend()},//函數擴展fnExtend:function (){//給函數擴展方法Function.prototype.before = function( func ) {var __self = this;return function() {if ( func.apply( this, arguments ) === false ) {return false;}return __self.apply( this, arguments );}}Function.prototype.after = function( func ) {var __self = this;return function() {var ret = __self.apply( this, arguments );if( ret === false) {return false;}func.apply( this, arguments );return ret;}} },//函數擴展strExtend:function(){},//函數擴展arrayExtend:function(){},//函數擴展DateExtend:function(){},//函數擴展numExtend:function(){},//去除左邊空格ltrim:function(str){return str.replace(/(^\s*)/g,'');},//去除右邊空格rtrim:function(str){return str.replace(/(\s*$)/g,'');},//去除空格trim:function(str){return str.replace(/(^\s*)|(\s*$)/g, '');},//ajax - 前面我們學習的myAjax:function(URL,fn){var xhr = createXHR(); //返回了一個對象，這個對象IE6兼容。xhr.onreadystatechange = function(){if(xhr.readyState === 4){if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){fn(xhr.responseText);}else{alert("錯誤的文件！");}}};xhr.open("get",URL,true);xhr.send();//閉包形式，因為這個函數只服務于ajax函數，所以放在里面function createXHR() {//本函數來自于《JavaScript高級程序設計 第3版》第21章if (typeof XMLHttpRequest != "undefined") {return new XMLHttpRequest();} else if (typeof ActiveXObject != "undefined") {if (typeof arguments.callee.activeXString != "string") {var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i, len;for (i = 0, len = versions.length; i < len; i++) {try {new ActiveXObject(versions[i]);arguments.callee.activeXString = versions[i];break;} catch (ex) {//skip}}}return new ActiveXObject(arguments.callee.activeXString);} else {throw new Error("No XHR object available.");}}},//tabtab:function(id) {//如何獲取某個父元素下面的子元素var box = document.getElementById(id);var spans = box.getElementsByTagName('span');var lis = box.getElementsByTagName('li');//兩步走//第一步: 先把上半部分實現//群體綁定事件 -- 對所有的span綁定事件//群體綁定事件for(var i=0;i<spans.length;i++) {//相親法則 -- 給男一號一個代號 -- 怎么給 -- 自定義屬性spans[i].index=i;spans[i].onmouseover = function() {//排他思想 -- 將所有的span置為默認狀態 --- 然后再將當前鼠標移上的span置為class -- selectfor(var i=0;i<spans.length;i++) {spans[i].className='';lis[i].className='';}this.className='select';lis[this.index].className='select';}}},//簡單的數據綁定formateStringformateString:function(str, data){return str.replace(/@\((\w+)\)/g, function(match, key){return typeof data[key] === "undefined" ? '' : data[key]});},//給一個對象擴充功能extendMany:function() {var key,i = 0,len = arguments.length,target = null,copy;if(len === 0){return;}else if(len === 1){target = this;}else{i++;target = arguments[0];}for(; i < len; i++){for(key in arguments[i]){copy = arguments[i][key];target[key] = copy;}}return target;},extend:function(tar,source) {//遍歷對象for(var i in source){tar[i] = source[i];}return tar;},//隨機數random: function (begin, end) {return Math.floor(Math.random() * (end - begin)) + begin;},//給一個對象擴充功能extendMany:function() {var key,i = 0,len = arguments.length,target = null,copy;if(len === 0){return;}else if(len === 1){target = this;}else{i++;target = arguments[0];}for(; i < len; i++){for(key in arguments[i]){copy = arguments[i][key];target[key] = copy;}}return target;},extend:function(tar,source) {//遍歷對象for(var i in source){tar[i] = source[i];}return tar;},//數據類型檢測isNumber:function (val){return typeof val === 'number' && isFinite(val)},isBoolean:function (val) {return typeof val ==="boolean";},isString:function (val) {return typeof val === "string";},isUndefined:function (val) {return typeof val === "undefined";},isObj:function (str){if(str === null || typeof str === 'undefined'){return false;}return typeof str === 'object';},isNull:function (val){return val === null;},isArray:function (arr) {if(arr === null || typeof arr === 'undefined'){return false;}return arr.constructor === Array;} } //在框架中實例化，這樣外面使用的使用就不用實例化了 $$ = new $$();//封裝事件框架 $$.extend($$,{on: function (id, type, fn){var dom = $$.isString(id)?document.getElementById(id):id;//如果支持//W3C版本 --火狐 谷歌 等大多數瀏覽器//如果你想檢測對象是否支持某個屬性，方法，可以通過這種方式if(dom.addEventListener ){dom.addEventListener(type, fn, false);}else if(dom.attachEvent){//如果支持 --IE//dom.attachEvent('on' + type, fn);}},un:function(id, type, fn){var dom = $$.isString(id)?document.getElementById(id):id;if(dom.removeEventListener){dom.removeEventListener(type, fn);}else if(dom.detachEvent){dom.detachEvent(type, fn);}},trigger: function(id,type){var dom = $$.isString(id)?document.getElementById(id):id;// 現代瀏覽器if(dom.dispatchEvent){// 創建事件var evt = document.createEvent('Event');// 定義事件的類型evt.initEvent(type, true, true);// 觸發事件dom.dispatchEvent(evt);// IE} else if(dom.fireEvent){dom.fireEvent('on' + type);}},//事件基礎getEvent:function(event){return event?event:window.event;},//獲取目標GetTarget :function(event){var e = $$.getEvent(event);return e.target|| e.srcElement;},//組織默認行為preventDefault:function(event){var event = $$.getEvent(event);if(event.preventDefault){event.preventDefault();}else{event.returnValue = false;}},//組織冒泡stopPropagation:function(event){var event = $$.getEvent(event);if(event.stopPropagation){event.stopPropagation();}else{event.cancelBubble = true;}} })//封裝選擇框架 $$.extend($$,{//id選擇器$id:function(id){return document.getElementById(id);},//tag選擇器$tag:function(tag,context){if(typeof context == 'string'){context = $$.$id(context);}if(context){return context.getElementsByTagName(tag);}else{return document.getElementsByTagName(tag);}},//class選擇器$class:function(className,context){var i=0,len,dom=[],arr=[];//如果傳遞過來的是字符串 ，則轉化成元素對象if($$.isString(context)){context = document.getElementById(context);}else{context = document;} // 如果兼容getElementsByClassNameif(context.getElementsByClassName){return context.getElementsByClassName(className);}else{//如果瀏覽器不支持dom = context.getElementsByTagName('*');for(i;len=dom.length,i<len;i++){if(dom[i].className){arr.push(dom[i]);}}}return arr;},//分組選擇器$group:function(content) {var result=[],doms=[];var arr = $$.trim(content).split(',');//alert(arr.length);for(var i=0,len=arr.length;i<len;i++) {var item = $$.trim(arr[i])var first= item.charAt(0)var index = item.indexOf(first)if(first === '.') {doms=$$.$class(item.slice(index+1))//每次循環將doms保存在reult中//result.push(doms);//錯誤來源//陷阱1解決 封裝重復的代碼成函數pushArray(doms,result)}else if(first ==='#'){doms=[$$.$id(item.slice(index+1))]//陷阱：之前我們定義的doms是數組，但是$id獲取的不是數組，而是單個元素//封裝重復的代碼成函數pushArray(doms,result)}else{doms = $$.$tag(item)pushArray(doms,result)}}return result;//封裝重復的代碼function pushArray(doms,result){for(var j= 0, domlen = doms.length; j < domlen; j++){result.push(doms[j])}}},//層次選擇器$cengci:function (select){//個個擊破法則 -- 尋找擊破點var sel = $$.trim(select).split(' ');var result=[];var context=[];for(var i = 0, len = sel.length; i < len; i++){result=[];var item = $$.trim(sel[i]);var first = sel[i].charAt(0)var index = item.indexOf(first)if(first ==='#'){//如果是#，找到該元素，pushArray([$$.$id(item.slice(index + 1))]);context = result;}else if(first ==='.'){//如果是.//如果是.//找到context中所有的class為【s-1】的元素 --context是個集合if(context.length){for(var j = 0, contextLen = context.length; j < contextLen; j++){pushArray($$.$class(item.slice(index + 1), context[j]));}}else{pushArray($$.$class(item.slice(index + 1)));}context = result;}else{//如果是標簽//遍歷父親，找到父親中的元素==父親都存在context中if(context.length){for(var j = 0, contextLen = context.length; j < contextLen; j++){pushArray($$.$tag(item, context[j]));}}else{pushArray($$.$tag(item));}context = result;}}return context;//封裝重復的代碼function pushArray(doms){for(var j= 0, domlen = doms.length; j < domlen; j++){result.push(doms[j])}}},//多組+層次$select:function(str) {var result = [];var item = $$.trim(str).split(',');for(var i = 0, glen = item.length; i < glen; i++){var select = $$.trim(item[i]);var context = [];context = $$.$cengci(select);pushArray(context);};return result;//封裝重復的代碼function pushArray(doms){for(var j= 0, domlen = doms.length; j < domlen; j++){result.push(doms[j])}}},//html5實現的選擇器$all:function(selector,context){context = context || document;return context.querySelectorAll(selector);}, })//封裝css框架 $$.extend($$,{//樣式css:function(context, key, value){console.log('dfdfd')var dom = $$.isString(context)?$$.$all(context) : context;//如果是數組if(dom.length){//先骨架骨架 -- 如果是獲取模式 -- 如果是設置模式//如果value不為空，則表示設置if(value){for(var i = dom.length - 1; i >= 0; i--){setStyle(dom[i],key, value);}// 如果value為空，則表示獲取}else{return getStyle(dom[0]);}//如果不是數組}else{if(value){setStyle(dom,key, value);}else{return getStyle(dom);}}function getStyle(dom){if(dom.currentStyle){return dom.currentStyle[key];}else{return getComputedStyle(dom,null)[key];}}function setStyle(dom,key,value){dom.style[key] = value;}},cssNum:function (context, key){return parseFloat($$.css(context, key))},//顯示show:function (content){var doms = $$.$all(content)for(var i= 0,len=doms.length;i<len;i++){$$.css(doms[i], 'display', 'block');}},//隱藏和顯示元素hide:function (content){var doms = $$.$all(content)for(var i= 0,len=doms.length;i<len;i++){$$.css(doms[i], 'display', 'none');}},//元素高度寬度概述//計算方式：clientHeight clientWidth innerWidth innerHeight//元素的實際高度+border，也不包含滾動條Width:function (id){return $$.$id(id).clientWidth},Height:function (id){return $$.$id(id).clientHeight},//元素的滾動高度和寬度//當元素出現滾動條時候，這里的高度有兩種：可視區域的高度 實際高度（可視高度+不可見的高度）//計算方式 scrollwidthscrollWidth:function (id){return $$.$id(id).scrollWidth},scrollHeight:function (id){return $$.$id(id).scrollHeight},//元素滾動的時候 如果出現滾動條 相對于左上角的偏移量//計算方式 scrollTop scrollLeftscrollTop:function (id){return $$.$id(id).scrollTop},scrollLeft:function (id){return $$.$id(id).scrollLeft},//獲取屏幕的高度和寬度screenHeight:function (){return window.screen.height},screenWidth:function (){return window.screen.width},//文檔視口的高度和寬度wWidth:function (){return document.documentElement.clientWidth},wHeight:function (){return document.documentElement.clientHeight},//文檔滾動區域的整體的高和寬wScrollHeight:function () {return document.body.scrollHeight},wScrollWidth:function () {return document.body.scrollWidth},//獲取滾動條相對于其頂部的偏移wScrollTop:function () {var scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;return scrollTop},//獲取滾動條相對于其左邊的偏移wScrollLeft:function () {var scrollLeft = document.body.scrollLeft || (document.documentElement && document.documentElement.scrollLeft);return scrollLeft} })//封裝屬性框架 $$.extend($$,{//屬性操作，獲取屬性的值，設置屬性的值 at tr（'test','target','_blank'）attr:function(content, key, value){var dom = $$.$all(content); // 如果是數組 比如tagif(dom.length){if(value){for(var i= 0, len=dom.length; i <len; i++){dom[i].setAttribute(key, value);}}else{return dom[0].getAttribute(key);} // 如果是單個元素 比如id}else{if(value){dom.setAttribute(key, value);}else{return dom.getAttribute(key);}} },//動態添加和移除classaddClass:function (context, name){var doms = $$.$all(context);//如果獲取的是集合if(doms.length){for(var i= 0,len=doms.length;i<len;i++){addName(doms[i]);}//如果獲取的不是集合}else{addName(doms);}function addName(dom){dom.className = dom.className + ' ' + name;} },removeClass:function (context, name){var doms = $$.$all(context);if(doms.length){for(var i= 0,len=doms.length;i<len;i++){removeName(doms[i]);}}else{removeName(doms);}function removeName(dom){dom.className = dom.className.replace(name, '');} },//判斷是否有hasClass:function(context,name){var doms = $$.$all(context)var flag = true;for(var i= 0,len=doms.length;i<len;i++){flag = flag && check(doms[i],name)}return flag;//判定單個元素function check(element,name){return -1<(" "+element.className+" ").indexOf(" "+name+" ")} },//獲取getClass:function (id){var doms = $$.$all(id)return $$.trim(doms[0].className).split(" ") } })//內容框架 $$.extend($$,{//innerHTML的函數版本html:function (context, value){var doms = $$.$all(context);//設置if(value){for(var i= 0,len= doms.length; i<len; i++){doms[i].innerHTML = value;}}else{return doms[0].innerHTML} } })//封裝DOM框架 -- 放在后面 $$.extend($$,{//選擇eq:function(){},first:function(){},last:function(){},//元素的插入和刪除 克隆append:function(){},empty:function(){},remove:function(){},clone:function(){} })//封裝json框架 $$.extend($$,{//將json轉換成字符串sjson:function (json) {return JSON.stringify(json);},//將字符串轉成jsonjson:function (str) {return eval(str);} })//緩存框架 - 內存篇 $$.cache = {data:[],get:function(key){console.log('111')var value = null;console.log(this.data)for(var i= 0,len=this.data.length;i<len; i++){var item = this.data[i]if (key == item.key) {value = item.value;}}console.log('get'+value)return value;},add:function(key,value){var json= { key: key, value: value};this.data.push(json);},delete:function(key){var status = false;for(var i= 0,len=this.data.length;i<len; i++){var item = this.data[i]// 循環數組元素if (item.key.trim() == key) {this.data.splice(i, 1);//開始位置,刪除個數status = true;break;}}return status;},update:function(key,value){var status = false;// 循環數組元素for(var i= 0,len=this.data.length;i<len; i++){var item = this.data[i]if (item.key.trim() === key.trim()) {item.value = value.trim();status = true;break;}}return status;},isExist:function(key){for(var i= 0,len=this.data.length;i<len; i++){var item = this.data[i]if (key === item.key) {return true;}else{return false;}}} }//cookie框架 $$.cookie = {//設置cooliesetCookie: function (name,value,days,path){var name = escape(name);var value = escape(value);var expires = new Date();expires.setTime(expires.getTime() + days*24*60*60*1000);path = path == "" ? "" : ";path=" + path;_expires = (typeof hours) == "string" ? "" : ";expires=" + expires.toUTCString();document.cookie = name + "=" + value + _expires + path; },//獲取cookie值getCookie:function (name){var name = escape(name);//讀cookie屬性，這將返回文檔的所有cookievar allcookies = document.cookie;//查找名為name的cookie的開始位置name += "=";var pos = allcookies.indexOf(name);//如果找到了具有該名字的cookie，那么提取并使用它的值if (pos != -1){ //如果pos值為-1則說明搜索"version="失敗var start = pos + name.length; //cookie值開始的位置var end = allcookies.indexOf(";",start); //從cookie值開始的位置起搜索第一個";"的位置,即cookie值結尾的位置if (end == -1) end = allcookies.length; //如果end值為-1說明cookie列表里只有一個cookievar value = allcookies.substring(start,end); //提取cookie的值return unescape(value); //對它解碼}else return ""; //搜索失敗，返回空字符串 },//刪除cookiedeleteCookie:function (name,path){var name = escape(name);var expires = new Date(0);path = path == "" ? "" : ";path=" + path;document.cookie = name + "="+ ";expires=" + expires.toUTCString() + path; } }//本地存儲框架 $$.store = (function () {var api = {},win = window,doc = win.document,localStorageName = 'localStorage',globalStorageName = 'globalStorage',storage;api.set = function (key, value) {};api.get = function (key) {};api.remove = function (key) {};api.clear = function () {};if (localStorageName in win && win[localStorageName]) {storage = win[localStorageName];api.set = function (key, val) { storage.setItem(key, val) };api.get = function (key) { return storage.getItem(key) };api.remove = function (key) { storage.removeItem(key) };api.clear = function () { storage.clear() };} else if (globalStorageName in win && win[globalStorageName]) {storage = win[globalStorageName][win.location.hostname];api.set = function (key, val) { storage[key] = val };api.get = function (key) { return storage[key] && storage[key].value };api.remove = function (key) { delete storage[key] };api.clear = function () { for (var key in storage ) { delete storage[key] } };} else if (doc.documentElement.addBehavior) {function getStorage() {if (storage) { return storage }storage = doc.body.appendChild(doc.createElement('div'));storage.style.display = 'none';// See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx// and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspxstorage.addBehavior('#default#userData');storage.load(localStorageName);return storage;}api.set = function (key, val) {var storage = getStorage();storage.setAttribute(key, val);storage.save(localStorageName);};api.get = function (key) {var storage = getStorage();return storage.getAttribute(key);};api.remove = function (key) {var storage = getStorage();storage.removeAttribute(key);storage.save(localStorageName);}api.clear = function () {var storage = getStorage();var attributes = storage.XMLDocument.documentElement.attributes;;storage.load(localStorageName);for (var i=0, attr; attr = attributes[i]; i++) {storage.removeAttribute(attr.name);}storage.save(localStorageName);}}return api; })();

?

轉載于:https://my.oschina.net/yongxinke/blog/851989

總結

以上是生活随笔為你收集整理的前端那些事之原生js实现jquery常用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。