html
邵天宇Soy
这个作者很懒,什么都没留下…
展开
-
HTMl中的disabled和readonly
disabled 和 readonly 的用法:<input type="text" name="name" value="xxx" disabled="true"/><input type="text" name="name" value="xxx" readonly="true"/>原创 2018-03-14 11:57:12 · 372 阅读 · 0 评论 -
Javascript鼠标滚轮事件兼容写法
1.mousewheel事件(兼容opera,chrome,safari,IE)mousewheel事件对应的event对象包含一个wheelDelta属性。用户滚动鼠标滚轮时,wheelDelta的值是正负120的倍数。 值得注意的是,在opera9.5之前的版本,wheelDelta的正负号是颠倒的,这里不做考虑一般情况下,监听wheelDelta的正负值,就可以确定鼠标滚轮...原创 2018-07-17 21:08:51 · 2027 阅读 · 2 评论 -
一句话区分currentTarget和target
currentTarget:事件处理程序注册的元素, target:事件的实际目标元素下面是2个不同的场景例子:场景1:事件处理程序注册的元素 === 事件的实际目标元素<div id="div"> <button id='ele'>按钮</button></div>var ele = document.getElemen...原创 2018-07-12 21:48:32 · 3704 阅读 · 1 评论 -
原生JS实现表单序列化serialize()
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &am原创 2018-07-27 21:24:46 · 15713 阅读 · 2 评论 -
JS中的函数绑定以及实现函数柯里化
假设页面有个按钮btn,实现点击打印message信息和事件类型(暂只介绍ES5,ES6中函数绑定运算符::以后会补充)。第一步:var handler = { message:'hello world', handleClick:function(e){ console.log(this.message) console.log(e.typ...原创 2018-08-09 23:38:23 · 969 阅读 · 0 评论 -
JSON.stringify()、JSON.parse()、toJSON()中过滤器的用法(一)
JSON.stringify()语法:JSON.stringify(value[, replacer [, space]])除了要序列化的javascript对象外,还可以接收另外的2个可选参数。其中,replacer是个过滤器,可以是一个数组或者对象; space控制结果中的缩进和空白符,可以是一个数值或者字符串。我们先定义一个的JSON格式数据,下面会用到:var obj...原创 2018-08-06 21:26:25 · 5548 阅读 · 0 评论 -
JSON.stringify()、JSON.parse()、toJSON()中过滤器的用法(二)
JSON.parse()语法:JSON.parse(text[, reviver])其中,reviver为可选参数,被称为还原函数,规定了原始值如何被解析改造,在被返回之前。var obj = { "username":"hello world", "age":20, "height":"185cm", "address":"Shang原创 2018-08-06 23:17:41 · 477 阅读 · 0 评论 -
Try.Catch.Finally简单总结
示例一、 try执行正确的时候结果输出:try执行错误的时候,(把toLocaleString的e去除)结果输出:try内放一条可能产生错误的语句。当try语句开始执行并抛出错误时,catch才执行内部的语句和对应的try内的错误信息message。何时执行finally语句,只有当try语句和catch语句执行之后,才执行finally语句,不论try抛出异常或者catch捕获都会执行final原创 2017-08-31 17:18:23 · 1396 阅读 · 0 评论 -
JS中的FormData基本使用
FormData为序列化表单以及创建与表单格式相同的数据提供了方法。1,、常用的append键值对:其中,append方法接受一个键值对。var data = new FormData();data.append(&amp;quot;key&amp;quot;,&amp;quot;value&amp;quot;)然后可以把data作为传给服务器的数据。2、序列化表单数据(非GET提交)GET提原创 2018-08-07 21:01:11 · 7532 阅读 · 0 评论 -
JS函数的按值传递
写在前面:ECMAScript访问变量有按值和按引用2中方式,那函数的传参呢?是按值传递还是按引用传递?之前有专门介绍:javascript中的引用类型 和 普通类型 在向参数传递 基本类型 的值时,被传递的值会被赋给一个局部变量(即命名参数/arguments对象中的一个元素)://demo1:function add(n) { return n += 100;...原创 2018-03-30 20:10:30 · 725 阅读 · 0 评论 -
一元操作符“++”,“- -” 之强制转换数值
递增和递减分别有前置型和后置型,这里不作区分。下面的代码全部是后置型递增:var str = "z";console.log(str++) //NaNconsole.log(typeof str) //numbervar str = "123abc";console.log(str++) //NaNconsole.log(typeof str) ...原创 2018-09-03 23:08:20 · 385 阅读 · 0 评论 -
next.js中的window is not defined
1.问题描述使用了next+express做SSR,引入了富文本编辑器braft-editor(我也不知道自己为什么要用SSR渲染后台界面),代码如下import React from 'react'import BraftEditor from 'braft-editor'import 'braft-editor/dist/index.css'export default class...原创 2018-12-11 23:40:25 · 24956 阅读 · 4 评论 -
DOM结构深度优先遍历(二):TreeWalker
这里是接着上一篇写的DOM结构深度优先遍历(一):NodeIteratorTreeWalker是NodeIterator的一个更高级的版本。TreeWalker的创建document.createTreeWalker(root, whatToShow, filter, EntityReferenceExpansion)其中接收的参数与 document.createNodeIter...原创 2018-07-05 00:05:31 · 2080 阅读 · 0 评论 -
DOM结构深度优先遍历(一):NodeIterator
NodeIterator和TreeWalker能够基于给定的起点对DOM结构进行深度优先(depth-first)的遍历操作。IE不支持DOM遍历。可以使用下面代码检测浏览器DOM2级遍历能力的支持:var supportTraversala = document.implementation.hasFeature("Traversal","2.0");var supportNode...原创 2018-07-04 23:20:54 · 1684 阅读 · 0 评论 -
isSameNode( )和isEqualNode( )比较节点的区别
DOM3级引入了两个辅助比较节点的方法:isSameNode( )和isEqualNode( )。分别判断传入的节点与引用的节点是否相同和相等所谓相同,指的是两个节点引用的是同一个对象;所谓相等,指的是两个节点是否是同一类型,具有相等的属性(nodeName,nodeValue。。。等等),还有相等的attributes,childNodes(相同的位置包含相同的值)语法:no...原创 2018-06-28 21:30:20 · 1572 阅读 · 0 评论 -
浅析encodeURI,encodeURIComponent,decodeURI,decodeURIComponent
Global(所有在全局作用域中定义的属性和函数,都是Global的属性)对象的encodeURI(),encodeURIComponent()方法可以对URI(通用资源标识符)进行编码,以便发送给浏览器。有效的URI不能包含某些字符:例如空格。这2个URI编码方法就可以对URI进行编码,用特殊的UTF8编码替换所有无效的字符,从而让浏览器能够接受。1.encodeURI(),encode...原创 2018-05-05 11:16:50 · 1822 阅读 · 0 评论 -
setTimeout()中容易忽视的要点
setTimeout语法:var timeoutId = scope.setTimeout(function[, delay, param1, param2....]); var timeoutId = scope.setTimeout(function[, delay]); var timeoutId = scope.setTimeout(code[, delay]);setTi...原创 2018-05-28 22:39:57 · 8870 阅读 · 2 评论 -
使用attributes遍历元素属性
假设HTML如下,一个div<div id="a" name='123' align="bottom" bgColor='green'></div>function getAttrList(element){ var arr = [], attrName, attrValue, i, len,...原创 2018-06-11 22:39:50 · 2096 阅读 · 0 评论 -
appendChild,insertBefore,replaceChild,removeChild,cloneNode用法小结
1.appendChild()appendChild()用于向childNodes列表的末尾添加一个节点。更新节点后,appendChild()返回新增的节点。下面的parentNode代表父节点,newNode代表新节点,returnedNode代表appendChild返回的节点var returnedNode = parentNode.appendChild(newNode);...原创 2018-06-05 22:28:12 · 1877 阅读 · 0 评论 -
使用DocumentFragment动态创建一个List
DocumentFragment是一种轻量级的文档,在文档中没有任何标记,可以包含和控制文本,但不会占用额外的资源。一般操作一个ul,并且给ul动态添加li节点,会使用下面的方式:<ul id="list"></ul>var ul = document.getElementById('list');var li = null;for(var i = 0; ...原创 2018-06-12 22:50:47 · 336 阅读 · 0 评论 -
使用getElementsByTagName()和namedItem()获取特定元素
getElementsByTagName接受一个参数,即要取得元素的标签名,返回值是包含零个或多个元素的NodeLIst。 注意:getElementsByTagName接受的标签名不区分大小写,除XML,XHTML之外1.基本使用假设HTML如下:&amp;lt;img src=&quot;a.png&quot; name=&quot;img&quot;/&amp;gt;&原创 2018-06-06 22:43:47 · 5511 阅读 · 0 评论 -
Element类型的tagName和nodeName
要访问元素的标签名,可以使用tagName或nodeName属性;这两个属性返回的值相同假设HTML如下:&amp;lt;div id=&quot;a&quot;&amp;gt;&amp;lt;/div&amp;gt;获取标签名:var ele = document.getElementById('a');console.log(a.tagName) //DIVconsole.原创 2018-06-07 22:14:59 · 2299 阅读 · 0 评论 -
DOM元素遍历的几种方式(javascript)
对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致。DOM中为元素新增了下面几个属性:childElementCount:返回子元素(不包括文本节点和注释)的数量;firstElementChild:firstChild的元素版;lastElementChild:lastC...原创 2018-06-14 21:11:44 · 11187 阅读 · 4 评论 -
使用dispatchEvent派发自定义事件
这里暂不介绍对低版本IE的兼容。。。标准浏览器中使用dispatchEvent派发自定义事件:element.dispatchEvent(),除此之外,还有创建和初始化事件:一般的流程是:创建 &gt;&gt; 初始化 &gt;&gt; 派发。对应的事件流程:document.createEvent() &gt;&gt; event.initEvent() &gt;&g原创 2018-06-25 22:06:14 · 8723 阅读 · 1 评论 -
insertAdjacentHTML( ),insertAdjacentElement( ) , insertAdjacentText( ) 方法
insertAdjacentHTML()是一个插入标记的方法,这个方法最早在IE中出现,现在绝大多数浏览器都支持这个方法。insertAdjacentHTML()接受2个参数:要插入的位置和要插入的HTML文本,第一个参数必须是下面4个值之一,第二个参数是一个HTML字符串:beforebegin,在当前元素之前插入一个紧邻的同辈元素;afterbegin,在当前元素之下插入一个新的子...原创 2018-06-19 23:12:58 · 1144 阅读 · 0 评论 -
利用innerText和textContent去除HTML标签
支持innerText的浏览器包括IE4+,Safari3+,Opera8+,ChromeFirefox不支持innerText,不过支持作用类似的textContent方法简单提一下,innerText、textContent的基本运用:1.获取文本内容<div id="o"> <ul> <li>1</li>...原创 2018-06-26 22:47:50 · 1261 阅读 · 0 评论 -
flex布局介绍(来自小程序文档,供个人记录阅读)
请移步小程序文档,个人觉得介绍地很详细:https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a附个人改进:align-items 属性:设置项目在行中的对齐方式。.container{ align-items:stretch(默认值) | ...原创 2019-01-28 18:22:13 · 343 阅读 · 0 评论