javascript基础快速入门

javascript 是基于对象和事件驱动的脚本语言.

1.javascript 的基本标签

<script type="text/javascript">js代码<script>

2.javascript的变量声明只有一个 var

var 变量名=“变量值”;

3.javascript变量有5种类型:

String字符串类型 var a="abc";
Number数字类型 var b="123";
Boolean布尔类型 var c=ture/false;
null引用类型 var d=null; var date= new Date();
undefined未定义 var e;
tepyof()方法可以用来判断数据类型 (非法的数字类型用NaN表示)

4.javascript中"+"号字符串运算代表拼接

var str1= "abc";
var str2= "def"
str1+str2  的结果就是"abcdef"

5.javascript 中等号"="的区别

var a="15";  
var b=15;
a=b 代表把b的值赋给a
a==b 结果是ture (只比较数值,不比较类型)
a===b的结果是false(即比较值,也比较类型)

6. 在js代码中加入html标签可以用window.document.write()(window可以省略)

  doucument.write("<p>我是中国人</p>"+"<br>"); 

7.js 数组的声明方式

var arr1=[1,2,3,5];
var arr2=new Array(1,2,3,6);声明包含元素1,2,3,6的数组arr2
var arr3=new Array(18); //声明长度为18的数组arr3

8.js的函数(方法)声明用关键字function

functioln 方法名称(参数列表){
方法体;
return 返回值;
}

var c1=555;
var c2=666;
var c3=0;
function fc(c1,c2){ //参数列表不用写var
c3 = c1+c2;
return c3;
}

9.js的动态函数用关键词Function(注意首字母大写,是js的内置对象)

var add=new Function("x,y","var sum;sum=x+y;return sum;" )
var sum=add(4,5);//add变成了一个方法
alert(sum);//弹出结果是9

等价于

function add(x,y){
var sum;
sum=x+y;
return sum;
}
var sum=add(4,5);
alert(sum); 

10.js匿名函数

var getSum=function(x,y){ //注意此处函数没有名称
	var sum;
    sum=x+y;
	return sum;
}  
var add = getSum(4,5);
alert(add);

11. js对象之String

String对像的属性常用一个是length(长度)

var str = "abc";
alert(str.length);//结果是3

String对象的方法如下:

anchor() 创建 HTML 锚。 
big() 用大号字体显示字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。 
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。 
concat() 连接字符串。 
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。 
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。 
link() 将字符串显示为链接。 
localeCompare() 用本地特定的顺序来比较两个字符串。 
match() 找到一个或多个正在表达式的匹配。 
replace() 替换与正则表达式匹配的子串。  
search() 检索与正则表达式相匹配的值。 
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。 
small() 使用小字号来显示字符串。 
split() 把字符串分割为字符串数组。 
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。 
substring() 提取字符串中两个指定的索引号之间的字符。 
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。 
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。 
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。 
valueOf() 返回某个字符串对象的原始值。 

具体用法参见w3cSchool文档 地址:http://www.w3school.com.cn/jsref/jsref_obj_string.asp

12. js事件句柄(事件触发的方法)

onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

具体用法参见w3cSchool文档 地址:http://www.w3school.com.cn/jsref/dom_obj_event.asp

14. * Array对象

			* 声明数组
				var arr = [12,33];
				var arr = new Array(4,4);
			
			* Array对象
			* 声明数组
				var arr = [12,33];
				var arr = new Array(4,4);
				
			* 属性：length：长度
			* 方法：
				* concat(元素，数组);	返回新的数组
				* join(s)			通过s标识（-），进行分隔，返回字符串
				* pop()				删除末尾的元素，返回最后一个元素
				* push()			向末尾添加元素，返回新数组的长度
				* sort()			排序的方法	

15.Date日期对象

			var date = new Date();	当前的日期
				* Date日期对象
			var date = new Date();	当前的日期
			
			* toLocaleString()	转换本地的日期格式
			* toLocaleDateString()	只包含日期
			* toLocaleTimeString()	只包含时间
			
			* getDate()			返回一个月中的某一天（1-31）
			* getDay()			返回一周中的某一天(0-6)
			* getMonth()		返回月份（0-11）	+1
			* getFullYear()		返回年份
			
			* getTime()			返回毫秒数
			* setTime()			通过毫秒数获取日期
				* var date3 = new Date(1415937050973);
			
			* parse(str)		解析字符串，返回毫秒数
				Date.parse(str);
				
				str：	
					2014-11-14	解析不了
					
					11/14/2014	可以解析
					2014,11,14	可以解析

16.Math 和数学相关的对象

			* math对象（静态的方法）
			* ceil(x)		上舍入
			* floor(x)		下舍入
			* round(x)		四舍五入
			* random()		0-1的随机数
			
			
		* RegExp对象
			* 正则表达式对象
			* 应用：编写注册的表单，对表单输入的内容进行校验。
				
				* var reg = new RegExp("表达式");（开发中不经常使用）
				* var reg = /表达式/			开发中经常使用
					* var reg = /^表达式$/		开发中经常使用
					
					* exec(string)		不经常使用
						* 如果匹配，返回匹配的结果
					
					* test(string)		经常使用
						* 如果匹配，返回是true，如果不匹配，返回是false
						
					if(reg.test("abc")){
						// 匹配上了
						
					}else{
						
					}

17.全局函数

			* 使用全局函数，不需要任何的对象。
			* 全局函数可以拿过来使用。
			* global帮着管理全局函数。
			
			* 全局函数
			* eval()		可以解析字符串，执行字符串中间的js代码
			* isNaN()		判断是否是非数字值
			* parseInt()	解析字符串，返回整数
			
			* encodeURI()	进行编码
			* decodeURI()	解析解码
			
			* encodeURIComponent()
			* decodeURIComponent()
			
			* escape()
			* unescape()

