day14_雷神_前端02

前端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盘什么的绝对路径。