css与js基础

CSS样式

1 宽高设置

块元素可使用 wid

1字体

font-family :  文本类型

font-size     字体大小

font-style 字体样式 斜体italic   正常normal

font-weight    字体粗细(100-900) 加粗bolder 正常normal 细体lingther

chorm默认16px 微软雅黑

2 列表

list-style 标记修改 none去除 可设置样式

list-style-position 设置标记位置 inside列表li内 outside 列表li外

3 盒子模型

内容+padding+border+margin

padding 内边界(内部背静延伸可见)

boeder 边框

margin 外边界(不可见)

设置方式   padding:50px(四边均相同)

padding:50px,10px(上下50,左右10)

padding:50px,10px,5px(上50,右10,下5,左同右)

padding:50px,10px,5px,1px(上右下左)逆时针

4 元素的居中调整

line-height 行高

text-align    水平方向的对齐方式 块和行内块能够使用(设置居中)

vertical-align 垂直方向的对其方式 行内|行内块有效(设置高度居中)

5 浮动

float :left|right 向指定方向移动,遇到其他浮动元素或浏览器边界停止

半脱离文档流 内容会让出前面浮动元素的位置(原本用于实现文字环绕)

主要用于实现块元素并排显示

浮动的清除

1属性设置 clear:left/right/both 元素的左边或右边不能有浮动元素 建议使用both

只能控制一侧,另一侧由其他浮动元素控制,避免同行显示

2 浮动元素外套父元素   设置父元素高度或将设置父元素属性overflow:hidden

通过父元素控制包含主内部的浮动元素,需要父元素高度适应子元素

6 定位

position定位属性包括:

relative   相对定位 不脱离文档流  相对于自身原位置定位

能够实现块元素行连接,但原位置仍然占着

absolute   绝对定位    脱离文档流(取消原位置) 绝对位置

若父元素设置relative则相对父元素移动

若父元素未设置relative则相对窗体定位

fixed      固定定位 脱离文档流(取消原位置)

相对浏览器的视图定位 无视滚动条

需要与top bottom left right属性设置连用

7 图片属性设置 high=100%, width=100%表示占着父原则的所有空间

JavaScript

1 基本概念

Js客户端脚本语言:ECMAScript 核心基础语法 描述语法与基本对象

DOM 文档对象模型 描述处理网页内容的方法和接口

BOM 浏览器对象模型  描述与浏览器交互的方法与接口

Js中一切都是对象

2 定义方式

行内 标签内定义

内部 html文档内的script标签内

外部 外部定义js文件,在引入html中

一个script不能同时定义js代码又引入js文件

Js在html的定义位置建议

Head中     便于维护,可能拿不到元素节点,需要设置window.onload

Body结束前  能够拿到元素所有节点

三种注释与java相同

3 数据类型

简单数据类型

String      字符串  显示黑色 单引号/双引号括住 转义字符适用

Number      数值型  显示紫色 包括 整数,小数,NaN

Boolean     布尔型  true/false

Undefined  未定义  赋值未定义;声明未赋值

Null        空      赋值null,获取不到元素

function    方法 function(参数){}

复杂数据类型/对象类型

{key:value, key:value} 键值对形式的数据

获取数据类型的运算符

typeof(数据)    null与方法返回object

4 变量作用域

变量声明

1 var 变量名 (可直接赋值,可先声明后赋值,根据赋值确定数据类型)

2变量名     (直接声明)

3多个连续声明格式: var a,b,c

var a,b,c =10 (这给c赋值了) var aa=11, bb=12, cc = 10(全部赋值)

4若对已声明的对象重写声明无效,但同时声明赋值能够覆盖原值

var box = 10;var box=15;   box值为10

作用域包括两类外部script标签和内部function方法

全局变量作用域为整个script  局部变量只在function中有用

作用域提升

var声明的变量在作用域中存在作用域提升的作用,但只能提升变量声明(包括方法中)

局部变量var变量在外部无法使用

例外 没有var声明的方法局部变量在方法被调用后,

外部在方法以下的代码能够使用该局部变量

5 数据类型转换

1自动转换

+-运算

数字(+-)boolean Boolean转为0(false)和1(true)

数值+字符串     字符串拼接

2 强制转换

String()       返回字符串  方法名则返回方法代码

Boolean()      非空字符串和非0数字 为ture;其他均false

Number()       空字符串和空格字符串 返回0

纯数字字符串        返回数字

非纯数字            NaN

boolean                0或1

null                   0

undefined              NaN

字符串转数字的方法(推荐)

parseInt() 分析字符串索引0位置的字符

若有效字符则找出首个有效整数 若首个并发有效字符返回NaN

parseInt(字符串,数字进制) 能够对进制数进行获取

parseFloat()分析首字符,以获取首部的有效小数 否则NaN 只识别十进制

5 运算符

==      直接比较内容(字符串与数字直接比较)

=== 同时比较数据类型和数据内容 先比较类型,若否直接false

!   取反可以重复使用 !!!true值为false

{ }不具备作用域效果,仅仅区分代码块

其余同java

6 数组

特点:不定长,存任意数据(多个类型存储),索引从0开始

创建:

[数据,数据,数据… ] 推荐

new Array( )    创建空数组

new Array(值1,值2…) 赋值创建

eg:  var arr=[true,false,1,'red']

索引赋值  数组名[索引]=值

若索引大于length,能够赋值,间隔元素为undefined

若索引为其他非正常值 将索引和值,作为数组自定义的属性存在,KV形式

遍历

普通for

for(i=0;i<arr1.length;i++){console.log(arr1[i]);}

for…in…循环

for(var 索引 in 数组){ console.log(i+'---->'+arr1[i]); }      能够遍历所有值包括非正常索引

forEach(function(指代值,指代索引,数组)) 指代值和指代索引随便选变量

方法

slice( ) 截取    原数组不改变

1个参数        从指定参数处截取到最后

2个参数        从参数1截取到参数2索引处 前闭后开

splice( ) 截取  原数组改变

1个参数        从指定参数处截取到最后

2个参数        从参数1截取,截取长度为参数2

3个及以上参数     从参数1截取,截取长度为参数2,参数3之后填充到原数组的截取位置

 

7 函数

函数声明

function 函数名([形参列表]){ ... }

调用       函数名(实参)

外部加括号,可转为函数表达式           之后再加( )直接调用

函数声明前加~ + - 转为函数表达式   之后再加( )直接调用

自调用的函数函数名不可再调用

函数表达式

var 变量=function [函数名](形参列表) { ... }

调用       变量(实参)

函数表达式后再加( )直接调用 注意,自调用后变量不可再调用

注意外部函数无法再通过方法名直接调用,单方法定义内部可以递归使用方法名

匿名函数

(function( ){ … } )( );

方法中可以使用 return返回返回值 , 若无return则视为返回Undefined

形参列表不需要指明数据类型

调用时缺少参数,形参视为undefined,参数多则按顺序获取