18. BOM 浏览器对象模型

		* (Brower Object Model)
			
			Window  		窗口对象（*****）
			Navigator 		和浏览器版本相关的对象（**）
			Screen 			和屏幕相关的对象（-*）
			History 		和浏览器历史相关（**）
			Location 		和浏览器地址相关的对象（***）
			
			
			
			Document		文档对象

19.Window 窗口对象（*****）

		Navigator 		和浏览器版本相关的对象（**）
			* userAgent	获取浏览器的相关的信息
			* window.navigator.userAgent	window可以省略不写
		
		Screen 			和屏幕相关的对象（-*）
		
		History 		和浏览器历史相关（**）
			* back()		返回上一个页面
			* forward()		去下一个页面
			
			* go()
				* 传参数	go(1)	等于forward()	


						go(-1)	等于back()
					
###Location 		和浏览器地址相关的对象（***）
				* href	获取和设置浏览器的路径（***） 

20.* document对象

			* alert()		弹出提示框
			* confirm("参数")		询问框
				* 提供俩按钮，确定和取消
				* 如果点击是确定，返回true，如果点击取消，返回false
				
			* moveBy()			移动浏览器
				
			* setInterval("函数",毫秒值)		定时相关的
				* 每隔毫秒值执行一次函数
				* 返回唯一的id值
				
			* setTimeout("函数",毫秒值)		
				* 到了毫秒值后执行一次函数
				* 返回唯一的id值
				
			* 清除定时
				clearInterval(id的值)		
				clearTimeout()
				
			* close()	关闭浏览器的窗口
			* open()	打开浏览器窗口
			
			* 属性：
				* opener 返回对创建此窗口的窗口的引用。 
				* win  open()	弹出baidu的窗口
					
					在baidu窗口中  baidu.opener	得到了win的引用。
					
			* document对象方法
				* document.getElementById("nameId"); 获取到是input标签的对象

21.* DOM 文档对象模型

	* Document	Object	Model
	* 文档：标记型文档	（HTML/XML）
	* 对象：封装属性和行为（方法）
	* 模型：共性特征的体现
	
	* DOM解析HTML
		* 通过DOM的方法，把HTML全部（元素（标签）、文本、属性）都封装成了对象。
			<span id="spanId">文本</span>
			
		* DOM想要操作标记型文档先解析。（解析器）
			* DOM解析HTML（浏览器就可以HTML）
			
		* 浏览器DOM解析HTML？
			
			
	* DOM的三个级别：
		
	* DHTML不是一种编程语言。
		* html		：封装数据。	<span>展示给用户的数据</span>
		* css		：设置样式（显示效果）
		* dom		：操作HTML（解析HTML）
		* js		：提供逻辑（判断语句，循环语句）
		
		
	* Document：代表整个文档。
		* 方法：
			getElementById("id的值");			通过元素的id的属性获取元素（标签）对象。
			getElementsByName("name属性值");		通过名称获取元素对象的集合（返回数组）
			getElementsByTagName("标签名称");	通过标签名称获取元素对象的集合（返回数组）
			
			* write("文本的内容（html的标签）")		把文本内容写到浏览器上。
			
			* createElement("元素名称");		创建元素对象
			* createTextNode("文本内容")		创建文本对象
			
			* appendChild("子节点")				添加子节点
			
			<span id=""></span>
			
			
	* Element对象
		* 获取元素对象
			* getAttribute("属性名称");	获取属性的值
			* setAttribute("属性名称","属性的值");	设置或者修改属性的值
			* removeAttribute("属性名称");		删除属性
			
		* 获取元素下的所有子节点（*****）
			* ul.getElementsByTagName();
			
			
	* Node：节点对象
		* nodeName		：节点名称
		* nodeType		：节点类型
		* nodeValue		：节点的值
		
		* parentNode	获取父节点（永远是一个元素节点）
		
		IE6-8 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? IE9-11 Chrome FireFox
		firstChild 第一个节点 ? ? ? ? ? ? ? ? firstElementChild?第一个节点
		lastChild最后一个节点、 ? ? ? ? ? ? ? lastElementChild 最后一个节点
		nextSibling 下一同级节点 ? ? ? ? ? ? ?nextElementSibling?下一同级节点
		previousSibling 上一同级节点 ? ? ? ? ?previousElementSibling?上一同级节点
		
		<ul>
			<li>北京</li>
		</ul>	
		
		* 如果通过ul获取北京的子节点，使用是	ul.firstElementChild;	获取北京的子节点（IE9-11 Chrome FireFox）
			* 但是如果IE6-8，需要使用firstChild;	
			
		<span id="spanId">
			文本内容
		</span>	
		
		* 使用span的标签获取span中间的文本内容（也是对象）,需要使用firstChild;（不管是什么浏览器）
		
		
		* 方法
			* hasChildNodes()		检查是否包含子节点
			* hasAttributes()		检查是否包含属性
			
			* appendChild(node)			父节点调用，在末尾添加子节点
			* insertBefore(new,old)		父节点调用，在指定节点之前添加子节点
			* replaceChild(new,old)		父节点调用，替换节点
			* removeChild(node)			父节点调用,删除节点
			
			* cloneNode(boolean)		不是父节点调用,复制节点
				* boolean	：如果是true，复制子节点
							：如果是false，不复制子节点，默认是false
			
	
	* innerHTML	：获取和设置文本内容。
		* innerHTML属性：
			* 获取文本内容
			* 设置文本内容
			
		* 最常用事件：
			onclick		点击事件
			onload		加载事件
			onfocus		获取焦点事件
			onblur		失去焦点事件