摘要:注同時移除元素上的事件及數據。其他對象通過其屬性名進行迭代。原始數組不受影響。檢查對象是否為空不包含任何屬性。返回一個數字,表示當前時間。兩者性能差不多接受一個標準格式的字符串,并返回解析后的對象。
在我看來,jQuery確實已經過時了。本項目總結了絕大部分 jQuery API 替代的方法,類似項目You-Dont-Need-jQuery,并會再此基礎上進行很多的補充。寫這個項目主要想讓自己和大家增進對javascript原生api的理解,也可以作為一個"原生jquery"的api文檔隨時查看。兼容ie9及以上瀏覽器,如不支持ie9會特別說明。
原文地址 https://github.com/fa-ge/jQuery-is-out-of-date
目錄Regulation
DOM Manipulation
Query Selector
Ajax
Events
Utilities
Animation
Regulationfunction $(selector) { return document.querySelector(selector) } function $$(selector) { return Array.prototype.slice.call(document.querySelectorAll(selector)) }
如果在jQuery示例下的$是jquery對象,在Native示例下的$是以上的實現。相當于實現了chrome控制臺上$,$$方法。
DOM Manipulation很多人一直認為jQuery還沒有過時的其中一個原因是在DOM操作上非常方便。接下來比較一下。
add添加元素到匹配的元素集合。
// jQuery $(selector).add($(newEl)) // Native $$(selector).push(newEl)addClass
為每個匹配的元素添加指定的樣式類名
// jQuery $(el).addClass(className) // Native (IE 10+ support) el.classList.add(className)after
在匹配元素集合中的每個元素后面插入參數所指定的內容,作為其兄弟節點。
// jQuery $(el).after("") // Native (Html string) el.insertAdjacentHTML("afterend", "") // Native (Element) el.insertAdjacentElement("afterend", newEl) // Native (Element) el.parentNode.insertBefore(newEl, el.nextSibling)append
在每個匹配元素里面的末尾處插入參數內容。
// jQuery $(el).append("") // Native (Html string) el.insertAdjacentHTML("beforeend", "") // Native (Element) el.insertAdjacentElement("beforeend", newEl) // Native (Element) el.appendChild(newEl)appendTo
與append相反
attr獲取匹配的元素集合中的第一個元素的屬性的值。設置每一個匹配元素的一個或多個屬性。
// jQuery $(el).attr("foo") // Native el.getAttribute("foo") // jQuery $(el).attr("foo", "bar") // Native el.setAttribute("foo", "bar")before
根據參數設定,在匹配元素的前面插入內容(外部插入)
// jQuery $(el).before("") // Native (Html string) el.insertAdjacentHTML("beforebegin", "") // Native (Element) el.insertAdjacentElement("beforebegin", newEl) // Native (Element) el.parentNode.insertBefore(newEl, el)children
獲得匹配元素集合中每個元素的子元素,選擇器選擇性篩選。
// jQuery $(el).children() // Native el.childrenclone
創建一個匹配的元素集合的深度拷貝副本。
// jQuery $(el).clone() // Native el.cloneNode() // For Deep clone , set param as `true`closest
從元素本身開始,在DOM 樹上逐級向上級元素匹配,并返回最先匹配的祖先元素。以數組的形式返回與選擇器相匹配的所有元素,從當前元素開始,在 DOM 樹中向上遍歷。
// jQuery $el.closest(selector) // Native - Only latest, NO IE el.closest(selector) // Native function closest(el, selector = false) { const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector do { if (matchesSelector.call(el, selector)) { return el } } while ((el = el.parentElement) !== null) return null }contents
獲得匹配元素集合中每個元素的子元素,包括文字和注釋節點。
// jQuery $(el).contents() // Native el.childNodescss
獲取匹配元素集合中的第一個元素的樣式屬性的值設置每個匹配元素的一個或多個CSS屬性。
// jQuery $(el).css("color") // Native // 注意:此處為了解決當 style 值為 auto 時,返回 auto 的問題 const win = el.ownerDocument.defaultView // null 的意思是不返回偽類元素 win.getComputedStyle(el, null).color // jQuery $(el).css({ color: "#f01" }) // Native el.style.color = "#f01" // 一次性設置多個樣式 // jQuery $(el).css({ color: "#f01", "background-color": "#000" }) // Native const cssObj = {color: "#f01", backgroundColor: "#000"} for (let key in cssObj) { el.style[key] = cssObj[key] } // Native const cssText = "color: #f01; background-color: #000" el.style.cssText += cssTextempty
從DOM中移除集合中匹配元素的所有子節點。
// jQuery $(el).empty() // Native el.innerHTML = ""filter
篩選元素集合中匹配表達式 或 通過傳遞函數測試的 那些元素集合。
// jQuery $(selector).filter(filterFn) // Native $$(selector).filter(filterFn)find
通過一個選擇器,jQuery對象,或元素過濾,得到當前匹配的元素集合中每個元素的后代。
// jQuery $(el).find(selector) // Native el.querySelectorAll(selector)has
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素。
// jQuery $(selector).has("p") // Native $$(selector).filter(el => el.querySelector("p") !== null)hasClass
確定任何一個匹配元素是否有被分配給定的(樣式)類。
// jQuery $(el).hasClass(className) // Native (IE 10+ support) el.classList.contains(className)height
獲取匹配元素集合中的第一個元素的當前計算高度值。設置每一個匹配元素的高度值。
// jQuery window $(window).height() // Native window.innerHeight // jQuery document $(document).height() // Native const body = document.body const html = document.documentElement const height = Math.max( body.offsetHeight, body.scrollHeight, html.clientHeight, html.offsetHeight, html.scrollHeight ) // jQuery Element (it"s `height` always equals to content height) $(el).height() // Native function getHeight(el) { const styles = window.getComputedStyle(el) const height = el.clientHeight const paddingTop = parseFloat(styles.paddingTop) const paddingBottom = parseFloat(styles.paddingBottom) return height - paddingTop - paddingBottom } // Native // when `border-box`, it"s `height` === (content height) + padding + border; when `content-box`, it"s `height` === (content height) getComputedStyle(el, null).heighthtml
獲取集合中第一個匹配元素的HTML內容 設置每一個匹配元素的html內容。
// jQuery $(el).html() // Native el.innerHTML // jQuery $(el).html(htmlString) // Native el.innerHTML = htmlStringinnerHeight
為匹配的元素集合中獲取第一個元素的當前計算高度值,包括padding,但是不包括border。
// jQuery $(el).innerHeight() // Native el.clientHeight()innerWidth
為匹配的元素集合中獲取第一個元素的當前計算寬度值,包括padding,但是不包括border。
// jQuery $(el).innerWidth() // Native el.clientWidth()insertAfter
與after相反
insertBefore與before相反
is判斷當前匹配的元素集合中的元素,是否為一個選擇器,DOM元素,或者jQuery對象,如果這些元素至少一個匹配給定的參數,那么返回true。
// jQuery $(el).is(selector) // Native (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)next
取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。如果提供一個選擇器,那么只有緊跟著的兄弟元素滿足選擇器時,才會返回此元素。
// jQuery $(el).next() // Native el.nextElementSiblingnextAll
獲得每個匹配元素集合中所有下面的同輩元素,選擇性篩選的選擇器。
// jQuery $(el).nextAll() // Native const nextAll = [] while((el = el.nextElementSibling) !== null) { nextAll.push(el) }not
從匹配的元素集合中移除指定的元素。
// jQuery $(selector).not(matches) // Native const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector $$(selector).filter(el => !matchesSelector.call(el, matches))offset
在匹配的元素集合中,獲取的第一個元素的當前坐標,坐標相對于文檔。 設置匹配的元素集合中每一個元素的坐標, 坐標相對于文檔。
// jQuery $(el).offset() // Native const elClientRect = el.getBoundingClientRect() { top: elClientRect.top + window.pageYOffset - document.documentElement.clientTop, left: elClientRect.left + window.pageXOffset - document.documentElement.clientLeft } // jQuery $(el).offset(10, 10) // Native const elClientRect = el.getBoundingClientRect() const elTop = 10 - elClientRect.top - document.documentElement.clientTop const elLeft = 10 - elClientRect.left - document.documentElement.clientLeft el.style.cssText += `position: relative;top: ${elTop}px;left: ${elLeft}px;`offsetParent
// jQuery $(el).offsetParent() // Native el.offsetParent || elouterHeight
獲取元素集合中第一個元素的當前計算高度值,包括padding,border和選擇性的margin。返回一個整數(不包含“px”)表示的值 ?,或如果在一個空集合上調用該方法,則會返回 null。
// jQuery $(el).outerHeight() // Native el.offsetHeight // jQuery $(el).outerHeight(true) // Native const win = el.ownerDocument.defaultView const {marginTop, margintBottom} = win.getComputedStyle(el, null) el.offsetHeight + parseFloat(marginTop) + parseFloat(margintBottom) === $(el).outerHeight(true) // trueouterWidth
與outerHeight類似。
parent取得匹配元素集合中,每個元素的父元素,可以提供一個可選的選擇器。
// jQuery $(el).parent() // Native el.parentNodeparents
獲得集合中每個匹配元素的祖先元素,可以提供一個可選的選擇器作為參數。
// jQuery $(el).parents(selector) // Native function parents(el, selector = "*") { const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector const parentsMatch = [] while ((el = el.parentElement) !== null) { if (matchesSelector.call(el, selector)) { parentsMatch.push(el) } } return parentsMatch }parentsUntil
查找當前元素的所有的前輩元素,直到遇到選擇器, DOM 節點或 jQuery 對象匹配的元素為止,但不包括這些元素。
// jQuery $(el).parentsUntil(selector) // Native function parentsUntil(el, selector = false) { const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector const parentsMatch = [] while ((el = el.parentElement) !== null && !matchesSelector.call(el, selector)) { parentsMatch.push(el) } return parentsMatch }position
獲取匹配元素中第一個元素的當前坐標,相對于offset parent的坐標。( offset parent指離該元素最近的而且被定位過的祖先元素 )
// jQuery $(el).position() // Native { left: el.offsetLeft, top: el.offsetTop }prepend
將參數內容插入到每個匹配元素的前面(元素內部)。
// jQuery $(el).prepend("") // Native (HTML string) el.insertAdjacentHTML("afterbegin", "") // Native (Element) el.insertBefore(newEl, el.firstChild)prependTo
與prepend相反
prev取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。選擇性篩選的選擇器。
與next類似
prevAll獲得集合中每個匹配元素的所有前面的兄弟元素,選擇性篩選的選擇器。
與nextAll類似
prevUntil獲取每個元素但不包括選擇器,DOM節點,或者jQuery對象匹配的元素的所有前面的兄弟元素。
與nextUntil類似
remove將匹配元素集合從DOM中刪除。(注:同時移除元素上的事件及 jQuery 數據。)
// jQuery $(el).remove() // Native el.parentNode.removeChild(el) // Native el.outerHTML = ""removeAttr
為匹配的元素集合中的每個元素中移除一個屬性(attribute)。
// jQuery $(el).removeAttr(attr) // Native el.removeAttribute(attr)removeClass
移除集合中每個匹配元素上一個,多個或全部樣式。
// jQuery $(el).removeClass(className) // Native (IE 10+ support) el.classList.remove(className)replaceAll
與replaceWith相反
replaceWith用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合。
// jQuery $(el).replaceWith("") // Native (HTML string) el.outerHTML = "" // Native (Element) el.parentNode.replaceChild(newEl, el)scrollLeft
與scrollTop一樣
scrollTop獲取匹配的元素集合中第一個元素的當前垂直滾動條的位置或設置每個匹配元素的垂直滾動條位置。設置每個匹配元素的垂直滾動條位置
// jQuery $(el).scrollTop() // Native (el is window) Math.max(document.documentElement.scrollTop, document.body.scrollTop) or window.pageYOffset // Native (el is not window) el.scrollTop // jQuery $(el).scrollTop(10) // Native (el is window) document.documentElement.scrollTop = 10 document.body.scrollTop = 10 // Native (el is not window) el.scrollTop = 10siblings
獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器。。
// jQuery $(el).siblings() // Nativeslice
根據指定的下標范圍,過濾匹配的元素集合,并生成一個新的 jQuery 對象。
// jQuery $(selector).slice(1, 6) // Native $$(selector).slice(1, 6)text
得到匹配元素集合中每個元素的合并文本,包括他們的后代設置匹配元素集合中每個元素的文本內容為指定的文本內容。
// jQuery $(el).text() // Native el.textContent // jQuery $(el).text(string) // Native el.textContent = stringtoggleClass
在匹配的元素集合中的每個元素上添加或刪除一個或多個樣式類,取決于這個樣式類是否存在或值切換屬性。即:如果存在(不存在)就刪除(添加)一個類。
// jQuery $(el).toggleClass(className) // Native el.classList.toggle(className)unwrap
將匹配元素集合的父級元素刪除,保留自身(和兄弟元素,如果存在)在原來的位置。
// jQuery $(el).unwrap() // Native const parent = el.parentNode parent.outerHTML = parent.innerHTMLval
獲取匹配的元素集合中第一個元素的當前值。設置匹配的元素集合中每個元素的值。
// jQuery $(el).val() // Native el.value // jQuery $(el).val(value) // Native el.value = valuewidth
與height類似
wrap在每個匹配的元素外層包上一個html元素。
// jQuery $(el).wrap("") // Native const wrapper = document.createElement("div") wrapper.className = "wrapper" el.parentNode.insertBefore(wrapper, el) el.parentNode.removeChild(el) wrapper.appendChild(el) // Native // 這種性能比較差 https://jsperf.com/outerhtml-appendchild el.outerHTML = `Query Selector${el.outerHTML}`
常用的 class、id、屬性 選擇器都可以使用?document.querySelector?或?document.querySelectorAll?替代。區別是
document.querySelector?返回第一個匹配的 Element
document.querySelectorAll?返回所有匹配的 Element 組成的 NodeList。它可以通過?[].slice.call()?把它轉成 Array
如果匹配不到任何 Element,jQuery 返回空數組?[],但?document.querySelector?返回?null,注意空指針異常。
注意:document.querySelector?和?document.querySelectorAll?性能很差。如果想提高性能,盡量使用?document.getElementById、document.getElementsByClassName?或?document.getElementsByTagName。
以下只實現和jquery有所區別的api
:contains選擇所有包含指定文本的元素。
// jQuery $("selector:contains("metchString")") // Native $$("selector").filter(el => el.textContent.indexOf("metchString") !== -1):emtpy
選擇所有沒有子元素的元素(包括文本節點)。
// jQuery $("selector:empty") // Native $$("selector").filter(el => el.innerHTML === ""):even
選擇索引值為偶數的元素,從 0 開始計數。
// jQuery $("selector:even") // Native $$("selector").filter((el, index) => (index & 1) === 0):focus
選擇當前獲取焦點的元素。
// jQuery $(":focus") // Native document.activeElement:gt
選擇匹配集合中所有大于給定index(索引值)的元素。
// jQuery $("selector:gt(2)") // Native $$("selector").filter((el, index) => index > 2):has
與has類似
:header選擇所有標題元素,像h1, h2, h3 等.
// jQuery $("selector:header") // Native $$("selector").filter(el => /^hd$/i.test(el.nodeName)):lt
選擇匹配集合中所有索引值小于給定index參數的元素。
// jQuery $("selector:lt(2)") // Native $$("selector").filter((el, index) => index < 2):not
與not類似
:odd選擇索引值為奇數元素,從 0 開始計數。
// jQuery $("selector:odd") // Native $$("selector").filter((el, index) => (index & 1) === 1)only-child
如果某個元素是其父元素的唯一子元素,那么它就會被選中。
// jQuery $("selector:only-child") // Native $$("selector").filter(el => el.previousElementSibling === null && el.nextElementSibling === null) // Native $$("selector").filter(el => el.parentNode.children.length === 1):only-of-type
選擇器匹配屬于其父元素的特定類型的唯一子元素的每個元素。
// jQuery $("selector:only-of-type") // Native $$("selector").filter(el => { for(let child of el.parentNode.children) { if (child !== el && child.nodeName === el.nodeName) { return true } } return false }):parent
選擇所有含有子元素或者文本的父級元素。
// jQuery $("selector:parent") // Native $$("selector").filter(el => el.innerHTML !== ""):selected
獲取 select 元素中所有被選中的元素。
// jQuery $("select option:selected") // Native (single) $("select option")[$("select").selectedIndex] // Native (multiple) $$("select option").filter(el => el.selected)Ajax Events Utilities contains
檢查一個DOM元素是另一個DOM元素的后代。
// jQuery $.contains(el, child) // Native el !== child && el.contains(child)each
一個通用的迭代函數,它可以用來無縫迭代對象和數組。數組和類似數組的對象通過一個長度屬性(如一個函數的參數對象)來迭代數字索引,從0到length - 1。其他對象通過其屬性名進行迭代。
// jQuery $.each(array, (index, value) => {}) // Native array.forEach((value, index) => {})extend
將兩個或更多對象的內容合并到第一個對象。
// jQuery $.extend({}, {a: 1}, {b: 2}) // {a: 1, b: 2} // ES6-way Object.assign({}, {a: 1}, {b: 2}) // {a: 1, b: 2}globalEval
在全局上下文下執行一些JavaScript代碼。
// jQuery $.globaleval(code) // Native function Globaleval(code) { const script = document.createElement("script") script.text = code document.head.appendChild(script).parentNode.removeChild(script) } // Use eval, but context of eval is current, context of $.Globaleval is global. eval(code)grep
查找滿足過濾函數的數組元素。原始數組不受影響。
// jQuery $.grep([10,11,3,4], n => n > 9) // Native [10,11,3,4].filter(n => n > 9)inArray
在數組中查找指定值并返回它的索引(如果沒有找到,則返回-1)。
// jQuery $.inArray(item, array) // Native array.indexOf(item) > -1 // ES6-way array.includes(item)isArray
確定的參數是一個數組。
// jQuery $.isArray(array) // Native Array.isArray(array)isEmptyObject
檢查對象是否為空(不包含任何屬性)。
// jQuery $.isEmptyObject(obj) // Native function isEmptyObject(obj) { return Object.keys(obj).length === 0 }isFunction
確定參數是否為一個Javascript 函數。
// jQuery $.isFunction(item) // Native function isFunction(item) { if (typeof item === "function") { return true } var type = Object.prototype.toString(item) return type === "[object Function]" || type === "[object GeneratorFunction]" }isNumeric
確定它的參數是否是一個數字。
// jQuery $.isNumeric(item) // Native function isNumeric(value) { var type = typeof value return (type === "number" || type === "string") && !isNaN(value - parseFloat(value)) }isPlainObject
測試對象是否是純粹的對象(通過 "{}" 或者 "new Object" 創建的)
// jQuery $.isPlainObject(obj) // Native function isPlainObject(obj) { if (typeof (obj) !== "object" || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) { return false } if (obj.constructor && !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, "isPrototypeOf")) { return false } return true }isWindow
確定參數是否為一個window對象。
// jQuery $.isWindow(obj) // Native function isWindow(obj) { return obj !== null && obj !== undefined && obj === obj.window } // jquery源碼中是這么判斷對象是否為window的,我的理解是代碼可能會跑到服務器上,因為服務器上是沒有window對象的。所以這么判斷makeArray
轉換一個類似數組的對象成為真正的JavaScript數組。
// jQuery $.makeArray(arrayLike) // Native Array.prototype.slice.call(arrayLike) // ES6-way Array.from(arrayLike)map
將一個數組中的所有元素轉換到另一個數組中。
// jQuery $.map(array, (value, index) => { }) // Native array.map((value, index) => { })merge
合并兩個數組內容到第一個數組。
// jQuery $.merge(array1, array2) // Native // But concat function doesn"t remove duplicate items. function merge(...args) { return [].concat(...args) }now
返回一個數字,表示當前時間。
// jQuery $.now() // Native Date.now() // Native +new Date() // Native new Date().getTime()parseHTML
將字符串解析到一個DOM節點的數組中。
// jQuery $.parseHTML(string) // Native function parseHTML(string) { const context = document.implementation.createHTMLDocument() // Set the base href for the created document so any parsed elements with URLs // are based on the document"s URL const base = context.createElement("base") base.href = document.location.href context.head.appendChild(base) context.body.innerHTML = string return context.body.childNodes } // Native (IE 10+ support) // 兩者性能差不多 https://jsperf.com/parsehtml2 function parseHTML(string) { const context = new DOMParser().parseFromString(string, "text/html") return context.body.childNodes }parseJSON
接受一個標準格式的 JSON 字符串,并返回解析后的 JavaScript 對象。
// jQuery $.parseJSON(str) // Native JSON.parse(str)parseXML
解析一個字符串到一個XML文檔。
// jQuery jQuery.parseXML(xmlString) // Native new DOMParser().parseFromString(xmlString, "application/xml")proxy
接受一個函數,然后返回一個新函數,并且這個新函數始終保持了特定的上下文語境。
// jQuery $.proxy(fn, context) // Native fn.bind(context)trim
去掉字符串起始和結尾的空格。
// jQuery $.trim(string) // Native string.trim()type
確定JavaScript 對象的類型[[Class]] 。
// jQuery $.type(obj) // Native function type(item) { const reTypeOf = /(?:^[objects(.*?)]$)/ return Object.prototype.toString.call(item) .replace(reTypeOf, "$1") .toLowerCase() }Animation
有哪塊錯誤的或者不懂得可以在github上提個issue。如果哪塊有更好的解法可以pr。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/86782.html
摘要:修復后得到合法的后在由布局引擎建立相應的對象。在標簽放置于標簽之后時,源碼被所有瀏覽器泛指上常見的修復為正常形式,即。上一篇之模板的學習之路源碼分析之部分下一篇之模板的學習之路主題布局配置 上篇我們將 body 標簽主體部分進行了簡單總覽,下面看看最后的腳本部門。 頁面結尾部分(Javascripts 腳本文件) 我們來看看代碼最后的代碼,摘取如下: ...
摘要:工作方式為使用將每一個依賴加載為一個標簽。然后在被瀏覽器加載完畢后,便會自動繼承之前配置的參數。可以單獨定義鍵值隊數據,作為配置文件來使用還可以定義依賴的關系壓縮使用來進行壓縮時,需要指定文件。在鏈接中有很好的示例,可以參看學習。 1、簡介 官方對requirejs的描述:RequireJS is a JavaScript file and module loader. It is o...
摘要: Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Testing Frameworks QA Tools MVC Framew...
摘要:處理日期日歷和時間的不足之處將設定為可變類型,以及的非線程安全使其應用非常受限。最完整的日期時間,包含時區和相對或格林威治的時差。獲取當前的日期中的用于表示當天日期。 簡介 伴隨 lambda表達式、streams 以及一系列小優化,Java 8 推出了全新的日期時間API。 Java處理日期、日歷和時間的不足之處:將 java.util.Date 設定為可變類型,以及 SimpleD...
摘要:注每個內置對象都是原生對象,一個內置的構造函數是一個內置的對象,也是一個構造函數。從對象返回月份。以毫秒設置對象。刪除數組的第一個元素,返回值是刪除的元素。對象屬性創建該正則對象的構造函數。對象當以非構造函數形式被調用時,等同于。 內置對象與原生對象 內置(Build-in)對象與原生(Naitve)對象的區別在于:前者總是在引擎初始化階段就被創建好的對象,是后者的一個子集;而后者包括...
閱讀 4122·2022-09-16 13:49
閱讀 1398·2021-11-22 15:12
閱讀 1519·2021-09-09 09:33
閱讀 1039·2019-08-30 13:15
閱讀 1720·2019-08-29 15:30
閱讀 654·2019-08-27 10:52
閱讀 2643·2019-08-26 17:41
閱讀 1896·2019-08-26 12:11