h1 | 易学教程

[Javascript] Finding Parent Elements

阅读更多关于 [Javascript] Finding Parent Elements

const app = document.getElementById('app'); app.innerHTML = ` <h1>JavaScript DOM</h1> <div class="item"></div> `; const item = document.querySelector('.item'); console.log(item.parentNode); console.log(item.parentElement.parentElement); console.log(item.closest('#app')); console.log(item.closest('body')); 来源： https://www.cnblogs.com/Answer1215/p/12596289.html

379 vue的异步 DOM 更新

阅读更多关于 379 vue的异步 DOM 更新

1、Vue 中采用了异步DOM更新的机制 2、如何更新页面数据发生改变后, vue 没有立即将数据的改变更新到视图中, 而是等到数据不再变化的时候一次性的将数据的改变更新到视图中 // 1. 验证了 for (let i = 0; i < 1000; i++) { this.count++ } 3、为什么是异步 DOM 更新性能的考虑因为对于前端来说, 修改数据进行 DOM 操作是常有的事情, 如果频繁操作 DOM, 会严重影响页面的加载性能 DOM 操作这是前端的性能的瓶颈比如 : for (let i = 1; i < 10000; i++>) ，如果同步，就要重新渲染 1000 次 4、验证异步 DOM 更新 // 2. 直接获取data 中的值, 会立马获取成功 console.log(this.count) this.count++ console.log(this.count) // 但是通过dom来获取count的值,因为DOM更新这个count值是异步的,是需要一点时间的 console.log(document.querySelector('h1').innerText) // 0 this.count = 100 console.log(document.querySelector('h1').innerText) // 0 5、需求 :

JS在页面上创建元素

阅读更多关于 JS在页面上创建元素

创建元素 1. document.write 不常用，使用后会覆盖原本的页面内容 document . write ( "<h1>我是标题</h1>" ) ; //添加的内容覆盖原理：默认情况下，页面加载会形成一个文档流，当页面所有内容加载完毕之后，这个文档流(默认的文档流)就会关闭，当触发某个事件，调用document.write向页面添加内容的时候，就会形成新的文档流，就会覆盖原本的页面内容不覆盖的情况：默认文档流里没有关闭覆盖的情况：默认文档流已经关闭，形成了新的文档流 2. innerHTML 也不常用 console . log ( document . body . innerHTML ) ; document . body . innerHTML += "<h1>我是标题</h1>" 3. document.createElement(“标签名”) 特点： (1)默认创建的是空标签 (2)创建值存在于内存中，需要手动添加到页面上添加步骤： a.创建一个空标签 var h1 = document . createElement ( "h1" ) ; b.设置标签属性 h1 . innerText = "我是标题" c.添加到页面上 document . body . appendChild ( h1 ) ; 性能比较：

React 组件的三种方式详解

阅读更多关于 React 组件的三种方式详解

React 组件关于创建项目，可以选择手动创建和通过脚手架来创建。这里给一个传送门 → 通过React 脚手架创建项目我们先来编写第一个 react 程序 // 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，稍后会讲到JSX，要写JSX，就必须引入React import React from 'react' // ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。 import ReactDOM from 'react-dom' // ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上 ReactDOM.render( // 这里就比较奇怪了，它并不是一个字符串，看起来像是纯 HTML 代码写在 JavaScript 代码里面。语法错误吗？这并不是合法的 JavaScript 代码, “在 JavaScript 写的标签的”语法叫 JSX- JavaScript XML。 <h1>欢迎进入React的世界</h1>, // 渲染到哪里 document.getElementById('root') )

【Vue】匹配404错误

阅读更多关于【Vue】匹配404错误

在路由规则中， * 代表的是任意字符。所以只要在路由的最后添加一个 * 路由，那么以后没有匹配到的 url 都会被导入到这个视图中。示例代码如下： let UserProfile = {template:"<h1>个人中心：{{$route.params.userid}}</h1>"}; let NotFound = {template: "<h1>您找的页面已经到火星啦！</h1>"} var routes = [ {path: "/user/:userid",component: UserProfile}, {path: "*",component: NotFound}, ] 来源： CSDN 作者：交大彭于晏链接： https://blog.csdn.net/weixin_42191575/article/details/104626029

