如何用原生js封裝乙個類似jq的選擇器

2021-10-03 03:16:25 字數 1658 閱讀 7145

id選擇器(在整個文件中獲取id為***的元素)

document.getelementid([id]);

類名選擇器(在整個文件中或者在指定上下文中獲取類名為***的元素)

document.

getelementsbyclassname

(' ');

[context]

.getelementsbyclassname

(' '

);

標籤名選擇器(在整個文件中或者在指定上下文中通過標籤名獲取元素)

documen.

getelementsbytagname

([tagname]);

[context]

.getelementsbytagname

([tagname]

);

以及兩個最好用的

document.

queryselelctor

() \ document.

queryselectorall

()

這兩個也是可以指定上下文的,而且強大之處在於是上面幾種的融合,可以獲取id也可以獲取類名,有點類似css選擇器,但需要注意的是

document.queryselelctor獲取,哪怕你有多個,也只會獲取第乙個。而 document.queryselectorall()哪怕你只有乙個,獲取到的始終是個元素集合。

例:這裡有兩個類名為box的div,用queryselector獲取

也只返回了第乙個類名為box的div。

還有乙個就是獲取name的

document.

getelementsbyname

(' '

);

這是用來獲取元素的nam屬性值,但值常用於表單控制項

接下來上**

/*我們先定義個函式,名字隨便取,最好叫 $ 畢竟jq就是這樣

這裡我們需要設定三個引數,

str [string] 選擇器 像 .box 或者 #box....

context [object] 指定上下文範圍

num [number]

*/function

$(str,context,num)

else

if(str.

charat(0

)===

'#'&&

!(str.

includes

(' '))

)else

if(str.

includes

(' '))

else

if(num ===1)

else

}else

else

if(str.

includes

(' '))

else

if(num ===1)

}}

如何用原生js封裝jQuery中的offset方法

這個方法是基於原生js中的 offsetparent offsettop offsetleft clientleft clienttop 來完成的,在jquery中這個元素是用來獲取當前元素在當前視口的相對偏移。clientleft clienttop 指的是元素父元素左邊框和上邊框 包括borde...

使用原生JS封裝乙個動畫函式

最近一直在忙專案,很少有時間回顧之前的知識,今天剛好要做乙個輪播,因為對相容性有一定的要求,使用了各種外掛程式和庫中的輪播,效果都不是很理想,一怒之下,使用原生js封裝了乙個輪播元件,其中重要的功能就是乙個動畫,看了一下以前封裝的函式,千瘡百孔,又進行了重新封裝,先上 有詳細的備註。function...

用原生js封裝了乙個ajax請求方法

注意 get請求若需帶引數,引數仍丟入data屬性,自動拼接url 這段 是封裝的方法主體,注意的是,請求方法返回的是promise物件。myajax.js ajax請求 description 自己寫的ajax請求 param options 請求配置資訊 param options.url 請求...