js

JS条件语句优化

强颜欢笑 提交于 2020-02-06 02:47:19
1.对多个条件使用Array.includes eg: function test(fruit){ function test(fruit){ if(fruit=='apple' || fruit=='cherry' ){ 可改写为 console.log('red') =================================>> const redFruits=['apple','cherry','strawberry']; } if(redFruits.includes(fruit)){ console.log('red') } } } 2.更少的嵌套,尽早的返回 eg: 如果没有水果名称,抛出错误 如果红色水果数量超过10个,接受并打印 function test(fruit, quantity){ const redFruits=['apple','cherry','strawberry']; if(!fruit) throw new Error('No fruit!'); if(!redFruits.includes(fruit)) return; console.log('red''); if(quantity >10){ console.log('big quantity') } } 3.使用默认的函数参数和结构 4.选择Map或对象字面量

js Dom为页面中的元素绑定键盘或鼠标事件

淺唱寂寞╮ 提交于 2020-02-05 21:24:00
html鼠标事件 onload 页面加载 onclick 鼠标单击 onmouseover 鼠标移入 onmouseout 鼠标移出 onfocus 获取焦点 onblur 失去焦点 onchange 域的内容改变 在事件触发中,this表示对当前dom对象的引用 1、html事件,在html元素上直接绑定事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .btn{ width:140px; height:30px; background:#abcdef; line-height:30px; text-align: center; font-size:14px; border-radius:5px; cursor:pointer; } div{ width:140px; height:140px; background:#abcdef; line-height:140px; text-align: center; font-size:14px; margin:50px 0; } </style> </head> <body> <button id="btn" class="btn" onclick="alert('我被点击啦!');"

js图片放大缩小

余生长醉 提交于 2020-02-05 20:18:30
最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来。我有2个种方法实现:第一种方法可以兼容IE和火狐( 其他的浏览器我没有测试 );第二种方法只能兼容IE。 第一种方法很简单,代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="ImageZoom.Image" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> img { border:#000000 1px solid; } </style> <script language="javascript" type="text/javascript"> //兼容IE和火狐 function ImageChange(args) { var oImg = document

js中的循环语句

无人久伴 提交于 2020-02-05 20:08:18
js中的循环语句可分为三种:1.while;2.do……while;3.for。 while的语法为 while (exp) { //statements; } var a=1,b=0; while(a<=1000){ if(a%2==0){ if(b%20==0) { document.write("<br>第"+parseInt(b/20+1)+"行偶数"); } document.write(a+"&nbsp"+"&nbsp"); b++; } a++; } 其中,exp为一条件判断语句,最终的结果都可以用一个布尔值表示,若其结果为true则进行下面{}里的语句,然后继续判断exp,直到exp的结果为false为止,若exp的结果为false,则跳过这条循环语句,执行接下来的代码。需要注意的是在{}里的语句必须存在对exp的结果产生影响的代码,否则循环会一直重复下去,形成死循环。 do……while语句与while语句大体上相同,唯一的不同之处是do……while语句会先执行语句,然后对条件进行判断。其语法为 do { //statements; }while (condition); 同样是上面的例子,其结果变为 var a=1,b=0; do{ if(a%2==0){ if(b%20==0) { document.write("<br>第"+parseInt(b/20+1

原生js获取到页面上所有的checkbox

限于喜欢 提交于 2020-02-05 19:46:18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="author" content=""> <title>获取页面所有的checkbox</title> </head> <body> <input type="checkbox" name="box1" id="box1">box1 <input type="checkbox" name="box2" id="box2">box2 <input type="checkbox" name="box3" id="box3">box3 <input type="checkbox" name="box4" id="box4">box4 <input type="checkbox" name="box5" id="box5">box5 <input type="checkbox" name="box6" id="box6">box6 <script> var inputs = document

js 数组对象去重

梦想与她 提交于 2020-02-05 19:23:52
let hash = {}; let config = [ { name: 2, state: true, output: 'Y'}, { name: 3, state: true, output: 'A'}, { name: 5, state: true, output: 'S'}, { name: 7, state: true, output: 'B'} ]; config = [...config, { // 合并数组 ...运算符即为数组展开运算符 name: 3, state: false, output: 'A', }] const newArr = config.reduce((item, next) => { console.log('hash--',hash) console.log('next--',next.name) console.log('hash[next.name]--',hash[next.name]) hash[next.name] ? '' : hash[next.name] = true && item.push(next); return item }, []); //[{"name":2,"state":true,"output":"Y"},{"name":3,"state":true,"output":"A"},{"name":5,

js基础知识点总结

房东的猫 提交于 2020-02-05 17:31:12
如何在一个网站或者一个页面,去书写你的js代码: 1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs) 2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性 HTML:属性.HTML属性="值"; CSS:对象.style.CSS属性="值"; class和float 1.class:className 2.float:cssFloat 获取对象 id:document.getElementById("id 名") 事件:用户的动作 鼠标事件: onclick:点击 onmouseover: 鼠标放上 onmouseout:鼠标离开 ondbclick:双击事件 onmousedown:鼠标按下 onmouseup:鼠标抬起 onmousemove鼠标移动 表单事件: onfocus:获取焦点 onblur:失去焦点 onsubmit:提交事件 onchange:当发生改变的时候 onreset:重置事件 键盘事件: onkeyup:键盘抬起 onkeydown:键盘按下 onkeypress:键盘按键一次 窗口时间:onload事件 页面加载完成之后立刻执行的事件 两种方式: 1.

JavaScript----章节二

随声附和 提交于 2020-02-05 17:07:05
5、内部对象 标椎对象 typeof 123 "number" typeof '123' "string" typeof true "boolean" typeof NaN "number" typeof [ ] "object" typeof { } "object" typeof Math . abs "function" typeof undefined "undefined" 5.1、Date 基本使用 var now = new Date ( ) ; //Sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间) now . getFullYear ( ) ; //年 now . getMonth ( ) ; // 月 0~11 代表月 now . getDate ( ) ; // 日 now . getDay ( ) ; // 星期几 now . getHours ( ) ; // 时 now . getMinutes ( ) ; // 分 now . getSeconds ( ) ; // 秒 now . getTime ( ) ; // 时间戳 全世界统一 1970 1.1 0:00:00 毫秒数 console . log ( new Date ( 1578106175991 ) ) //时间戳转为时间 转换 now = new Date

jQuery---jquery.color.js和jquery.lazyload.js的使用

旧巷老猫 提交于 2020-02-05 15:49:42
jquery.color.js的使用 了解即可 <!--1. 引入jquery的js文件--> <script src="jquery-1.12.4.js"></script> <!--2. 引入插件的js文件--> <script src="jquery.color.js"></script> <script> $(function () { //3. 直接使用即可。 //说明jquery不支持颜色的渐变,颜色最好用16进制 $('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () { alert("呵呵"); }); }); </script> jquery.lazyload.js的使用 <script src="jquery-1.12.4.js" type="text/javascript"></script> <script src="jquery.lazyload.js" type="text/javascript"></script> <script> $(function () { $("img.lazy").lazyload(); }); 来源: https://www.cnblogs.com/jane-panyiyun/p/12263863.html

[前端JS学习笔记]JavaScript function

浪子不回头ぞ 提交于 2020-02-05 13:04:39
一、函数的声明 1.1 function 命令 function methodName(params) { // code } 如下声明: function test_function(params) { console.log("function"); } 如上函数, 声明了 test_function函数, 以后使用test_function(params) 都会调用相应的代码, 这就是函数的声明 1.2 函数表达式 除了1.1的函数直接声明,JS还可以用函数赋值给一个变量,即函数表达式。 我们先来看下它的语法是怎么玩的。 var methodName = function() { // code }; 如下玩法 var test_function = function() { console.log("function"); }; 如上函数是把一个匿名函数赋值给一个变量, 匿名函数就是没有名字了,顾名思义,所以function命令后不要再加函数名。特别要提醒一点 : 使用函数表达式声明的, 函数的声明在结尾的大括号需要加上 分号 表示语句结束。 而函数声明的结尾的大括号后面可以不加 分号。 1.3 Function构造函数 先看下语法 var methodName = new Function( params... ); 玩法 如果有多个参数,最后一个参数会被当做函数体使用