前端05 /js基础
前端05 /js基础
昨日内容回顾
css选择器的优先级
行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0)
颜色
rgb(255,255,255)
#000000-#FFFFFF
单词表示
rgba(255,255,255,0.5)(透明度)
字体
font-family 设置"微软雅黑","宋体"
font-size 设置字体大小 默认的字体大小16px
font-weight bold粗体
文本
text-align 对齐方式 left(默认) right center
text-decoration 字体的划线 none underline overline line-through
line-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:边框圆角
display
不显示不占位 :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
overflow
溢出部分如何处理?
visible 默认 溢出了也会显示
hidden 溢出部分隐藏
auto scroll 溢出之后显示滚动条
定位
position : relative absolute fixed
top:
left:
right:
bottom:
相对定位 : 相对自己原来的位置定位,还占据自己原来的位置
绝对定位 : 相对于有定位的父盒子/整个html界面的位置,不占据原来的位置
固定定位 : 相对浏览器窗口的(不独占一行,可以设置高和宽)
设置0的时候,不需要加px
z-index
表示的在页面上标签显示的先后顺序
1.值越大的越在前面显示
2.设置的值没有单位没有范围
3.浮动的盒子不能设置index
4.从父现象:父级的优先级不高,儿子的优先级再高也没用(父级标签设置的index小,儿子设置的index再大也没用)
透明度opacity
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代码
<script>
alert('hello,world')
</script>
方式二: 引入js文件
<script src="first.js"></script>
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值为false
undefined 没有定义 创建变量但是不赋值 boolean值为false
null表示值是空,一般在需要指定或清空一个变量时才会使用,如 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']; -- 48
a.age; -- 48
键可以不用加引号(会自动处理成字符串)
[]中括号取值必须加引号
8 类型查询
9 数据类型之间的转换
string --> int
parseInt('123') //123
parseInt('123abc') //123
parseInt('abc123') //NaN
parseInt('abc') //NaN not a number
string --> 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 = 1
undefined
var 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 //true
true || 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']
方式1
for (var i in l2){
console.log(i,l2[i]);
}
方式2
for (var i=0;i<l2.length;i++){
console.log(i,l2[i])
}
循环自定义对象:
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
console.log(i,d[i],d.i) //注意循环自定义对象的时候,打印键对应的值,只能是对象[键]来取值,不能使用对象.键来取值。
}
可以循环自定义对象(在for循环内点不可以取值)
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午夜),时间戳
前端05 /js基础的更多相关文章
- 05 JS基础DOM
JS的window对象定时器: window下一些方法: <script> 弹出 window.alert('hello') 返回布尔值 var ret = window.confirm( ...
- web前端——Vue.js基础学习
近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...
- 前端之js基础篇
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...
- web前端——Vue.js基础学习之class与样式绑定
打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head ...
- js基础——运算符
爱创课堂前端培训--js基础 运算符一.运算符 运算符(Operators,也翻译为操作符),是发起运算的最简单形式.分类:(运算符的分类仁者见智,本课程进行一下分类.)数学运算符(Arithmeti ...
- 前端面试题目汇总摘录(JS 基础篇)
JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 前端面试题目汇总摘录(JS 基础篇 —— 2018.11.02更新)
温故而知新,保持空杯心态 JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string type ...
- 前端-js基础
HTML三把利剑之一,浏览器具有解析js的能力 一.js基础 在HTML中可以将JavaScript/JS的代码写在head中,被script标签所包裹,当浏览器解释HTML时,遇到style标签时, ...
随机推荐
- BUAA_OO_2020_Unit3_总结博客
BUAA_OO_2020_Unit3_总结 2020年春季学期第十三周,OO第三单元落下帷幕,对这个单元的内容JML有了更深的理解,但也有了一些疑惑,下做总结: 一.JML语言以及工具链 经过课上JM ...
- Linux nohup命令详解,终端关闭程序依然可以在执行!
大家好,我是良许. 在工作中,我们很经常跑一个很重要的程序,有时候这个程序需要跑好几个小时,甚至需要几天,这个时候如果我们退出终端,或者网络不好连接中断,那么程序就会被中止.而这个情况肯定不是我们想看 ...
- talonspilder的的提问
有个问题:我的代码是: [1]summary=TextField(css_select="#intro>p") [2]def tal_summary(self,summary ...
- 【解读】TCP协议
本文内容如下: 1)TCP协议概念 2)TCP头部结构和字段介绍 3)TCP流量控制 滑动窗口 4)TCP拥塞控制 慢 ...
- Python3-设计模式-迭代器模式
Python3中的迭代器 迭代器模式主要是访问集合元素的一中方式,迭代器不会把整个集合对象加载到内存,而是按照顺序将集合中的元素一个一个的进行迭代,这样每次迭代的时候只取少量的元素,比较省内存 注: ...
- openstack Rocky 社区版部署1.3 安装OpenStack packages
1 installing the Rocky release on all nodes. yum install centos-release-openstack-rocky 安装之后,会在/etc/ ...
- MVC+EFCore 项目实战-数仓管理系统1
项目背景及需求说明 这是一个数据管理"工具类"的系统,计划有三个核心功能: 1.通过界面配置相关连接字符串,查询数据库的表数据. 2.配置相关模板,生成数据库表. 可以界面填报或通 ...
- Python之浅谈生成器
目录 三元表达式 列表推导式 字典生成式 生成器 生成器表达式 匿名函数 三元表达式 a=0 b=6 print (a)if a>b else print(b) 三元表达式只能写if的双分支结构 ...
- Zookeeper-Access Control List(ACL)
概述 Z K作为一个分布式协调框架.内部存储着一些分布式系统运行时状态的元数据.如何有效的保护这些数据的安全.如何做一个比较好的权限控制显得非常的重要. ZK 为我们提供一套完善的 ACL(acces ...
- 让IE下载跟迅雷一样快?
网络上搜的没试过... 修改IE支持多线程即可: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settin ...