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)); //结果是falsevar 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标签内添加了行内样式。优先级最高。干掉了内接样式
属性操作
classNameoDiv.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盘什么的绝对路径。
day14_雷神_前端02相关推荐
- day16_雷神_前端04
前端day04 链接前端的一些库,一些资源,从bootcdn上搜,有前端所有的库. 前端工作流程: jquery的DOM文档操作 <!DOCTYPE html> <html lang ...
- day13_雷神_前端01
#前端 html 服务器端返回的就是一个字符串,浏览器根据html规则去渲染这个字符串. html 是超文本标记语言,相当于定义统一的一套规则,大家都遵守它,这样就可以让浏览器根据标记语言的规则去解释 ...
- day15_雷神_前端03
# 前端 day03 内容回顾 javascript:1.ECMAScript5.0 es6(阮一峰) es7 es8(1)声明变量 var let(2)内置函数 Date Math.random() ...
- JavaWeb全套教程笔记_前端技术
JavaWeb全套教程笔记第一阶段_前端技术 自己整理一套详细的笔记资料,可以满足平时查阅复习,还能帮助别人学习JavaWeb知识.JavaWeb教程分为四个阶段 前端技术 1.HTML.2.CSS. ...
- ie9无法获取未定义或 null 引用的属性“indexof”_前端JS基础篇(二)JS基本数据类型和引用数据类型及检测数据类型方法...
JS中的数据类型 (一).基本数据类型(值类型) 1.number:数字 -12.12.5.-12.5 0这些数字都是number: js中增加了一个number类型的数据:'NaN' typeof ...
- 人工智能实战小程序之语音_前端开发
1. 人工智能实战小程序之准备工作 2. 人工智能实战小程序之语音_前端开发 今天这部分主要讲小程序前端功能的开发 由于我偏后端,css是我的弱项,可能很多人和我一样开发小程序不知道如何下手,希望本篇 ...
- JS实现仿新浪微博大厅和腾讯微博首页滚动效果_前端开发
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 现代软件工程_团队项目_阿尔法阶段_前端知识共享_2017.11.21
现代软件工程_团队项目_阿尔法阶段_前端知识分享 更加舒适浏览格式 http://blog.csdn.net/bowean HTML基础(一) 本文参考了[http://www.w3school.co ...
- vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
最新文章
- 基于长度特征的三文鱼好sea bass的区分,sesbass 比三文鱼长
- 如何使用Cmder替换cmd
- 一个致命的 Redis 命令,导致公司损失 400 万
- php 5.5.7.tar.gz,编译 php-5.5.26.tar.gz
- POJ 1953 (DP)
- jsoup教程_2 http-client 讲解
- 五、数据类型(1):整数带小数点的数
- 苹果设备解锁工具:iToolab UnlockGo for Mac
- 医院计算机五大应用系统,医疗系统计算机应用的现状与发展
- VS2005远程调试
- 45+最佳免费WordPress主题(2021年)
- 求职应聘时面试常见问题2
- 校OJ P1219 -- zyf的童年
- 怎样批量修改图片大小?
- BZOJ-3231 递归数列 矩阵连乘+快速幂
- VBA判断win操作系统是32位还是64位
- 关系型数据库RDS基本简介
- 最优化理论与方法-第二讲-凸集
- Statsmodels库----统计建模和计量经济学
- 12.05计算机导论课后总结
热门文章
- 7tpro android11,一加7/7Pro/7T/Pro等机型安卓11底层氢OS11刷机包推送-支持root
- hdu1426一道很有意思的题目:数独
- 游戏设计/开发的出发点——追根溯源
- ubuntu 16.04 更换国内源
- set函数python作用_pythonset函数是什么
- 项目管理中的进度与成本控制
- 计算机网络——香农公式
- Python办公自动化的18个应用场景
- 错误:Parameter 0 of method sqlSessionFactory in MyBatisConfig required a bean of type ‘javax.sql.DataS
- 11招教你做好 ERP 系统维护