正文
原生javascript,原生javascript的树形插件treejs
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
原生javascript如何实现回到顶部平滑滚动?
// 设置准备要滚动的元素
let p = document.getElementById('userDetailContent').parentNode;
// 该元素目前 顶部 被卷起(隐藏)的高度
let t = p.scrollTop;
// 这段匀速运动 分30步来走, step:每一步走的距离
let step = Math.floor(t / 30);
if( step 1) //一步最少要走1个像素,否则无限触发滚动
(function walkTop(t) {
setTimeout(()={
// scrollTo( x轴滚动, y轴)
p.scrollTo(0, t -= step); // 走一步, 将剩余路程 减去一步的路程的结果
if(t0) return; // 停止迭代循环
walkTop(t);//迭代
},1);// 每毫秒走一步
})(t); // 自执行函数 传入参数t ,!important
相关问答
Q1: js原生是否有虚拟dom
js原生是有虚拟dom地，构建出js虚拟DOM树的代码是：
// 构造虚拟DOM对象类function Element(tagName, props, children){this.tagName=tagName;
this.props = props。
this.children = children;}// 创建虚拟DOMfunction createElement(tagName, props, children) {
return new Element(tagName, props, children)}// ul class="ul-wrap"// 。
li class="li-item"1/li// li class="li-item"2/li// li class="li-item"3/li//。
/ul// 假设我们有如上的DOM结构, 那我我们就可以利用虚拟DOM模拟出一个类似的DOM树结构。
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为以下结构。
使用virtual DOM算法的步骤是：
1、用原生JavaScript对象结构模拟出DOM树结构，利用这个树构建一个真正的DOM树，并渲染到页面中。
2、当状态变更时，重新构建一个新的虚拟DOM树，然后用新的树和旧的树进行对比，记录并保存出两棵树的差异。
3、当步骤二记录的差异应用到步骤一中所构建的真正的DOM树上，视图就更新了。
Q2: 原生javascript，想要实现AB切换效果
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
Q3: 什么是原生JS
原生态JS是指遵循ECMAscript标准的javascript，不同于微软的jscript也不依赖于任何框架，依托于浏览器标准引擎的脚本语言。
jquery是在原生态的js上集成的框架资源，使用jquery并不代表代码就不是你写的，区别在于使用jquery只是使用了它的语法，更利于兼容以及实现，jquery已经将常规的js兼容问题解决，所以使用起来出现不兼容的情况会更少，更利于开发。
但同时，要使用jquery等框架也需要去学习相关的语法，拥有js基础的同学学习jquery时会发现很轻松，在使用时也会发现很方便。
扩展资料
JS基本特点：
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
1、是一种解释性脚本语言（代码不进行预编译）。
2、主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4、跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。
Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
参考资料：百度百科-javascript
Q4: 使用原生javascript发送ajax请求的步骤有哪些
1、创建请求 var xhr = new XMLHttpRequest(); 构造函数实例化
2、确定发送方式和地址 xhr.open("get", url, true)
3、发送请求 xhr.send(null);
4、确定后台加载 xhr.onload = function(){}
5、请求返回的数据 xhr.responseText;
Q5: 源生态javascript 如何实现 $(id).html() 类似此类的功能呢
!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
