day14_雷神_前端02

时间:2022-08-15 01:36:04

前端day02


1、 html标签

1、 span标签设置宽高

设置宽高后,字体不会发生变化。

2、 盒模型

padding是border里面的距离;
margin 是border边框外头的了属于。

2、CSS

1、权重

数数:  id > class > 标签名字

p中只能放行内的 表单标签

2、background

background-position: 相对原来的位置,原来的边框。
background-repeat: 默认水平、垂直都平铺。
屏幕: 一屏一屏的
网页F12代码顺序: 从下向上看的
background: url("http://i1.umei.cc/uploads/tu/201805/9999/04adc186d3.jpg") no-repeat 0 0 ; 综合属性,一行代码
background-attachment: fixed; 让背景图固定定位。 position: 相对原来的位置,相对定位;
fixed:固定定位 背景图上有文字,就是这样实现。

3、定位

相对定位: 做父相子绝的参考,
position:relative 以原来的位置为参考点的;相对定位不做压盖现象;
只有设置了position,才能用top、left等值对其进行定位。 绝对定位:做压盖了,脱离文档流;
单独设置绝对定位,是以页面的左上角为参考点;
页面 > 浏览器,页面还有滚动,浏览器就是显示的那一屏 父相子绝: 以最近的相对父辈盒子做参考点。
脱标了,下边的模块会自动浮上来,自己不会改变,需要设置top等参数改变。
结合图片position,relative + absolute调整位置。 固定定位: 广告、回到顶部
固定定位也脱标了;
大的盒子用浮动去做;小的用定位;
position:fixed;
参考点是浏览器; z-index: 父亲怂了,儿子再大也不管用;
默认后边的position覆盖前边的;

3、 JS

介绍

ECMAScript
console.log(变量名) 相当于print打印
alert(变量名) 弹出框测试 一个变量,先声明,后定义
typeof 相当于type
特殊情况:var b = 5/0 b是Infinity,无穷大,也是数字类型;
还有一个特殊的数据类型,undefined; 引用数据类型:
Function===def
Object===字典
Araay===list,列表
Date===模块time 比较运算符:
=== 相当于is,比较值和类型,类型即内存地址; 数据类型转换:
var a = 1; var str = a + '' # 当一个数值和字符串拼接,空不空无所谓,浏览器自动把数值转换成字符串做字符串的拼接。 //隐士转换 var str2 = a.toString() var a = 1;
console.log(a); var b = '123asd';
var num = Number(b);
console.log(num); //NaN NOT A NUMBER
console.log(typeof (num)); //number类型还是
console.log(Boolean (num)); //结果是false var c = 5/0;
console.log(typeof (c)); //number类型还是
console.log(Boolean (c)); //结果是true 未定义的也是false。 var a = 1;
var c = a++;
console.log(a); //先把a=1,赋值给c,在执行a++
console.log(c); var a = 1;
var c = ++a; //先++,后赋值,先把a+1,然后再赋值给c

流程控制

if、 else if、else

var name='houbinglei';

if(name==='alex'){
console.log('nimei')
}else if(name==='houbinglei'){ # 三个等号判断是否相等。
console.log(name)
}else {
console.log('failed')
}
alert('you must work hard')

while

while循环三步走:

1.初始化循环变量

2.判断循环条件

3.更新循环变量

var i=1;

while(i<=100){
if(i%2===0){
console.log(i)
}
i++;
}

switch:

一个case完了,必须有一个break;

JS中的数组

1 数组的合并 concat()

var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海']; var newCity = north.concat(south);
console.log(newCity)

2 join() 将数组中的元素使用指定的字符串连接起来,它会形成一个新的字符串

var north = ['北京','山东','天津'];
var str = north.join('---');
console.log(str)

3 将数组转换成字符串 toString()

var score = [98,78,76,100,0];
//toString() 直接转换为字符串 每个元素之间使用逗号隔开 var str = score.toString();
console.log(str);//98,78,76,100,0

4 slice(start,end); 返回数组的一段,顾头不顾尾

