集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都前端学习路线:前端开发基础

发布者: 成都达内     浏览次数:     发布时间:2019-02-21 10:47:33

作为一名传统C/C++码农,在互联网时代的今天,不得不学习一些web开发技术,在自学前端开发的过程中,也亲身实践了两个项目,从基础编码到学会使用框架,收获甚多。...

  成都前端学习路线:前端开发基础

  作为一名传统C/C++码农,在互联网时代的今天,不得不学习一些web开发技术,在自学前端开发的过程中,也亲身实践了两个项目,从基础编码到学会使用框架,收获甚多。

  在决定开发Yue虚拟化平台时候,自己买了几本HTML5,CSS,JavaScript相关的基础书籍,开始自学之旅,在对前端开发流程有了初步认识后,就开始研发自己的项目。在研发过程中,大量的查阅文档资料,最终历时5个月,才将项目完成。那时候,每天晚上下班到家后,自己坐在书房里就开始编码,经常熬到后半夜,却也异常的兴奋,因为从事开发多年,当家里人再问我码农是做什么的时候,终于可以拿出直观的东西了。

  必定前端开发接触的少,也不是工作的主要部分,完全是因为兴趣,因此,平时开发前端机会也比较少,对于自己经常用到的模块,还是需要总结一下,下次可以直接引用。

  成都前端学习路线:前端开发基础

  javascript基础

  数据类型转换

  1.json->stringJSON.stringify(obj)2.string->json或objvar obj = eval("(" + jsonstr + ")”);3.obj->strobj.toString()4.number->strString(num)5.str->numberparseInt(str)

  获取对象(即:操作元素节点,nodeType值为1)

  文本节点就是文本内容

  标题

  ,h1本身就是一个元素节点var obj = document.getElementById("obj_id”) #通过HTML元素的ID属性直接定位,返回一个具体对象var objs = document.getElementByName(“objs_name”) #通过HTML元素的name属性定位,返回一个数组var objs = document.getElementTagName(“tagname”) #通过HTML元素标签名称定位,如:tagname是label,input,div等,返回一个数其他方法IE不支持,不建议使用,如:getElementByClass

  操作元素的属性(即:操作属性节点,nodeType值2)

  文本节点就是文本内容

  标题

  ,id,name,class就是属性节点1.部分属性可以通过node.id的方式访问属性节点2.通过dom方法var node = elem.getAttributeNode(“attir_name”) #获取属性节点,然后操作:node.nodeName,node.nodeValuevar node = elem.getAttribute(“attr_name”) #IE不支持,不建议使用

  JS操作文本(即:操作文本节点,nodeType值3)

  文本节点就是文本内容

  标题

  ,”标题”两个字就是文本节点步骤:获取元素节点—>获取元素节点的子节点方法:node.firstChild.nodeValue方式读写文本节点其实文本节点可以归类为元素节点的子节点

  新建一个完整的元素节点(包括属性节点和文本节点)

  成都前端学习路线:前端开发基础

  var newElem = document.createElement(“h1”) //创建一个h1元素节点给元素添加属性节点有2种方法:var newAttr = document.creaetAttribute(“id”) //创建id属性节点newElem.setAttributeNode(newAttr) //将属性节点附加到元素节点或newElem.setAttribute(“id”, “abc”) //直接给元素添加属性节点给元素添加文本节:newElem.createTextNode(“这是标题”)

  将一个元素节点添加到父节点

  var newElem = document.createElement(“h1”)parentElem.appendChild(newElem)

  将一个元素的子节点替换

  var element = element.replaceChild(newChild, oldChild)

  将一个元素在父节点删除

  var parent = document.getElementById(“parent”)var child = document.getElementById(“child”)parent.removeChild(child)

  js处理按钮事件

  document.getElementById(“btn”).onclick = function_name;function function_name(){ //do sth}

  js操作select下拉菜单

  var selected = document.getElementById("select_id”)1.获取选项值var index = selected.selectedIndex;var value = selected.options[index].value;2.添加新的optionselected.add(new Option(“新选项"))

  js操作input文本框

  var value = document.getElementsById("input_id").value;

  js操作单选按钮

  var radioBtns = document.getElementByClass(“class_radio”)var i = 0;for( i in radioBtns){ if(radioBtns.checked){//checked是布尔值 //do sth }}

  js操作复选按钮

  document.getElementById('identify').checked //返回值为布尔值

  置灰操作

  document.getElementById("id").setAttribute("disabled", "disabled");

  js操作css样式

  document.getElementById(“id”).style.color = “#FF0000”

  js获取URL参数(2种方法)

  方法1:

  function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }

  方法2:

  function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest; }

  使用方法:

  var hostname = getQueryString("hostname"); alert(hostname) var port = getQueryString("port"); alert(port) var password = getQueryString("password"); alert(password) var para=GetRequest(); alert(JSON.stringify(para))

  js打开新的窗口

  window.open(url, name, paras)函数,例如:window.open('url.html?hostname=1.1.1.1&port=1234')

  传统ajax与jQuery发送HTTP请求的方法

  传统Ajax方式:

  function ajax(url, fnSucc, fnFaild){ //1.创建对象 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); }else{ oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 oAjax.open('GET', url, true); //open(方法, url, 是否异步) //3.发送请求 oAjax.send(); //4.接收返回 oAjax.onreadystatechange = function(){ //OnReadyStateChange事件 if(oAjax.readyState == 4){ //4为完成 if(oAjax.status == 200){ //200为成功 fnSucc(oAjax.responseText) }else{ if(fnFaild){ fnFaild(); } } } };}

  jQuery方式:

  $.ajax({ url: “/xxx”, //URL method: “GET/POST/PUT/DELETE”, //HTTP请求类型 async: false, //同步为false,异步为true或默认不写 data: JSON.stringify(jsondata), //POST、PUT、DELETE才有 dataType: "json”, //返回数据类型 beforeSend: function (request) { //发送前做什么处理 request.setRequestHeader('X-CSRFToken', getCookie("csrftoken")) }, success: function (result) { //返回结果处理 //alert(JSON.stringify(result)) } });$.get({ url: "static/html/checkenv.html”, //发送请求的URL地址. data: "", //(可选参数) 要发送给服务器的数据,以 Key/value 的键值对形式表示,会做为QueryString附加到请求URL中 dataType: "json”, //返回数据类型 success: function (result, textStatus, jqXHR) {//返回结果处理 document.getElementById("mainsession").innerHTML = result; } });$.post({ url: "/api/xxx”, //发送请求的URL地址. data: JSON.stringify(jsondata), //(可选参数) 要发送给服务器的数据,以 Key/value 的键值对形式表示 ddataType: "json”, //返回数据类型 success: function (result, textStatus, jqXHR) { document.getElementById("mainsession").innerHTML = result; } });

  区别:

  1.$.ajax可以控制同步,异步请求,而$.get和$.post都是异步

  2.$.ajax可以发送前做预处理,而$.get和$.post都不行

  其他还有:

  load( url, [data], [callback] )

  getJSON(url,[data],[callback])

  jquery的便利

  可以通过jQuery快速实现对HTML-DOC的快速处理。

  id选择器$(“#id”).click(function (){ //do sth});类选择器$(“.class”).click(function (){ //do sth});

  此外,有些操作js无法实现,或实现起来比较复杂,需要用到jquery,遍历json对象:$.each()方法 或 $.map()方法

  CSS3与Bootstrap

  传统的CSS需要自己完成大量样式的编写,而bootstrap是一个基于css编写的强大样式库,在引用的时候,只需要对HTML元素的class属性中直接引用就可以了。

  成都前端学习路线:前端开发基础

  基本CSS概念方法:

  选择器原则:尽量使用ID选择器和class选择器

  ID选择器#id{ //some style}类选择去.class{ /some style}

  其他情况均根据以上两类去复合

  布局:

  默认每个元素占用一行如果想让两个元素在同一行,使用float属性如果想清除float属性,使用clear属性尽量使用相对布局,即:子元素相对于父元素的位置,position属性设置为relative每个元素都有盒模型,设置margin、border、padding属性

  定位:

  HTML元素的位置,position属性position:relative;相对定位,相对参照物就是他原来的位置,使用相对定位移动div时候,会覆盖其他divposition:absolute;绝对定位,相对于浏览器窗口,已经脱离文档流。一般弹出窗口会这么用(设置了z-index属性)

  层级关系(图层关系):

  HTML元素显示出图层关系,使用z-index属性,值越大越在上层。z-index值越大,越在最上层

  超出边界如何处理:

  如果浏览器窗口改变,overflow属性,值可以是:visable,hidden,scroll,auto,insert

  ©著作权归作者所有:来自51CTO博客作者Lee_1985的原创作品

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56