前端进阶

jquery

jsDOM 和jqueryDOM转换

var jsDom = document.getElementById(“name”)
var jqDom = $("p");
// js-->jquery
jqDom = $(jsDOm);

// jquery->js
jsDom = jqDom.get(0);

选择器

$("h3.jy")//交集选择器，既是h3标签，class又是jy

层次选择器

$("#menu span") // 后代选择器
$("#menu>span") // 子代选择器
$("#menu+span") // 下一个相邻的同辈元素
$("#menu~span") // 下面所有的同辈元素

过滤选择器

$("li:even) // 偶数行
$("li:odd) // 奇数行
$("li:eq(2)) // 下标为2的，下标从0开始

事件

元素的隐藏和显示

slideUp() // 向上收缩
slideDown // 向下伸展
fadeOut() //淡出
fadeIn() //淡入

DOM操作

// 多个属性写成json格式
$("img").attr( {width:"200",height:"200"} );
//获得标签+文本
$("div").html()
//获得文本
$("div").text()

ES6

let声明变量

• var声明是全局变量，let 局部变量
• var能声明多次，let 只能声明一次
• 声明使用顺序不同。

const

声明后不能改变，必须初始化，只读常量

模板字符串

• ` 定义多行字符串
• 插入变量${age}
• 插入函数${test()}

拓展运算符

//深拷贝
let user2 = {...user1}

// 对象user1和user2的属性合并到user中
let user = {...user1,...user2}

不定长参数

…arg // 表示不定长参数
for(var i=0;i<arg.length;i++)
arg[i] // 取出不定长参数

Bootstrap

表单

内联表单 <form class="form-inline">

栅格系统

<div class=“col-lg-3 col-md-4 col-sm-6”>
lg大屏幕，md笔记本屏幕，sm 平板