<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
内嵌样式用;隔开
<div style="height: 100px;width: 100px;text-align: center;border: 1px solid red;">
测试
</div>
/*元素水平居中*/
margin:0 auto;
/*元素水平垂直居中*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/*文本水平&垂直居中*/
text-align: center;
line-height: 50px;/*50px是父级行高*/
/*盒子模型*/
margin: 10px;
padding: 10px;
box-sizing: border-box;
/*浮动布局*/
float: left;
/*清除浮动
1.clear: both;
2.overflow: hidden;
3.设置父级高度
*/
/*flex布局：适合具体板块布局*/
display: flex;
/*主轴方向*/
flex-direction: row;
/*主轴居中*/
justify-content: center;
/*交叉轴居中*/
align-items: center;
/*项目居中*/
/*flex没有justify-items和justify-self等*/
align-self: center;
/*grid布局：适合页面整体布局*/
/*设置行列*/
grid-template-columns: 100px 100px 100px;/*列，3列都是100px，同时也是单元格宽的尺寸*/
grid-template-rows: 100px 100px 100px;/*行，3行都是100px，同时也是单元格高的尺寸*/
/*主轴方向*/
grid-auto-flow:row;
/*主轴居中（整个grid容器）*/
justify-content: center;
/*交叉轴居中*/
align-content: center;
/*单元格主轴居中（所有单元格）*/
justify-items: center;
/*单元格交叉轴居中*/
align-items: center;
/*项目主轴居中（单个单元格）*/
justify-self: center;
/*项目交叉轴居中*/
align-self: center;
/*JavaScript*/
/*ES5 ES6对比*/
/*变量声明 var → let*/
}
</style>
</head>
<body>
<script>
/*获取节点*/
//ES5
var g = document.getElementById("id")
var g = document.getElementsByClassName("classname")
//ES6
let g = document.querySelector("选择器")
let g = document.querySelectorAll("选择器")
/*事件
1.鼠标事件：click、mouseenter、mouseleave
2.键盘事件：keydown
3.触屏事件：touchstart、touchend、touchmove
以click为例*/
//ES5
g.onclick=function(){
console.log("hello")
}
//ES6
g.addEventListener("click",function(){
console.log("hello")
})
//jQuery
$("选择器").click(function(){
console.log("hello")
})
/*事件设置样式*/
//js
g.onclick = function(){
this.style.backgroundColor = "blue";
}
//jQuery
$("button").click(function(){
let height = $(this).css("height");
console.log(height);
$(this).css({
height:"60px",
width:"60px"
})
})
/*事件设置属性*/
//js
g.onclick = function(){
g.id="btn1";//点击后设置id属性，有就覆盖，没有就添加
g.className="active";
}
//jQuery
$("button").click(function(){
$(this).attr("id","btt1");//有就覆盖，没有就添加
$(this).attr("class","btn1");
})
/*节点操作*/
//创建元素节点
let li1 = document.createElement("li")//js
let li = $(`<li>${value}</li>`)//jQuery
//添加节点
ul1.appendChild(li1)//js
$(".fruits").append(li)//jQuery
//删除节点
ul1.removeChild(this)//js
$(this).remove()//jQuery
/*事件委托*/
//js
ul.addEventListener("click",function(e){
ul.removeChild(e.target)
})
//jQuery
$(".fruits").on("click","li",function(){
$(this).remove();
});
</script>
</body>
</html>
html
