前端

HTML

• Html 标签库（积木，界面难看）

1. 伪XML规范
   1. 只有一个根节点
   2. 每个节点（多个子节点，多个属性，内容）
   3. 每个节点（开节点，闭节点）
2. 标签框架（html，head，body）
   1. 按html5标准
   2. head：非显示，设置行标签
   3. body：文档的显示内容
3. 标签类型：

   1. 基本标签
      1. <a href="http://www.baidu.com" target="_new">百度</a>
      href：目标地址；target：页面显示位置
      2. <img src="a.jpg" width="250px" height="400px">
      img可导致图片拉伸，不适合做背景

   2. 面板标签
      1. <div></div>（块元素）
      2. <span></span>（行内元素）

   3. 数据标签（表单标签）

      • <form>
        1. Action 数据提交地址
        2. Method 请求的类型 get、post
           a) Get 信息在地址栏上
           b) Post 信息在协议体上
      • <input>
        1. Type 控件类型
        2. Value 参数值
      • <select> 下拉列表
      • <textares> 多行文本
      • <table> 表格数据展示

   4. 定位标签

      1. <p>内容</p> 段落
      2. <br> 下一行
      3. &nbsp 空格

   5. 效果标签

      1. <b> 粗体
      2. <h1>……<h5> 标题

   6. 列表标签

      1. <ol><li></li></ol>有序列表
      2. <ul><li></li></ul>无序列表

CSS

• 层叠样式表
  color: red;background-color: green;

  1. 属性：样式；

  2. 颜色的设置：
     color: red;
     color: #f00/#ff0000;（RGB颜色值）
     color:rgba(255,0,0,0.5);（a：透明度）
     优先级：
     选择范围（范围越大，优先级越小）
     加载顺序（后加载的优先）
     特定优先级（！important）

  3. 用法

     1. 行内使用（当前标签生效，优先级高，特例使用）
        <a href="#" style="color: red;background-color: green;">合法化</a>

     2. 页内使用

        <style type="text/css">
        				a{
        			/* 		color:red; */
        			/* 		color: #f00; */
        					color:rgba(255,0,0,0.5);
        					background-color: green;"
        				}
        			</style>
        

     3. 页外使用（选择器写入文件，支持浏览器缓存）
        <link href="a.css" rel="stylesheet">

  4. 选择器（选择样式实施的标签）

     • a{ }标签选择器

     • #a{ }id选择器 id属性值（页面内唯一）

     • .aa{ }类选择器 class属性值 （可设置多个）
       <a class="a11 back" href="#">111</a>

     • [aaa=‘a1’]属性选择器（如果属性值为数值或中文时，必须加单引号）

        <a aaa="a1" href="#">222</a>
       [aaa=a1]{
       					color:green;
       				}
       

     • a，div{ }或选择器 a和div都有效

     • Div a{ } 归属选择器 （div标签内的全部a标签）

     • Div>a{ }子孙选择器 （div标签内的直接子a标签）

     • ：hover 伪类（标签状态选择器）

  5. box模型+定位

     • margin：外边距（微调位置，占用原位置）
     • border：边框（设置：颜色，样式，粗细）
     • padding：内边距（内容位置改变，可能导致大小改变）
     • position+left+right+bottom+top 定位
       • position：fixed 超级绝对定位（忽略级层，按文档左上角定位，独立一层）
       • position：absolute 绝对定位（最常用的定位，按照上级容器的左上角定位，上级容器也为绝对定位）
         iii. position：relative 相对定位（按原位置来进行定位）

  6. 常用属性

     • Display 显示模式（none，block，inline）
     • visibility：hidden 看不见隐藏
     • float：对齐定位
     • cursor：游标
     • outline：none；隐藏录入焦点边框
     • z-index：设置标签重叠样式的优先级
     • overflow：超出范围解决方法

  7. 简单的css3

     • css3效果生成器 生成器

  8. 额外框架及使用

     • Animate.css
     • Buttons.css

JavaScript

• 不是java，做页面交互（动画，事件）

用法

• 事件，行内用法

  <a href="#" onclick="alert(11)">lhy</a>
  

• 页内

  	<script>
  		function ok(){
  				alert(11)
  		}
  		</script>
  

• 页外

  <script type="text/javascript" src="js/my.js" ></script>
  

语法（弱类型）

			var a = 100;/*变量定义*/
			var b = "qwe";	//随时更换变量
			c = "123";	//var 可省略
			d = {1,2,3,4};/*数组定义*/
			e = {name:"123",sex:2};/*对象定义*/
			alert(e.name);	//对象属性
			function add(a,b){/*函数定义，不指定返回值，参数不指定类型*/
				return a+b;
			}
			function add(a,b，c){
				if(!b)b=100;	//判断null，undefined，false
				return c(a,b);
			}
			var fun = function(a,b,c);	//变量值为函数
			fun(11,22,function(c,d){	//匿名函数
				alert(c+d);
			})

