資訊專(zhuān)欄INFORMATION COLUMN
摘要：寫(xiě)法頭部插入元素寫(xiě)法刪除元素寫(xiě)法對(duì)于很多移動(dòng)端的所謂頁(yè)面來(lái)說(shuō)，主要的是動(dòng)畫(huà)效果，操作的復(fù)雜程度不高，我們就不必要去引用一個(gè)我們用的不多的，雖然也不是很大，其實(shí)原生的還不止這些，例如不說(shuō)這是干嘛地，自己查吧原文鏈接公眾號(hào)我們的主頁(yè)
$是jquery最具代表的符號(hào)，當(dāng)然php也是，但是二者不能同日而語(yǔ);不得不說(shuō)jquery的選擇器是大家贊不絕口的，在它1.x版本中對(duì)ie兼容性是最好的，這要?dú)w功于$選擇器;
現(xiàn)在呢，html5的降臨，移動(dòng)端的巨大發(fā)展，讓我們可以慢慢棄用這臃腫的工具，輕裝上陣，打死你個(gè)龜孫兒
document.querySelector()和document.querySelectorAll(str)這對(duì)兄弟jquery2.x版本選擇器的核心,我們可以簡(jiǎn)單的封裝一個(gè)函數(shù)來(lái)代替jquery的$$
function $$(els){
var dom = document.querySelectorAll(els);
if(dom.length==1){
return dom[0]
}else {
return dom;
}
}
document.querySelector("selector1,selector2,...") 返回要查詢的首個(gè)元素
document.querySelectorAll("selector1,selector2,...") 返回查詢的全部元素
可以使用元素的 id, 類(lèi), 類(lèi)型, 屬性, 屬性值等
下面介紹的就是classList 返回元素的類(lèi)名，作為 DOMTokenList 對(duì)象(官方解釋)，下面就舉栗子來(lái)說(shuō)明其作用吧
下面是一些原生js替代jquery的某些方法的代碼片段
//尾部追加DOM元素。
$("#demo").append($(child));// jQuery寫(xiě)法
$$("#demo").appendChild(child);
//頭部插入DOM元素
$("#demo").prepend($(child));// jQuery寫(xiě)法
$$("#demo").insertBefore(child, $$("#demo").childNodes[0])
//刪除元素
$("#demo").remove();// jQuery寫(xiě)法
$$("#demo").parentNode.removeChild($$("#demo"))
ps 對(duì)于很多移動(dòng)端的所謂h5頁(yè)面來(lái)說(shuō)，主要的是動(dòng)畫(huà)效果，dom操作的復(fù)雜程度不高，我們就不必要去引用一個(gè)我們用的不多的jquery，雖然zepto也不是很大，其實(shí)原生的還不止這些，例如:element.getBoundingClientRect()
function getRect (element) {
var rect = element.getBoundingClientRect();
var top = document.documentElement.clientTop;
var left= document.documentElement.clientLeft;
return{
top : rect.top - top,
bottom : rect.bottom - top,
left : rect.left - left,
right : rect.right - left,
width : rect.width,
height : (rect.bottom - rect.top)
}
}
不說(shuō)這是干嘛地，自己查吧~~
原文鏈接:http://azq.space/blog/html5-d...
公眾號(hào)
我們的主頁(yè)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/80950.html
摘要：這個(gè)界限就是該元素頂部距離窗口頂部的距離等于該元素設(shè)置的值比如以下像素分割線當(dāng)我的頂部距離窗口頂部為值時(shí)，我就會(huì)像一樣在距離窗口值處的時(shí)代發(fā)送分效果圖當(dāng)頁(yè)面滾動(dòng)到距離黃色區(qū)塊頂部時(shí)，黃色區(qū)塊就會(huì)在窗口頂部處，頁(yè)面再往下滾動(dòng)距離也不會(huì)變。 position: sticky; fixed 吸頂 頁(yè)面滾動(dòng)結(jié)束后頁(yè)面才渲染 需求 經(jīng)常會(huì)有這樣的需求，當(dāng)頁(yè)面滾動(dòng)到某一個(gè)位置fixedTopV...
摘要：這個(gè)界限就是該元素頂部距離窗口頂部的距離等于該元素設(shè)置的值比如以下像素分割線當(dāng)我的頂部距離窗口頂部為值時(shí)，我就會(huì)像一樣在距離窗口值處的時(shí)代發(fā)送分效果圖當(dāng)頁(yè)面滾動(dòng)到距離黃色區(qū)塊頂部時(shí)，黃色區(qū)塊就會(huì)在窗口頂部處，頁(yè)面再往下滾動(dòng)距離也不會(huì)變。 position: sticky; fixed 吸頂 頁(yè)面滾動(dòng)結(jié)束后頁(yè)面才渲染 需求 經(jīng)常會(huì)有這樣的需求，當(dāng)頁(yè)面滾動(dòng)到某一個(gè)位置fixedTopV...
閱讀 3499·2023-04-26 03:05
閱讀 1550·2019-08-30 13:09
閱讀 1973·2019-08-30 13:05
閱讀 972·2019-08-29 12:42
閱讀 1461·2019-08-28 18:18
閱讀 3513·2019-08-28 18:09
閱讀 582·2019-08-28 18:00
閱讀 1780·2019-08-26 12:10
