dom | 易学教程

HTML DOM

阅读更多关于 HTML DOM

1. prompt() Refer to https://www.w3school.com.cn/jsref/met_win_prompt.asp <html> <head> <script type="text/javascript"> function display(){ var name = prompt("Please enter your name",'origin') if(name != null && name != "") { document.write("hello " + name) } } </script> </head> <body> <input type="button" onclick="display()" value="Display box"> </body> </html> 2. classList Refer to https://www.runoob.com/jsref/prop-element-classlist.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .mystyle { width: 300px; height: 50px; background-color: coral;

vue生命周期

阅读更多关于 vue生命周期

　　今天来说说vue的生命周期，这也是vue最基本要知道的，面试是也会常被提到的一个问题，现在开始吧！ vue生命周期常用的8个阶段：　　 beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有开始初始化。　　 created阶段：vue是咧的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有。　　 beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点。　　 mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点。　　 beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器　　 updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环。　　 beforeDestory阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件。　　 destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，多有的子实例都会被销毁 vue生命周期详细解说：　　我们在谈到Vue生命周期的时候，首先需要创建一个实例，也就是在new Vue(

jQuery总结

阅读更多关于 jQuery总结

一、jQuery初步认知 jQuery概述 JQuery概念 javascript概念基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素 JQuery概念基于javascript的，同上，提高了代码的效率 jQuery是什么: 是一个javascript代码仓库，我们称之为javascript框架。是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。它可以帮我们做什么(有什么优势) 轻量级、体积小，使用灵巧(只需引入一个js文件) 强大的选择器出色的DOM操作的封装出色的浏览器兼容性可靠的事件处理机制完善的Ajax 链式操作、隐式迭代方便的选择页面元素(模仿CSS选择器更精确、灵活) 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式) 控制响应事件(动态添加响应事件) 提供基本网页特效(提供已封装的网页特效方法) 快速实现通信(ajax) 易扩展、插件丰富如何引入JQuery包引入本地的JQuery 引入Google在线提供的库文件（稳定可靠高速）使用Google提供的API导入写第一个JQUery案例解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery() <script type=“text

jQuery基本知识

