Es6语法笔记(部分)
Es6语法笔记(部分)
Es6语法介绍 ES6, 全称 ECMAScript 6.0 ,是 JavaScript 的下一个版本标准,2015.06 发版。 ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。 完整代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style> .box-item{ width:100px; background-color: aquamarine; height: 50px; text-align: center; line-height: 50px; margin: 10px; } #ad{ width: 200px; height: 200px; background-color: bisque; } </style> <body> <div class="box-item">1</div> <div class="box-item">2</div> <div class="box-item">3</div> <div id="ad"></div> <script> //let小demo item = document.getElementsByClassName("box-item"); for (let i = 0; i < item.length; i++) { item[i].onclick=function(){ this.style="background-color:red"; this.innerText="我被点击了" } } // 数组的解构 const F4 = ['小沈阳','刘能','赵四','宋小宝']; let [xiao,liu,zhao,song]=F4; console.log(xiao); console.log(liu); console.log(zhao); console.log(song); // 对象的解构 const zhaobs = { name:'赵本山', age:'不详', xiaoping:function(){ console.log("我也可以演小品") } } let {name,age,xiaoping}=zhaobs; console.log(name); console.log(age); console.log(xiaoping); xiaoping(); // es6引入新的声明字符串的方式【``】 // 1.声明 let str = `我是字符串`; console.log(str,typeof str) // 2.内容中可以直接出现换行符 let strTwo = ` <ul> <li>box1</li> <li>box2</li> <li>box3</li> </ul>`; // 3.变量拼接 let lovest = '杨幂'; let out = `${lovest}是我最喜欢的演员`; console.log(out) // Es6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。 // 这样写更简洁 let namee = '大彭Sir'; let change=function(){ console.log('我贼能吃!!!') } const bi ={ namee,change} console.log(bi) // Es6允许使用箭头(=>)定义函数。 let fn = (a,b) => { return a+b; } let sum = fn(10,20) console.log(sum) // this是静态的.this始终指向函数声明时所在作用域下的this得值 function getName(){ console.log(this.name); } let getName2 = () =>{ console.log(this.name);//无法改变指向 } window.name = '彭Sir' const es = { name:'PengSir' } getName.call(es); getName2.call(es); // 不能作为构造函数实例化对象 // let person = (name,age) =>{ // this.name = name; // this.age = age; // } // let me = new person('xiao',30); // person is not a constructor // console.log(me); // 箭头函数的简写,当型参有且只有一个可以省略括号 let add = n =>{ console.log(n+n) } add(1) // 当代码体只有一条语句的时候可以省略花括号,return必须省略 // 语句执行结果就是函数的返回值 let pow = n =>n*n; console.log(pow(10)); // 箭头函数demo // 需求一:点击div 2s 后颜色变成 粉色 let ad = document.getElementById('ad'); ad.onclick = function(){ setTimeout(()=>{ this.style.background="pink" },2000) } // 需求二:从数组中返回偶数的元素 const arr = [1,6,9,10,100,25]; // 普通方法 // const result = arr.filter(function(item){ // if (item % 2 === 0) { // return true // } else{ // return false; // } // }); // 箭头函数 const result =arr.filter(item=>item%2===0) console.log(result) // 箭头函数适合与this无关的回调。定时器、数组方法的回调 // 箭头函数不适合与this有关的回调。时间回调,对象的方法 </script> </body> </html>
 2022-5-21
js设置、获取缓存方式
js设置、获取缓存方式
Web 存储 API 提供了 sessionStorage (会话存储) 和 localStorage(本地存储)两个存储对象来对网页的数据进行添加、删除、修改、查询操作
 2022-4-21
