摘要:但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的,包含基礎(chǔ)操作,支持鏈?zhǔn)讲僮鳎瑑H供日常使用。功能基于基本選擇器構(gòu)造,包括基于原生構(gòu)造,將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作,構(gòu)造器應(yīng)包含復(fù)數(shù)的。
原文地址:Bougie的博客
jQuery作為曾經(jīng)Web前端的必備利器,隨著MVVM框架的興起,如今已稍顯沒(méi)落。但它操作DOM的便利性無(wú)出其右。我用ES6寫(xiě)了一個(gè)基于class簡(jiǎn)化版的jQuery,包含基礎(chǔ)DOM操作,支持鏈?zhǔn)讲僮鳎瑑H供日常使用。當(dāng)然,它不支持IE。構(gòu)造器(constructor)
構(gòu)造一個(gè)tinyJquery對(duì)象。功能:基于基本選擇器構(gòu)造,包括id、class、tagName;基于原生DOM構(gòu)造,將原生DOM對(duì)象轉(zhuǎn)化為tinyJquery對(duì)象。為支持批量操作,tinyJquery構(gòu)造器應(yīng)包含復(fù)數(shù)的DOM。
class tinyJquery { constructor(name) { if (typeof name == "string") { this.dom = document.querySelectorAll(name) } else if (name.constructor.name == "NodeList" || Array.isArray(name)){ this.dom = name } else { this.dom = [name] } } }
使用$函數(shù)構(gòu)建tinyJquery對(duì)象
function $(name) { return new tinyJquery(name) }方法(后續(xù)會(huì)漸漸完善) event操作
// addEventListener on(eventName, fn, bubble = false) { this.dom.forEach(i => { i.addEventListener(eventName, fn, !bubble) }) return $(this.dom) } // removeEventListener un(eventName, fn, bubble = false) { this.dom.forEach(i => { i.removeEventListener(eventName, fn, !bubble) }) return $(this.dom) }class操作
// addClass ac(className) { this.dom.forEach(i => { i.classList.add(className) }) return $(this.dom) } // removeClass rc(className) { this.dom.forEach(i => { i.classList.remove(className) }) return $(this.dom) } // toggleClass tc(className) { this.dom.forEach(i => { i.classList.toggle(className) }) return $(this.dom) } // containClass cc(className) { let flag = false this.dom.forEach(i => { if(i.classList.contains(className)) flag = true }) return flag }屬性操作
// set inline style css(obj) { this.dom.forEach(v => { Object.keys(obj).forEach(i => { v.style[i] = obj[i] }) }) return $(this.dom) } // get or set input value val(val) { if(val) { this.dom[0].value = val return $(this.dom) } else { return this.dom[0].value } }內(nèi)容操作
// get or set dom innerHtml html(val) { if(val) { this.dom.forEach(i => { i.innerHTML = val }) return $(this.dom) } else { return this.dom[0].innerHTML } } // get or set attribute attr(key, val) { if(key && !val) { return this.dom[0].getAttribute(key) } else { this.dom.forEach(i => { i.setAttribute(key, val) }) return $(this.dom) } }表單操作
// get JSONData serializeObject() { let dom = this.dom[0], obj = {} dom.querySelectorAll("input, textarea").forEach(i => { obj[i.getAttribute("name")] = i.value }) return obj } // get FormData serializeForm() { let dom = this.dom[0], form = new FormData() dom.querySelectorAll("input, textarea").forEach(i => { form.append(i.getAttribute("name"), i.value) }) return form }
2018-04-16更新Dom獲取
// parent parent() { return $(this.dom[0].parentNode) } // siblings siblings() { let dom = this.dom[0] var a = []; var p = dom.parentNode.children; for (var i = 0, pl = p.length; i < pl; i++) { if (p[i] !== dom) a.push(p[i]); } // console.log(Array.isArray(a)) return $(a) }遍歷
// each each(callback) { // this.dom.forEach(i => { // // callback.bind(i)() // callback.call(i, null) // }) this.dom.forEach(i => { callback($(i)) }) }
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/52152.html
摘要:但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的,僅做個(gè)學(xué)習(xí)記錄。包含基礎(chǔ)操作,支持鏈?zhǔn)讲僮鳎瑑H供日常使用。功能基于基本選擇器構(gòu)造,包括基于原生構(gòu)造,將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作,構(gòu)造器應(yīng)包含復(fù)數(shù)的。 原文地址:Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經(jīng)Web前端的必...
摘要:但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的,僅做個(gè)學(xué)習(xí)記錄。包含基礎(chǔ)操作,支持鏈?zhǔn)讲僮鳎瑑H供日常使用。功能基于基本選擇器構(gòu)造,包括基于原生構(gòu)造,將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作,構(gòu)造器應(yīng)包含復(fù)數(shù)的。 原文地址:Bougie的博客showImg(https://segmentfault.com/img/bV71uK?w=500&h=260);jQuery作為曾經(jīng)Web前端的必...
摘要:但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的,包含基礎(chǔ)操作,支持鏈?zhǔn)讲僮鳎瑑H供日常使用。功能基于基本選擇器構(gòu)造,包括基于原生構(gòu)造,將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作,構(gòu)造器應(yīng)包含復(fù)數(shù)的。 原文地址:Bougie的博客 jQuery作為曾經(jīng)Web前端的必備利器,隨著MVVM框架的興起,如今已稍顯沒(méi)落。但它操作DOM的便利性無(wú)出其右。我用ES6寫(xiě)了一個(gè)基于class簡(jiǎn)化版的jQue...
摘要:但它操作的便利性無(wú)出其右。我用寫(xiě)了一個(gè)基于簡(jiǎn)化版的,包含基礎(chǔ)操作,支持鏈?zhǔn)讲僮鳎瑑H供日常使用。功能基于基本選擇器構(gòu)造,包括基于原生構(gòu)造,將原生對(duì)象轉(zhuǎn)化為對(duì)象。為支持批量操作,構(gòu)造器應(yīng)包含復(fù)數(shù)的。 原文地址:Bougie的博客 jQuery作為曾經(jīng)Web前端的必備利器,隨著MVVM框架的興起,如今已稍顯沒(méi)落。但它操作DOM的便利性無(wú)出其右。我用ES6寫(xiě)了一個(gè)基于class簡(jiǎn)化版的jQue...
摘要:我對(duì)很有興趣,但是我發(fā)現(xiàn)想寫(xiě)不容易。于是我馬上動(dòng)手,有了這個(gè),本意是自己用,現(xiàn)在也推薦給大家,也希望大家積極指出不足,提出建議,當(dāng)然如果有更好的方案,也可以推薦給我。特點(diǎn)使用了,這樣可以用來(lái)書(shū)寫(xiě)代碼。 我對(duì) react 很有興趣,但是我發(fā)現(xiàn)想寫(xiě) react 不容易。 我需要在開(kāi)始寫(xiě)代碼之前做很多準(zhǔn)備工作,我需要編譯jsx文件,引入react等等,而最新的react示例,有鼓勵(lì)ES6來(lái)書(shū)...
閱讀 4083·2023-04-26 01:48
閱讀 3258·2021-10-13 09:40
閱讀 1739·2021-09-26 09:55
閱讀 3613·2021-08-12 13:23
閱讀 1780·2021-07-25 21:37
閱讀 3432·2019-08-30 15:53
閱讀 1393·2019-08-29 14:16
閱讀 1397·2019-08-29 12:59