HTML事件处理程序 某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码。...3)HTML与JavaScript代码紧密耦合。 2. DOM0级事件处理程序 通过javascript制定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。...如果直接将事件处理程序指定给了目标元素，this,currentTarget,target包含相同的值。 2....IE中的事件对象 在使用DOM0级方法添加事件时，event对象可以作为window对象的一个属性存在，使用attachEvent添加事件处理程序的时候，event对象会作为参数传入事件处理函数中 dom.onclick...【不支持子元素】 mouseout 在位于元素上方的鼠标光标移入到另外一个元素中。
=="和"==="的不同 答案：前者会自动转换类型,再判断是否相等 后者不会自动类型转换，直接去比较 4.总结String 对象操作方法 方法 描述 charAt() 返回在指定位置的字符。...fromCharCode() 将 Unicode 编码转为字符。 indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。 includes() 查找字符串中是否包含指定的子字符串。...优点: 1.可以减少事件注册,节省大量内存占用 2.可以将事件应用于动态添加的子元素上 缺点: 使用不当会造成事件在不应该触发时触发 17.说一下你对this的理解？...19.如何编写高性能的JavaScript,(前端如何优化) 将js脚本放在页面底部，加快渲染页面; 将js脚本成组打包，减少请求; 使用非阻塞方式下载js脚本; 尽量使用局部变量来保存全局变量; 尽量减少使用闭包...()传递函数而不是字符作为参数; 尽量使用直接量创建对象和数组; 最小化重绘(repaint)和回流(reflow); 20.eval是做什么的？
事件绑定几次就算几个事件，即使类型和功能完全一样也不会“覆盖” 事件执行顺序：判断的关键是否目标元素 非目标元素：根据 W3C 的标准执行：捕获->目标元素->冒泡（不依据事件绑定顺序） 目标元素：依据事件绑定顺序...：先绑定的事件先执行（不依据捕获冒泡标准） 最终顺序：父元素捕获->目标元素事件 1->目标元素事件 2->子元素捕获->子元素冒泡->父元素冒泡 注意：子元素事件执行前提 事件确实“落”到子元素布局区域上...该 DOM 上的事件如果被触发，会执行两次（执行次数等于绑定次数） 如果该 DOM 是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获 如果该 DOM 是处于事件流中的非目标元素，则先执行捕获，后执行冒泡...事件的代理/委托 事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件 优点： 可以减少事件注册，节省大量内存占用 可以将事件应用于动态添加的子元素上 缺点： 使用不当会造成事件在不应该触发时触发...attribute 是 dom 元素在文档中作为 html 标签拥有的属性； property 就是 dom 元素在 js 中作为对象拥有的属性。
foo({ "ip": "8.8.8.8" }); 由于script元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。...作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。...上面命令中，父窗口想获取子窗口的DOM，因为跨源导致报错。反之亦然，子窗口获取主窗口的DOM也会报错。...这意味着你可以不受什么限制的将数据对象安全的传送给目标窗口而无需自己序列化。...> 方法5 WebSocket WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。
但在浏览器中，有一些任务是非常耗时的，比如ajax请求、定时器、事件等，为了保证非耗时任务不受影响，Javascript 在执行环境中维护了一个异步队列(也叫工作线程)，并将这些耗时任务放入队列中进行等待...注意，设为Flex布局以后，子元素的float、clear和vertical-align 属性将失效。...Iconfont，即字体图标，就是将常用的图标转化为字体资源存在文件中，通过在CSS中引用该字体文件，然后可以直接用控制字体的css属性来设置图标的样式，字体图标的好处是节省网络请求、其大小不受屏幕分辨率的影响...:20px;在ie6中距左侧元素的实际显示距离是40px，而在非ie6的浏览器上显示正常。...当目标元素的事件被触发以后，这个事件就从目标元素开始，向最外层元素传递，最终冒泡到父元素上，父元素再通过event.target 获取到这个目标元素，这样做的好处是，父元素只需绑定一个事件监听，就可以对所有子元素的事件进行处理了
，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify...通过postMessage来传输数据以后，极大的方便了数据的传输，子窗口接收到信息以后可以将信息存储到cookie或者是localStorage中，父窗口也可以将自己的cookie或localStorage...foo({ "ip": "8.8.8.8" }); 由于元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。...WebSocket WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
事件 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。...给元素添加事件处理程序 方法一：HTML内联方式 元素支持的每个事件都可以使用一个相应事件处理程序同名的HTML属性指定。...直接为DOM元素添加事件处理程序时，event对象作为window对象的一个属性存在 var handler = function () { var e = window.event;...DOM0级事件处理方式： Dom0级事件处理程序是将一个函数赋值给一个事件处理程序属性，而通过将事件处理程序设置为null删除绑定在元素上的事件处理程序。...image.png DOM2级事件传播：有3个阶段： 捕获阶段：事件从document向子元素一层层传递，直到目标元素 处于目标阶段：此时事件发生在目标元素上，被看做冒泡的一部分 冒泡阶段：和IE冒泡一样
在最初，是使用HTML事件处理程序的，也就是说，某个元素（如div），支持的每一种事件，都可以使用一个与相应事件处理程序同名的HTML特性来制定（也就是标签的一个属性），这个特性的值就是能够执行的JavaScript...，也可以使用JavaScript中内部的函数。...还可以直接使用JavaScript的代码等。...> 简要的总结一下所谓的事件委托：给元素的父级或者祖级，甚至页面绑定事件，然后利用事件冒泡的基本原理，通过事件目标对象进行检测，然后执行相关操作。...移除事件处理程序 每当将一个事件处理程序指定给一个元素时，在运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。连接数量也直接影响着页面的执行速度。
谷歌浏览器强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准。...一旦执行栈中的所有同步任务执行完毕，引擎就会读取任务队列，然后将任务队列中的第一个任务取出放到执行栈中运行。...)无法改变箭头函数中this的指向 不能作为构造函数使用， 因为没有自己的 this，无法调用 call，apply；没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype...__proto__）到构造器函数的原型 ； 将新创建的对象作为this的上下文 ； 返回。...: 0 auto; 适用块级元素 width: fit-content; 若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content, 并且配合margin
jquery介绍 jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。...微软公司甚至把jQuery作为他们的官方库。...，然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。...，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。...html的标签结构，它有两种情况： 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中 创建新标签 var $div = $(''); //创建一个空的div var $div2 =
（3）HTML和JavaScript代码耦合度高。 2. DMO0级事件处理程序 将一个函数赋值给一个事件处理程序属性。每个事件只支持一个事件处理程序。...示例一：如果直接将事件处理程序指定给目标元素，则this、currentTarget和target包含相同的值。...IE中的事件对象 在使用DOM0级方法添加事件处理程序时，event对象作为window对象的一个属性存在。...，因为在HTML中无法访问window元素。...移除事件处理程序 每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。这种链接越多，页面执行起来就越慢。
当然也可以直接使用成熟的框架、比如html5shim。 Javascript 1、JS如何使页面跳转?怎么引入一个外部JS文件?...①innerHTML是w3c的html dom定义的方法，而后两者是IE独有的方法； ②innerHTML代表一个元素节点内由所有子节点，不包括当前节点组成的html代码； ③outerHTML代表一个元素节点内由所有子节点和当前节点组成的...html代码； ④innerText代表一个元素节点内由所有子文本节点内容组成的文本； 17、在JavaScript中定时调用函数 foo() 如何写？...3.for循环时，每次取出一个元素与对象进行对比，如果这个元素不重复，则把它存放到结果数组中，同时把这个元素的内容作为对象的一个属性，并赋值为1，存入到第2步建立的对象中。...由于xml解析比较麻烦，所以使用json比较多。 ②在jQuery中有专门的获取服务器json数据的方法，getJSON()，在回调中，jQuery会自动将json转换为javascript对象。
设置元素可拖放：画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。...行内元素有：a b span img input select strong；块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；空元素，即没有内容的HTML...事件流事件流是网页元素接收事件的顺序，"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获，为截获事件提供机会。然后是实际的目标接受事件。... 我是父元素 我是子元素 html>当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序：父级捕获子级捕获子级冒泡父级冒泡且当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序
方面 将样式表放到页面顶部 不使用CSS表达式 使用不使用@import 不使用IE的Filter Javascript方面 将脚本放到页面底部 将javascript和css从外部引入 压缩...核心原则如下: 所有浏览器都必须能访问基本内容 所有浏览器都必须能使用基本功能 所有内容都包含在语义化标签中 通过外部CSS提供增强的布局 通过非侵入式、外部javascript提供增强功能 end-user...顺序LoVe HAte，兼容性: IE4+ X + Y直接兄弟选择器：在X之后第一个兄弟节点中选择满足Y选择器的元素，兼容性： IE7+ X > Y子选择器： 选择X的子元素中满足Y选择器的元素，兼容性...一些使用百分数并且需要布局来决定最终值的属性，如width，margin。百分数就直接作为computed value。line-height的无单位值也直接作为computed value。...如果对象有valueOf()方法并且返回元素值，javascript将返回值转换为数字作为结果 2.
(true); js删除子级html元素:parEle.removeChild(childEle); Object.values() Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组...JavaScript Array filter() 方法 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。...迭代对象中数组的索引值作为 key， 数组元素作为 value。...JavaScript Array some() 方法 some() 方法用于检测数组中的元素是否满足指定条件（函数提供）。...{n,m} m和n均为非负整数，其中n将匹配“fooooood”中的前三个o。“o{0,1}”等价于“o?”。
，"DOM2级事件"规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。...> 我是父元素 我是子元素 html...alert('子级冒泡'); }, false); sonEle.addEventListener('click', function () { alert('子级捕获'); }, true...); 当容器元素及嵌套元素，即在捕获阶段又在冒泡阶段调用事件处理程序时：事件按DOM事件流的顺序执行事件处理程序： 父级捕获 子级冒泡 子级捕获 父级冒泡 且当事件处于目标阶段时...在 Web 端，我们常见的就是 DOM 事件： DOM0 级事件，直接在 html 元素上绑定 on-event，比如 onclick，取消的话，dom.onclick = null，同一个事件只能有一个处理程序
问：你知道在css中，html的标签元素分多少中不同的类型吗？... 元素转换： display: block 将元素转换为块级元素 display: inline 将元素转换为行级元素...弹性盒子模型： Box-model定义了一个元素的盒子模型 Flexbox box-lines: 设置或检索弹性盒子模型对象的子元素是否可以换行显示 box-direction 设置或检索弹性盒子模型对象的子元素的排列顺序是否反转...，通过判断事件的“目标元素”来触发父级上绑定的事件。...() 将每个匹配的元素内部追加内容 appendTo() 将所有匹配的元素追加到另一个指定的元素集合中 prepend() 将每个匹配的元素内部前置内容 prependTo(） 把所有匹配的元素前置到指定的元素集合中
和解的最终目标是，根据这个新的状态以最有效的方式更新DOM。为此， React将构建一个新的 React虚拟DOM树（可以将其视为页面DOM元素的对象表示方式）。...如果将HTML中的表单元素（ input、 select、 textarea等）添加到组件中，当用户与表单发生交互时，就涉及表单数据存储问题。...表单如何呈现由表单元素自身决定。如下所示，表单的值并没有存储在组件的状态中，而是存储在表单元素中，当要修改表单数据时，直接输入表单即可。有时也可以获取元素，再手动修改它的值。...它们最大的区别在于 Vue. js通常使用HTML模板文件，而 React完全使用 JavaScript创建虚拟DOM。...总结： JSX 是一个 JavaScript 的语法扩展，结构类似 XML。JSX 主要用于声明 React 元素，但 React 中并不强制使用 JSX。
我们将一个处理流程称为渲染流水线，其大致流程如下图所示： 这里主要包含五个过程： 「DOM树构建」：渲染引擎使用HTML解析器（调用XML解析器）解析HTML文档，将各个HTML元素逐个转化成DOM节点...这是因为，浏览器是无法直接理解和使用HTML的，所以需要将HTML转化为浏览器能够理解的结构——DOM树。...div 1 伪元素选择器 li:after 1 相邻兄弟选择器 h1+p 0 子选择器 ul>li 0 后代选择器 li a 0 通配符选择器 * 0 对于选择器的「优先级」： 标签选择器、伪元素选择器...负的z-index：当前层叠上下文中，z-index属性值为负的元素。 块级盒：文档流内非行内级非定位后代元素。 浮动盒：非定位浮动元素。 行内盒：文档流内行内级非定位后代元素。...上面我们说的JavaScript脚本是通过script标签直接嵌入到HTML中的。当在页面中引入JavaScript脚本时，情况就会变得复杂。
Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。...Element 对象 在 HTML DOM 中，Element 对象表示 HTML 元素。 Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。...element.appendChild() 向元素添加新的子节点，作为最后一个子节点。 element.attributes 返回元素属性的 NamedNodeMap。...事件句柄 (Event Handlers) HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为，比如当用户点击某个 HTML 元素时启动一段 JavaScript。...metaKey 返回当事件被触发时，“meta” 键是否被按下。 relatedTarget 返回与事件的目标节点相关的节点。 screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
