dom | 易学教程

JavaScript(jQuery)中的事件委托

阅读更多关于 JavaScript(jQuery)中的事件委托

一：什么是事件委托？事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。二：为什么要用事件委托？ 1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。 2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。三：JavaScript中的例子我们以下面的HTML代码为例，用事件委托的方式实现当鼠标单击某个li元素的时候，li元素的背景变成红色。 1 <ul id = "lists"> 2 <li>列表1</li> 3 <li>列表2</li> 4 <li>列表3</li> 5 <li>列表4</li> 6 <li>列表5</li> 7 <li>列表6</li> 8 </ul> 下面是JavaScript代码： 1 var lists = document.getElementById("lists"); 2 3 lists.addEventListener("click",function(event){ 4 5 var target = event.target; 6

10个有趣又能编译为JavaScript的语言，你用过哪些？

阅读更多关于 10个有趣又能编译为JavaScript的语言，你用过哪些？

现代应用相比普通的网页有不同的要求。但是浏览器是一个有着一套（大部分）固定可用的技术的平台，JavaScript依然是web应用的核心语言；任何需要在浏览器上跑的应用都需要使用这种语言。我们都知道Javascript并不是最好的语言，特别是在复杂的应用中，它可能不太能胜任。为了避免这种情况，一些新的语言或现有语言的编译器被创造出来，你不用写一行Javascript或者考虑这种语言的局限，就能生产在浏览器能运行的代码。这篇文章包括了十种有趣的语言能够编译为Javascript，在浏览器或者Node.js中被执行。 --ADVERTISEMENT-- Dart Dart是一个典型的面向对象的语言，任何东西都是一个对象并且任何对象都是一个类的实例（对象也可以表现为函数）。它的特殊性用于打造面向浏览器，服务器和移动设备的应用。它由谷歌来维护，是用于驱动下一代的AdWords UI。AdWords UI是谷歌盈利的重要产品，这也证明了它在体量上的强大。这种语言可以编译为JavaScript用于浏览器，或者直接通过Dart VM解释，这样也可以允许你构建服务端应用。移动应用可以通过Flutter SDK创建。复杂的应用还需要一系列特别为任务所设计的成熟的库和语言特性，Dart这些都有。举例来说一个流行的库是AngularDart，一个Dart版本的Angular。

[前端] VUE基础 (7) (获取原生DOM)

阅读更多关于 [前端] VUE基础 (7) (获取原生DOM)

一、获取原生DOM 我们之前在vue中获取原生的DOM，都是利用document来获取的，不是很方便。 vue为我们提供了ref属性，来方便的获取标签。 <div ref='div1'></div> <p ref='p1'></p> <Home ref='home1'></Home> 获取标签： this.$refs.div1 //获取ref为'div1'的<div>标签 this.$refs.p1 //获取ref为'p1'的<p>标签 this.$refs.home1 //获取ref为'home1'的组件对象但是在使用从this.$refs中获取对象的时候，注意声明周期的问题，获取的时候标签是否已经被渲染，如果还未被渲染则会报错。例如想获取的标签是子组件的标签，而这个子组件要点击某个按钮才能被渲染到页面上，如果我们未点击按钮就在父组件去使用this.$refs获取，则会报错。来源： https://www.cnblogs.com/leokale-zz/p/12285991.html

前端为什么使用框架？它做了哪些事？

阅读更多关于前端为什么使用框架？它做了哪些事？

JavaScript 框架对于前端来说就像是，八倍镜对于98K一样重要，成为了前端开发事半功倍，不可或缺的一部分。但是很少有人思考过，我们为什么使用框架？仅仅是因为代码量减少吗？很多前端开发者使用框架是因为： “ 现在某某框架很火，我也要学习使用一下。” “ 这个框架 UI 库很多，漂亮，跟公司设计很相似。” “ 这个框架有很多插件，引入调用一下就行，省了我很多代码量。” “ 公司项目碰巧很适合做单页面应用。” “ 我喜欢用数据绑定。” 上面的几个答案确实是框架可以解决的问题，但仅仅是因为这些吗？因为某一个问题，就引入一个庞大的框架，绝不应该如此。为什么使用框架？近年来，因为互联网的崛起，web 业务也越来越复杂和多元化，一个web项目也不是像以前那样写几个网页拼起来，加几个特效 duang 一下就成了。项目复杂了，出现的问题也就多了。前后端分离在前后分离概念出现之前，大部分 web 项目都是后端人员又当爹又当妈的，前后端一起搞，导致质量和效率不是很好。而且对个人的发展也有影响，一个人你什么都会，也意味着你什么都不精，毕竟天才还是少数的。这也是社会趋势影响，大公司招聘，一般也都是需要某一方面很有研究的专才。在互联网的洪流下，以前的那种方式越来越跟不上节奏，所以前后端分离应运而生。前后端分离后，前端的任务也变得重要起来，web前端开发慢慢趋于规范。但是在 jQuery

XML Only one root Element allowed

阅读更多关于 XML Only one root Element allowed

问题 I get an Error within this Code while trying to add a new Element . try { DocumentBuilderFactory docFactory = DocumentBuilderFactory.newInstance(); DocumentBuilder docBuilder = docFactory.newDocumentBuilder(); Document doc = docBuilder.parse(openFileInput(filename)); Node task = doc.getElementsByTagName("task").item(position); NodeList list = task.getChildNodes(); for(int i = 0; i<list.getLength();i++){ Node node = list.item(i); if("task_note".equals(node.getNodeName())){ node.setTextContent

Vue渲染过程浅析

阅读更多关于 Vue渲染过程浅析

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。但是模板毕竟是模板，不是真实的dom节点。从模板到真实dom节点还需要经过一些步骤把模板编译为render函数实例进行挂载, 根据根节点render函数的调用，递归的生成虚拟dom 对比虚拟dom，渲染到真实dom 组件内部data发生变化，组件和子组件引用data作为props重新调用render函数，生成虚拟dom, 返回到步骤3 第一步: 模板到render 在我们使用Vue的组件化进行开发应用的时候, 如果仔细的查看我们要引入的组件, 例子如下 // App.vue <template> <div> hello word </div> </template> <script> export default { } </script> <style> </style> 在我们的主入口main.js import Vue from 'vue' import App from './App' console.log(App) new Vue({ render: h => h(App) }).$mount('#app') 我们能够看到在我们引入的App这个模块，里面是一个对象，对象里面存在一个方法叫做render。在说render函数之前，我们可以想一想，每一次加载一个组件，然后对模板进行解析，解析完后

2月6日

阅读更多关于 2月6日

JavaScript HTML DOM 导航通过 HTML DOM，能够使用节点关系来导航节点树。 DOM 节点根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：整个文档是文档节点每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点每个 HTML 属性是属性节点所有注释是注释节点有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。能够创建新节点，还可以修改和删除所有节点。节点关系节点树中的节点彼此之间有一定的等级关系。术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。在节点树中，顶端节点被称为根（根节点）。每个节点都有父节点，除了根（根节点没有父节点）。节点能够拥有一定数量的子同胞（兄弟或姐妹）指的是拥有相同父的节点。 <html> <head> <title>DOM 教程</title> </head> <body> <h1>DOM 第一课</h1> <p>Hello world!</p> </body> </html> 从以上的 HTML 中您能读到以下信息： <html> 是根节点 <html> 没有父 <html> 是 <head> 和 <body> 的父 <head> 是 <html> 的第一个子 <body> 是 <html> 的最后一个子

After selecting one radio button, I want the remaining buttons to become disabled [closed]

阅读更多关于 After selecting one radio button, I want the remaining buttons to become disabled [closed]

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 4 years ago . I am working on a pong game in java script where one can change the difficulty level using a set of radio buttons <form action=""> <input type="radio" name="level" value="8">Beginner<br> <input type="radio" name="level" value="4">Intermediate<br> <input type="radio" name="level" value="2">Pro<br> </form> The

JS DOM属性，包括固有属性和自定义属性，以及属性获取、移除和设置

阅读更多关于 JS DOM属性，包括固有属性和自定义属性，以及属性获取、移除和设置

属性分为固有属性property和自定义属性attribute 固有属性查看固有属性可以通过ele.property 来获取，自定义属性不行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> <script> myReady(function(){ var input=document.querySelector("input"); console.log(input.type);//text console.log(input.value);//txt console.log(input.a);//undefined console.log(input.title);//"" }); </script> </head> <body> <input type="text" value="txt" a="b"> </body> </html> .attributes 返回类数组，获取所有属性，包括自定义属性和固有属性如果定义了同名属性，后面的属性会被忽略如果自定义属性时出现了大写

React学习笔记总结

阅读更多关于 React学习笔记总结

1：react简介 react 是专注于view层的 UI 库。优点： 1 、跨平台。Learn Once , Write Anywhere . 跨平台是react最大的亮点。react - native提供相应的组件如view、Text、TextInput等，组件依赖react如生命周期、状态。 react - native基于Virtual DOM 渲染出原生控件，react组件可映射为对应的原生控件。可输出Web Dom , ios控件，安卓控件。 2 、组件化。组件化的好处在于可以隔离，每个组件都有自己的生命周期，便与管理维护、修改、测试和阅读 3 、Virtual DOM 。真实页面对应一个 DOM 树。react把真实 DOM 树转换成javascript对象树，也就是Virtual DOM 。每次数据更新都将重新计算Virtual DOM 并与上一次生成的Virtual DOM 做对比，对发生变化的部分做“批量更新”，使用shouldComponentUpdate生命周期回调来减少数据变化后不必要的Virtual DOM 对比过程，提升性能。 ( 构建与更新都在内存中完成 ) 4 、函数式编程。 1 ）代码简洁，开发快速。 2 ）接近自然语言，易于理解。 3 ）更方便的代码管理。 4 ）易于 "并发编程" 。（注：函数是 "第一等公民"

订阅 dom