前端总结

最新推荐文章于 2024-04-08 08:40:11 发布

是海洋啊

最新推荐文章于 2024-04-08 08:40:11 发布

阅读量83

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43660093/article/details/98478724

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

关系
- - html
  - css
  - js
  - ajax
  - jquery
  - bootstrap
  - vue

关系

html

html 标签库

设置类标签

<meta charset="UTF-8">	<!--指定页面编码-->
<meta name="keywords" content="" />	<!--seo优化，搜索优化-->
<meta name="description" content="" />	<!--描述-->

<script type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href=""/>
<style type="text/css"></style>

显示类标签

<a>  <img> <tabke><tr><td>
<ul>无序列表	<ol>有序列表	<li>列表子项
<div>	<span>	标签容器，面板，布局使用

效果标签

<p>	<h1-h6>	<br>	<b>粗体	&nbsp空格
表单:（内部录入项提交到服务端）
<form> 
	action：目标处理地址（代码位置）
	method：提交方式（GET/POST）
		get：提交的全部信息都在url地址上（用于数据获取）	a.jsp?name=111&sex=1
		post：全部信息在协议数据区，url只有地址本身	a.jsp
		enctype=""	提交格式
			application/x-www-form-urlencodeed	默认
			multipart/form-data	文件上传
			application/json	prop对象提交，作为json处理
录入项：（name,value）
<input type=""> <select> <texteara>

css

css
1. 用法
  style标签属性 <a style="">
  style标签 <style> </style>
  link标签 <link href="" rel="stylesheet">
2. 选择器
  - 标签选择：标签名{ }
  - id选择器： #id{ } 以标签id属性来选择，只选择一个
  - class选择器： .class{ } 以标签class属性来选择，一个属性可设置多个类<a class=" forg back"> 两个类
  - 属性选择器： [属性=值]{ } 以标签属性选择，中文，数字要单引号包起来
    [属性]{ } 有指定属性的都可以被选中
  - 组合或选择：选择器1，选择器2 { } 1或2都可以选中
  - 衍生选择：选择器1 选择器2 { } 选择1里的全部2（子孙项）
    选择器1>选择器2 { } 选择1里的全部2（子项）
  - 伪类选择：选择器：伪类{ } 某种状态下的选择器a:hover{ } a标签当移入时
3. box模型，定位
  - width，height
  - margin：外边距，表面改变位置，标签多了一块非显示区域
  - border：边框（宽度，样式，颜色）
  - padding：内边距，表面改变大小，内容区域位置移动
4. 属性
  - font-
  - text-
  - grid-
  - list-
  - background-
  - float：浮动
  - display：none；显示模式（不占区域）
  - visibility：hidden；可见不可见（占原有区域）
  - outline：none；选择焦点边框
  - overflow：scroll；超出范围的显示模式 hidden隐藏
  - z-index：z轴顺序，标签覆盖显示
  - text-overflow:ellipsis：文本超出省略号
5. css3
  - border-radius：圆角
  - box-shadow：阴影

js

语法
- var a = 12;
- var s = [1,2,3,“123”];
  s.pop(), s.push(), s.length,
  slice(start,end) 查找，返回一个新的数组
- var a = {name:“sss”,sex:1,arr:[{},{},{}],fn:function(){
  }} 对象实例，prop对象
- var a = function(){ 函数定义
  }
  function a(){ 定义结果一致
  }
- if (a===b){ }附加判断类型
BOM
- location.href(兼容性差)，一般用open() //重定向发送GET请求
```
location.href = " http://www.baidu.com ";
open("http://www.baidu.com","_self");
<a href = " http://www.baidu.com "></a>
```
  - 发送请求的三种方式
    url重定向
    form表单请求
    ajax异步请求
  - setinterval()，settimeout()，alert()，console.log()//调试输出

DOM

	function tourl(){
						var a=document.createElement("a");
						a.setAttribute("href","aaa.jsp");
						a.innerText="超链";
						a.className="aa  bb";
		//				a.innerHTML="<h1></h1>";
						a.style.color="#ff0000";
					var bs=document.getElementsByTagName("body");
						bs[0].insertBefore(a,mydiv);
						bs[0].appendChild(a);
						bs[0].removeChild(mydiv);
					}

面向对象

var a={ name:"sss" , sex:1,arr:[{},{},{}] ,fn:funcntion( 
				)}               对象实例，prop对象
		var fn = function(){	}
		function user(fn){
		     this.name="";
		     this.mov=function(){   }	
		}
		继承：
		function user(){
		     this.name="";
		     this.mov=function(){   }	
			}
		function myuser(){   //新继承
			user.call(this);	
			this.age=5;    //加入属性1
		}
			myuser.prototype.sex=100;//加入属性2
			var u = new myuser();
			alert(u.mov);

ajax

var hr=new XMLHttpRequest();   创建
		hr.open("POST","a.jsp",true);        设置
		hr.onreadystatechange=new function(){     数据回调
			if(hr.readyState==4){
			 	var json=eval("("+hr.responseText+")")
			}
		};
		hr.send({});    发送请求
	json:网络通讯格式。替代xml格式
		{"name":"ddd","sex":1,"datas":[{"name":"a"},{"name":"b"}]}

jquery

js函数库，简化js操作

选择器：css选择器
遍历查询：
1. 父节点
2. 兄弟节点
3. 子结点
DOM
1. val（） //值
2. attr（）-- prop（）//属性
3. text（），html（）内容
4. css（） //样式
5. append（），remove（）//增，删
6. $("<a></a>") ， $(event.target) //事件源
7. $(".aaa")[0]， $(".aaa").get(0) //获取
8. $(".aaa").length //长度
9. $(".aaa").ForEach(function(i,e){ }); //循环遍历
动画
ajax
1. $.post(“url”,{data:" "},function(json){ //便捷使用
  },“json”)
  //默认post请求 / $.get()
2. $.ajax({ //100%功能，超级ajax
  url: “”,
  data: { },
  ……
  })