html+css+js学习笔记二

CSS补充

position:
	fixed: 固定在页面的某个相对位置
	absolute+relative 组合相对定位
	<div style="position:relative">
		<div style="position:absolute"></div>
	</div>

margin-top：顶部外边距
	
opacity:0.5 透明度(0-1)
	
z-index:10 层级顺序，大的在上层
	
overflow hidden超过尺寸的内容隐藏 auto超过尺寸显示滚动条
	
hover:当鼠标移到标签上时，该属性生效

background-image:url('xxx.gif'); 默认 div大于图片，图片重复显示
	background-repeat:no-repeat 不重复 repeat-x 仅横向重复 repeat-y 仅纵向重复

background-position-x background-position-y :默认0，可以自定义背景位置
	应用场景：很多小图标做成一个图片，在页面上使用时，截取部分，减少请求次数
	也可以在background属性里定义

JavaScript

和java没关系，独立的语言，浏览器具有js解释器
保存在文件里
<script src="xxx.js"></script>

最好写在body中最下方 --写在head中对用户体验不友好	
<script>
	alert(123);
</script>

注释 单行 //  多行 /*    */

编写js:
	-html文件中
	-临时，浏览器console

变量
	js:
	name = 'xxx'  # 全局变量
	var name = 'xxx' #局部变量

基本数据类型
	数字
		a = 18;
	字符串
		a = "hari"
		a.charAt(索引位置)
		a.substring(起始位置，结束位置)
		a.length 获取当前字符串长度
	列表(数组)
		a = [1,2,3]
	字典
	布尔类型
		小写true false
	
条件语句
	if(条件1){
		
	}else if(条件2){ }
	else{ }
	1==1 仅判断值
	1===1 除了判断值，还判断类型
	!= !== 非
	1==1 && 2==2 || 3==3 

switch(name){
	case '1':
		age = 123;
		break;
	case '2':
		age = 456;
		break;
	defalut :
		age = 777;	
}

for循环 2种写法
	a = [1,2,3]
	for(var item in a){  // 默认循环索引 ,循环值写法 a[item]
		console.log(a);
	}
	
	for(var i=0;i<a.length;i++){
		console.log(a[i]);
	}

匿名函数
	定时器
		setInterval("alert(123);",5000)  单位毫秒
		
		setInterval(function(){
			console.log(123);
		},5000);

自执行函数(创建函数且自动执行)
	(function func(arg){
		console.log(arg);
	})(1)		
	
普通函数
	function func(arg) {
		
		return arg+1
	}		
	var res = func(1);
	
事件
	onclick='函数(123)'

其他
	alert()
	console.log(123);
	location.href
	location.href = "new url" 重定向，跳转
	location.reload 页面刷新
	
	var obj = setInterval(function(){},5000);
	clearInterval(obj) 清除定时器
	
	var obj = setTimeout(xxx) 只执行一次，延时执行
	clearTimeout(obj) 清除定时器
	

序列化
	JSON.stringify() 将对象转换为字符串
	JSON.parse() 将字符串转换为对象

转义
	decodeURL{} 
	encodeURL{}
	decodeURLComponent{}
	encodeURLComponent{}
	
	保存cookie常用：将数据转义

eval
	可以执行表达式及返回，也可以执行代码，等于Python的eval+exec
	
时间
	Date类
	
	var d = new Date()
	d.getXXX 获取日期信息
	d.setXXX 设置日期信息

作用域
	一般语言以代码块{}为作用域，不能在代码块外调用局部变量
	python以函数为作用域
	
	1、javascript以函数为作用域
	2、函数的作用域在函数未被调用前已经存在
	3、函数的作用域存在作用域链，并且也是在被调用前存在
	4、函数内的局部变量提前声明

面向对象
	function foo(n){
		this.name = n;
	}
	
	var obj = new foo('test');
	
	1、函数内部的this指对象(类似于python的self)
	2、创建对象时用new关键字

原型
	function Foo(n){
		this.name = n;
	}
	# Foo的原型
	Foo.prototype = {
		'sayName': function(){
			console.log(this.name)
		}
	}

	obj1 = new Foo('aa');
	obj1.sayName()
	obj2 = new Foo('bb');
	obj2.sayName()
	
	# 每个对象里只封装了name，sayName成为公共调用的方法

Dom

1、找到标签
	直接找
		获取单个元素	document.getElementById('id1')
		获取多个元素(列表)	document.getElementsByTagName('div')
		获取多个元素(列表)	document.getElementsByClassName('c1')
		获取多个元素(列表)	document.getElementsByName('n12')
	间接找
		tag = document.getElementById('id1')
		tag.parentElement
		tag.children
	
2、操作标签
	innerText
		获取标签中的文本内容
		标签.innerText
		
		对标签内部文本进行重新赋值
		标签.innerText = ""
	className
		tag.className 直接整体操作
		tag.classList.add('c1') 添加指定样式
		tag.classList.remove('c1') 删除指定样式

	checkbox
		获取值
		checkbox对象.checked
		设置值
		checkbox对象.checked = true	
		
	样式操作
		obj.style.fontSize = '16px';
		obj.style.backgroundColor = 'red';
		
	属性操作
		attributes
		getattributes
		removeattributes
		
	创建标签，并添加到html中
		方法一，传字符串
		var tag = "<p><input type='text'/></p>";
		obj.insertAdjacentHTML("beforEnd",tag);
		
		#beforEnd,beforBegin,afterEnd,afterBegin
	
		方法二，传对象
		var tag = document.createElement('input');
		tag.setAttribute('type','text');
		tag.style.fontSize = '16px';
		document.getElementById('id1').appendChild(tag);
		
	提交表单
		任何标签通过DOM都可以提交表单
		obj.submit()
		
事件
	onclick, onblur, onfocus
	
	dom0 dom1
	onmouseover onmouseout
	
	绑定事件有三种方式：
		a.标签上绑定 onclick='xxx()'  -- dom0
		b.先获取Dom对象，然后js中绑定 obj.onclick  -- dom1
		c. addEventListener  -- dom2
	
	this 当前触发事件的标签
	a绑定方式：onclick='xxx(this)'
		function xxx(self){
			//self 当前点击的标签
		}
	
	b绑定方式
		obj.onclick = function(){
			//this 当前点击的标签
		}
	
	c绑定方式
		document.addEventListener("click", myFunction);
			function myFunction() {
			document.getElementById("demo").innerHTML = "Hello World";
			}