javaScript
js基础知识
闪电蛙
生命不息,奋斗不止!
个人博客:http://www.cloverhk.top,欢迎各位多多指教。
展开
-
JavaScript学习笔记(DOM 导航、节点、集合、节点列表)
JavaScript学习笔记(DOM 导航、节点、集合、节点列表)@[TOC](JavaScript学习笔记(DOM 导航、节点、集合、节点列表))DOM节点节点关系:在节点之间导航子节点和节点值1. 取出h1元素中的文本并复制到P元素中:(第一种)2. 取出h1元素中的文本并复制到P元素中:(第二种)3. 取出h1元素中的文本并复制到P元素中:(第三种)JavaScript HTML DOM 元素(节点)添加和删除节点(HTML元素)创建新的HTML元素-insertBefore()删除已有HTML元素(原创 2020-05-27 19:32:49 · 571 阅读 · 0 评论 -
JavaScript学习笔记(DOM 事件、事件监听器)
JavaScript学习笔记(DOM 事件、事件监听器)@[TOC](JavaScript学习笔记(DOM 事件、事件监听器)HTML事件属性使用HTML DOM分配事件onload和onunload事件onchange事件onmouseove 和onmouseout事件onmousedown,onmouseup 以及onclick事件事件监听器addEventListener()方法外部函数 的方式向相同元素添加多个事件处理程序能够向相同元素添加不同类型的事件:向Window对象添加事件处理程序传递参数事原创 2020-05-27 00:31:09 · 367 阅读 · 0 评论 -
JavaScript学习笔记(DOM动画)
学习使用 JavaScript 来创建 HTML 动画。动画<style> #container{ width: 400px; height: 400px; position: relative; background: yellow; } #animate{ width: 50px; height: 50px; position: absolute;原创 2020-05-26 11:58:56 · 183 阅读 · 0 评论 -
JavaScript学习笔记(DOM-改变CSS)
HTML DOM 允许 JavaScript 更改 HTML 元素的样式。改变HTML样式如需更改HTML元素的样式,请使用此语法 :document.getElementById(id).style.property = new style下面的例子更改了p元素的样式:例子:<body> <p id="p1">Hello World!</p> <p id="p2">Hello World!</p> <原创 2020-05-26 11:04:40 · 171 阅读 · 0 评论 -
JavaScript学习笔记(DOM-改变HTML)
HTML DOM 允许Javascript改变HTML元素的内容。改变 HTML 输出流JavaScript 能够创建动态 HTML 内容:Tue May 26 2020 09:07:47 GMT+0800 (中国标准时间)在 JavaScript中,document.write()可用于直接写入HTML输出流中:<body> <script> document.write(Date()); </script></body原创 2020-05-26 10:40:47 · 193 阅读 · 0 评论 -
JavaScript学习笔记(DOM)
我们可以通过HTML DOM ,JavaScript能够访问和改变HTML文档的所有元素。HTMLDOM(文档对象模型)网页被加载时,浏览器会创建页面的文档对象模型HTML DOM 模型被结构化为对象树:对象的HTML DOM树:通过这个对象模型,JavaScript 获得创建动态 HTML 的所有力量:JavaScript 能改变页面中的所有 HTML 元素JavaScript 能改变页面中的所有 HTML 属性JavaScript 能改变页面中的所有 CSS 样式JavaScrip原创 2020-05-26 00:15:26 · 197 阅读 · 0 评论 -
JavaScript学习笔记(面向对象编程二)
Class继承对于js中的继承来说,使用基于原型实现,特点是简单缺点是理解起来特别的困难比传统的类-实例模型要困难,最大的缺点是继承 的实现需要编写大题代码,并且需要正确实现原型链。用函数实现Student的方法:function Student(name) { this.name = name;}Student.prototype.hello = function () { alert('Hello, ' + this.name + '!');}class继承用clas原创 2020-05-25 11:07:19 · 141 阅读 · 0 评论 -
JavaScript学习笔记(面向对象编程一)
我们先回忆一下JS中的数据类型String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义类型以上类型属于基本数据类型,以后我们看到的如果不是以上的5种,全都是对象类型JavaScript的所有数据都可以看成对象,那是不是我们已经在使用面向对象编程了呢?当然不是。如果我们只使用Number、Array、string以及基本的{…}定义的对象,还无法发挥出面向对象编程的威力。面向对象的两个基本概念:1.类:类是对象的类型模板,例如,定义Studen原创 2020-05-23 00:50:53 · 199 阅读 · 0 评论 -
JavaScript学习笔记(标准对象)
JavaScript学习笔记(标准对象)基础知识Date时区RegExpRegExp正则表达式的定义与测试匹配基础知识在JavaScript的世界里,一切都是对象。但是某些对象还是和其他对象不一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串:typeof 123;//'number'typeof NaN;//'number'typeof 'str';//'string'typeof true;/'boolean'typeof undefined;//'u原创 2020-05-21 23:56:54 · 221 阅读 · 0 评论 -
JavaScript学习笔记(高阶函数二)
JavaScript学习笔记(高阶函数二)箭头函数generator箭头函数ES6标准新增了一种新的函数:Arrow Function(箭头函数)。例如:function(x){ return x * x;}用箭头函数来表示:x => x * x箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式x => { if (x > 0) { return x * x; } else { return - x原创 2020-05-21 18:02:36 · 151 阅读 · 0 评论 -
JavaScript学习笔记(高阶函数一)
function add(x,y,f){ return f(x) + f(y);}//将Math.abs作为f传入add函数var x = add(-5,6,Math.abs);console.log('add:'+x);map/reduce如果我们想把一个函数f(x)=X2作用在一个数组[1,2,3,4,5,6]中,那么要怎么实现呢?首先先用传统的方法来实现//定义一个函数 var f = function(x){ return x * x;}var arr = [1,2原创 2020-05-18 12:57:48 · 274 阅读 · 1 评论 -
JavaScript学习笔记(函数)
方式一定义函数:function abs(x){ if (x >= 0) { return x; } else{ return -x; }}console.log(abs(-5));上述函数的定义:function指出这是一个函数定义;abs是函数的名称;(x)括号内列出函数的参数,多个参数以,分隔;{ … }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。方式二定义函数var abs = function(x){ if (x >= 0)原创 2020-05-16 12:18:01 · 239 阅读 · 0 评论 -
JavaScript学习笔记(Map、Set、iterable)
JavaScript的默认对象表示方式{}可以视为其他语言中的Map或者Dictionary的数据结构,是一组键值对。Map:是一组键值对的结构,具有极快的查找速度。var m = new Map([['michael',95],['Bob',75],['zs',85]]);console.log(m.get('zs'));初始化的使用:var m = new Map();m.set('zs',67);m.set('ls',100);//是否存在key 'zs':truem.has('z原创 2020-05-15 11:13:16 · 132 阅读 · 0 评论 -
JavaScript学习笔记(循环)
在JavaScript中的循环分为:for(for…in ),while,do…while①for(for…in)for利用for循环计算1 * 2 * 3 * … * 10的结果:var x = 1;var i;for (i=1; i<=10; i++) { x = x * i;}if (x === 3628800) { console.log('1 x 2 x 3 x ... x 10 = ' + x);}else { console.log('计算错误原创 2020-05-13 21:42:53 · 259 阅读 · 0 评论 -
js报SCRIPT1002: SCRIPT1002: Syntax error
就写了一个for循环,运行还报错,在我仔细查找问题的时候,发现< 和=之间多了一个空格,这Js和java语法 还真有的区别,特别要注意一些细节!!!我改了之后,就能成功运行了!!原创 2020-05-13 21:14:52 · 3082 阅读 · 2 评论 -
JavaScript学习笔记(条件判断)
JavaScript使用if(){…}else{…}来进行条件判断 ,例如://单个if else分支var age = 20;if (age >= 18) { alert('adult');} else{ alert('teenager');}//多个if else分支if (age > = 18) { alert('adult');} else if{ alert('teenager');} else{ alert('kid');}在使用的时候,还需要注意条原创 2020-05-13 20:54:35 · 145 阅读 · 0 评论 -
JavaScript学习笔记(对象)
JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。JavaScript的对象是用于描述现实世界中的某个对象,例如var XiaoM = { name:'小明', birth:1999, school:'No.1 Middle School', height:1.50, weight:65, score:null}console.log(XiaoM);js中用键值对xxx.xxx形式声明对象,访问属性是通过对象对象名.属性名来获取var Xia.原创 2020-05-13 20:40:16 · 111 阅读 · 0 评论 -
JavaScript学习笔记(数组)
JavaScript学习笔记(数组)常用的字符串的操作:indexOf(用来搜索一个指定的元素的位置)slicepush和popunshift和shiftsortreversesplice:concatjoin多维数组:JavaScript的Array可以包含任意数据类型,并通过索引来访问每个元素,获得数组的长度可以通过length属性:var arr = [1,2,3.14,'hello',null,true];alert(arr.length);直接给Array的length赋值一个新的原创 2020-05-13 19:12:13 · 108 阅读 · 0 评论 -
JavaScript学习笔记(变量、字符串)
1.1基础知识<script type="text/javascript"> /* * 控制浏览器弹出一个警告框 * alert("这是我的第一行JS代码"); */ /** * 在计算机页面上输出一个内容 * document.write可以向body中输出一个内容 * document.write("520hk"); */ /** * 向控制台输了一个内容 * console.log("你是不是傻!"); */ </script>原创 2020-05-13 17:44:12 · 209 阅读 · 0 评论