Caesar's Tesla
一、
正常文档流:
将元素(标签)在进行拍版布局的时候按着从上到下，从左到右进行排版
脱离文档流:将元素从文档流里边拿出，取出之后进行覆盖,其他元素会按文档流中不存在该元素重新进行布局
float(浮动):非完全脱离
position(定位):完全脱离absolute fixed
二、position
默认为static,无特殊定位，对象遵循正常文档流
定位在右下角
a{
positon:fixed;
bottom:20px;
right:20px;
}
position:fix,absolute;
:absolute
:relative相对定位,根据自己之前的位置进行移动，原来的位置还占着，并没有脱离文档流
margin:0 auto;居中
JavaScript
实际上，一个完成的JavaScript实现是由以下3个不同部分组成的:
- 核心(ECMAScript)
- 文档对象模型(DOM)Document object model(整合js,css,html)
- 浏览器对象模型(BOM)Broswer object model(整合js和浏览器)
- JavaScript在开发中绝大多数情况是基于对象的，也是面向对象的
JavaScript的引入方式
1、导入文件
2、直接编写
........
3、
JavaScript基础
- 变量
定义变量,一行可以创建多个变量，类型也可以不同
var a = 1, b = 3;
命名规则:建议使用匈牙利类型标记法
var iMyValue = 0,sMyValue = 'hello';
- 函数
function sayHello(){
var sHelloStr = "你好"
document.write(sHelloStr);
}
sayHello();
- 数据类型
- 基本数据类型
- Number
- String
- Boolean
- Null
- Underfined
- 引用数据类型
- object
- 基本数据类型
堆内存:引用
栈内存:对象
1、Number
Number 包括整型和浮点型
16进制和8进制数的表达:
16进制数据前面加上0X,八进制前面加0
16进制数是由0-9，A-F等16个字符组成
8进制数由0-7等8个数字组成
2、 字符串
是由Unicode字符、数字、标点符号组成的序列
3、Boolean
true false
4、Underfined
如果声明了一个变量，但是并未对其进行赋值，则该变量是Underfined
5、null
//null:占一个对象的位置
var obj = null
数据类型的转换
1+true ->2
1+false->1
true对应的是1
false对应的是0
"hello"+true -> "hellotrue"
强制类型转换函数
parseInt:强制转换成整数
parseFloat:强制转换成浮点数
eval:将字符串强制转换为表达式并返回结果
parseInt("a2.12");//NaN当字符串转换为数字失败的时候就是NaN
NaN==0 -> false
NaN>0 -> false
NaN<0 -> false
NaN==NaN -> false
NaN在表达式中,一定结果为false,除了不等于
typeof
var i = 10;
var s = "hello";
var b = false;
var u = underfined;
var n = null;
var obj = new object();
console.log(typeof(i));
ECMAScript运算符
ECMAScript算术运算符
x=-y 负号
var a = 1;
var b = a++;//a+=1; 先赋值，再操作
var c = ++a; //先操作(加减),后赋值
var x = 1;
x++; 1
++x; 3
--x; 2
x--; 2
一元加减法
var a = "3";
b = +a;
b = -a;
ECMAScript逻辑运算符
等于(==)、不等于(!=)、大于等于(>=)
与(&&)、或(||)、非(!)
如果一个运算数是
==print(True and 3)== 3
ECMAScript赋值运算符
2=="2" true
2==="2" false
2!="2" false
2!=="2" true
"25"<"3" true 比较的是2和3的ascii码
"25"<3 false 将"25"转成了数字
1、比较运算符两侧如果一个是数字类型，一个是其他类型，会将其类型转换成数字类型
2、比较运算符两侧如果都是字符串类型，比较的是最高位的asc码，如果最高位想等，继续取第二位比较
控制语句
if语句
对象
obj = {"1":"111","2":[1,2]}
console.log(obj) //[object Object]
for (var i in obj):
i;//这里的i是key
obj[i];//取值
函数创建方式1 ---建议使用
function func1(){
return 8
}
var ret = func1()
函数创建方式2
var fun2 = new Function("参数1","参数n","函数体");
面试题
Uncaught TypeError: a is not a function
arguments对象
var ret = 0
function add(){
arguments//传进来的参数组成的数组
for(var i in arguments){
ret += arguments
}
return ret;
}
add(1,2,3,4);
//对所传的参数的个数进行要求，不符合的话，就报错
function func2(){
if(arguments.length!=3){
throw new Error("param should be 3")
}
}
func(1,2,3,4)
匿名函数
var func3 = function(){
alert(1234)
}
func3()
//自执行函数
(function(arg){
console.log(arg);
})("123")
函数的属性和方法
length 参数的个数
fun.length
instanceof
var n = new Number(2);
n instanceof String ->false
String对象
//创建方式一
var s = "hello"
//创建方式一
var s2 = new String("hello")
//String对象的属性length
s.length -> 5
//遍历字符串
for (var i in s){console.log(s[i])}
//格式编排方法
s.italics(); 斜体
s.bold(); 粗体
s.anchor("alex");
//大小写转换
s.toUpperCase()
s.toLowerCase()
//获取指定字符
s.charAt(1) 根据索引取值
s.charCodeAt(1) 获取索引对应的ASCII码值
//查询字符串match()、search()
s.search("l") //返回的第一个匹配结果的索引值
s.match("l")//返回数组，包含所有的匹配结果
s.indexOf('l')//获取字符所在的索引值
s.lastIndexOf('l')//获取字符所在的最后的索引值
//替换
s = "wojiushimudy"
s1 = s.replace("u","U");
//分割
s.split("E")
//拼接
s.concat(" world")
//字符串截取
s.substr(1,2)//从1的位置开始截取3的长度
s.substring(1,3)//索引位置1-3的字符串
s.slice(1,3)//同上,但是允许负数(表示倒数)
数组
//创建方式一
var arr = [1,2,3,4,5]
//创建方式二
var arr2 = new Array(1,"2",[3,4],true)
var arr3 = new Array();//初始化一个空数组
var arr4 = new Array(3);//如果采用初始对象方式创建数组，当里边只有一个数字的时候，那么数字表示的是长度而不是内容
//二维数组
var arr2 = new Array(5,'heee',true,[1,2,3])
arr[3][2]
//数组对象的方法
s1 = "hello"
s2 = "world"
[s1,s2].join("+") //"hello+world"
将数组内的字符串拼接成一个字符串
//push pop shift unshift --
队列:先进先出 栈:先进后出
push pop 是向后操作的
shift unshift是向前操作的
py中的join()
s1 = "hello"
s2 = "world"
s = " ".join([s1,s2])
print(s)
注意排序的时候，并不是按照大小排序的
arr1 = [1,5,3,7,2,100]
arr1.sort()
[1, 100, 2, 3, 5, 7]
自定义排序
function mysort(a,b){
return a-b;
}
| 类别 | 方法 | 说明 |
|---|---|---|
| 获取子数组 | slice(start,end) | 通过数组元素起始和结束索引号获取子数组 |
| splice(start,deleCount,value,...) | 对数组指定位置进行删除和插入 | |
| 进出栈操作 | push(value,...) | 数组末端入栈操作 |
| pop() | 数组末端出栈操作 | |
| unshift(value,...) | 数组首端入栈操作 | |
| shift() | 数组首端出栈操作 | |
| 连接数组 | join(bystr) | 返回由bystr连接数组元素组成的字符串 |
| toString() | 返回由逗号(,)连接数组元素组成的字符串 | |
| concat(value,...) | 返回添加参数中元素后的数组 | |
| 数组排序 | reverse() | 返回反向的数组 |
| sort() | 返回排序后的数组 |
JS中数组的特性
js中的数组可以装任意类型，没有任何限制
js中的数组，长度是随着下标变化的，用到多长就有多长
date对象
//创建方式1:
var date_object = new Date();
date_object.toLocaleString()
//创建方式2:
var date_object2 = new Date("2016/2/3 12:00);
//创建方式3:
var date_object3 = new Date(3000303003);
date_object.getFullYear()
date_object.getMonth()
date_object.getDate()
date_object.getDay()
正则对象
//创建方式1
var re_obj = new RegExp("\d+","g")//g :全局 i:不区分大小写
//创建方式2
var re_obj2 = /\d+/g;
var s = "hello";
s.match(/l/g);//取出所有匹配的内容放到数组
s.search(/l/g);//匹配出来的第一个结果的所引值
Math
Math.random()//0-1的随机数
Math.round(2.3)//四舍五入
Math.pow(2,4)
Math.max()
BOM对象(浏览器对象模型)
window
window对象方法
// alert confirm prompt
var ret = confirm("内容是否保存!")//返回的是true false
var ret = prompt("输入您的名字")//返回值是输入的内容
计时器
history对象
history内部三种方法：
history.forward() 浏览器的前进后退的功能
history.back()
history.length()
location对象
刷新本页面的作用
DOM下的对象分类
json与xml都是进行数据交换的
Title
hello div
文档树
graph TD
A[document-html]-->B[element-head]
A-->C[element-body]
B-->D[element-title]
D-->E[text-Title]
C-->F[element-div]
F-->G[element-div]
G-->H[Text-hello div]
- 导航属性
- parentNode-节点(元素)的父节点(推荐)
- firstChild-节点下第一个子元素
- lastChild-节点下最后一个子元素
- childNodes-节点(元素)的子节点
- nextSibling-兄弟节点
只用了parentNode
firstChild不会使用，因为它会把两行之间的内容算进去
//根据id获取到标签
var ele = document.getElementById("")
ele.nodelName()//DIV
ele.nodelValue()
推荐用法
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
寻找对象方式
//通过ID
var temp = document.getElementById("div1");
//通过class
var ele = document.getElementsByClassName("dvi2")[0];
var ele2 = ele.nextElementSibling;
ele2.innerHTML;//获取标签中的文本内容
//通过tag
var tag = document.getElementsByTagName("p")
tag[0].innerHTML
//通过Name属性
var name = document.getElementsByName("alex");
//局部查找可以通过TagName class
var ele3 = ele.getElementsByTagName("p")
//局部查找不可以通过ID Name
事件
onfocus 与 onblur
pppp
//为什么不能通过函数调用的方式
//获得焦点与失去焦点
做一个placeholder
pppp
onkeydown onkeyup onkeypress
function fun1(e){
console.log(e.keyCode)
}
onload页面加载完成之后会调用这个方法
与mouse相关的事件触发
onmousedown、onmousemove、onmouseover、onmouseout
onsubmit事件
onsubmit必须绑定在form上
也可以这么绑定
增删改查掩饰
增
createElement(name)创建元素
appendChild();将元素添加
删
获得要删除的元素
获得它的父元素
使用removeChild()方法删除
改
修改样式
我是共产主义接班人
如果已经有样式了的话，那么可以使用下边的这种
Title
我是共产主义接班人
添加图片
this
huhuhuhuh
省市二级联动
左右移动
Title
js思考题 -改成匿名函数就行了