js | 易学教程

[总结]JS操作DOM常用API详解

阅读更多关于 [总结]JS操作DOM常用API详解

文本整理了javascript操作DOM的一些常用的api，根据其作用整理成为创建，修改，查询等多种类型的api，主要用于复习基础知识，加深对原生js的认识。基本概念在讲解操作DOM的api之前，首先我们来复习一下一些基本概念，这些概念是掌握api的关键，必须理解它们。 Node类型 DOM1级定义了一个Node接口，该接口由DOM中所有节点类型实现。这个Node接口在JS中是作为Node类型实现的。在IE9以下版本无法访问到这个类型，JS中所有节点都继承自Node类型，都共享着相同的基本属性和方法。每个节点都有一个nodeType属性，用于表明节点的类型。节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一： Node.ELEMENT_NODE:1 Node.ATTRIBUTE_NODE:2 Node.TEXT_NODE:3 Node.CDATA_SECTION_NODE:4 Node.ENTITY_REFERENCE_NODE:5 Node.ENTITY_NODE:6 Node.PROCESSING_INSTRUCTION_NODE:7 Node.COMMENT_NODE:8 Node.DOCUMENT_NODE:9 Node.DOCUMENT_TYPE_NODE:10 Node.DOCUMENT_FRAGMENT_NODE:11 Node

JS中常见原生DOM操作API

阅读更多关于 JS中常见原生DOM操作API

摘自：https://blog.csdn.net/hj7jay/article/details/53389522 几种对象 Node Node是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有 element，text，attribute，comment，document 等（所以要注意节点和元素的区别，元素属于节点的一种）。 Node有一个属性 nodeType 表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下： [javascript] view plain copy { ELEMENT_NODE: 1, // 元素节点 ATTRIBUTE_NODE: 2, // 属性节点 TEXT_NODE: 3, // 文本节点 DATA_SECTION_NODE: 4, ENTITY_REFERENCE_NODE: 5, ENTITY_NODE: 6, PROCESSING_INSTRUCTION_NODE: 7, COMMENT_NODE: 8, // 注释节点 DOCUMENT_NODE: 9, // 文档 DOCUMENT_TYPE_NODE: 10, DOCUMENT_FRAGMENT_NODE: 11, // 文档碎片 NOTATION_NODE: 12, DOCUMENT

js 检查文件格式和文件大小

阅读更多关于 js 检查文件格式和文件大小

之前有个工作需要用到js检查文件大小和文件格式，网上查了下有个兄弟写的不错，拿过来就能直接用，感谢他顺便记录下。原始文章地址http://www.jb51.net/article/43498.htm <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target,id) { var fileSize = 0; var filetypes =[".jpg",".png",".rar",".txt",".zip",".doc",".ppt",".xls",".pdf",".docx",".xlsx"]; var filepath = target.value; var filemaxsize = 1024*2;//2M if(filepath){ var isnext = false; var fileend = filepath.substring(filepath.indexOf(".")); if(filetypes &&

如何在微信公众号开发中实现图片裁剪

阅读更多关于如何在微信公众号开发中实现图片裁剪

接触微信公众号开发已经有一段时间了，发现其实和网页开发差不多，但是因为浏览器的不同，自己也碰过一些坑，其中就有怎么实现图片裁剪功能。一开始我是用PC端的思路去做的，首先在本地获取图片路径，然后在网页中显示，最后在本地裁剪，然后把裁剪好的图片转换成base64数据，上传到服务器。做完之后，我为了测试，我是直接把图片路径写到img里面的，省略了选择图片这个步骤，最后在微信测试是通过的。但是我把选择图片的步骤加上之后，就出了问题。我是用 cropper 框架（不支持jq的版本）实现的，因为这个框架支持移动端操作的，下面我就把这个过程中出现的问题写一下。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <link rel="stylesheet" href="css/cropper.css" /> <style> .img-content img { max-width: 100%; } </style> </head> <body> <div class="img-content"> <!--src是微信的图片ID

JS中数组去重的几种方法

阅读更多关于 JS中数组去重的几种方法

