前端05 /js基础
昨日内容回顾
行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0)
rgb(255,255,255)#000000-#FFFFFF单词表示rgba(255,255,255,0.5)（透明度）
font-family 设置"微软雅黑","宋体" font-size 设置字体大小 默认的字体大小16pxfont-weight bold粗体
text-align 对齐方式 left(默认) right centertext-decoration 字体的划线 none underline overline line-throughline-height 设置行高 字体会自动在行高内垂直居中text-indent 缩进em或px单位
background-color :设置颜色background-image :url('xxx.jpg') background-repeat :no-repeat background-position :水平位置 垂直位置 (left center right) (top center bottom) background-attachment:fixed background-size :调整背景图片的大小background:颜色 背景图 是否重复 位置; border-style:solid; 设置边框样式border-color:颜色1 颜色2 颜色3 颜色4;border-width:10px; 设置边框宽度border: solid red 5px;border-top-style:dotted;border-top: solid red 5px;border-radius:边框圆角
不显示不占位 :none块级元素 : block行内元素 : inline行内块 : inline-block
content : width height 内容padding : 5px 内边距 padding-top ...border : 见上面margin : 外边距 margin-left ... 上下的盒子会塌陷 : 取上下间距之间的最大值 不设置border的父子盒子也会塌陷 更多的描述兄弟之间的关系,如果是父子之间的关系用padding来描述
float:left right浮动起来的盒子会脱离标准文档,且不在独占一行父盒子不能被子盒子撑起来清除浮动 : clear:both伪元素清除法:clearfix:after{ content:''; display:block clear:both; }overflow:hidden scroll auto 溢出部分如何处理?visible 默认 溢出了也会显示hidden 溢出部分隐藏auto scroll 溢出之后显示滚动条
position : relative absolute fixedtop:left:right:bottom:相对定位 : 相对自己原来的位置定位,还占据自己原来的位置绝对定位 : 相对于有定位的父盒子/整个html界面的位置,不占据原来的位置固定定位 : 相对浏览器窗口的(不独占一行，可以设置高和宽)设置0的时候，不需要加px
表示的在页面上标签显示的先后顺序1.值越大的越在前面显示2.设置的值没有单位没有范围3.浮动的盒子不能设置index4.从父现象:父级的优先级不高,儿子的优先级再高也没用（父级标签设置的index小，儿子设置的index再大也没用）
opacity:0.5是整个标签的透明度opacity和rgba的区别： opactiy是整个标签的透明度，rgba是单独给某个属性设置透明度
今日内容
1 javascript介绍
能够处理逻辑 可以和浏览器交互 不够严谨
javascript包含: ECMAscript js的一种标准化规范 标出了一些基础的js语法 DOM document object model 文本对象模型 主要操作文档中的标签 BOM browser object model 浏览器对象模型 主要用来操作浏览器
2 js引入和script标签
方式一:在html页写js代码 方式二: 引入js文件
3 结束符和注释
结束符; 是js代码中的结束符单行注释// alert('hello,world');多行注释/*多行注释*/ 4 变量
变量名 : 数字\字母\下划线\$创建变量的关键字var :var a = 1;(a=1不会报错，但是设置的是全局变量)创建变量的时候可以不指定数据类型创建变量但不赋值 :var a; a创建出来就是一个undefined未定义
5 输入输出
弹出框alert alert('hello') 弹出框中的内容是"hello"弹出输入框 var inp = prompt('问句') 弹出输入框,输入的内容会被返回给inp控制台输出 console.log(变量或值) 6 基础的数据类型
6.1 查看类型
typeof 变量;typeof(变量);
6.2 数字number
整数 var a = 1小数 var b = 1.237保留小数 b.toFixed(2) //1.24
6.3 字符串String
var s1 = '单引号'var s2 = '双引号都是字符串的表达方式'
6.4 string 类型的常用方法
属性 : length方法:.trim() 去空白.trimLeft() 移除左边的空白.trimRight() 移除右边的空白a.concat('abc') a拼接'abc'串 ///字符串拼接：var c=a+b;charAt(索引) 给索引求字符indexOf(字符) 给字符求索引indexOf(字符，n) 给字符求索引，从索引为n的数字开始往后找slice(start,end) 顾头不顾尾,可以用负数,取子串.toLowerCase() 全部变小写 .toUpperCase() 全部变大写.split(',',2) 根据(第一个参数)分隔符切割,切前多少个结果（python中后面的数字是从第二个','进行分割） 6.5 boolean 布尔值
true : [] {} false : undefined null NaN 0 '' 6.6 null 空和undefined未定义
null 表示空 boolean值为falseundefined 没有定义 创建变量但是不赋值 boolean值为falsenull表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。 var a; -- undefined null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
6.7 object类型
var a = 'xx';var b = new String('oo'); 7 内置对象类型
7.1 数组 Array
创建(object类型):var arr = ['a','b','c'];var arr2 = new Array();typeof arr\arr2 -->object索引操作:arr[0] 查看arr2[0] = 'alex' 赋值操作
Array常用的属性和方法
属性:length(数组长度)方法:.push(ele) 尾部追加元素.pop() 删除尾部的元素 示例: var a = [11, 22, 33, 44]; var b = a.pop(); 结果: a -- [11, 22, 33] b -- 44.unshift(ele) 头部插入元素 示例: var a = [11, 22, 33]; a.unshift('aa') a -- ["aa", 11, 22, 33] .shift() 头部移除元素 示例: var a = ["aa", 11, 22, 33]; a.shift() -- 'aa' a -- [11, 22, 33];.slice(start, end) 切片 示例： var b = a.slice(0,3); b -- [11, 22].reverse() //在原数组上改的 反转 示例： var a = [11,22,33]; a.reverse() a -- [33,22,11].join(seq) //a1.join('+')，seq是连接符 将数组元素连接成字符串 示例: var a = ['aa','bb','cc']; var b = a.join('_'); b -- "aa_bb_cc";.concat(val, ...) //连个数组合并,得到一个新数组，原数组不变 连接数组 示例： var a = ["aa", "bb", "cc"]; var b = [11,22]; var c = a.concat(b); c -- ["aa", "bb", "cc", 11, 22];.sort() //排序 示例: var a = [12,3,25,43]; 对a进行升序排列: 1 定义函数 function sortNumber(a,b){ return a - b }; 2 var b = a.sort(sortNumber) b -- [3, 12, 25, 43]sort 规则: 如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下： 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。 若 a 等于 b，则返回 0。 若 a 大于 b，则返回一个大于 0 的值。.splice() //参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) 删除元素，并向数组添加新元素。示例: var a = ['aa','bb',33,44]; 单纯删除:a.splice(1,1) a -- ["aa", 33, 44] 删除在替换新元素: var a = ["aa", 33, 44]; a.splice(0,2,'hello','world'); a -- ["hello", "world", 44]; 7.2 自定义对象（相当于python字典）
索取值var a = {'name': 'alex','age' :48};a['age']; -- 48a.age; -- 48键可以不用加引号（会自动处理成字符串）[]中括号取值必须加引号 8 类型查询
9 数据类型之间的转换
string --> int parseInt('123') //123 parseInt('123abc') //123 parseInt('abc123') //NaN parseInt('abc') //NaN not a numberstring --> float parseFloat('1.233') float/int --> String var num = 123 String(123) var str = num.toString()任意类型 --> Boolean Boolean(数据)字符串和数字相加 --> 字符串字符串和数字相减 --> 数字 10 运算符
10.1 赋值运算符
= += -= *= /= %=示例: n += 1其实就是n = n + 1
10.2 比较运算符
> < >= <= == != 不比较类型=== !== 比较类型和值(常用)==（弱等于）===（强等于）示例: var a = 11; var b = '11'; a == b -- true a === b; -- false
10.3 算数运算符
+ - * / % ** ++ --var a = 1undefinedvar b = a++ // a=2 b=1（先进行逻辑，再进行自加1）var c = ++a // a=3 c=3（先进行自加1，再进行逻辑）i++,是i自加1，i--是i自减1 i++的这个加1操作优先级低，先执行逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑示例: var a = 100; a++;或者++a; -- 101 a自增1 a++和++a的区别,示例: var a = 102; a++ == 102; -- true a -- 103; ++a == 103; -- false a -- 104;
10.4 逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非true && true //truetrue || false //true!true //false
11 流程控制
特点:所有的代码块都是用{}标识的所有的条件都是用()标识的 11.1 条件判断
11.1.1 if语句
if (true) { //执行操作}else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行} 11.1.2switch切换（case语句）
var err_type = 'info' switch(err_type) { case 'warining': console.log('警告'); break; case 'error': console.log('错误'); break; default: console.log('没错') }示例: var a = 1; switch (a++){ //这里day这个参数必须是一个值或者是一个能够得到一个值的算式才行，这个值和后面写的case后面的值逐个比较，满足其中一个就执行case对应的下面的语句，然后break，如果没有加break，还会继续往下判断 case 1: console.log('等于1'); break; case 3: console.log('等于3'); break; default: case都不成立,执行default console.log('啥也不是!') } 11.2 循环语句
11.2.1 while
var i = 1; //初始化循环变量while(i<=9){ //判断循环条件 console.log(i); i = i+1; //更新循环条件}示例： var i = 0; var a = 10; while (i < a){ console.log(i); if (i>5){ continue; break; } i++; }; 11.2.2 for
for (var i=0;i<10;i++) { //就这么个写法，声明一个变量，变量小于10，变量每次循环自增1，for(;;){console.log(i)}；这种写法就是个死循环，会一直循环，直到你的浏览器崩了，就不工作了 console.log(i);}循环数组：var l2 = ['aa','bb','dd','cc']方式1for (var i in l2){ console.log(i,l2[i]);}方式2for (var i=0;i 11.2.3 三元运算符
var 结果 = boolean表达式 ? 为true返回的值:为false返回的值 var a=10;var b=11;var c=a>b ? a:b;
12 函数
function 函数名(参数){ 函数体 return 返回值}函数名(参数)//注意 : 传递的参数可以和定义的个数不一样,但是不要这么写// 返回值只能有一个一个函数体内的变量在另一个函数里边是不能使用的 //arguments伪数组function add(){ console.log(arguments);}add(1,2,3,4)function add(a,b){ console.log(arguments);}add(1,2,3,4) 12.1 匿名函数
var add = function(){ console.log('hello,world');} //add()调用 12.2 自调用函数(自执行函数)
(function(a,b){ console.log(a,b)})(1,2) 13 函数的全局变量和局部变量
局部变量： 在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。全局变量： 在函数外声明的变量是*全局*变量，网页上的所有脚本和函数都能访问它。变量生存周期： JavaScript变量的生命期从它们被声明的时间开始。 局部变量会在函数运行以后被删除。 全局变量会在页面关闭后被删除。
14 作用域
首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。var city = "BeiJing";function f() { var city = "ShangHai"; function inner(){ var city = "ShenZhen"; console.log(city); } inner();}f(); var city = "BeiJing";function Bar() { console.log(city);}function f() { var city = "ShangHai"; return Bar;}var ret = f();ret();闭包: var city = "BeiJing"; function f(){ var city = "ShangHai"; function inner(){ console.log(city); } return inner; } var ret = f(); ret(); 15 面向对象
function Person(name){ this.name = name;};var p = new Person('taibai'); console.log(p.name);Person.prototype.sum = function(a,b){ //封装方法 return a+b;};p.sum(1,2);3 16 date对象
//方法1：不指定参数var d1 = new Date(); //获取当前时间console.log(d1.toLocaleString()); //当前2时间日期的字符串表示//方法2：参数为日期字符串var d2 = new Date("2004/3/20 11:12");console.log(d2.toLocaleString())常用方法var d = new Date(); 使用 d.getDate()//getDate() 获取日//getDay () 获取星期 ，数字表示（0-6），周日数字是0//getMonth () 获取月（0-11,0表示1月,依次类推）//getFullYear () 获取完整年份//getHours () 获取小时，从0开始//getMinutes () 获取分钟，从0开始//getSeconds () 获取秒，从0开始//getMilliseconds () 获取毫秒//getTime () 返回累计毫秒数(从1970/1/1午夜),时间戳