1. 首页
  2. 前端

转行IT选择web前端开发,这些技术是必备的

转行IT选择web前端开发,这些技术是必备的

 

1、 opacity与RGBA

对元素进行透明度的设置时,经常用到的有opacity与background -color:rgba(),但两者有所不同;对比:rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,而rgba()只作用于元素的颜色或其背景色,两者语法:

opacity(0-1)

background-color:rgba(r,g,b,a)//a 就是透明度 值0-1;

基于两者的区别与开发时的需求RGBA的方法相对于前者的方法比较实用。

2、 javascript中函数的概念、作用、创建、调用

1.JavaScript的认识。

JavaScript作为一种脚本语言,不同于C++/Java等语言,它更加灵活,但同时也更加令人无奈。JavaScript包括三个部分,分别是Ecmascript,DOM,BOM。Ecmascript是Javascript的标准制作者协会,规定其语法和基本对象,DOM全称为Document Object Model,顾名思义文档对象模型,主要针对浏览器中的文档进行操作,BOM全称为Bowser Object Model,浏览器对象模型,主要针对浏览器的各个基本属性如location等。JavaScript中数据的基本类型有数值、字符串、布尔值、undefined、null和Object等,个人认为其中最难学的便是Object类型的操作了,下面针对Object类型中的函数做一些总结。

2.函数的概念作用

面向对象编程思想的特点主要有封装性、继承性和多态性,面向对象程序设计离不开函数的封装,函数的封装增强了代码的可读性,使代码的结构更加清晰便于理解,另外在不同的需求中方便进行不同的调用。

3.函数的创建

函数的创建大概有3种方式。

① 通过函数的声明进行创建。如:

Function box(){

Console.log(‘hello’);

};

Box();

备注:此种方式创建函数默认会有一个返回值,即this,而这个this便是全局对象window。另外函数 的创建必须有函数的调用,否则函数的创建是不会同步执行的。

② 通过函数的表达式进行创建。如:

Var box=function(){

Console.log(‘hello’);

}

Box();

备注:这种方式创建的函数也必须进行调用,否则函数的创建是不会随代码同步执行的,另外函数的 创建必须在函数的调用之前。

③ 定义构造函数。如:

Var fun=new Function();

备注:这种函数创建方式,函数创建的同时可以自己调用。

4.函数的调用

函数的调用主要有4种方式。

【1】作为函数去调用,如 函数名()。

这种函数内部的this指向是window,所以函数内部不能定义window为变量,否则程序会崩溃。

【2】作为方法去掉用。

这种调用方式内部this指向是函数对象本身。如:

Var car={

Color:‘red’,

Length:‘3’,

Desc:function(){

Return ‘这辆车是’+this.color+‘的,长度为’+this.length+‘米’;

}

}

Car.desc();

备注:创建的car对象拥有颜色和长度的属性,同时有自我介绍的方法,这里的this指向car对象。

【3】使用构造函数调用。

Function car(color,length){

This.color=color;

This.length=length;

}

Var x=new car(‘red’,‘3’);

X.color;

备注:构造函数调用创建一个新的对象,该对象继承构造函数的属性和方法。

【4】作为函数方法调用函数。

JavaScript中的函数是对象,call()和apply()是该对象拥有的方法,两个方法都可以调用函数本身,这两个方法中的第一个参数都是函数本身。如:

Function chengfa(a,b){

Return a*b;

}

Chengfa.call(obj1,10,2);//obj1的返回值为20

备注:函数中a为函数本身即chengfa(),因为call()方法中可以有多个参数,所以b依次为10,2。

Function chengfa(a,b){

Return a*b;

}

arr=[10,2];

Chengfa.apply(obj2,arr);//函数返回值为20。

备注:函数中a为函数本身即chengfa(),b为arr数组。

5.函数的深刻认识。

个人认为:如果想对函数进行更加深入的了解和认识,可能要先了解JavaScript的运行机制,在了解的同时,充分认识函数的执行环境和变量的存储。

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。