null（空），NaN（计算失败），undefined（非法运算，未定义）

BOM

• Browser Object Model（浏览器对象模板）
• navigator：浏览器基本信息（浏览器兼容）
• navigator.product
• Screen：用户屏幕信息
  • screen.deviceXDPI
• History：浏览器历史
  • history.back()：等同于在浏览器点击后退按钮
  • history.forward()：等同于在浏览器点击前进按钮
  • history.length；浏览器历史
• Location：获取当前页面地址（URL），并把浏览器重定向到新页面
  • location.reload：刷新
  • locating.href：转到目标地址
• window：所有BOM对象的上级

  • 窗口方法：

    window.open(“http://www.baidu.com”,"_self");
    window.open(“index.html”,"_new",“width:100px;height:100px”);
    this.resizeTo(300,500);
    this.close();
    window.moveTo();
    window.scrollBy();

  • 对话框方法

    		alert()	；//消息对话框 
    		if(confirm("yes/no"))	//选择对话框
    			alert("yes");
    			var str = prompt("input");	//录入对话框
    			alert(str);
    
    

  • 计时器

    	 var pos;
    			function ok(){
    				pos = setTimeout(function(){
    					alert("ok");
    				},3000)
    			}
    			function size(){
    				clearTimeout(pos);
    			}
    

DOM

document object model：文档对象模板（每个标签就是对象）

• 获取对象

  1. 标签id属性为变量名

     mydiv.innerHTML = " ";

  2. 使用getElementById

     var d = document.getElementById(“my”);
     d.innerHTML = “111”;

  3. 使用

     var d = document.getElementsByTagName();
     d[0].innerHTML = “111”;

  4. 使用

     var d = document.getElementsByClassName();
     d[0].innerHTML = “111”;

• 修改对象

  1. value 值/input
  2. name
  3. innerHTML
  4. style
  5. class classList

     d[1].style.color="#0f0"; //操控css
     var left = d[1].offsetLeft；//只读

• 创建删除

  1. 追加标签

     • 第一种

       var d = document.getElementsByTagName(“div”);
       var a = document.createElement(“a”);
       a.href = “#”;
       a.innerText = “我的”;
       d[0].appendChild(a);

     • 第二种

       var d = document.getElementsByTagName(“div”);
       d[0].innerHTML = “qwe”;

  2. 删除标签

     var d = document.getElementsByTagName(“a”);
     d[1].parentElement.removeChild(d[1]);

  3. 事件：（冒泡事件：点击子标签，父级标签联动响应）

     • onclick = “ok”； //标签加入事件
     • window.onload = function() //js脚本加入事件
     • event 对象， 事件对象（公共事件）
     • this对象，事件源自身

面向对象

var user={name:"lhy",sex:1,mov:function(x,y){
				alert(x+y);
			},sub:[2,12,"233"]};			//prop
			alert(user.name);
			user.mov(10,11);
			alert(user.sub[2]);

function user(name){			//类，构造方法
				this.name = name;		//实例变量
				this.mov = function(){	//实例方法
					add();
				}
				function add(){			//私有方法
					alert(sex);
				}
				var sex = 0;			//私有变量
			}
			
			var u = new user("lhy");
			u.mov();

• 继承

1. 原型继承

			function user(){
			}
			user.prototype.age=100;
			var u = new user();
			alert(u.age);

2. call继承

function user(){
				this.age=21;
			}
			function myuser(){
				user.call(this);
				this.name="lhy";
			}
			
			var u = new myuser();
			alert(u.name)
			alert(u.age);

Cavas：绘制图片

调试

• console.log()，相当于syso输出

ajax

• Asynchronous Javascript And XML（异步 JavaScript 和 XML 或者是 HTML）
• 发出异步请求（web服务器），非刷新请求
• 步骤：
  1. var hr = new XMLHttpRequest(); //创建
  2. hr.open(“GET”,“js/a.json”); //设置
  3. hr.send(); //发送，可带参数发送
  4. hr.onreadystatechange； //状态改变

			function sendmsg(){
				var hr = new XMLHttpRequest();	//创建
				hr.open("GET","js/a.json");	//设置
				hr.send();	//发送，可带参数发送
				hr.onreadystatechange=function(){
					if(hr.readyState==4){			//判断状态
						var str = hr.responseText;		//回应内容
						var obj = eval("("+str+")");//json对象转换为prop
						mya.innerText = obj.name;
					}
				}
				console.log()
			}

• 异步请求处理：
  1. 先定义onreadystatechange再发送
• json：
  1. 与prop对象一致，不能加方法
  2. 键值必须加“”，值，数字，Boolean可以不加“”；
  3. 字符：{ }-对象；[ ]-数组；键：值；键：值；数组和对象可无限嵌套

Bootstrap（css框架）

• cdn服务器：内容分发网络
• css定制样式（控件，标签）
• css栅格（动态布局）

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

• 根容器：
  1. .container（固定宽度）
  2. .container-fluid（100%宽度）
• 创建行，操作列（列不需要创建，12列）

<div class="row">       //每行
	<div class="col-md-6 col-sm-10" 
		style="height: 100px;background: #f0f;"></div>
	<div class="col-md-6 col-sm-2" 
		style="height: 100px;background: #f00;"></div>
	</div>	

摆放不开（12个列超出）自动换行

1. .clearfix：列可能会出现比别的列高，列高对齐
2. con-mod-4：将列向右侧偏移
3. col-md-push-3：列排序
4. .hidden-xs：隐藏
5. .visible-xs：显示

• js工具（控件控制）
  1. jQuery 强依赖

jQuery（js工具库）

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

选择器

• $(" 标签/.class/#id")

与css选择器一致

$(“a”)

获取选择的数量

$(“a”).length

转换jQuery到js标签对象：$(js标签对象)[index]
1. 索引转换
2. jQuery自带get(index)转换

var HtmlElement=$(“div”)[0];

转换js对象到jQuery：$()括起来就是jQuery对象

var a = document.getElementById(“aaa”)
var aa = $(“a”)
alert(aa.length)

方法连用

var aa = $("a").add($(“div”)).add($(“span”))

选择器容器添加，定义变量时加入，否则加入失败

var aa = $("a").add($(“div”))

遍历

var aa = $("a").add($(“div”))
aa.each(function(i,o){ // i索引，o每个js对象
alert(o)
})

检索

1. 上级
   parent：一级上级
   parents：selector 沿上级查询，找到符合条件

   $(o).parents(“span”).attr(“aaa”)

2. 兄弟
   prev：前一个
   prevAll：前所有
   next：后一个
   nextAll：后所有
   siblings：查询符合条件的所有兄弟

3. 下级
   children(expr)：一层子元素，直接的孩子节点
   find(expr)：选择器子孙全部查找
   contents()：查找下面的所有内容，包括节点和文本

dom操作

1. text()：（无参）获取+（有参）设置文本；

2. html( html脚本 )：无参）获取+（有参）设置内容（包括文本，标签）；

3. attr( 属性名，值 )：（一个参数）获取属性+（两个参数）设置属性值

4. prop（属性名，值）：同attr；

5. val（值）：（无参数）获取+（有参）设置value属性

6. css（prop对象）：

   $(o).css({color:“red”,background:“green”})

   如果有减号属性：
   1. “background-color”，加上引号
   2. backgroundColor，减号后面首字母大写

7. css（属性名，值）：（一个参数）获取属性+（两个参数）设置属性值

   $(o).css(“color”,“red”)

8. 增删

   1. 增：

      	$(".aaa").html("<a href="#">lhy</a>")
      

       	var a = $("<a></a>").attr("href","#").text("说分就分");
      				$(".aaa").append(a)
      

   2. 删：

      $(".aaa").remove()	//删除自身
      

      $(".aaa").empty()	//清空自身内容
      

9. 加载完成

   $(function(){
   //window.onload，提前加载
   })

10. 事件：

    • 终止冒泡

      event.cancelBubble = true;

    $(function(){
    				//$(".classname")
    				$(document).bind("click",".aaa",function(){
    					event.cancelBubble = true;	//组合$("属性值")使用，解决冒泡问题
    					alert(1)
    				})
    			})
    

11. bind方法：绑定事件（）

动画

1. 隐藏和显示 HTML 元素

   hide() 和 show()

2. 淡入淡出效果

   fadeIn() fadeOut() fadeToggle() fadeTo()

3. 滑动效果

   slideDown() slideUp() slideToggle()

      $(".bbb").hide(5000,function(){    //动画时间，回调方法
           		alert(1);
           	});
   
   

4. 自定义动画： animate()

   $(".bbb").animate({width:“50px”,height:“50px”},2000);

Ajax

$.post(“a.json”,{},function(json){
},“json”);

	$.ajax({
			type: 'post',
			url: 'a.da',
			dataType: 'json',   返回对象类型
			async:true,
		contentType:"application/x-www-form-urlencoded"
			'application/json'	   后台处理json
			'multipart/form-data'  文件
			data:{}   请求参数
			success:function(JSON){
				//结果处理
			}