阅读更多关于 jQuery基本知识

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　jQuery知识结构 * jQuery入门? * js函数库(DOM/ajax) * 特点: * HTML元素选取 * HTML元素操作 * CSS操作 * HTML事件处理 * JS动画效果 * 链式调用 * 浏览器兼容 * Ajax封装 * 易扩展插件 * helloworld * 引入库 * 引入库文件到项目中 * 在页面中引入 * 使用库 * 使用jQuery核心函数 : $/jQuery * 使用jQuery核心对象 : 使用调用$()返回的结果 $(function(){ $('#demo').click(function(){ //处理点击响应逻辑 }); }); * 回调函数: * 你定义的 * 你没有调用 * 但它最终执行了(一定时机/条件) * jQuery的2把利器 * jQuery核心函数 : * $/jQuery : jQuery库定义的两个全局函数 * 作为一般函数调用 : $(params) * callback function : 绑定文档加载完成的回调 * 选择器字符串 : 查找所有匹配的dom元素, 并包装为jQuery对象返回 * 标签字符串 : 生成dom元素对象, 并包装为jQuery对象返回 * dom元素对象: 将指定的dom元素包装为jQuery对象返回

jquery对dom节点的操作

阅读更多关于 jquery对dom节点的操作

3 月，跳不动了？>>> 1、 JavaScript脚本放在哪里才好？　 1.当有些函数需调用才执行或者有些事件需触发才执行的脚本，我们可以将脚本放在 HTML的head 部分中,这样可以保证脚本在任何调用之前已经被加载。　2.当页面加载时需执行的脚本可以放在HTML的body部分，这类脚本通常被用来生成页面的内容。　3.当页面加载后需立即执行的脚本，我们可以放在最后，文档加载之后执行。所幸的是，Jquery有事件控制，所以，这部分我们可以下载 head 引用的外部文件中。 2、jquery的常用函数（ http://www.cnblogs.com/Jolinson/p/3441209.html ）如： children() 、 parent()、 each()、 text()、 html()、 val()、 next()； <ul class="level-1"> <li class="item-i">I</li> <li class="item-ii">II <ul class="level-2"> <li class="item-a">A</li> <li class="item-b">B <ul class="level-3"> <li class="item-1">1</li> <li class="item-2">2</li> <li

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

阅读更多关于 DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

[1] slientWidth 和 sclientHeight slientWidth：获取的是可视宽度　　　 slientHeight:获取的是可视高度　　　 <html> 　　<head> 　　　　<style> 　　　　　　.div1{ 　　　　　　　　width:50px; 　　　　　　　　height:50px; 　　　　　　　　overflow:scroll;　　　　//设置滚动条　　　　　　} 　　　　</style> 　　</head> 　　<body> 　　　　<div id="div" class="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> 　　</body> </html> 【1】slientWidth：34px ; slientHeight: 34px 因为client他的宽度和高度都没有包括滚动条，所以会减去滚动条的宽高度；【2】当div内的内容溢出(内容量超过div大小)的时候，client获取的仍然是34px；因为他只是获取到可视内容的高度 //-----------------------------------------------------------------------------------------------------

DOM与事件及Todolist案例

阅读更多关于 DOM与事件及Todolist案例

1. DOM简介 DOM: 文档对象模型 JS将整个HTML/XML文档看一个对象,也称为 DOM树 DOM树由各种类型的节点组成 2. 获取DOM元素的四种方法标签: document.getElementsByTagName() ID: document.getElementById() class: document.getElementsByClassName() API: document.querySelector() / document.querySelectorAll() 控制台效果图代码 <!DOCTYPE html> <html> <head> <title> 获取元素的四种方法 </title> <meta charset = "utf-8" > </head> <body>  <div id = "list" > <ul class = "poster" > <li name = "active" > 第一行内容 </li> <li name = "ct" > 第二行内容 </li> <li> 第三行内容 </li> </ul> </div> <script type = "text

css加载会造成阻塞吗？

阅读更多关于 css加载会造成阻塞吗？

终于考试完了，今天突然想起来前阵子找实习的时候，今日头条面试官问我，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？所以，接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗？用代码说话： <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function h () { console.log(document.querySelectorAll('h1')) } setTimeout(h, 0) </script> <link href

vue.js与react.js相比较的优势

阅读更多关于 vue.js与react.js相比较的优势

vue.js的简介 vue.js是一个javascript mvvm库，它是以数据驱动和组件化的思想构建的。我们平时多用js去操作dom，vue.js则是使用了数据绑定驱动来操作dom的，也就是说创建了view和model之间的绑定后，当model数据层发生变化时，view的dom就会发生相应变化。 mvvm即是model-view-viewmodel，model和view之间的衔接交互都是通过viewmodel来实现的。viewmodel就是创建一个vue实例，vue实例是作用于某一个dom元素上的。 DOM Listeners和Data Bindings是实现双向绑定的关键。从View层看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；从Model层看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。与 React 框架相比它的优势 react和vue的相似之处： 1.使用虚拟dom 2.提供了响应式和组件化的视图组件 3.关注核心库，伴随于此，有配套的路由和负责处理全局状态管理的库比较之处： #性能方面 1.渲染性能渲染用户界面的时候，dom的操作成本是最高的，那为了尽可能的减少对dom的操作，Vue和React都利用虚拟DOM来实现这一点

Finding element using its innerHTML

阅读更多关于 Finding element using its innerHTML

问题 Please have a look to this DOM Tree... <div> <div> <span> Home1 </span> </div> <span> Home2 </span> <span> Home3 </span> </div> Now suppose I have a scenario where somehow I got the innerHTML of first span Home1 . Is it possible to get the element span and its parent div by using only this (Home1) information. 回答1: There are so many ways to get info about your elements. Using the innerHTML as identifier is not a good solution. You probably need some sort of event to that makes you search for

订阅 dom