JavaScript
「已注销」
这个作者很懒,什么都没留下…
展开
-
JS-元素内容操作
获取元素内容<div> 我是div <h1>我是标题</h1> <p>我是段落</p></div>innerHTMLinnerHTML获取的内容包含标签 不会去除两端空格console.log(oDiv.innerHTML);innerTextinnerText获取的内容不包含标签 ...原创 2019-10-02 11:13:27 · 139 阅读 · 0 评论 -
JS-贪吃蛇
* { margin: 0; margin: 0;}body { width: 100%; height: 100%; overflow: hidden;}.map { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);...原创 2019-09-27 09:44:09 · 85 阅读 · 0 评论 -
JS-元素属性操作
<img src="images/1.jpg" alt="我是alt" title="我是title" abc="666">获取元素属性getAttribute()通过对象.属性名称的方式无法获取到自定义属性的取值通过getAttribute方法可以获取到自定义属性的取值oImg.alt;oImg.getAttribute("alt");oImg.abc; // 获...原创 2019-09-24 10:28:53 · 173 阅读 · 0 评论 -
JS-操作节点
创建节点document.createElement(’’);let oSpan = document.createElement("span");添加节点appendChild方法会将指定的元素添加到最后oDiv.appendChild(oSpan); // 括号中不能加引号插入节点insertBefore(A, B); 把A查到B前面oDiv.insertBefor...原创 2019-09-24 10:09:13 · 88 阅读 · 0 评论 -
JS-获取指定元素或节点
文章目录节点获取指定元素所有的子元素childrenchildNodes获取指定节点中的第一个子元素 / 节点firstChildfirstElementChild获取指定节点中的最后子元素 / 节点lastChildlastElementChild通过子元素获取父元素/父节点parentNodeparentElement获取相邻上一个节点 / 元素previousSiblingpreviousE...原创 2019-09-24 10:01:49 · 2750 阅读 · 0 评论 -
JS-获取DOM元素
通过id获取指定元素由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回NullDOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)let oDiv = document.getElementById("box");console.log(typeof oDiv); // Object通过class名称获取由于cl...原创 2019-09-24 09:43:39 · 123 阅读 · 0 评论 -
JS-对象遍历
将指定对象中所有的属性和方法的名称取出来 依次赋值给key这个变量for (let key in obj) {}ES6之前function Person(name, age) { this.name = name; this.age = age; this.say = function () { console.log('Hi'); }}...原创 2019-09-23 00:37:15 · 109 阅读 · 0 评论 -
JS-对象增删改查
增加©class Person {}let per = new Person();// per.name = '菜墟琨';per['name'] = '菜墟琨';console.log(per.name);// per.say = function () {// console.log('Hi')// }per['say'] = function () { console....原创 2019-09-23 00:32:51 · 458 阅读 · 1 评论 -
JS-判断对象属性
判断某一个对象是否拥有某一个属性in的特点: 只要类中或者原型对象中有, 就会返回trueclass Person{ name = null; age = 0;}Person.prototype.height = 0;let per = new Person();console.log("name" in per ); // trueconsole.log("widt...原创 2019-09-23 00:27:15 · 314 阅读 · 0 评论 -
JS-isPrototypeOf属性
isPrototypeOf用于判断 一个对象是否是另一个对象的原型只要调用者在传入对象的原型链上都会返回truefunction Person(myName) { this.name = myName;}function Student(myName, myScore) { Person.call(this, myName); this.score = mySc...原创 2019-09-23 00:22:36 · 377 阅读 · 0 评论 -
JS-instanceof关键字
instanceof用于判断 “对象” 是否是指定构造函数的 “实例”只要构造函数的原型对象出现在实例对象的原型链中都会返回trueclass Person { name = '菜墟琨'; age = 12;}let per = new Person();class Student {}let stu = new Student();console.log(pe...原创 2019-09-23 00:18:11 · 334 阅读 · 0 评论 -
JS-获取对象类型
XXX.constructor.name;let arr = new Array();let fun = new Function();console.log(arr.constructor.name); // Arrayconsole.log(fun.constructor.name); // Functionfunction Person() {}let per = new...原创 2019-09-22 00:26:43 · 437 阅读 · 0 评论 -
JS-ES6继承
ES6之前的继承在子类中通过call/apply方法借助父类的构造函数将子类的原型对象设置为父类的实例对象function Person(name, age) { this.name = name; this.age = age; this.say = function () { console.log('Hi'); }}funct...原创 2019-09-22 00:24:07 · 120 阅读 · 0 评论 -
JS-ES6类和对象
从ES6开始系统提供了一个名称叫做class的关键字, 这个关键字就是专门用于定义类的class Person { // 当我们通过new创建对象的时候, 系统会自动调用constructor constructor (name, age) { this.name = name; this.age = age; this.say = f...原创 2019-09-22 00:17:20 · 126 阅读 · 0 评论 -
JS-字符串的常见属性和方法
字符串的常见属性和方法属性length方法charAt() 返回在指定位置的字符concat() 连接字符串indexOf() 检索字符串replace() 替换slice() 提取split()substr() 截取子串toLowerCase()、toUpperCase();属性length属性length就是字符串的长度中文、数字、英语字母、空格,都是1个长度let str = 'z...原创 2019-09-21 22:04:08 · 653 阅读 · 0 评论 -
JS-bind、call、apply
bind修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面let obj = { name : '踩墟捆', age : 12, say : function () { console.log('我是' + name); }...原创 2019-09-21 22:02:07 · 87 阅读 · 0 评论 -
JS-继承性
在子类的构造函数中通过call借助父类的构造函数将子类的原型对象修改为父类的实例对象function Person(name, age) { this.name = name; this.age = age;}Person.prototype.say = function () { console.log('Hi');}let per = new Perso...原创 2019-09-21 21:49:12 · 140 阅读 · 0 评论 -
JS-对象属性方法分类
属性实例属性通过实例对象访问的属性, 就称之为实例属性实例方法通过实例对象调用的方法, 就称之为实例方法function Person() { this.name = '菜墟琨'; this.say = function () { console.log("hello world"); }}let obj = new Person();con...原创 2019-09-21 21:42:10 · 238 阅读 · 0 评论 -
JS-封装性
局部变量和局部函数无论是ES6之前还是ES6, 只要定义一个函数就会开启一个新的作用域只要在这个新的作用域中, 通过let/var定义的变量就是局部变量只要在这个新的作用域中, 定义的函数就是局部函数对象的私有变量和函数默认情况下对象中的属性和方法都是公有的, 只要拿到对象就能操作对象的属性和方法外界不能直接访问的变量和函数就是私有变量和是有函数构造函数的本质也是一个函数, 所以也会...原创 2019-09-21 11:31:26 · 204 阅读 · 0 评论 -
JS-原型链
原型prototype原型的定义注意原型的用途特点原型的定义在JavaScript中,任何一个函数,都有一个prototype属性,指向一个对象。输出了一个函数的prototype属性,你会发现是一个空对象。输出这个prototype的类型,发现是object类型prototype就是英语“原型”的意思。每个函数都有原型,原型是一个对象function fun(){ alert("...原创 2019-09-19 22:51:52 · 127 阅读 · 0 评论 -
JS-创建对象
new Object()创建对象let 对象名 = new Object();new是一个运算符,和±*/一样是一个运算符 , 表示新创建一个对象由于我们是使用系统默认的类创建的对象, 所以系统不知道我们想要什么属性和行为, 所以我们必须手动的添加我们想要的属性和行为给一个对象添加属性 : 对象名称.属性名称 = 值;给一个对象添加行为 : 对象名称.行为名称 = 函数;le...原创 2019-09-19 19:00:03 · 137 阅读 · 0 评论 -
JS-this
直接用()运算符来调用函数,那么函数里面的this指的是window对象函数如果绑定给了某个HTML元素的事件上,那么函数里面的this就是这个HTML对象用定时器调用函数,函数内部的this就是window对象用对象打点(方法)来调用函数,函数里面的this指的是这个对象用apply、call,可以人工设置this是谁了...原创 2019-09-19 16:11:44 · 81 阅读 · 0 评论 -
JS-预解析练习
练习1下列程序的执行结果 :if(true){ function demo() { console.log("hello demo1"); }}else{ function demo() { console.log("hello demo2"); }}demo(); // 高级hello demo1 低级hello de...原创 2019-09-19 00:23:20 · 214 阅读 · 0 评论 -
JS-预解析
预解析浏览器在执行JS代码的时候会分成两部分操作:预解析以及逐行执行代码也就是说浏览器不会直接执行代码, 而是加工处理之后再执行, 这个加工处理的过程, 我们就称之为预解析预解析规则将变量声明和函数声明提升到当前作用域最前面将剩余代码按照书写顺序依次放到后面注意点通过let定义的变量不会被提升(不会被预解析)// 预解析之前console.log(num); //undefi...原创 2019-09-19 00:17:32 · 77 阅读 · 0 评论 -
JS-作用域链
作用域链ES6之前ES6之前作用域链变量在作用域链查找规则ES6开始ES6作用域链变量在作用域链查找规则ES6之前定义变量通过var没有块级作用域, 只有全局作用域和局部作用域函数大括号外的都是全局作用域函数大括号中的都是局部作用域ES6之前作用域链全局作用域我们又称为0级作用域定义函数开启的作用域就是1级/2级/3级/…n级作用域JavaScript会将这些作用域链接在一...原创 2019-09-19 00:09:34 · 183 阅读 · 0 评论 -
JS-函数变量作用域
函数变量作用域JavaScript中定义变量的两种方式ES6之前:ES6开始:两种定义变量方式的区别是否能够定义同名变量是否能够先使用后定义是否能被{}限制作用域函数的参数,会默认定义为这个函数的局部变量注意点JavaScript中定义变量的两种方式ES6之前:var 变量名称;ES6开始:let 变量名称;两种定义变量方式的区别是否能够定义同名变量通过var定义变量,可以重复...原创 2019-09-18 23:56:01 · 368 阅读 · 0 评论 -
JS-递归
递归函数可以自己调用自己,就是递归斐波那契数列就是经典的递归算法:1、1、2、3、5、8、13、21、34、55、89、144、233……function fb(n){ if(n == 1 || n == 2){ return 1; }else{ return fb(n - 1) + fb(n - 2); }}// 输出斐波那契数列中的10个数for(var i ...原创 2019-09-18 23:36:17 · 71 阅读 · 0 评论 -
JS-箭头函数
箭头函数箭头函数是ES6中新增的一种定义函数的格式目的为了简化定义函数的代码在ES6之前定义函数function 函数名称(形参列表){ 需要封装的代码;}var 函数名称 = function(形参列表){ 需要封装的代码;}从ES6开始定义函数let 函数名称 = (形参列表) ...原创 2019-09-18 23:24:55 · 94 阅读 · 0 评论 -
JS-匿名函数
匿名函数定义函数除了使用function之外,还有一种方法,就是函数表达式, 就是函数没有名字,称为“匿名函数”量为了今后能够调用,我们把这个匿名函数,直接赋值给一个变量let sum = function(a,b){ return a + b;}console.log(sum(1,3));如果现在这个函数表达式中的function不是匿名的,而是有名字的let sum ...原创 2019-09-18 23:14:11 · 138 阅读 · 0 评论 -
JS-函数作为参数和返回值
函数作为其他函数的参数let say = function () { console.log('Hi');}function test(fun) { fun();}test(say);函数作为其他函数的返回值在其它编程语言中函数是不可以嵌套定义的, 但是在JavaScript中函数是可以嵌套定义的function test() { let say =...原创 2019-09-18 22:01:29 · 698 阅读 · 0 评论 -
JS-函数形参默认值
逻辑或在ES6之前可以通过逻辑运算符来给形参指定默认值格式: 条件A || 条件B如果条件A成立, 那么就返回条件A如果条件A不成立, 无论条件B是否成立, 都会返回条件Bfunction getSum(a, b) { a = a || '1'; b = b || '2'; console.log(a, b);}getSum(); // 1 2g...原创 2019-09-18 21:56:09 · 1297 阅读 · 0 评论 -
JS-函数扩展运算符
扩展运算符在等号左边, 将剩余的数据打包到一个新的数组中注意 : 只能写在最后let [a, ...b] = [1, 3, 5]; //a = 1; b = [3, 5];扩展运算符在等号右边, 将数组中的数据解开let arr1 = [1, 3, 5];let arr2 = [2, 4, 6];let arr = [...arr1, ...arr2]; // arr ...原创 2019-09-18 21:49:48 · 585 阅读 · 0 评论 -
JS-函数arguments
方法的重载在Java中,同一个函数名,但是参数个数不一样,视为是两个函数。也就是说,Java中能够定义两个同名的两个function,都是sum函数,java中是允许这么做的,因为参数个数不一样,这种现象叫做重载function sum(a,b){}function sum(a,b,c){}JavaScript没有重载的概念function fun(a, b) { alert(...原创 2019-09-18 18:54:58 · 142 阅读 · 0 评论 -
JS-函数
函数格式形式参数 实际参数使用函数的好处函数定义步骤注意点格式function 函数名称(形参列表){ 被封装的代码;}形式参数 实际参数罗列在function小括号中的参数,叫做形式参数;调用时传递的数值,叫做实际参数function 函数名称(形参列表){  ...原创 2019-09-18 18:38:50 · 59 阅读 · 0 评论 -
JS-数组解构赋值
数组解构赋值解构赋值是ES6中新增的一种赋值方式let arr = [1, 2, 3];let [a, b, c] = arr;console.log("a = " + a); // a = 1console.log("b = " + b); // b = 2console.log("c = " + c); // c = 3数组解构赋值的注意点等号左边的格式必须和等号右边的格式...原创 2019-09-18 15:26:52 · 4005 阅读 · 0 评论 -
JS-冒泡排序
let arr = [12, 34, -23, 14, 56, -78, 94];// 外层循环控制趟数 有 n 个数,就要比较 n - 1 趟for (let i = 0; i < arr.length; i++) { // 当前是第m趟,就要比较n-m项 for (let j = 0; j < arr.length - i; j++) { if...原创 2019-09-18 11:51:49 · 87 阅读 · 0 评论 -
JS-选择排序
let arr = [12, 34, -23, 14, 56, -78, 94]; // 需要排序的数组let count = 0; // 次数for (let i = 0; i < arr.length; i++) { for (let j = i + 1; j < arr.length; j++) { if (arr[i] > arr[j + 1]) ...原创 2019-09-18 11:31:59 · 88 阅读 · 0 评论 -
JS-数组的常用方法
数组的常用方法数组的头尾操作pop()push()shift()unshift()总结 : push 尾插 , pop 尾删 , unshift 头插 , shift 头删清空数组转为字符串数组的合并与拆分concat()slice()多功能splice()插入、删除、替换splice()插入splice()删除splice()替换逆序reverse();排序sort()数组的头尾操作pop(...原创 2019-09-17 11:30:22 · 342 阅读 · 0 评论 -
JS-数组
数组数组创建一个数组操作数据注意创建数组的其它方式通过构造函数创建数组通过字面量创建数组数组数组就是专门用于存储一组数据的注意: 和Number/String/Boolean/Null/undefined不同(基本数据类型) , 而数组(Array)不是基本数据类型, 是引用数据类型(对象型)创建一个数组let 变量名称 = new Array(size);操作数据往数组中存储数据...原创 2019-09-16 23:54:11 · 136 阅读 · 0 评论 -
JS-break和continue
break和continuebreak注意continuebreakbreak关键字可以用于switch语句和循环结构中在switch语句中break关键字的作用是立即结束当前的switch语句在循环结构中break关键字的作用也是立即结束当前的循环结构注意break关键字后面不能编写任何的语句, 因为永远执行不到如果在循环嵌套的结构中, break结束的是当前所在的循环结构...原创 2019-09-16 18:53:47 · 176 阅读 · 0 评论