jQuery,顾名思义,也就是JavaScript和查询(Query),jQuery是免费、开源的。它可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

1. 引入JQuery

创建一个新的HTML文档,在结束标签上边加

这样的一个标签,引进JQuery的js文件。

3、 JQuery入门

JQuery选择器是JQuery中最核心的内容,相比较原生JS来说JQuery的中选择器更加方便更
加简练,原生JS中选择器:

document.getElementById(‘box’);

document.getElementsByTagName(‘div’);

document.getElementsByClassName(‘box’);

document.querySelector(’.box’);

document.querySelectorAll(’.box’);

往往常用的就上述的五种。而JQuery的选择器:

ID选择器$(“#box”);

类名选择器:$(“.box”);

标签选择器:$(“div”);

通配符选择器:$(“*”);

群组选择器:$(“div, p, a”);

后代选择器:$(“#box p”);

简单来看就可以看出JQ的选择器相比较原生的来说要精简不少,用起来也要方便不少,但是原生JS中选择器返回的结果可能是一个DOM元素或者是一个伪数组,但是JQ选择器返回的结果全是伪数组。

JQ基本dom操作也是JQ入门来说相对简单的一些操作,相比较原生JS来说,也是更加精炼。JQ中的设置方法一般都是可以为全部选中元素设置的。
$(“.box”).attr(“name”,“test1”)

为类名为box的元素设置name的自定义属性,属性值为test1,

如果attr中只传一个参数”name” 那么就是查询类名为box中的自定义属性的属性值。

$(“.box”).removeAttr(“name”)

相对应的,上述的方法就是删除类名为box的name自定义属性。

因为class在整个编程中都是特别常用的属性,所以JQ中专门为class设置了方法。

$(“.box”).addClass(“item”)

上边这个就是为每个匹配的元素添加item类名。

$(“.box”).removeClass(“item”)

上述就是删除。

$(“.box”).toggleClass(“item”)

自我感觉这个方法用处就没有上边两个方法用的多, 这个方式就是如果元素存在类名item 那么就删除,如果元素上没有item类名,那么就添加。

$(“.box”).animate({width:300},1000)

上述的方法就是给类名为box的元素添加一个运动,使它的宽度变成300px,第二个参数 是时间,毫秒做单位,也就是说在1000毫秒内类名为box的元素宽度变成300px。

有了运动自然会有结束运动的方法

$(“.box”).Stop()

上述就是结束所有在类名为box元素的运动效果。

JQuery的扩展性,JQ的可扩展性为我们也是提供了便利,可以自己封装一些需要的功能,其扩展方法就是使用$.fn来实现的。
举个例子:

我是JQ扩展性实现的高亮体字
下面是实现:

$.fn.highlight = function(){

this.css(“background-color”,”#fffceb”).css(“color”,”#d85030″)

return this;

}

$(“#box”).highlight();

这样就可以实现一个为高亮体字的一个自己封装的方法。

JQuery中这样的方法还有好多好多,简单来说相比较原生的js来说JQ框架真的是要方便不少。

4、 心得体会

1.先从最简单的开始写,一点一点的去往上添加功能。一口吃不成个胖子,所有复杂的程序都是从最简单的演变而来的。

2.碰到程序报错或者功能没有实现的,一次只研究一个问题,那将会更容易找到问题的关键。必须确保这个问题解决之后,再去转移到另一个问题上。

3.打印日志。这是个究极强大的功能。在写程序的时候打印日志就能通过浏览器来了解程序状态,如果程序出错不能实现相应的功能那就打印日志通常就能很快的发现程序中的错误。

4.BUG bug总是难免会遇到的,最好能够做成可以快速的排除、修复bug。

5.动手去做, 代码一定需要多写多练你才能去熟练和掌握。

6.带着问题睡觉 如果你有一个很难的问题,那么你可以带着问题睡觉。有科学研究表明(滑稽),这样做虽然你表面上并没有在主动思考问题,但你的潜意识却这么做了。其结果就是,第二天再去研究问题,解决办法就呼之欲出了。

7.复习和预习 每天早上过来的时候可以复习一下以前讲过的知识,有效的巩固一下所学的东西。以后时间长了不去复习就会忘记。晚上回去前半个小时可以预习一下明天要讲的知识,这样在第二天听课的时候就回轻松一点,晚上看不懂的东西第二天一下就能弄懂了,还可以提高听课的注意力。

5、 css小项目

css绘制爱心

css 代码

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,#heart:after {

position: absolute;

content: “”;

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

html 代码

总体来说,现阶段前端的课程学习还在继续,学海无涯,前端接触的越深就会发现需要学的东西还有很多,希望大家共同努力,共同学习,加油!

1. Web前端是做什么的?

学习之前我对网页设计、UI、网页制所盒Web前端的概念很混淆,上网查了才明白:网页设计是指运用一些软件对网站进行美化,解决“好看”的问题;UI是指人与界面互动的优化,解决“舒适”的问题;网页制作着重PC端网页制作;而Web前端包括PC端和移动端的前端界面制作。

2. Web前端的基础技能及工作职责是什么?

爱它就要更深入了解它,学习Web前端就要清楚地知道Web前端工程师需要什么基础技能及其工作职责。其实,这“很简单”,只要你精通HTML+css(包括现在的HTML5+CSS3)、JavaScript、JQuery,了解界面设计,了解后端编程,服务器知识+后端语言基础。

3. 怎么样才能学好拿高薪,Web前端开发职业的前途怎样?

个人觉得三百六十行,行行都蕴藏的无限可能,干一行就爱一行,只要脚踏实地,努力学技术,技术硬了,自然会有前途和“钱”途。但是努力学习之前,必须要明确的目标,否则就是“看起来很认真”而已。

4. 如何学?

说了一堆,终于说到如何学习Web前端了。我自己通过向师兄和同学请教,以及通过度娘、知乎及麦库搜索,给自己定下了学习方法。

1)html+css这部分 w3school在线教程上学习,也可以结合视频或者在慕课网学习,学边练。过一遍后模仿一些网站做页面。

学习这部分,我整理出的可以参考的书单是:

《Head first HTML&CSS》好入门,将w3school结合此书

《CSS权威指南(第三版)》有时间反复看,类似犀牛书

《图解CSS3:核心技术与案例实践》前几本停留在CSS2.1,2.1是基础

《CSS禅意花园》大牛所写,精粹

2)JavaScript w3school学习一些基本语法和定义,然后看书,实践。

这部分是重点及难点,我整理出的可以参考的书单是:

《JavaScript DOM编程艺术》(第二版)好入门,最新2010版()

《JavaScript高级程序设计》(第三版)Zakas

《JavaScript权威指南》犀牛书

《JavaScript语言精粹》老道所写 稍微入门以后看,了解中高级概念

3)学习一些后端编程,比如Jquery。

可以参考的书有:《JavaScript&Jquery交互式Web前端开发》、《锋利的Jquery》

下面是我的一个计划表。

第一步:3周(11.1-11.20)

完成html+css这部分的学习,主要通过w3school在线教程学习,重点参考《Head first HTML&CSS》

第二步:4周

(11.21-12.20)

完成JavaScript部分的学习,主要看书《JavaScript DOM编程艺术》(第二版)、《JavaScript高级程序设计》(第三版),结合线上学习

第三步:3-4周

完成第三部分的学习,锋利的Jquery

复习巩固6-12周

进一步巩固所学习的知识,并通过制作实例提高能力,最后找实习单位。附:本人收集的网络资源

不想当裁缝的司机,不是个好厨师,撑起Web前端开发的一片天空需要十八般武艺,需要走一条很长的路,但是我会坚持下去,不求健步如飞,但求一步一脚印。

本文来自投稿,不代表程序员编程网立场,如若转载,请注明出处:http://www.cxybcw.com/186709.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code