JAVA培训-前端总结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JAVA培训-前端总结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4197字，纯文字阅读大概需要6分钟。

内容图文

文章目录

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

关系

html

• html 标签库

  1. 设置类标签

     <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>
     

  2. 显示类标签

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

  3. 效果标签

     <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

• js

  1. 语法

     • 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){ }附加判断类型

  2. 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()//调试输出

  3. 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);
     					}
     

  4. 面向对象

     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: { },
     ……
     })

bootstrap

css样式库，将界面默认好看，栅格（动态响应式布局）

• 栅格：row，col-md-8，一行12个栅格

vue

• 前端框架（js库+样式库+开发模式/设计标准）

内容总结

以上是互联网集市为您收集整理的JAVA培训-前端总结全部内容，希望文章能够帮你解决JAVA培训-前端总结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端