JavaScript
文章平均质量分 58
boonyaxnn
好好学习,天天向上
展开
-
JS 变量提升、函数名提升、变量和函数结合的提升
一、变量的提升1、使用var 关键字声明的变量会提升到代码的头部 变量提升 例子: console.log(num);//undefined var num = 100; console.log(num);//100 var x; console.log(x);//undefined2、不使用var关键字声明的变量是全局变...原创 2019-04-02 20:09:37 · 401 阅读 · 0 评论 -
JS 原型(prototype)、原型的应用以及模拟封装
一、原型(prototype)1、定义:js提供给【函数】的一个对象类型的属性。不需要手动创建,默认存在2、对象查找属性的规则: ①首先在对象本身中查找; ②没有时去原型中查找; ③任何一层中找到,就返回值; ④当原型中也没有时,返回undefined。3、作用: ①开辟一块公共的空间,供通过该构造函数创建的对象使用 ②可以对系统类执...原创 2019-04-16 19:33:32 · 636 阅读 · 0 评论 -
JS 原型指向、原型链以及继承
一、原型指向 结构:原型是一个对象,在原型中通常拥有两个属性: (1)构造器constructor:该属性指向了这个类本身 (2)原型指向:——proto——:该属性指向原型本身,提供给通过类创建的对象使用 console.log(lb.__proto__ == Person.prototype);eg: function Person(userName, se...原创 2019-04-16 20:05:10 · 466 阅读 · 0 评论 -
JS 设计模式
设计模式(Design Pattern)是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式的目的:为了代码的 可重用性,让代码更容易被他人理解,保证代码的可靠性。一、工厂模式:快速创建对象 PS:无法通过instanceof关键字判断属于哪个类eg:function Car(lun1, lun2, lun3, lun4, ability) ...原创 2019-04-16 20:31:34 · 107 阅读 · 0 评论 -
JS 获取计算后的样式
1、html代码div class="box"></div>2、css样式<style> .box { height: 200px; width: 200px; background-color: orange; border: 20px solid red; }...原创 2019-04-16 20:42:58 · 845 阅读 · 0 评论 -
JS 正则表达式初始、修饰符
一、正则表达式初始1、正则是一门新的语言 并不属于js 。2、基本语法: /正则主体/修饰符。 eg: var str = 'ABCDEF'; var reg = /c/i; var index = str.search(reg); console.log(index);//23、正则表达式的实质是一个对象var reg = /开心/;...原创 2019-04-17 08:28:59 · 334 阅读 · 0 评论 -
JS 正则表达式
常见的检索模式有表达式模式、元字符模式和量词模式三种。一、表达式模式1、【abc】模式 描述:在指定字符串中检索,查找任何满足【存在于方括号中】规则的字符或字符串eg: var str = 'abcdefgABCd'; var reg = /[ac]/ig; var result = str.replace(reg,'A...原创 2019-04-17 08:59:47 · 436 阅读 · 0 评论 -
JS 二分查找
前提:数组必须是有序的,而且是自然顺序var arr = [1, 2, 3, 4, 5, 6, 7];1、首先获取开始下标; startIndex=0;2、获取结束下标; endIndex=arr.length-1//---->6;3、获取中间下标; midIndex=Math.floor((startIndex+endIndex)/2);...原创 2019-04-18 13:10:23 · 556 阅读 · 0 评论 -
JS 快速排序
var arr = [90, 80, 79, 60, 5, 4, 31, 2, 9];1、取基准值的下标;index = Math.floor(arr.length / 2);2、取基准值; midValue = arr.splice(index, 1)3、根据基准值分左右(定义两个子集,接收数据); var left = []; var right = [];...原创 2019-04-18 13:39:15 · 100 阅读 · 0 评论 -
JQ switch 用户输入一个年份 一个月份 判断 从1月到该月一共过了多少天
1、获取用户输入的数据 var year = parseInt(prompt('请输入年份')); var month = parseInt(prompt('请输入月份'));2、接收数据var day = 0;var sum = 0;3、判断每个月有多少天for (var i = 1; i <= month; i++) { switch (i)...原创 2019-04-23 13:45:59 · 1109 阅读 · 0 评论 -
JS 类、对象以及对象的构造函数
一、类:对一类抽象事物共有特征的描述 如人 杯子二、对象:一个具体的实例 如小刚 保温杯 var xiaoGang = { 'userName': '小刚', 'sex': '男', 'height': '180cm', 'ability': function () { ...原创 2019-04-16 19:06:13 · 453 阅读 · 0 评论 -
JS 调色板
一、html代码<p><span>R:</span> <button class="rSub">-</button> <input type="text" class="rInput" placeholder="200"/> <button class="rAdd">+</but...原创 2019-04-09 20:46:43 · 1987 阅读 · 0 评论 -
JS 带有文字提示滑块
一、html代码<span>魅力值</span><input type="range" min="0" max="100" class="in"/><div class="box"></div>二、css代码<style> *{margin: 0;padding: 0;} .box{ ...原创 2019-04-09 20:37:02 · 353 阅读 · 0 评论 -
JS 函数的一等公民
不仅可以向传统函数一样声明调用,还可以像普通值一样被传参、返回、赋值 //1.函数的声明 function getSum(a,b){ console.log(a+b); } //2.调用 getSum(10,20);//30 var str = '你好'; //3.被赋值 var func1 = function () { console....原创 2019-04-02 20:17:09 · 460 阅读 · 0 评论 -
JS arguments
一、arguments:读取函数运行时的所有参数 通过类似于数组访问下标的方式 console.log(arguments[0],'<--->',arguments[1]);arguments.length:获取函数运行时参数的数量arguments可以修改该参数的值arguments可以删除参数的值arguments可以新增参数的值...原创 2019-04-02 20:24:34 · 124 阅读 · 0 评论 -
JS 选择器querySelector系列和getElementById的区别
1、两者的W3C标准不同 querySelector系列属于W3C中的Selectors API(JS)规范 getElementsBy系列则属于 W3C的DOM 规范。2、两者浏览器的兼容不同 getElementsBy系列基本能被所有浏览器支持。 querySelector系列则通常只有在考虑兼容性的时候才被提起(尽管两者功能近似)//IE7不支持 var ...原创 2019-04-08 20:10:55 · 3553 阅读 · 1 评论 -
JS 非IE浏览器事件绑定:HTML事件、dom0事件、dom2事件
一、HTML事件1、定义:事件绑定在HTML代码内部2、事件绑定的方式:on+事件类型='函数名()'3、注意:(1)同一个事件类型可以绑定多个函数 函数与函数之间使用分号;相隔(2)一次可以绑定多个不同类型的事件<div class="box" onclick="func2();func1()" ondblclick="func3()"></div>...原创 2019-04-08 20:35:41 · 209 阅读 · 0 评论 -
JS IE浏览器事件绑定:HTML事件、dom0事件、dom2事件
一、html事件和dom0事件 没有兼容性问题,非IE的dom2事件不能在 IE8及其以下浏览器使用 报错:对象不支持“addEventListener”属性或方法二、IE浏览器下的dom2事件绑定1、语法:元素.attachEvent(type,listener)2、注意: ①事件类型必须有 on ②没有事件捕获 ③按照事件绑定的顺序依次触发...原创 2019-04-08 20:52:25 · 800 阅读 · 0 评论 -
JS dom2的兼容性写法
添加事件绑定* @param ele 触发事件的元素* @param type 事件的类型* @param methodName 处理该事件的函数名function addEventListener(ele, type, methodName) { //判断浏览器的类型 如果是非IE浏览器 if (ele.addEventListener) {// undefin...原创 2019-04-08 20:56:08 · 150 阅读 · 0 评论 -
JS 随机生成验证码
/*aA2fa5876666sdajk1 str = 'abcdefghigklmnopqrstuvwxyzABCDEFGHIGKLMNOPQRSTUVWXYZ1234567890'; Math.floor(Math.random()*(n-m+1)+n); */方法一:function getCheckCode(cound){ var str = 'abcde...原创 2019-04-03 11:48:55 · 189 阅读 · 0 评论 -
JS date方法
1. Date():获取当前时间 类型string 写参数或者不写参数 都是获取当前的时间 例子: var date = Date(); console.log(date,typeof date);//Wed Apr 03 2019 10:26:42 GMT+0800 (中国标准时间) string date = Date('2019-3-3'); co...原创 2019-04-03 13:02:49 · 785 阅读 · 0 评论 -
JS Math方法
/* 1. Math.round() 正数四舍五入:1 2 3 4 舍 5 6 7 8 9 进 -1 > -2 负数四舍五入:6 7 8 9 进 值变小 1 2 3 4 5 舍 值变大 */ con...原创 2019-04-03 13:07:25 · 820 阅读 · 0 评论 -
JS switch 输入一个月份 判断该月有多少天
1、接收用户数据var year = parseInt(prompt('请您输入一个年份', 2000));var month = parseInt(prompt('请您输入一个月份', 5));2、判断每个月有多少天,记录每个月的天数 var day = 0; switch (month) { case 1: case 5: ...原创 2019-04-23 13:55:06 · 8127 阅读 · 0 评论 -
JS 工资年终奖
要求:工作满0年 发月薪的1倍月薪年终奖,如果月薪大于8000,那么就是发1.2倍 工作满1年 发月薪的1.5倍月薪年终奖,如果月薪大于10000,那么就是发1.7倍 工作满2年 甚至更多 发月薪的3倍月薪年终奖,如果月薪大于12000,那么就是发3.2倍 用JS编写程序,让用户输入工作了几年,可以输入0,然后输入月薪。然后算...原创 2019-04-23 16:32:42 · 1493 阅读 · 0 评论 -
JS 三级联动
/* 1.select元素的option创建方式:【var option = new Option(‘想要显示的内容’);】 2.select元素中添加option方式:【select.options.add(新创建的option);】 3.select元素清空所有的option方式:【select.options.length = 0;】 4.s...原创 2019-04-25 11:12:42 · 115 阅读 · 0 评论 -
JS 事件委托
事件委托:利用【事件冒泡】,只指定一个事件处理程序,就可以管理某一类型的所有事件 var lis = document.querySelectorAll('li'); var ul = document.querySelector('ul'); ul.onclick = function (event) { event = event || windo...原创 2019-04-25 11:20:39 · 82 阅读 · 0 评论 -
JS 对应和排他
/* var obj = {}; obj.hh = 0; obj.index = 1; console.log(obj); */ var boxPs = document.querySelectorAll('.box p'); var divPs = document.querySelectorAl...原创 2019-04-25 11:24:22 · 205 阅读 · 0 评论 -
JS js里面出现undefined的情况
1、变量只声明没有赋值,会返回undefined;2、当下标超过数组或字符串的范围 ,会返回undefined;3、当对象调用不存在的属性时,会返回undefined;4、当return没有返回值,会返回undefined;5、在event事件里面,在IE11和非IE浏览器下直接输出 console.log(event),会返回undefined;...原创 2019-04-25 12:33:23 · 6461 阅读 · 0 评论 -
JS apply求最大值
var result = Math.max(10,20,30,40); console.log(result);//40 var arr = [10,20,30,40,50,-90]; result = Math.min.apply(null,arr); console.log(result);//-90apply和call能更改函数内部的this指...原创 2019-04-25 12:41:20 · 346 阅读 · 0 评论 -
JS 放大镜
1、html代码<div class="box"> <div class="fdj"></div></div><div class="show"> <img src="img/img.png" height="2000" width="2000" alt=""/></div>2、cs...原创 2019-04-25 13:02:42 · 124 阅读 · 0 评论 -
Canvas 面向对象创建多个小球水平向右运动
1、首先创建页面上下文关联 var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d');2、面向对象,JavaScript不区分类和实例的概念,而是通过原型(prototype)来实现面向对象编程; 具体详情查看https://www.liaoxuefeng.com/wik...原创 2019-05-19 00:28:14 · 551 阅读 · 0 评论 -
JavaScript中数组元素删除的七大方法汇总
原文链接:https://blog.csdn.net/u010323023/article/details/52700770在JavaScript中,除了Object之外,Array类型恐怕就是最常用的类型了。与其他语言的数组有着很大的区别,JavaScript中的Array非常灵活。今天我就来总结了一下JavaScript中Array删除的方法。大致的分类可以分为如下几类:1、leng...转载 2019-05-18 20:43:17 · 633 阅读 · 0 评论 -
Js 中的堆内存与栈内存
在js引擎中对变量的存储主要有两种位置,堆内存和栈内存。1、基本类型和引用类型 基本类型:存放在栈内存中的简单数据段。数据大小确定,内存空间大小可以分配。5种基本数据类型有Undefined、Null、Boolean、Number和String,它们是直接按值存放的,所以可以直接访问。 引用类型:存放在堆内存中的对象,变量中实际保存的是一个指针,这个指针指向另一个位置...转载 2019-07-01 08:09:11 · 178 阅读 · 0 评论 -
JS node常用属性和方法
一、node常用属性 1.nodeName/nodeType *** 描述:nodeName属性返回节点的名称,nodeType属性返回节点的常数值 语法:node.nodeName/node.nodeType 例子: console.log(document.nodeName,document.nodeType); ...原创 2019-04-24 18:48:48 · 862 阅读 · 0 评论 -
JS 冒泡排序
冒泡排序:相邻的两个元素比较,如果前一个数大于后一个数,交换位置。1、每一次排序将无序数列中的最大值找到;2、一个含有n的序列最多经过n-1次排序即可有序;3、经过排序后,数列会分为两部分,一部分有序,一部分无序;4、一旦出现前一个数大于后一个数,就交换位置。 /* 冒泡排序: 1.外层循环-1 含有n个数的序列 最多经过n-1次即可有效 ...原创 2019-04-24 13:10:20 · 134 阅读 · 0 评论 -
JS hash去重
js中使用hash去重,需要建立在对象的基础之上,因为对象的存储采用的是hash表。hash表的优势是快线性表:一个线性表是n个具有相同特性的数据元素的有限序列。查询时速度很快 但是插入和删除速度比较慢链 表:链表是一种物理存储单元上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的 。 /* * hash去重:不是自己去写hash算法 利...原创 2019-04-24 10:08:41 · 1099 阅读 · 0 评论 -
JS 添加到购车 书城练习
1、html代码部分<h1 align="center">你好,书城</h1><hr/><div class="box"></div><hr/><div class="shopCar"></div>2、css样式部分 * { margin: ...原创 2019-04-18 19:07:04 · 243 阅读 · 0 评论 -
JS 尺寸相关
1、获取视口的宽高 ①含滚动条window.innerWidthwindow.innerHeight ②不含滚动条document.documentElement.clientWidthdocument.documentElement.clientHeight2、获取文档的滚动距离document.documentElement.scrollTop || d...原创 2019-04-18 19:22:40 · 347 阅读 · 0 评论 -
JS 无线滚动的瀑布流
1、html代码部分<div class="box"></div>2、css样式部分 * { margin: 0; padding: 0 } .box { margin: 0 auto; position: relat...原创 2019-04-18 20:33:51 · 220 阅读 · 0 评论 -
JS 0~~100以内能被3整除也能被5整除的个数和总和
var count=0; var sum=0; for(var i=1;i<=100;i++){ if(i % 3==0&&i%5==0){ sum=sum+i;//sum+=i; count++; } } console.log("既能被三整除也能被五整除的个数是",count,"总...原创 2019-04-23 16:53:26 · 8709 阅读 · 0 评论