HTML 标题

阅读更多关于 HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的. 实例 <h1>这是一个标题</h1> <h2>这是一个标题</h2> <h3>这是一个标题</h3> 来源： https://www.cnblogs.com/miqilin666/p/12393702.html

js：关于window.onload

阅读更多关于 js：关于window.onload

下图来自： http://www.cnblogs.com/wsun/p/3916487.html 。示例1 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1> heading 1</h1> <h1> heading 2</h1> <h1> heading 3</h1> <script> window.onload = function() { alert("text1");}; </script> <script> window.onload = function() { alert("text2");}; </script> </body> </html> 或者： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <h1> heading 1</h1> <h1> heading 2</h1> <h1> heading 3</h1> <script> window.onload = function() { alert("text1");}; window.onload =

react 条件渲染

阅读更多关于 react 条件渲染

1、讲jsx内容放进数组里,然后{}解析,会自动去掉[ ]和",",展现数组内容 2、利用arr.map(function(item,index){return xxx}) 代码示例: import React from 'react' ; import ReactDOM from 'react-dom' ; import './index.css' ; import App from './App' ; import * as serviceWorker from './serviceWorker' ; let arr = [ 1 , 2 , 3 ] let arr2 = [ < h1 > 1 < / h1 > , < h1 > 2 < / h1 > , < h1 > 3 < / h1 > ] class A extends React . Component { constructor ( props ) { //将props传递给父类构造器 super ( props ) ; this . state = { arr3 : [ { name : 'jeff' , age : 18 } , { name : 'mike' , age : 19 } , { name : 'tom' , age : 20 } ] } } render ( ) { return ( < div >

模板

阅读更多关于模板

简介模板是一个文本，用于分离文档的表现形式和内容。模板定义了占位符以及各种用于规范文档该如何显示的各部分基本逻辑（模板标签）。模板通常用于产生HTML，但是Django的模板也能产生任何基于文本格式的文档。实现在Python代码中使用Django模板的最基本方式如下：可以用原始的模板代码字符串创建一个 Template 对象， Django同样支持用指定模板文件路径的方式来创建 Template 对象; 调用模板对象的render方法，并且传入一套变量context。它将返回一个基于模板的展现字符串，模板中的变量和标签会被context值替换。 1.创建模板对象创建一个 Template 对象最简单的方法就是直接实例化它， Template 类就在 django.template 模块中，构造函数接受一个参数，原始模板代码。让我们深入挖掘一下 Python的解释器看看它是怎么工作的。当你创建一个 Template 对象，模板系统在内部编译这个模板到内部格式，并做优化，做好渲染的准备。如果你的模板语法有错误，那么在调用 Template() 时就会抛出 TemplateSyntaxError 异常： >>> from django.template import Template >>> t = Template('My name is {{ name }}.'

SDN第二次上机作业

阅读更多关于 SDN第二次上机作业

1、安装floodlight 2、生成拓扑并连接控制器floodlight，利用控制器floodlight查看图形拓扑（1）代码： from mininet.topo import Topo class MyTopo( Topo ): "Simple topology example." def __init__( self ): # Initialize topology Topo.__init__( self ) s1 = self.addSwitch('s1') s2 = self.addSwitch('s2') s3 = self.addSwitch('s3') s4 = self.addSwitch('s4') h1 = self.addHost('h1') h2 = self.addHost('h2') h3 = self.addHost('h3') self.addLink(h1,s2,1,1) self.addLink(h2,s3,1,1) self.addLink(s2,s1,2,1) self.addLink(s3,s1,2,2) self.addLink(s1,s4,3,1) self.addLink(s4,h3,2,1) topos = { 'mytopo': ( lambda: MyTopo() ) } （2）命令行（3

订阅 h1