零基础学习web开发技术总结分享

Posted 2021-01-24

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文档，在</head>结束标签上边加

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>;

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

3、 JQuery入门

1. 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选择器返回的结果全是伪数组。

2. 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元素的运动效果。

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

举个例子：

<div id="box">我是JQ扩展性实现的高亮体字</div>

下面是实现：

$.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 代码

<div id="heart"></div>

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