JavaScript
一个孤独漫步者的遐想
立志做摄影界书法最美的段子手,漫画界文笔最好的美食家,然而毕业于计算机系
展开
-
二十五、for in
// for in循环:用来循环遍历对象中的键值对的(continue和break同样适用)var obj={ name: 'Hz', age: 10, sex:'男', friends:'张三,李四', 1:90, 2:78, 3:67};//for(var 变量(key) in 对象)//对象中有多少组键值对,循环多少次(除非break结束)for(var key in obj){ //每次循环key变量存储的值:当前对象的属原创 2021-06-05 11:28:14 · 89 阅读 · 0 评论 -
二十四、变量和属性名区别
var name=10;var obj={ name:'hz52', [12]:1000};//获取obj这个对象name对应的值console.log(obj.name); //hz52//一个对象的属性名只有两种格式:数字或者字符串(等基本数据类型值)console.log(obj['name']); //hz52// 'age' 值 代表本身// age 变量 代表它存储的//obj[name变量代表的值] =原创 2021-06-05 11:26:59 · 181 阅读 · 0 评论 -
二十三、计算年终奖
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算年终奖</title></head><body>工龄:<input type="text" value="1" id="workYear"><br>薪资:<input type="text" value="1.原创 2021-05-30 19:44:24 · 110 阅读 · 0 评论 -
二十二、点击变颜色
方法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击变颜色</title> <!-- IMPORT CSS--> <style> * { margin: 0; padding: 0; }原创 2021-05-30 19:43:27 · 195 阅读 · 0 评论 -
二十一、复习
js中的加减乘除本应是进行数学运算(如果遇到的值不是数字类型,也需要基于Number()方法把其转换为数字,在进行运算);但是js中加法有特殊情况:相加过程中遇到字符串直接变为字符串拼接console.log(alert(1)); //undefined//alert(1):执行浏览器内置的alert方法,执行方法的时候弹出一个“1”(方法的功能),此方法没有返回值(默认返回值undefined)//把其他类型转换为数字有两大方法//1、Number()按照浏览器底层机制,..原创 2021-05-30 19:42:23 · 36 阅读 · 0 评论 -
二十、Script位置问题
头部(无效果+解决)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Script位置</title><!-- IMPORT JS--> <script> //放置头部:可能导致无法获取到需要操作的元素 let box=document.getElementByI原创 2021-05-30 19:37:48 · 76 阅读 · 0 评论 -
十九、浏览器常用输出方式
let a=10;let b=[{ id:1, name:'张三'},{ id:2, name:'李四'}]/*[12,23] //一维数组[12,{name:'xxx'}] //二维数组 =>多维数组[12,[{xxx:'xxx'}]] //三维数组 =>多维数组{name:'xxx'} //一维对象{name:[12,23]} //二维对象{ name:{ xxx:{ xxx:{ xxx:{原创 2021-05-30 19:37:02 · 467 阅读 · 1 评论 -
十八、选项卡
demo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>选项卡</title><!-- IMPORT CSS--> <link rel="stylesheet" href="./Demo.css"> </head><body><div.原创 2021-05-13 17:17:26 · 83 阅读 · 0 评论 -
十七、匿名函数
//=====================匿名函数===================//匿名函数之函数表达式:把一个匿名函数本身作为值赋值给其他东西,这种函数一般不是手动触发,而是靠其他程序驱动触发执行(例如:点击触发某事件它执行等)document.body.onclick = function(){};//设置定时器一秒钟(1000毫秒)执行setTimeout(function(){},1000);//匿名函数之自执行函数,创建完一个匿名函数,紧接着当前函数加小括号执行(fun原创 2021-05-08 17:23:52 · 66 阅读 · 0 评论 -
十六、函数
函数就是一个方法或者一个功能体,函数就是把实现某个功能的代码放到一起进行分装,以后想要操作实现这个功能,只需要把函数执行即可=>"封装 ":减少页面中的冗余代码,提高代码重复使用率(低耦合高内聚) 洗衣机就是一个函数,生产洗衣机就是封装一个函数(把实现某些功能的代码封装进来),生产的时候,不知道用户洗衣服的时候放什么水、衣服、洗衣液,我们需要提供出入口(提供入口在函数中叫做形参,执行的时候放的具体东西函数中叫做实参),洗完衣服需要拿出来,洗衣机提供一个出口(在函数中叫做返回值:把函数处理后的.原创 2021-05-08 17:09:56 · 85 阅读 · 0 评论 -
十五、奇偶行变色
基于CSS<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>奇偶变色</title> <!-- IMPORT CSS --> <style> *{ padding:0; margin:0; } .原创 2021-05-06 22:05:52 · 509 阅读 · 2 评论 -
十四、元素对象的深层理解
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>扩展思考</title><style>#box{ box-sizing:border-box; width:200px; height:200px; border:3px solid lightblue;}</.原创 2021-05-06 22:03:59 · 260 阅读 · 0 评论 -
十三、循环
重复做某些事for循环for in循环for of循环(ES6新增)while 循环do while循环for循环/* 1、创建循环初始值 2、设置(验证)循环执行的条件 3、条件成立执行循环体中的内容 4、当前循环结束执行步长累计操作*/for(var i=10;i>4;i-=2){ if(i<7){ i++; }else{ i--; } }console.log(i);//循环.原创 2021-05-04 20:30:34 · 89 阅读 · 0 评论 -
十二、基于JS实现点击切换效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滑过显示详情</title> <!-- IMPORT CSS --> <style> *{ padding:0; margin:0; } .原创 2021-05-04 16:56:08 · 633 阅读 · 0 评论 -
十一、基于CSS实现鼠标滑过显示详情
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标滑过显示详情</title> <!-- IMPORT CSS --> <style> *{ padding:0; margin:0; } .原创 2021-05-04 16:16:24 · 827 阅读 · 0 评论 -
十、常用三种判断
条件成立做什么?不成立做什么if/else if/elseif(条件1){ 条件1成立执行}else if(条件2){ 条件2成立执行}...else{ 以上都不成立执行}...//条件可以多样性:等于、大于、小于的比较/一个值或者取反等 => 最后都是要计算出true/false,计算条件真假let a=10;if(a<=0){ console.log('');}else if(a>0 && a<10){ //A原创 2021-05-04 15:34:03 · 140 阅读 · 0 评论 -
九、数据类型检测
typeof[val]:用来检测数据类型的运算符/*基于typeof检测出来的结果 1、首先是一个字符串 2、字符串中包含对应的类型 局限性 1、typeof null => "object" 但是null并不是对象 2、基于typeof无法细分当前值是普通对象还是数组对象等,因为只要是对象数据类型,返回的结果都是"object"*/console.log(typeof 1); //numberlet a=NaN;console.log(typeof a); /...原创 2021-05-04 09:33:40 · 78 阅读 · 0 评论 -
八、堆栈底层机制(数据类型的区别)
基本数据类型引用数据类型原创 2021-05-03 10:58:41 · 75 阅读 · 0 评论 -
四、String字符串数据类型
所有用单引号、双引号、反引号(` ES6模板字符串)包起来的都是字符串其他类型值转换为字符串[val].toString()let a=12;console.log(a.toString()) //'12'console.log((NaN).toString()) //'NaN'//null和undefined禁止直接toString(null).toString() //报错//但是和undefined一样转换为//普通对象.toString()的结果是"[object ob.原创 2021-05-03 10:23:36 · 90 阅读 · 0 评论 -
七、对象数据类型
object对象数据类型普通对象{[key]:[value,…]}任何一个对象都是由0到多组键值对(属性名:属性值)组成的(并且属性名不能重复)let person={ name:'张三', age:23, height:'185cm', weight:'70kg', 1:100}//获取属性名对应的属性值//=>对象.属性名//=>对象.['属性名'] 属性名是数字或者字符串格式的console.log(person.name);console.log(p.原创 2021-05-03 10:25:17 · 728 阅读 · 0 评论 -
六、Null和Undefined的区别
null和undefined都代表的是没有null:意料之中(一般都是开始不知道值,我们手动先设置为null,后对其赋值操作)...let num=null; //一般最好使用null作为初始的空值,因为0不是空值,它在栈内存中占有自己的存储空间(占了位置)...num=12;...undefined:意料之外(不是我能决定的)...let num; //创建了一个变量没有赋值,默认值是undefined......原创 2021-05-03 10:24:43 · 104 阅读 · 0 评论 -
五、Booleab布尔数据类型
把其它类型转换为布尔类型只有0、NaN、‘ ’、null、undefined五个值转换为FALSE,其余都转换为TRUE(而且没有任何特殊情况)Boolean([val])//!:取反(先转为布尔,然后取反)console.log(!1) //false//如果条件只是一个值,不是==/===/!=/>=等这些比较,是要先把这个值先转为布尔类型,然后验证真假if(1){ console.log('haha');}if('3px'+3){ //=>3px3=.原创 2021-05-03 10:24:06 · 186 阅读 · 0 评论 -
三、Number数字数据类型
包含:常规数字、NaNNaNNaN:not a number(不是一个数,但它隶属于数字类型)NaN:和任何值(包括自己都不相等):NaN!=NaN,所以不能用相等方式判断是否是有效数字//console.log([val]):在控制台输出console.log('hello world');//==进行比较console.log(1==2);//判断是否是一个有效数字 //NaN和任何数值都不相等,包括自己console.log('AA'==NaN); //fals.原创 2021-05-03 10:22:49 · 394 阅读 · 0 评论 -
二、JavaScript的组成和变量
JavaScript是由三部分组成:ECMAScript(ES):描述了该语言的语法和基本对象DOM:文档对象模型,描述处理网页内容的方法和接口BOM:浏览器对象模型,描述与浏览器进行交互的方法和接口JS做客户端语言按照相关的JS语法,去操作页面的元素,有时还要操作浏览器里面的一些功能ECMAScript3/5/6…:JS的语法规范(变量、数据类型、操作语句等等)DOM(document object model):文 档对象模型,提供一些JS的属性和方法,用来操作页面的DOM元素BO原创 2021-05-03 10:22:23 · 168 阅读 · 1 评论 -
一、浏览器内核和控制台
一、浏览器内核和控制台谷歌浏览器控制台(F12/Fn+F12)Elements:查看结构样式,可以修改这些内容Console:查看输出结果和报错信息,是JS调试的利器Sources:查看项目源码Network:查看当前网站所有资源的请求信息(包括和服务器传输的HTTP报文信息)、加载时间等(根据加载时间进行项目优0化)Application:查看当前网站的数据存储和资源文件...原创 2021-05-03 10:20:55 · 157 阅读 · 0 评论