前端基础知识

前端笔记

HTML

转意字符

	&lt ;	<

	&gt ;	>
	
	&nbsp ;	空格符

	&amp ;	&

	&copy ;	版权符&copy;

	&reg ;	商标符&reg;
	
	&yen ;	CNY &yen;

主要表单元素

	单行文本表单
	<input type="text"/>
	
	密码框
	<input type="password"/>

	单选框
	<input type="radio" name="gender" checked/>male
	<input type="radio" name="gender"/>female

	多选框
	<input type="checkbox" name="ins"/>music
	<input type="checkbox" name="ins"/>dance
	<input type="checkbox" name="ins"/>game

	文件上传
	<input type="file"/>

	隐藏表单
	<input type="hidden"/>

	多行文本框
	<textarea rows="10" cols="50"></textarea>

	下拉选择框
	<select name="city">
		<option>meizhou</option>
		<option>meizhou</option>
		<option>meizhou</option>
	</select>

CSS

基本选择器优先级

id选择器 > class选择器 > 标签选择器
不同样式设置优先级

行间样式 > 嵌入样式 > 外部样式
块定位

相对定位 position:relative;

绝对定位 position:absolute;

相对定位 position:fixed;

	//广告固定css代码,此时广告块将固定在浏览器左侧中间
	div{
		width:200px;
		height:200px;
		background:red;
		position:fixed;
		top:50%；
		left:100%;
		margin-left:-200px;
		margin-top:-100px;
	}

clear属性：控制元素左边或右边不能存在浮动元素

JavaScript

window.onload表示在整个HTML页面加载完成后再运行
isNaN(str) 判断字符是否为数字
隐式类型转换

	var a = 12;
	var b = '12';
	alert(a==b)//true,两个=时，系统自动进行了数据类型的转换
	alert(a===b)//false
	alert(a+b)//1212,
	alert(a-b)//0,系统自动转换类型的方向不一定

函数

	function f(){
		//可用arguments数组去接收传递过来的参数
		for(var i=0;i<arguments;i++){
			alert(arguments[i]);
		}
	}

	f(1,2,3);

获取样式

	//获取计算过后的样式
	getComputedStyle(div,false).width;//在火狐、chrome中生效
	//获取当前生效样式
	div.currentStyle.width;//IE中生效

数组

	var arr = [1,2,3];
	//在数组尾添加元素
	arr.push(6);
	//在数组头添加元素
	arr.unshift(6);
	//在尾部移除元素
	arr.pop();
	//在头部移除元素
	arr.shift();

定时器

	function a(){}

	//间隔定时器
	timer = setInterval(a,2000);
	//延时定时器
	t = setTimeout(a,2000);

	//清楚定时器
	clearInterval(timer);
	clearTimeout(t);//几乎用不上

子元素

	var ac = ul.childNodes;
	for(var i=0;i<ac.length;i++){
		ac[1].nodeType = 1；//元素节点
		ac[1].nodeType = 3；//文本节点
	}

event事件兼容性问题解决,和阻止事件流传递

	document.onclick = function(ev){
		var oEvent = event || ev;
		
		oEvent.cancelBubble = true;
	}

构造函数创建对象和继承

	function Person(name,age){
		this.name = name;
		this.age = age;
		
		this.speak = function(){
			alert("hi I'm "+name);
		}
	}

	var p1 = new Person("mike",31);

	function Student(name, age, school){
		//通过改变Person内部的this的指向达到一种模拟继承
		Person.call(this,name,age);
		this.school = school;
	}