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、导入文件
<script src="xx.js"></script>
2、直接编写
<body>
........
<script>
</script>
</body>
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
<script>
function a(a,b){
alert(a+b);
}
var a = 1;
var b = 2;
a(a+b);
</script>
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("输入您的名字")//返回值是输入的内容
计时器
<body>
<input type="text" id="clock" style="width:249px">
<input type="button" value="begin" onclick="begain_click()">
<input type="button" value="end" onclick="end()">
<script>
function begin(){
var date_object = new Date();
var stime = date_object.toLocaleString();
var ret = document.getElementById("clock");
ret.value = stime;
}
var ID;
function begain_click(){
if(ID){
return;
}
begin()
ID = setInterval(begin,1000)
}
function end(){
clearInterval(ID)
}
</script>
</body>
history对象
history内部三种方法：
history.forward() 浏览器的前进后退的功能
history.back()
history.length()
location对象
刷新本页面的作用
<input type="button" value="重载" onclick="location.reload()">
<input type="button" value="重载" onclick="location.href='http://www/baidu.com'">
DOM下的对象分类
json与xml都是进行数据交换的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div>hello div</div>
</div>
</body>
</html>
文档树
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
<body>
<p ondblclick="alert(123)">pppp</p>//为什么不能通过函数调用的方式
<input type="text" onfocus="click1()" onblur="disClick()">
//获得焦点与失去焦点
<script>
function click1(){
console.log("click1")
}
function disClick(){
console.log("disClick")
}
</script>
</body>
做一个placeholder
<body>
<p ondblclick="alert(123)">pppp</p>
<input name="input" type="text" onfocus="click1()" onblur="disClick()" value="请输入用户名">
<script>
var content
function click1(){
console.log("click1")
ele = document.getElementsByName("input")[0]
ele.value=""
}
function disClick(){
console.log("disClick")
ele = document.getElementsByName("input")[0]
if(ele.value){
}else{
ele.value="请输入用户名"
}
}
</script>
</body>
onkeydown onkeyup onkeypress
<input type="text" onkeydown="fun1(event)" onkeyup="fun2(event)" onkeypress="fun3(event)">
function fun1(e){
console.log(e.keyCode)
}
onload页面加载完成之后会调用这个方法
<head>
<script>
window.onload=function(){
var p = document.getElementById("id1")
}
</script>
<head>
与mouse相关的事件触发
onmousedown、onmousemove、onmouseover、onmouseout
onsubmit事件
onsubmit必须绑定在form上
<body>
<form onsubmit="return check()">
<input type="text" name="username">
<input type="submit" value="submit">
</form>
<script>
function check(){
alert('验证失败')
return false;//阻止数据生成 event.preventDefault()
}
</script>
</body>
也可以这么绑定
<script>
var obj = document.getElementsByClassName("ppp")[0];
obj.onclick=function(){
}
<script>
事件传播
event.stopPropagation();//阻止事件向外层传播
<div id = "div1" onclick="alert('div1')">
<div id="div2" onclick="func1(event)"></div>
</div1>
<script>
function func2(e){
alert('div2');
event.stopPropagation();
}
</script>
增删改查掩饰
增
createElement(name)创建元素
appendChild();将元素添加
删
获得要删除的元素
获得它的父元素
使用removeChild()方法删除
改
修改样式
<body>
<div id="div1">我是共产主义接班人</div>
<input type="button" onclick="changeBig()">
<script>
function changeBig(){
var ele = document.getElementById("div1")
ele.style.fontSize="30px";
}
</script>
</body>
如果已经有样式了的话，那么可以使用下边的这种
<script>
var ele = document.getElementById("ID")
// ele.classList.add("bigger");添加样式
ele.classList.remove("bigger");//删除样式
</script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bigger{
font-size:30px;
color:red;
}
.small{
font-size:10px;
color:blue;
}
</style>
</head>
<body>
<div id="div1">我是共产主义接班人</div>
<input type="button" onclick="change('bigger')" value="变大">
<input type="button" onclick="change('small')" value="变小">
<script>
function change(a){
var ele = document.getElementById("div1")
console.log(ele.classList)
ele.classList.add(a)
}
</script>
</body>
</html>
添加图片
<script>
var ele = document.getElementById("add");
ele.onclick = function(){
var div1 = document.getElementByClassName("div1")[0];
var img = document.createElement("img");
// img.setAttribute("src","xx.png");
img.src="xx.png";//DHTML
div1.appendChild(imf);
}
</script>
this
<div onclick="show(this)" alex="1234">huhuhuhuh</div>
<script>
function show(self){
self.getAttribute("alex")
}
</script>
省市二级联动
<body>
<select id="province" onchange="fun1(this)">
</select>
<select id="city">
</select>
<script>
data = {"河北省":["石家庄","沧州"],"北京":["朝阳","通州"],"内蒙":["呼和浩特","满洲里"]}
var pro = document.getElementById("province");
<!--动态的添加省-->
for (var index in data){
var ele = document.createElement("option")
ele.value=index
ele.innerHTML=index
pro.appendChild(ele)
}
function fun1(self){
var pro = document.getElementById("province");
var cityS = document.getElementById("city");
<!--var options = city.children;-->
<!--for(var k=0;k<options.length;k++){-->
<!--<!–console.log(cityS.children[city])–>-->
<!--cityS.removeChild(options[k--])-->
<!--}-->
cityS.options.length=0<!--保留个数-->
var arr = data[pro.value]
for (var index in arr){
var ele = document.createElement("option")
ele.value=arr[index]
ele.innerHTML=arr[index]
cityS.appendChild(ele)
}
console.log((self.options[self.selectedIndex]).innerHTML)
<!--console.log(self.selectedIndex)-->
}
</script>
</body>
左右移动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box1,#box2,#choice{
display:inline-block;
}
</style>
</head>
<body>
<div id="box1">
<select multiple size="10" id="left">
<option>back1</option>
<option>back2</option>
<option>back3</option>
<option>back4</option>
<option>back5</option>
<option>back6</option>
</select>
</div>
<div id="choice">
<input class="add" type="button" value="---->" onclick="add()"><br>
<input class="remove" type="button" value="<----" onclick="remove()"><br>
<input class="add-all" type="button" value="====>" onclick="addall()"><br>
<input class="remove-all" type="button" value="<====" onclick="removeall()"><br>
</div>
<div id="box2">
<select multiple size="10" id="right">
<option>book9</option>
</select>
</div>
<script>
function add(){
var right = document.getElementById("right")
var options = document.getElementById("left").getElementsByTagName("option");
for (var i = 0;i<options.length;i++){
option = options[i]
if (option.selected==true){
console.log(option)
right.appendChild(option)
}
}
}
function remove(){
var left = document.getElementById("left")
var options = document.getElementById("right").getElementsByTagName("option");
for (var i = 0;i<options.length;i++){
option = options[i]
if (option.selected==true){
console.log(option)
left.appendChild(option)
}
}
}
function addall(){
var right = document.getElementById("right")
var options = document.getElementById("left").getElementsByTagName("option");
for (var i = 0;i<options.length;i++){
option = options[i--]
right.appendChild(option)
}
}
function removeall(){
var left = document.getElementById("left")
var options = document.getElementById("right").getElementsByTagName("option");
for (var i = 0;i<options.length;i++){
option = options[i--]
left.appendChild(option)
}
}
</script>
</body>
</html>
js思考题 -改成匿名函数就行了
<script>
var city = 'beijing';
function func(){
var city = "shanghai";
function inner(){
// var city = "langfang";
console.log(city);
}
return inner;
}
var ret = func();
ret();
var city = 'beijing';
function Bar(){
console.log(city);
}
function func(){
var city = 'shanghai';
return Bar;
}
function func(){
return show;
}
function show(){
console.log('hello')
}
var ret = func();
ret(); //beijing
</script>
