JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序

一、html/css

1. 什么是盒子模型？

padding+border+width/height

2. float 浮动

（1）浮动的特性

脱离文档流

行内变成块

能设置宽高

同级元素有浮动，必须全部都浮动

宽度默认变窄，窄到内容的宽度

浮动后到一行

文本环绕

（2）清除浮动?

clear:both;

clearfix

clear:after{display:block; content:''; clear:both;}

clear{zoom:1;}

overflow:hidden;

3. position 定位

（1）相对定位——relative

不脱离文档流、相对自身定位、行内不变块

（2）绝对定位——absolute

行内可以变成块、脱离文档流、相对于有定位的父级，如果没有找body、宽度默认变窄，窄到内容的宽度

（3）固定定位——absolute

脱离文档流、相对于可视区定位、不兼容ie6、行内元素变块、宽度默认变窄,窄到内容的宽度

二、基础知识

1. JS是做什么的? ------写效果做交互操作样式

2. alert(456) 带确定按钮的弹出框 -------主要用于调试程序

3. 遇到程序不对，第一件事---->F12 ---- chromeF12->右下角,如果有红点:有错

4. 引号：

(1) 数字 0-9 不用加引号

(2) 字母+中文字符串需要加引号 (变量除外)

(3) 对于JS来说:单引或双引都可以

外面用双引,里面用单引

外面用单引,里面用双引

5. JS所有普通事件都是小写 onclick

onclick/onmouseover/onmouseout

6. 等号

= 赋值 == 等于

a=4; 是将4这个值赋值给a

7. 所有标签都可以给事件，都可以加ID，都可以被操作

所有样式都可以操作

8. 遇到复合样式，将横杠去掉,后面首字母大写

font-size -> fontSize padding-right ->paddingRight

9. 函数：可重复调用的代码块

无论在什么情况什么地方函数名() 就是调用函数

10. 在JS里.长得像的都可以合并

11. 变量——存储数据的容器

(1)一定要 var开头，第二次不用加var，可以直接用，如果第二次赋值，会将上一个值覆盖

(2)对大小写敏感 a A 不是一个变量

(3)以字母和下划线开头

(4)变量（看不到值）不需要加引号，字符串字面量需要带引号

var 变量名=变量值;

var 变量名='abc';

var 变量名=12;

var 变量名=document.getElementById('');

var a=b=c=4; 只有a有var

var a=4，b=5; 都有var

(5)局部变量只能在定义它的函数里使用

(6)全局变量： JS自动放到前面不知道具体是什么值，先给一个undefined

定义函数可以放到调用函数后面，JS会自动将所有的函数放到最前面定义 -->全局函数

(7)变量没有预解析.

12. class 易于维护，用style或class都可以 ------原则：不能混用

13. xxx.style.xx 赋值在行间读的时候也读的行间，行间层级最高

三、事件：用户操作

***兼容性：document.getElementById(' ') ---低版本火狐不兼容

***元素属性操作：obj.style(……)

四、编写js的流程

1.布局：HTML+CSS

2.属性：确定要修改哪些属性

3.事件：确定用户用哪些操作

4.js编写：在实践中，用js来修改页面元素的样式

五、参数

（1）参数：声明时，在括号里多了一点东西。参数名是自定义的，相当于建了一个局部变量 var n=……

（2）function 函数名（参数）{语句}

函数名（参数值）

（3）调用的时候给的参数值

（4）当值可以变动的时候

（5）参数可以有多个值。

function 函数名（参数1，参数2，…）{语句}

函数名（参数1，参数2，…）；

六、函数

1.函数定义：function 函数名(){ 代码; }

2.函数调用：函数名();

只声明，啥都不做；只调用，会报错。函数在哪儿定义不重要，重要的是在哪儿调用。

例一：

var a=15;--------------------15

function show(){-------------不执行

alert(a);

}

var a=5;---------------------5

show();----------------------调用，此时a=5

例二：

var n=4;

var n2=55;

var a1=function(){ //定义函数

//alert(abc); //没有提过一个变量叫abc，所以报错

}

function a(b1,b2,b3){

alert(b3); //传几个都可以，可以不用

}

a(n,5,'abc');

例三：

var a1=function(){

alert(123);

}

alert(a1);

function a(f){

//相当于 f=a1 把a1传进去，用f接收，相当于给a1又取了一个名字叫f

f();

}

a(a1);

4. 传参变颜色

function setColor(c){

var oBox=document.getElementById('box');

oBox.style.background=c;

}

5. 恢复样式

function fn(a,b){

var oBox=document.getElementById('box');

if(a=='tt'){

oBox.style.width='400px';

oBox.style.height='400px';

oBox.style.background='red';

oBox.style.display='block';

}else{

oBox.style[a]=b;

}

七、网页换肤

1.任何标签都可以加ID，包括link、html

2.任何标签的任何属性都可以修改

3.html里怎么写，js里就怎么写(className和复合样式例外)

兼容性问题：objtxt.title='……' 火狐不支持

八、if判断

1.例子：

#box{display:none;}

if(oBox.style.display=='none'){

oBox.style.display='block'; //读取行间样式，第一次点的时候没有行间样式所以为空，第一次判断不成立，所以要点击两次。所以应该把第一次要做得事情放在else里。

}else{

oBox.style.display='none';

}

2. else部分可以省略

九、扩展

1.为a链接加js

2.className问题

原本自带的属性可以直接操作。只有一个例外class，是Js的关键字（保留字），所以在js中要写成className

十、浏览器执行顺序

加载-----> 解析 -----> 执行

JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序相关推荐

前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...
微型计算机中储存器可分啊喂,01第一章微型计算机基础知识..ppt
01第一章微型计算机基础知识. 学习方法学习方法很重要复习并掌握先修课的有关内容课堂:听讲与理解.适当笔记课后:认真复习.完成作业实验:充分准备.勇于实践 3.计算机发展简史 1)机械计算机 ...
学设计需要会哪些基础知识？设计的基本原则是什么？
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享学设计需要会哪些基础知识?设计的基本原则是什么?从美术到现代网页设计,设计的基础是每种视觉媒介的基础.它们甚至出现在 ...
自用的快速复习Java基础知识，不适用于每一个人
自用的快速复习java基础知识,不适用于每一个人问题背景 1. 类定义出来的变量称为**对象** [IDEA安装](https://www.jb51.net/article/193853.htm) ...
Python复习笔记——基础知识
Python复习笔记-基础知识文章目录 Python复习笔记-基础知识 Python变量基于值的内存管理方式赋值语句的执行过程 Python定义变量名的规范运算符和表达式加+ 乘* 除/ % ...
【JS实现网页换肤】
JS实现网页换肤单击俩个按钮实现网页换肤的功能,如下图所示: <body><button>皮肤1</button><button>皮肤2</bu ...
什么是人们常用的计算机设备之一,计算机：复习二基础知识复习
<计算机:复习二基础知识复习>由会员分享,可在线阅读,更多相关<计算机:复习二基础知识复习(15页珍藏版)>请在人人文库网上搜索. 1.基础知识复习2,计算机系统,一.知识框图 ...
一键换肤代码html,js实现简单的网页换肤效果
中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了步骤: 1.在设计HTML代码时,用 ...
计算机vb基础知识,2018年计算机二级考试VB基础知识：参数的传递
2018年3月计算机等级考试即将开始,小编在这里为考生们整理了2018年计算机二级考试VB基础知识,希望能帮到大家,想了解更多资讯,请关注出国留学网的及时更新哦. 2018年计算机二级考试VB基础知识 ...

JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序

JS一起学01：css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序相关推荐

最新文章

热门文章