es6 字符串 对象 拓展 及 less 的语法
es6 字符串
对页面渲染的几种方式:字符串拼接 文档碎片 dom操作 模板
es6 又提供了一种新的对页面渲染的方式:字符串模板(高级版的字符串拼接)
模板字符串标识符是 反引号 ( `` ) 英文状态下 tab 上面的键,字符串直接写,遇到变量写在 ${} 内;
var name="hello world";
案例:var sd=` 这种写法真好 ${name} `; // 这种写法还会把空格保留下来 ,但是当模板用的话,注意: js 语句 在 `` 中并不友好
es6 对象
es6 允许将变量和函数作为对象的属性和方法
案例:
var name="zhangsan";
function fn(){
console.log(123)
}
var obj={
name:name, // 可省略为 name 第一个name 属性,第二个name 变量
fn:fn, // 可省略为 fn 第一个 fn 属性,第二个是 fn 函数
[name]:name // 第一个[name] 代表了 name 变量,第二个name 代表了 name 变量
}
console.log(obj.name); // zhangsan
obj.fn(); // 123
以上案例的注意点:
1. 当变量名和属性名相同的时候才能省略
2. 将一个变量值写成对象的属性,一定要加 [] , 如果不加 [] 属性,就是 name ,加上 [name] 就是 name 变量的属性值
对象的两个关键字 set get
get 代表取值 set 代表存值
案例:
var obj={
haha:"zhangsan",
get name(){ // get name 是一个取值的方法 名字必须是 name ,不能随便取名
return name // get 关键字 当 obj.name 是时候就会触发这个函数,但是的是什么,name 的属性就是什么
},
set name(val){ // set name 是一个存值的方法 名字必须是 name,不能随便取名
name=val; // val 当给 name 赋值的时候,就会触发这个方法
return name;
}
}
console.log(obj.name); // 会触发 get name
obj.name="lisi"; // 会触发 set name
console.log(obj.name);
less
变量:
使用 @ 符 定义变量,用 : 赋值
案例:@w:100px;
定义类:案例
@.po:red; // 前者变量 后者类名
@{.po}{ // 这里的 po 就代表了 red 这个类
}
混入:将一个选择器混到另一个选择器中
案例:
.po{
position:absolute;
}
.p{
.po; // 在每个 less 语法后面都要加 ; 号, 引入方式同名即可
left:10px;
}
另一种写法
.po(){
position:absolute;
}
div{
.po()
}
一个是带() 一个是不带() 这两种写法的区别是什么?
带() 代表编译后的 css样式,不会在定义的时候显示出来,只会在使用的时候显示出来
不带() 代表编译后的 css样式,会在定义的时候显示出来,只会在使用的时候显示出来
嵌套:
主要是:css 后代,子代,伪类
less 实现 后代写法
div{
p{
}
}
less 实现 子代写法
div{
>p{
}
}
less 实现伪类写法
div{
&:hover{ // & 关键字,是一个连接符,代表当前父类的选择器
}
}
函数的默认值;
.div($w:100px,$h:100px,$bg:red){ // 默认值,形参默认值写法 ,可以在调用的时候不传值,如果没有默认值的话,在调用的时候,必须输入值,否则就会报错
width:$w;
height:$h;
background:$bg;
}
导入:@import "路径" 引入其他的 less 文件
循环:是迭代循环,函数内部调用函数本身 还需要使用的函数 when()
案例:
.loop(@n) when(@n>0){ //使用递归的方法进行循环,这种写法叫迭代 when 作为条件判断
width:(100px*@n);
.loop((@n)-1); // 如果我们对变量使用()的话,他会认为变量是 n-1 就会报错,因为没有这个变量,所以我们使用 () 括起来;
}
div{
.loop(5)
}
继承:extend 让一个选择器去继承另一个选择器,就是让我们实现 并级选择器
为什么使用并级选择器;当我们里面的样式相同的时候,如果我们进行 复制,粘贴操作的话,无疑是增加了我们的代码量;使用并级的话可以减少我们的代码量(但也减不了多少行)
写法:
html 结构
<div class="cla">
<div class="dd"></div>
</div>
.div{ // 这个 div 我们实现一个上下左右居中的效果
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
width:200px;
height:200px;
background:pink;
}
extend 的两种引入方式
第一种:
.cla{
width:400px;
height:400px;
position:relative;
background:green;
.dd:extend(.div){} // 这个代码块里,就继承了 .div 定义的代码
}
第二种:
.cla{
width:400px;
height:400px;
position:relative;
background:green;
.dd{
&:extend(.div all); // 这种写法是和第一种写法一样的效果 all 代表继承了跟 .dd 相关的所有选择器
}
}
转载于:https://www.cnblogs.com/shangjun6/p/11171611.html
es6 字符串 对象 拓展 及 less 的语法相关推荐
- es6语法-对象拓展运算符
对象拓展运算符 创建 对象拓展运算符.html 拓展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象. // 1.拷贝对象 let person1 = {name: "Amy ...
- 【ES6】对象的拓展
[ES6]对象的拓展 一.对象的两种表示法[掌握] 1)简洁表示法 2)属性名表达式法 二.Object.is()[了解] 三.Object.assign()[了解] 查看更多ES6教学文章: 参考文 ...
- 【ES6】字符串的拓展
[ES6]字符串的拓展 一.为什么ES6要进行字符拓展? 二.ASCLL码.Unicode编码.UTF-8编码的异同 三.ES6新增的字符串接口 1)codePointAt() 2)codePoint ...
- 第九节:ES6为对象做了哪些扩展?
ES6不仅为字符串.数值和数组带来了扩展,也为对象带来了很多新特性.这一节,我们来一起学习一下对象的扩展. 对象的传统表示法 我们回顾一下,对象的传统表示法: let person = { " ...
- 阮一峰老师的JavaScript标准参考教程:函数和ES6函数的拓展
函数 1. 概述 函数的声明 JavaScript 有三种声明函数的方法. (1)function 命令 function命令声明的代码区块,就是一个函数.function命令后面是函数名,函数名后面 ...
- es6 获取对象的所有值_前端开发必备 - ES6 新特性之 Set和Map数据结构
往期回顾: 前端开发必备 - ES6 新特性之 let 和 const 命令 前端开发必备 - ES6 新特性之 变量的解构赋值 前端开发必备 - ES6 新特性之 字符串的拓展 前端开发必备 - E ...
- ES6——Promise 对象
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 A ...
- c++ to_string 指定字符位数_你不知道的ES6字符串的扩展
茫茫人海中与你相遇 相信未来的你不会很差 作者:知否 来源:https://segmentfault.com/a/1190000038557524 我们来学习 ES6中字符串类型的扩展,包括一些字符串 ...
- ES6:字符串的扩展及新增方法
字符串的扩展 模板字符串 传统的 JavaScript 语言,都是使用 '' 或者 "" 来把字符串套起来,然后使用 + 拼接一些定义的变量, ES6 改进了这种方法,使用一 ...
- JS总结:数组 字符串 对象
JS总结:数组 字符串 对象 JS中的数据分类: 1)基本数据类型 数据存储在栈区 number, string, boolean, und, null 2)引用数据类型 数据存储在堆区(引用地址 ...
最新文章
- 公开课报名 | 详解CNN-pFSMN模型以及在语音识别中的应用
- oracle索引优劣,ORACLE的五种表的优缺点概述
- javascript获取和设置URL中的参数
- java lock condition_Java 通过 Lock 和 竞争条件 Condition 实现生产者消费者模式
- linux c编程头文件,如何在Linux中找到C编程语言的头文件?
- 微信开发系列之八 - 微信公众号的地图集成
- [Spring5]IOC容器_Bean管理XML方式_p名称空间注入
- jquery根据value值php,表单php传值后jquery清除表单某项value问题
- 15.三数之和-LeetCode
- vc有关 directx组态,和dxsdk_extras(directshow)
- C++沉思录中文版pdf
- 保监会借大数据摸底保险中介市场
- wget 覆盖文件下载的技巧,绝对有效
- php 调用格式工厂,腾讯视频文件转换格式|腾讯视频格式 格式工厂,qlv转flv格式转换器下载使用...
- 【12c】新特性:Oracle 12c Temporal Validity 时间有效性
- 【不忘初心】Win10_LTSC2021_19044.1381_X64_可更新[纯净精简版][2.52G](2021.11.20)
- python对局域网所有人进行arp攻击
- window操作系统下的句柄机制说明
- mysql row_number吗_MySQL中的ROW_NUMBER()是什么?
- 联想超级计算机盈利,联想集团2019年营收 联想集团全年营收多少
热门文章
- Fundebug前端JavaScript插件更新至1.6.0,新增test()方法用于测试 1
- (完美)华为畅玩7A AUM-AL00的Usb调试模式在哪里打开的步骤
- 虚拟化云计算-centos7上使用virt-manager安装虚拟机
- 计算机体系结构五大部分组成
- 中兴2018年上半年业绩惨不忍睹,押宝5G建设能否让其起死回生?
- 不同操作系统查看FC HBA卡信息的方法总结
- 世界独创的螺旋数组低于n(o^2)的生成算法
- Android 编程下 ListView 和 CheckBox 混合使用时的常见问题
- 理解Java的几张图
- neo4j安装与示例