一、使用双重for循环，再利用数组的splice方法去重 var arr = [1,2, 5, 7, 7, 3, 2, 5, 9, 4, 5]; function quChong(arr) { for (var i = 0, len = arr.length; i < len; i++) { for (var j = i + 1, len = arr.length; j < len; j++) { if (arr[i] === arr[j]) { arr.splice(j, 1); j--; // 每删除一个数j的值就减1 len--; // j值减小时len也要相应减1（减少循环次数，节省性能） } } } return arr; } console.log(quChong(arr)); // 1, 2, 5, 7, 3, 9, 4 二、利用数组的includes方法去重 var arr = [2, 0, 8, 3, 1, 5, 5, 2]; function quChong(arr) { var arr1 = []; for (var i = 0, len = arr.length; i < len; i++) { if (!arr1.includes(arr[i])) { // 检索arr1中是否含有arr中的值 arr1.push(arr[i]); } } return

Js中的函数

阅读更多关于 Js中的函数

在计算机语言的学习过程中都避不开一个概念：函数。直白一些说，函数就是一组实现某个特定功能的代码块。但不是所有牛奶都叫特仑苏，函数比起其他部分的代码不同的地方，在我看来，就是函数通常是可以复用的。简单来讲，我要实现一个功能，而且在很多地方都要实现这个功能，那么我就可以把这个功能写成函数，在需要用到它的时候直接调用就可以了。这样做能够极大地简化代码，减少重复率，降低耦合度。 Js中的函数有两种形式：声明式和赋值式。声明式 : 函数声明的关键字 : function function 关键字和 var 关键字的行为几乎一致，都会在内存上开辟一块空间，用来存储变量之中的数据; function 函数名( 条件 ){ 代码 } 函数定义的规范: 函数名的首字母小写；函数的命名规则和变量命名规则基本一致; 声明时不要漏掉函数的名字。举例：一个简单的函数声明 function foo(){ console.log("hello world"); } 函数声明之后，并不会马上执行，而是等到程序中调用之后才会执行。例如一个空调，开机后并不会立即工作，而当用户点击制冷后，才开始制冷；选择制热后，开始加热。 function foo( a ){ if( a === "制冷"){ console.log("室温变低了");//制冷功能 } if( a === "制热"){ console

简单js点击实现爱心烟花效果

阅读更多关于简单js点击实现爱心烟花效果

作为一个前端的小白，在疫情期间无事可做，只好学习一些感兴趣的东西，很多人都说我们程序员不懂情调，于是我就写了这篇博客，用意在于我们程序员也是有情调的： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } body { width: 100%; height: 100%; background-color: black; overflow: hidden; } </style> //上面是简单的一些页面样式 </head> <body> </body> <script> function getStyle(obj, attr) {//obj:元素对象，attr:css属性名 if (window.getComputedStyle) {//条件用属性做，不存在就是undefined return window.getComputedStyle(obj)[attr]; } else { return obj.currentStyle[attr]; } }

js类型转换

阅读更多关于 js类型转换

js类型转换 1.类型转换三种，转为 boolean ， string ， number 转Boolean 在条件判断时，除了 undefined， null， false， NaN， ‘’， 0， -0，其他所有值都转为 true，包括所有对象转数字除数字字符串为数字，空数组为0，一个数字元素的数组转数字，null转为0，false转为0，true转为1，其他都为NaN 2.四则运算符 1 + ‘1’ // ‘11’ true + true // 2 4 + [1,2,3] // “41,2,3” ‘a’ + + ‘b’ // -> “aNaN” 加号运算符比较特殊， 1.a或b有一方是字符串，则另一方转字符串进行拼接 2.如果一方不是字符串或者数字，那么会将它转换为数字或者字符串 3.== vs === == 的比较规则 1.判断类型是否相同，相同则比较大小 2.类型不同，则类型转换 3.先判断是否是null和undefined，是为true 4 再判断是否是string和number，是则string转number比较 5.在如果有一方是boolean，则boolean转number比较 6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断注意：

JS高级

阅读更多关于 JS高级

1. 正则表达式: 2. String中的正则API: 1. 正则表达式: 2. String中的正则API: 查找: 1. 查找一个固定的关键词出现的位置: var i=str.indexOf("关键词"[,starti]) 在str中从starti位置开始找下一个"关键词"的位置如果省略starti，则默认从0位置开始向后找返回: “关键词”第一字所处位置的下标如果找不到，返回-1 问题: 只支持查找一个固定不变的关键词 2. 用正则表达式查找一个关键词的位置: var i=str.search(/正则/i); 在str中查找符合"正则"要求的敏感词返回值: 关键词的位置如果找不到，返回-1 问题: 正则默认区分大小的！解决: 在第2个/后加后缀i，表示ignore，意为:忽略大小写问题: 只能获得关键词的位置，不能获得关键词的内容解决: match 3. match: 1. 查找一个关键词的内容和位置: var arr=str.match(/正则/i); 在str中查找符合"正则"要求的敏感词的内容和位置返回值: 数组arr:[ "0":"关键词", "index": 下标i ] 如果找不到: 返回null 问题: 只能查找第一个关键词，不能查找更多关键词 2. 查找所有关键词的内容: var arr=str.match(/正则/ig) //g global

js 颜色16进制转RGB方法

阅读更多关于 js 颜色16进制转RGB方法

//颜色16进制转RGB方法 String.prototype.colorRgb = function(){ var sColor = this.toLowerCase(); //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; // 如果是16进制颜色 if (sColor && reg.test(sColor)) { if (sColor.length === 4) { var sColorNew = "#"; for (var i=1; i<4; i+=1) { sColorNew += sColor.slice(i, i+1).concat(sColor.slice(i, i+1)); } sColor = sColorNew; } //处理六位的颜色值 var sColorChange = []; for (var i=1; i<7; i+=2) { sColorChange.push(parseInt("0x"+sColor.slice(i, i+2))); } return "[" + sColorChange.join(",") + ",0.6]"; } return sColor; }; 来源： https://www.cnblogs.com/Byme/p/9455709.html

订阅 js