2016/12/10前端学习笔记CSS结束+JS开始。
18 浏览器兼容问题:IE6不支持小于12px的盒子,兼容方式: height:4px; _font-size:1px;
IE6不支持overflow:hidden的方法清除浮动,所以,需要 用 : overflow: hidden; 与_zoom:1;两条代码做兼容处理
css属性之前加上下划线是IE6的专有属性 例如:_background-color:red;
19 margin的塌陷:在标准文档流中竖直方向的margin会有已较大margin 为准的塌陷现象。但是浮动后没有塌陷。
20 盒子居中:margin: 0 auto; 1 必须盒子有明确的宽度
2 不能脱标(浮动,绝对定位,相对定位都不可以)
21 margin的使用,margin一般用于兄弟之间,当用于父子之间时,如果父亲没有border父亲会跟着儿子一起走。所以父子之间一般用父亲的padding。
22 margin的IE6兼容问题: 当出现连续浮动的元素时,在IE6中,队首的margin会变为双倍。
解决办法 :1 让浮动反向与margin方向相反,例如:float:left; margin-right:40px;
2 单独设置队首元素的margin,设为其他margin的一半。
23 首行缩进两个空格代码: text-indent: 2em;
24 伪类:a的伪类:link(未点击过的),visited(已访问过),hover(鼠标悬停),active(点击不松手时的样式);(面试被问到过,表示只想起来一个hover)(喜欢lv包haha)
25 background属性:其中background-poition: 向右移动量,向下移动量。(也可以用 right bottom这样来表示)
26 定位有三种 absolute(脱标),relative(不脱标 可微调自己的位置 相对自己原位置而言),fixed(脱标);(面试被问到过)
27 移动位置,top,left正值分别是往下往右 。其他的相比这个记忆。
28 参考点:top参考点是对于总页面左上角而言。bottom是对可视页面而言。
29 定位参考点,要听最近定位(相对,绝对(一般不用这种,都绝对全部脱标页面不稳定)都可以)的长辈。决定定位的孩子无视父亲的padding。
30 定位与居中:当绝对定位之后,已经脱标,不能用margin :0 auto这种方法来居中
居中方法改为:width: 600px;position: absolute;left: 50%; margin-left: -300px;
31 固定定位脱标(IE6不兼容)
JS开始
1 第一件事面试题(太激动我先把这句话说了,DOM和BOM的区别是什么:(表示脑子一蒙,啥也不知道。。我也说了不知道。所以死在一面很正常)资料:BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进行操作。http://blog.csdn.net/bing_javascript/article/details/52618695)
2 弹出 alert 控制台输出:console.log()console.warn()console.error()打印document.write())
3 变量命名规则:
4 变量作用域 分为局部变量和全局变量 (注意:如果是函数体内没有加var。比如function(){a=b=2;}那么按照全局变量对待)
5 常用事件:onclick:鼠标单击
ondblclick:鼠标双击
onkeyup:按下并释放键盘上一个键时
onchange:文本内容或者下拉菜单中的选项发生改变
onfocus:获得焦点,表示文本框等获得鼠标光标。
onblur: 失去焦点,表示文本框等失去鼠标光标。
onmouseover:鼠标悬停
onmouseout:鼠标移出
onmouseenter:鼠标悬停
onmouseleave:鼠标移出(跟上两个的区别 请自行百度哈哈)
onload:网页文档加载事件
onunload:关闭网页
onsubmit:表单提交事件
onreset:重置表单
onresize:窗口 或者框架被调整尺寸
6 简单轮播图:点击下方小span时改变图片的src即可。src不属于样式 所以不用pic.style.src。直接用pic.src。
7 改变背景图片时:document.body.syle.backgroundImage="url(image/1.png)";(注意驼峰命名法)
8 JS书写方法: 行内,内嵌,外链(待补充)
9 基本数据类型: 数值 字符 布尔 null undefined
10 数据类型的转换: 1 数值转字符:+"",String(num);
2 其他数据类型转布尔: !!num Boolean()
所有数字为真,0是假
所有字符为真 “ ”是假
false undefined null 0 "" 是false
true 1 "somestring" [Object] 是true
1+true 2(布尔转数值)
0+false 0(布尔转数值)
3 数值型:console.log(0xb) 16转10进制
console.log(020) 8转10进制
x-1 x*1 (字符转数值)
Number() (字符转数值)
4 parseInt("10.1px")返回10(注意取整)
“px10” NaN
“10px10” 10
5 parseFloat(“10.0”)返回 10 选择输入最前面的数字 小数为是0 返整数 非0 返小数 非数字 NaN
11 函数相关知识点 1 function fn(){} 调用时,fn()位置随意 2 var fun=function(){} fun();必须放在函数声明之后
2 声明函数时参数是形参,调用时 参数是实参 (形参大于实参个数时 取前几个 小于实参个数时报错)
3 函数声明内部生成的arguments的长度指的是实际参数的个数。不是形参的个数
4 变量提升 解释下左边的原因 : function作用域里的变量会覆盖上层作用域变量。but:只提升变量声明 不提升赋值。意思就是:下面的 var a="3"会覆盖掉var a = 2; 但是 却只有var a;放在了函数内部的顶部,而 a="3"却还在底部。所以返回undefined; 顺便提一下return 一个函数只能有一个return;同时终止函数运行。
12 算术运算符:var a = 10,b=20, c=30; a++;++a; e=++a+(++b)+(c++)+a++; console.log(e);返回:77
13 var txt=$("input").value;或者某个表单的值。一般都是获取焦点之后才去判断,
所以获得光标时触发是: txt.οnfοcus=function(){ if (txt.value==""{})} 只有表单才有value值 div span 没有所以用innerHTML
获得输入时触发是:txt.οninput=funciotn(){if(txt.value==""})};(IE678不支持)
补充 :txt.focus();表示让表单自动获得光标。
txt.select();自动选择表单内部文字
给某个元素更改类名(result.className="re")
14 isNaN(4) false isNaN("4") false 是不是非数字 是的时候 true 不是的时候 false
15 注意排他思想的双循环结构
16 tab栏切换案例 注意双排他之后
this.className="re1"; lis[this.index].className="show";
17
18 两种数组声明方式: var arr=[]; var arr= new Array();
19 console.log(arr.pop()).返回删掉的值 shif
console.log(arr.push(9)) 返回数组长度。 unshift
其他两个同理
a.concat(b);把两个数组连起来形成第三个数组
arr.join("-");把数组转化为字符串;
var txt="wo men"; console.log(txt.split(" "));字符串转化为数组
20 重点JS组成:1 ECMAScript 描述了JS的语法和基本对象。比如变量区分大小等
2 文档对象模型(DOM) 处理网页内容的方法和接口 比如怎么得到某个表单的值,怎么关闭div
3 浏览器对象模型(BOM)与浏览器交互的方法和接口 前进 后退 弹出窗口 跳转页面。
21 DOM树
22 获取类名的兼容性写法:
document.getElementByClassName("one") IE678不支持。
下面写兼容性写法。
23 对节点的访问。1 parentNode;
2 nextSibling previousSibling firstChild lastChild(IE678支持)
3 nextElementSibling previousElementSibling firstElementChild lastElementChild火狐 谷歌等 上述的兼容性问题 可以用||使用
4childNodes在ie9里可能是换行或空格等。解决方法
1 用判断nodeType的方法(nodeType==1元素节点)(nodeType==2属性节点)(nodeType==3文本节点)
var nodes=childNodes;然后对nodes[i].nodeType判断
2 用children, 这个获取的是内部所有节点,but在ie678里包含注释节点,所以一定不要有注释。
24 DOM节点操作 1 创建节点 var test = document.createElement("div");
2 添加节点 demo.appendChild(demo1);
在demo内部的newDiv之前插入newspan demo.insertBefore(newspan,newDiv)若newDIV==null.默认插在后面
3 属性的相关设定 demo.getAttribute("id");获取 demo的id
demo.setAttribute("class","class1");给demo设置一个类 类名字叫class1;
demo.removeAttribute("class");把 demo的class属性给删除掉
but!!!上述方法ie67不支持。所以,兼容性写法是demo.className="one";
4 更改多个属性 div.style.cssText="width:100px; height:10px";
5 删除节点 a.removeChild(b)移除 a里面的b节点;
6 克隆节点 domo.parentNode.appendChild(demo.cloneNode(true)); true表示复制节点与子节点。false只复制本身,不复制子节点。
25 日期对象。 var aa=new Date();内置时间
var aa1=new Date("2014/3/03 13:34:00");自定义时间。
aa.getTime();是指从1970年开始到现在的毫秒数
26 此处添加字符串转换方法 num.toString(). 但是a.toString(2)是转化为2进制
27 根据位置返回字符
28 检测字符串长度:
29 返回字符位置。
30 截取字符串
31 var a=23.3334212;
console.log(a.toFixed(2));
32 var a1=a;
console.log(a1.toUpperCase()); 与 toLowerCase()对应。大小写的转化。
33 Math.max(1 ,2 ,red); 返回 NaN;
34 BOM语句复习。window.location.href="www.baidu.com";
今天到此为止,下次更新offset家族。
转载于:https://www.cnblogs.com/ladyhahatrue/p/6154888.html
2016/12/10前端学习笔记CSS结束+JS开始。相关推荐
- web前端学习中CSS,JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
- web前端学习笔记之Node.js
文章目录 01 浏览器中的JavaScript运行环境 02 什么是Node.js 03 安装Node.js 04 使用Node运行JS代码 05 fs模块 文件操作 05.1 什么是fs模块 05. ...
- 厚积薄发 前端学习笔记 CSS基础篇-左侧固定,右侧自适应(或右侧固定,左侧自适应)布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接 写在前面 归纳总结了几种比较ok的方法,左右 ...
- Web前端学习笔记——CSS京东案例、BFC
京东项目(一) 京东项目介绍 项目名称:京东网 项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景 现阶段电商类网站很流行,很多同学毕业之后会进入电商类企业工作,同时电商类网站需 ...
- 前端学习笔记--css案例
要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * {padding: 0;margin: 0; }body {font-size: 16px;color: burlywood; ...
- 【前端学习笔记 CSS系列二十二】justify
一.效果 二.代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
- amazeui学习笔记--css(常用组件10)--导航条Topbar
amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...
- 前端学习笔记(HTMLCSS)(06)CSS盒子模型练习
前端学习笔记(HTML&CSS)(06) 练习一:图片列表 <!DOCTYPE html> <html lang="en"> <head> ...
- amazeui学习笔记--css(布局相关3)--辅助类Utility
amazeui学习笔记--css(布局相关3)--辅助类Utility 一.总结 1.元素清除浮动: 添加 am-cf 这个 class 即可 2.水平滚动: .am-scrollable-horiz ...
最新文章
- 关于 android 加载 res 图片 out of memory 问题 解决 同样适用于 sd卡图片
- 安装vmware esx4.1
- 无缓冲 Chan 的发送和接收是否同步
- python socket实现文件传输(防粘包)
- python standardscaler_教你用python一步步解决“维度灾难”
- telnet实现本地回显
- java圆形进度条_可拖拽圆形进度条组件(支持移动端)
- PASCAL不仅仅是语言
- java求出遍历二叉树的路径,102. 二叉树的层序遍历
- 【NLP】自然语言处理中词性、短语、短语关系标签的具体含义列表
- 第三章 3.3 DI自动装配 --《跟我学Spring》笔记 张开涛
- 小米便签源码分析——data包
- Linux安装MySQL5.7
- 《数据库应用》课程设计人事管理系统(java源代码)
- 51单片机(十六)—— 定时器0和定时器1寄存器介绍及功能描述
- 解决树莓派播放音频时耳机插线了但没有声音
- 显示器html看电视声音,使用显示器的内置音响播放声音需要满足以下两种条件...
- 程序员翻车时的 30 种常见反应!
- https小灰锁(带黄色三角)如何变成安全的小绿锁
- 【SQL经典50题】9.查询和“ 01 “号的同学学习的课程完全相同的其他同学的信息【正解】
热门文章
- Delphi Excel 操作大全【CreateOleObject( 'Excel.Application' )】
- 使用自定义指令el.parentNode为null
- 浅谈:事件冒泡、事件捕获,及阻止办法
- CentOS官方推荐的RPMforge软件仓库安装方法[linux]
- 转载 汉字转拼音,比Excel的 VBA强,Excel出来的结果还有错的。
- 【JUnit】作自己的测试工具MyJUnit
- rocketmq源码分析之broker心跳检测
- PowerDesigner连接PostgreSQL数据库
- 【正点原子FPGA连载】 第十七章 HDMI彩条显示实验摘自【正点原子】DFZU2EG/4EV MPSoC 之FPGA开发指南V1.0
- 遗留系统升级改造方案思路