//?設(shè)置準(zhǔn)備要滾動的元素
創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司,專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì),有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題,行業(yè)涉及成都純水機(jī)等多個(gè)領(lǐng)域,已為上千家企業(yè)服務(wù),得到了客戶的尊重與認(rèn)可。
let?p?=?document.getElementById('userDetailContent').parentNode;
//?該元素目前?頂部?被卷起(隱藏)的高度
let?t?=?p.scrollTop;
//?這段勻速運(yùn)動?分30步來走,?step:每一步走的距離
let?step?=?Math.floor(t?/?30);
if(?step??1)??//一步最少要走1個(gè)像素,否則無限觸發(fā)滾動
(function?walkTop(t)?{
setTimeout(()={
//?scrollTo(?x軸滾動,?y軸)
p.scrollTo(0,?t?-=?step);?//?走一步,?將剩余路程?減去一步的路程的結(jié)果
if(t0)?return;?//?停止迭代循環(huán)
walkTop(t);//迭代
},1);//?每毫秒走一步
})(t);?//?自執(zhí)行函數(shù)?傳入?yún)?shù)t?,!important
js原生是有虛擬dom地,構(gòu)建出js虛擬DOM樹的代碼是:
// 構(gòu)造虛擬DOM對象類function Element(tagName, props, children){this.tagName=tagName;
this.props = props。
this.children = children;}// 創(chuàng)建虛擬DOMfunction createElement(tagName, props, children) {
return new Element(tagName, props, children)}// ?ul class="ul-wrap"http:// 。
li class="li-item"1/li// ? ? ? ? li class="li-item"2/li// ? ? ? ? li class="li-item"3/li//。
/ul// 假設(shè)我們有如上的DOM結(jié)構(gòu), 那我我們就可以利用虛擬DOM模擬出一個(gè)類似的DOM樹結(jié)構(gòu)。
let VDOM = createElement("ul", {class: "ul-wrap",}, [createElement("li", {class: "li-item"
}, ["1"]),?createElement("li", {class: "li-item"}, ["2"])。
createElement("li", {?class: "li-item"}, ["3"]),]);console.dir(JSON.stringify(VDOM,null,2))。
我們可以在控制在中打印出打印的虛擬DOM為以下結(jié)構(gòu)。
使用virtual DOM算法的步驟是:
1、用原生JavaScript對象結(jié)構(gòu)模擬出DOM樹結(jié)構(gòu),利用這個(gè)樹構(gòu)建一個(gè)真正的DOM樹,并渲染到頁面中。
2、當(dāng)狀態(tài)變更時(shí),重新構(gòu)建一個(gè)新的虛擬DOM樹,然后用新的樹和舊的樹進(jìn)行對比,記錄并保存出兩棵樹的差異。
3、當(dāng)步驟二記錄的差異應(yīng)用到步驟一中所構(gòu)建的真正的DOM樹上,視圖就更新了。
CSS里面增加這段代碼
.subA,
.subB?{
display:?none;
}
然后增加這段JS,大功告成
script
var?ul?=?document.getElementById('box');
ul.addEventListener('click',?function?(evnet)?{
if(evnet.target??evnet.target.nodeName?==?'BUTTON'){
var?parent?=?evnet.target.parentNode;
var?element?=?parent.getElementsByClassName('sub'?+?evnet.target.textContent)[0];
if?(element.style.display?==?'none'||?!element.style.display)?{
element.style.display?=?'block';
}?else?{
element.style.display?=?'none';
}
}
})
/script
原生態(tài)JS是指遵循ECMAscript標(biāo)準(zhǔn)的javascript,不同于微軟的jscript也不依賴于任何框架,依托于瀏覽器標(biāo)準(zhǔn)引擎的腳本語言。
jquery是在原生態(tài)的js上集成的框架資源,使用jquery并不代表代碼就不是你寫的,區(qū)別在于使用jquery只是使用了它的語法,更利于兼容以及實(shí)現(xiàn),jquery已經(jīng)將常規(guī)的js兼容問題解決,所以使用起來出現(xiàn)不兼容的情況會更少,更利于開發(fā)。
但同時(shí),要使用jquery等框架也需要去學(xué)習(xí)相關(guān)的語法,擁有js基礎(chǔ)的同學(xué)學(xué)習(xí)jquery時(shí)會發(fā)現(xiàn)很輕松,在使用時(shí)也會發(fā)現(xiàn)很方便。
擴(kuò)展資料
JS基本特點(diǎn):
JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的。
1、是一種解釋性腳本語言(代碼不進(jìn)行預(yù)編譯)。
2、主要用來向HTML(標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(yīng)用)頁面添加交互行為。
3、可以直接嵌入HTML頁面,但寫成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。
4、跨平臺特性,在絕大多數(shù)瀏覽器的支持下,可以在多種平臺下運(yùn)行(如Windows、Linux、Mac、Android、iOS等)。
Javascript腳本語言同其他語言一樣,有它自身的基本數(shù)據(jù)類型,表達(dá)式和算術(shù)運(yùn)算符及程序的基本程序框架。
Javascript提供了四種基本的數(shù)據(jù)類型和兩種特殊數(shù)據(jù)類型用來處理數(shù)據(jù)和文字。而變量提供存放信息的地方,表達(dá)式則可以完成較復(fù)雜的信息處理。
參考資料:百度百科-javascript
1、創(chuàng)建請求 var xhr = new XMLHttpRequest(); 構(gòu)造函數(shù)實(shí)例化
2、確定發(fā)送方式和地址 xhr.open("get", url, true)
3、發(fā)送請求 xhr.send(null);
4、確定后臺加載 xhr.onload = function(){}
5、請求返回的數(shù)據(jù) xhr.responseText;
!DOCTYPE?html
html
head
meta?http-equiv="content-type"?content="text/html;?charset=UTF-8"
script?type="text/javascript"
function?$(id){
this.dom?=?document.getElementById(id);
this.html?=?function()?{
if?(arguments.length?===?1)?{
this.dom.innerHTML?=?arguments[0];
}else?if(arguments.length?===?0){
return?this.dom.innerHTML;
}
}
return?this;
}
window.onload?=?function?()?{
console.log($("test").html());
console.log($("test").html("h1?style='color:?red'12312312312/h1"));
}
/script
/head
body
div?id="test"
ptestteste/p
/div
/body
/html
網(wǎng)站欄目:原生javascript,原生javascript的樹形插件treejs
轉(zhuǎn)載源于:http://vcdvsql.cn/article38/dsdgspp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)、移動網(wǎng)站建設(shè)、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)