Lio's dream

2018-07-23 • 于 Read

JS学习

模板字符串文档

特点

1.内含占位符，可以自由插入表达式，写法更优雅，如

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

2.可以直接获取多行字符串

console.log(`string text line 1
string text line 2`);
// "string text line 1
// string text line 2"

3.支持嵌套模板

4.带标签的模板字符串

var person = 'Mike';
var age = 28;
HTML
function myTag(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  // There is technically a string after
  // the final expression (in our example),
  // but it is empty (""), so disregard.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 99){
    ageStr = 'centenarian';
  } else {
    ageStr = 'youngster';
  }

  return str0 + personExp + str1 + ageStr;

}

var output = myTag`that ${ person } is a ${ age }`;

console.log(output);
// that Mike is a youngster

5.通过属性raw可以输出原始字符串，不用单独转义，如：

function tag(strings) {
  console.log(strings.raw[0]);
}

tag`string text line 1 \n string text line 2`;
// logs "string text line 1 \n string text line 2" ,
// including the two characters '\' and 'n'

js中增删改查元素

增

createElement appendChild

var button = document.createElement(‘button’)
var form = document.querySelector(‘.login-form’)
form.appendChild(button)

为div 添加子元素 (2最常用)

1	（1）div.innerHTML += '<h1>xxx</h1>' （2）div.insertAdjacentHTML('beforeend','<h1>xxx</h1>')

删

var button = document.querySelector(‘button’)
form.removeChild(button)
或
button.remove()

改

var button = document.querySelector(‘button’)
buntton.innerHTML = ‘注册用户’

查

属于 W3C 中的 Selectors API 规范

元素选择器
var body = document.querySelector(‘body’)
class选择器
var form = document.querySelector(‘.login-form’)
id选择器
var loginButton = document.querySelector(‘#id-button-login’)
这三种获取的是静态集合（选择出后便与文档的变化无关）且性能较差

属于 W3C 的 DOM 规范

document.getElementById(‘idName’);
返回一个与之对应id属性的节点对象

document.getElementsByTagName(tagName);
返回一个对象数组（准确的说是HTMLCollection集合）,返回元素的顺序是它们在文档中的顺序,传递给 getElementsByTagName() 方法的字符串可以不区分大小写,

document.getElementsByClassName(‘className’);
返回文档中所有指定类名的元素集合

CSS

写法：

（1）内联写法：

<h1 style="background:red;">sth</h1>  
```  
缺点：维护不方便，相同样式发生修改要修改多处   

（2）head标签内的style标签写法：

缺点：html文件会相当臃肿   
（3）link标签外联写法：
新建一个xxx.css文件，并加上<link rel="stylesheet" href="xxx.css">
并在css文件中编写样式

有不同的写法便有不同的优先级，样式优先级如下（从高到低，低的会被高的覆盖）：  
1.！important

h1{
background:orange !important;
}
`
2.内联样式
3.link，style样式（同级样式，后面会覆盖前面的）

同样，我们可以通过选择器对样式进行修改，选择器同样有优先级，优先级如下：
（1）id选择器
（2）class选择器
（3）元素选择器