var arr = ['张三','李四','王文','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]

5 pop 移除数组的最后一个元素

var north = ['北京','山东','天津'];
var del = north.pop();
console.log(del); // 结果是删除的元素,天津

6 push() 向数组最后添加一个元素

相当于append
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.push('小马哥');
console.log(newArr);//["张三", "李四","王文","赵六","小马哥"]

7 reverse() 翻转数组

var names = ['alex','xiaoma','tanhuang','angle'];

//4.反转数组
names.reverse();
console.log(names); // ["angle", "tanhuang", "xiaoma", "alex"]

8 sort对数组排序

9 判断是否为数组:isArray()

JS中的字符串

1 chartAt() 返回指定索引的位置的字符

2 concat 返回字符串值,表示两个或多个字符串的拼接

var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str2));//alexex

3 replace(a,b) 将字符串a替换成字符串b

var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755

4 indexof() 查找字符的下标,如果找到返回字符串的下标,找不到则返回-1 。跟seach()方法用法一样

var str = 'alex';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

5 slice(start,end) 左闭右开 分割字符串

6 split('a',1) 以字符串a分割字符串,并返回新的数组。

var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]

8 toLowerCase()转小写

9 toUpperCase()转大写

Date

var mydate = new Date();
var time = mydate.toLocaleString(mydate)
console.log(time)
2018/8/22 下午5:25:03

Math内置对象

var a = 123.267;
console.log(Math.ceil(a)); //124
console.log(Math.floor(a)); // 123 求随机数:
200~500之间 min-max min +Math.random()*(max-min)
console.log(200+Math.random()*(500-200)); Math.random() // 0-1之间的数

函数

声明函数: 关键字 function add(){

//函数名字叫add

};

所有声明的变量、函数都挂载到全局对象了,window.add。

伪数组

console.log(arguments);
console.log([]); 函数循环arguments:
function hao() { //伪数组
for(var i = 0; i < arguments.length;i++){
console.log(arguments[i]); }; document.write("*"); // 往文档对象上写*,文档页面就是html。

4、 DOM

文档对象模型,标签就是对象

window上去解析,顶层对象 ==》 document ==》 html ==》 head+body等

//    1. 找 获取DOM对象
// 2.事件
// 3.驱动程序 执行的动作
var isGreen = true;
oDiv.onclick = function () {
// 驱动程序 console.log(oDiv.style);
//样式操作 if (isGreen) {
oDiv.style.backgroundColor = 'red';
isGreen = false;
}else{
oDiv.style.backgroundColor = 'green';
isGreen = true;
}
// oDiv.style.width = '300px';
// oDiv.style.display = 'none'; };

样式操作

<body>
<button>隐藏</button>
<div class="box" id="name">content</div>
<script>
var ob = document.getElementsByTagName('button')[0];
var odiv = document.getElementById('name'); ob.onclick = function () {
odiv.style.display='none';
}
</script>
</body> 点击隐藏后,相当于在原来的div标签内添加了行内样式。优先级最高。干掉了内接样式

属性操作

className

oDiv.className = 'box';  替换成box
oDiv.className += ' active'; 字符串拼接,后边加active;

DOM总结

1.获取Window

console.log(window)

2.获取Document

console.log(document)

3.获取html

console.log(document.documentElement);

4.获取body

console.log(document.body);

5.获取DOM的三种方式

id获取: document.getElementById(id的值)
类获取: document.getElementsByClassName('类名');获取的是伪数组
标签获取:document.getElementsByTagName(标签名)

6.事件

onclick 点击事件
onmouseover 鼠标的时候
onmouseout 鼠标离开的时候 鼠标小手: CSS属性,cursor:point;

7.驱动程序

样式的操作
oDiv.style.xxx = '值' 属性操作:
oDiv.id = 'box'
oDiv.className = 'box'
oImg.src = './1.png'
oA.href = 'http://www.baidu.com' 值的操作:
innerText 对文本的操作
innerHTML 对标签和文本的操作
value 对值的操作 点语法: get方法和set方法 oDiv.innerText = '123';
console.log(oDiv.innerText); 数据驱动视图

技巧

阻止a标签默认的跳转:

href = "javascript:void(0)"

如果是href = "#",意思是回到顶部。如果有滚动条。

问题1:

用pycharm打开background的url时候,因为pycharm自己它内部自己加了一个虚拟服务器,你的c盘的图片啊 你要把你的图片放在你打开页面之后的服务器目录下面啊。 不能使用C盘什么的绝对路径。