JavaScript复习笔记
JavaScript复习笔记
js笔记-Dom查询和增删改 基本Dom查询 .getElementById("id名"); .getElementsByClassName("类名")[0表示第一个]; .querySelector(".类名|#id名|标签名");只查询第一个 .querySelectorAll查询所有的 .documentElement是html根标签 .body是body .all弃用 增删改 appendClild()添加节点 用法:父节点.appendClild(子节点) removeClild()删除子节点 用法:父节点.removeClild(子节点) 常用:自己.parentNode(父元素).removeClild(自己) replaceClild()替换节点 用法:父节点.replaceClild(新节点,旧节点) insertBefore()在指定节点前添加节点 用法:父节点.insertBefore(新节点,旧节点) createAttribute()创建属性节点 用法:document.createAttribute(属性名) createElement()创建元素节点 用法:document.createElement(标签名) createTextNode()创建文本节点 用法:document.createElement(文本) getAttribute()返回指定的属性值 用法:getAttribute(属性名) setAttribute()设置或修改属性得值 用法:setAttribute(属性名,属性值) js笔记-类的操作 修改Class:.ClassName="类名";(添加类需要在类名前面添加空格;如.ClassName=" 类名") //添加Class function addClass(obj,cn){ //检查obj中是否含有className if(!hasClass(obj,cn)){ obj.className+=" "+cn } } //调用 addClass(obj,"类名"); removeClass(obj,"类名"); //判断一个元素是否含h1有指定的class属性值 function hasClass(obj, cn) { var reg = new RegExp("\\b" + cn + "\\b") return reg.test(obj.className) } //移除Class function removeClass(obj,cn){ var reg = new RegExp("\\b"+cn+"\\b") obj.className=obj.className.replace(reg,""); } //切换toggle一个类 function toggleClass(obj,cn){ if(hasClass(obj,cn)){ removeClass(obj,cn) }else{ addClass(obj,cn) } } js笔记-jQuery Dom操作与动画 使用css()为指定的元素设置样式值css(name,value)或css({name:value,name:value...}) 追加样式addClass(class)或addClass(class1 class2 ...) 移除样式removeClass(class)或removeClass(class1 class2 ...) 切换样式toggleClass(class) .html()对HTML代码进行操作,类似js中innerHTML .text()可以获取或设置元素的文本内容 .val()可以获取或设置元素的value属性值 .attr()用来获取与设置元素属性,原生的建议使用prop() .removeAttr()用来删除元素的属性 A.append(B)将B加入到A中,appendTo()相反 .prepend()前置加入,.prependTo相反() .after()表示将B加入到A之后 .before()表示将B加入到A之前 .clone()用于复制某个节点 .chirldren()用于获取元素的所有子元素 .find()用于获取元素的后代元素 .next()获取紧邻元素之后的元素 .nextAll()获取紧邻元素之后的所有同级元素 .prev()获取紧邻元素之前的元素 .prevAll()获取紧邻元素之前的所有同级元素 .siblings()用于获取位于匹配元素前面和后面的所有同辈元素 .parend()获取元素的父级元素 .parends()获取元素的祖先元素 事件与动画 .click()点击事件 .mouseover()鼠标移入时 .mouseout()鼠标移出时 .show()显示;.show("slow")以较慢的速度显示 .hide()隐藏;.hide(1000)以1秒的时间隐藏 .toggle()用于切换元素的可见状态 .fadeln()和.fadeOut()淡入淡出 .fadeToggle()淡入淡出 .slideDown()延伸,.slideUp()收缩 .slideToggle()元素上拉与下拉切换 .anmite()动画效果
 2022-4-6
蓝桥杯(web组)题解-新年贺卡
蓝桥杯(web组)题解-新年贺卡
背景介绍 新年马上到了,大家肯定有很多祝福的话语要对自己的亲人朋友说,下面我们一起来制作一张贺卡,让我们把想说的话都写在贺卡上。 考试要求 请仔细阅读需要完善代码部分的提示,之后完善 index.js 样式文件中的 TODO 部分,点击书写贺卡,卡片随机展示已经写好的祝福语: js代码(三行搞定) document.addEventListener('DOMContentLoaded', function () { const greetingDisplay = document.getElementById("greeting-display") const btn = document.getElementById("btn") // 点击开始书写按钮 btn.addEventListener("click", () => { show(greetingDisplay) }) }) const greetings = [ "新年快乐!", "接受我新春的祝愿,祝你平安幸福", "祝你新年快乐,洋洋得意!", "新的一年,新的开始;心的祝福,新的起点!", "新年好!祝新年心情好,身体好,一切顺心!", ] // 随机数函数 从 greetings 随机取一个值并返回 function writeGreeting() { // TODO 带补充代码 //取一个0-5的随机数 var sj = Math.floor(Math.random()*5); //返回 return greetings[sj] } /* * @param {*} greetingDisplay 要显示内容的dom元素 */ // show 将 writeGreeting 函数中返回的内容显示在 greetingDisplay 元素中 function show(greetingDisplay) { // TODO 待补充代码 //写入页面 greetingDisplay.innerHTML=writeGreeting() } module.exports = { show, writeGreeting }
 2022-3-10
蓝桥杯(web组)题解-卡片标签化
蓝桥杯(web组)题解-卡片标签化
背景介绍 选项卡功能在前端开发中特别常见,作为设置选项的模块,每个选项卡代表一个活动的区域,点击不同的区域,即可展现不同的内容,这样既能节约页面的空间又能提升页面性能。 本题需要在已提供的基础项目中使用 JS 完成选项卡功能的编码,最终实现切换选项卡可以显示对应内容的效果。 考试要求 请在 index.js 文件中根据现有 DOM 结构(页面布局部分不能做任何修改操作)实现选项卡动态切换功能。 页面效果如下所示: 代码如下 为了节约时间,写的比较拉,哈哈哈哈哈 // 实现选项卡功能 function init() { // TODO 待补充代码 var red = document.getElementsByClassName("red"); var green = document.getElementsByClassName("green"); var blue = document.getElementsByClassName("blue"); var yellow = document.getElementsByClassName("yellow"); var one = document.getElementById("one"); var two = document.getElementById("two"); var three = document.getElementById("three"); var four = document.getElementById("four"); red[0].onclick = function() { red[0].className = "red active"; green[0].className = "red"; blue[0].className = "blue"; yellow[0].className = "yellow"; one.className = 'active'; }; green[0].onclick = function() { green[0].className = "green active"; red[0].className = "red"; blue[0].className = "blue"; yellow[0].className = "yellow"; two.className = 'active'; }; blue[0].onclick = function() { blue[0].className = "blue active"; green[0].className = "green"; red[0].className = "red"; yellow[0].className = "yellow"; three.className = 'active'; }; yellow[0].onclick = function() { yellow[0].className = "yellow active"; green[0].className = "green"; red[0].className = "red"; blue[0].className = "blue"; four.className = 'active'; }; } init();
 2022-3-10
     跳转到第 页,共 1 页

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录