HTML
一个html页面的构成,可以大致分为:
1.tag — content
2.css ——display
3.javascript —— behavior
Tag
文本:h1-h6 p hr br sup sub
列表:ul/li ol/li dl/dt/dd
连接: a
页面连接
锚点连接
功能性连接
图像: img( src/alt)
表格:tabl/tr/td/th caption(rowspan / colspan)
音频:audio /source
视频:video /source
逻辑区域: div(块级) /span(行级)CSS
内部样式表
用在首页
外部样式表
其他页面
所有页面可以共享同一个样式表
网站可以保持同一种风格
内容显示分离:可以很容易实现换皮肤换板式等操作
内嵌样式表
通过标签的style属性添加样式
使用得非常少
样式的原则
1.就近原则 优先级3
2.具体性原则(id选择器>类选择器>标签选择器>通配符选择) 优先级2
3.重要性原则 (!important) 优先级1
通配符选择器
*{
margin: 0;
padding: 0;
font-family: arial,"微软雅黑";
}
对所有元素能够精准控制
~兄弟选择器
#three~h2 兄弟选择器
#three+h2 相邻兄弟选择器
Box Model（盒子模型）
content
padding
border
background-image
background -color
display:none 表示隐藏位置也没有了
visibility:hidden 表示隐藏还占用位置
浏览器串字体文件
如果浏览器不支持的字体需要如下操作
@font-face{
font-family:"字体名字";
src:url(字体的相对路径);
}
引用的时候: 和正常的设置字体一样
设置特殊字符集
@chaset "utf-8"
防止乱码
浮动
浮动分为两种:
float: left (right)
清除浮动:
clear: 设置的浮动名(left/right/both)
定位
相对定位:
相对于元素原来的位置进行定位 top/left 没有脱离文档流对兄弟元素没有影响
绝对定位:
相对于父元素来设置定位 脱离了文档流对兄弟元素有影响
固定定位:fixed(相对于浏览器窗口来设置元素的位置,脱离了文档流)
文档流
行级(内联inline)元素
块级(block)元素:独占站整行
static:正常文档流
relative:相对定位
absolute:绝对定位
javascript
javascript
ECMAscript -----语法规范 ----es5.1
BOM - Browser object model 浏览器对象模型(面向对象/函数式编程)-window
DOM - Document object model 文档对象模型 document
编程范式(理念)
--面向对象编程
--函数式编程
样式表前置----js后置
数据类型
简单数据类型:number srting boolean undefind null
复杂数据类型:object
检查数据类型:typeof
算术运算
+ = * / %
赋值运算符
= += -= /= %=
关系运算符
> >= < <= == !=
=== 是不带类型转换的比较(全等于/严格等)
!== 严格不等
js系统自带了隐式的类型转换
转换规则:
逻辑运算符
&& 而且 (短路与)
|| 或者 (短路或)
! 取反
自增自减
a++
++a
js中的函数参数
如果出现同名函数后面的会覆盖前面的
arguments 可以传n个参数
n! = n * (n-1)!
递归定义- 定义的左边和定义的左边出现了相同的概念
function f(n){
if(n==1 || n==0){
return 1;
}
return n*f(n-1);
//return arguments.callee(n-1);
}
1.收敛条件---什么时候就不用递归了
2.需要递归公式
arguments.callee()代表正在被调用的函数
________________________________
<script>
function f(n){
var result = 1;
for (var i=1 ;i <=n ;i +=1){
result *=i;
}
return result;
}
window.alert(f(5));
</script>
非递归情况
题目
小孩周楼梯 一次走一个台阶或者一次走二个台阶或者一次走3个台阶 走完10个台阶有多少走走法
<script>
function g(n){
if(n <0 ){
return 0;
}else if (n==0){
return 1;
}else{
return g(n-1) + g(n-2)+g(n-3);
}
}
window.alert(g(10));
</script>
'ABCDE'---全排列
卡特兰数
迷宫寻路
BOM
BOM - Browser Object Model
window
-location - href属性 可设计或返回当前显示的文档的完整URL
reload() 重新加载当前文档 window.location.reload()
replace() 用新的文档替换当前文档 window.location.replace(newURL)
-history 包含用户在浏览器窗口中访问过的URL
- go() 加载history列表中的某个具体页面 window.history.go(number|URL)
forward() 加载 history 列表中的下一个 URL. 相当于window.history.go(1)
back() 加载 history 列表中的前一个 URL。相当于window.history.go(-1)
-navigator - 包含有关浏览器的信息
-document
-screen - availwidth 返回显示屏幕的宽度
availHeight 返回显示屏幕的高度
-alert() 在浏览器窗口弹出一个警告框
-prompt() 在浏览器窗口弹出一个输入框
-confirm() 在浏览器窗口弹出一个提示确认框
DOM
DOM - Document Object Model
document
获取元素:
1.根据ID来获取元素
document.getElementById()
2.根据标签名获取元素,返回值是一个集合
var es = document.getElementsByClassName('hot')
for(var i =0;i<es.length;i+=1){
es[i].styly.backgroundColor = 'red'
}
3.取id为page的元素子一级的h2标签,可以修改文本内容,只会修改第一个
var h2 = document.querySelector('#page>h2')
h2.textContent = 'i love you'
4.取id为page的元素下子一级h2标签 可以修改文本内容,会修改所有h2标签
var h2 = document.querySelectorAll('#page>h2')
for (var i=0;i<h2.length;i+=1){
h2[i].textContent = 'i love you'
}
修改节点的内容和属性
1.textContent 只能修改文本内容,不能增加标签
2.innerHTML 可以修改文本内容并增加标签
3.nodeValue h2.firstChild.nodeValues = 'nihao'
访问成员运算符
可以通过元素.属性来访问
如:增 h2.id = 'foo'
改 h2.id = 'shit'
查 alert(h2.id)
setAttribute()
设置元素的属性 hs[i].setAttribute('id','foo')
访问元素属性 alert(hs[i].getAttribute('id))
删除元素属性 hs[i].removeAttribute('id')
对节点的创建和删除
1.创建新节点 - createElement()
2.追加新的子节点 - appendChild() / insertBefore
3.删除节点 - removeChild()
var ul = document.queryselector('#page>ul')
var li = document.createElement('li')
li.className = 'hot'
li.textContent = 'new iten'
ul.appendChild(li)或者ul.inserBefore(li,ul.firstChild)
如果已经获得了一个节点,如何去访问父节点,子节点,兄弟节点
parentNode 父元素 / children[n]子元素 / firstChild第一个子元素 / lastChild最后一个子元素
nextSibling后一个兄弟元素 / prevSibling前一个兄弟元素
对于一个超链接来说,每次的点击都会刷新页面,如果不希望这个a标签有任何的行为的话 可以给href附上一个事件href="javascript:void(0);"
Window setTimeout()方法.
Window setTimeout()方法.
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout(function(),毫秒数) 1秒 = 1000毫秒
如果想要阻止函数的执行,可以使用clearTimeout()方法
setTimeout()方法会有一个返回值 需要命名一个变量来接收这个返回值 将返回值传入clearTimeout()方法来种植函数的执行
var myVar;
function myFunction(){
myVar = setTimeout(function(){
alert('nihao')
},1000);
}
function myStopFunction(){
clearTimeout(myVar);
}
Window setInterval()方法.
Window setInterval()方法.
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 会不停地调用函数,直到clearInterval()被调用或窗口被关闭.
用法:setTimeout(function(),毫秒数)
三元运算符
三元条件运算符-问号前面的条件如果成立则取冒号前面的值,否则取冒号后面的值
if(a>b){
return a
}else{
return b
}
a>b ? a:b
对元素style属性的修改
// 要修改样式直接通过元素的style属性就可以做到
// 要读取样式的话需要通过window对象的getComputedStyle()
// style属性- 只写不读
// getComputedStyle()- 只读不谢
// isNan - 判断是不是 不是一个数
// parseInt() - 取整数如果取不出返回NaN
// parseFloat() - 取小数如果取不出返回NaN
// isFinite() - 是不是有限数值
// eval() - 非常强大的函数 evaluate -XSS(跨站脚本攻击)
// encodeURIComponent() - 处理成百分号编码
// decodeURIComponent() - 将百分号编码解码还原
正则表达式
//匹配字符串需要先定义字符串的匹配模式
//正则表达式就是定义字符串的匹配模式的工具
//元字符 - .(任意字符) \w(字母,数字,下划线) \d(0-9数字) \s(空格,回车,制表符)
//\b(单词的开始或结束) ^(整个字符串的开始) $(整个字符串的结束)
//量词 - *(0次或多次) +(1次或多次) ?(0次或1次) {m}(刚好m次) {m,n}(m到n次)
//反义 - [^aeiou](不能是aeiou开头) \W(不能是数字,字母,下划线) \D \S \B
//分支 - |
//分组 - ()
//<正则表达式30分钟入门教程>
一些针对浏览器兼容问题的解决方法
以下代码写在外部js文件中
用cache对象缓存已经获得过的元素
元素的ID是key,元素对象是对应的value
缓存:牺牲空间来换取时间的策略
var cache = {};
function$(id){
if(!cache[id]){
cache[id] = document.getElementById(id);
}
return cache[id];
}
/**
* 给元素绑定事件回调函数 (对JS封装的函数进行解释说明)
*/
function bind(elem,en,fn){
if(elem.addEventListener){
//addEventListene方法的第三个参数表示事件处理方式
//true - 事件捕获,从外向内传播事件
//false - 事件冒泡(默认),从里向外传播事件
elem.addEventListener(en,fn);
}else{
elem.attachEvent('on'+en,fn);
}
}
/**
* 阻止事件的默认行为
* @param {Object} evt
*/
//运用短路运算解决浏览器兼容问题
function handleEvent(evt){
evt = evt ||event;
evt.preventDefault = evt.preventDefault ||function(){
this.returnValue = false;
};
evt.stopPropagation = evt.stopPropagation ||function(){
this.cancelBubble = true;
};
return evt;
}
function getStyle(elem){
return window.getComputedStyle ?
window.getComputedStyle(elem):elem.currentStyle;
}