JavaScript总结笔记（实用）

简介
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态特效功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
特点
1>是一种解释型脚本语言（代码不进行预编译）。
2>主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。
3>可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4>跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
5>Javascript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。
6>可以实现web页面的人机交互。

	学好js(jQuery)三要素
		学习抓取和操作节点(HTML标签)
		学习事件绑定
		学习设置函数(方法)
	基础语法
		1>JavaScript中的数据类型
			undefined - 未被定义
			null - 表示对象的初始值
			number - 数值类型
			string - 字符类型
			boolean - 布尔类型,true和false
		2>注释的使用
			// 单行注释  
			/* 多行注释 */
		3>定义变量并赋值
			var name;// 定义
			name = "张三";
			var _name = "李四";
			name = 10;
			_name = true;
			name = true;
		4>typeof - 检验当前变量是哪种类型
			例:
				var a = 10.0;
				a = true;
				var r = typeof(a);
				alert(r);  -- 最终输出是boolean
		5>String类型的常用方法
			字符串对象.length - 获取某个字符串的长度
			字符串对象.charAt(index) - 可以获取到指定下标的值
			字符串对象.indexOf(str) - 可以获取指定字符串在整个字符串中所出现的位置(下标)
			字符串对象.substring(index1, index2) - 可以获取从index1开始到index2截取位置的字符串
			字符串对象.split(str) - 将字符串以指定字符的方式进行分割,返回分割后的数组.
			字符串对象.replace("旧字符串", "新字符串") - 在字符串对象中出现了旧字符串的地方,被新字符串替换

		6>数组创建和使用
			// 创建数组时,可以不指定长度
			// 这个数组可以任意扩展长度
			// 这个数组可以任意存储类型
			var names = new Array(
				"张三", "李四"
			);
			// 添加方式1:直接在定义时添加
			// 添加方式2:利用数组的下标完成添加
			// 两种方式可以并存
			names[2] = 10.5;
			names[3] = 98;
			names[4] = true;
			// 获取数组长度的属性:length
			alert(names.length)
			总结:
				1>JavaScript中的数组是集成了Java中的数组以及List集合的综合体.
				2>JavaScript中只有数组能够存储多值,没有集合的概念.
		7>运算符
			1>算术运算符 +    -   *    /    %    ++    --
			2>赋值运算符 =    +=  -=   *=   /=  %=
			3>比较运算符 >    <     >=    <=     ==    !=   
			4>逻辑运算符 &&   ||    !     &
				&&:短路
					条件1 && 条件2 && 条件3
				&:
					条件1 & 条件2 & 条件3
			5>数据类型转换
				parseInt(bianLiang) : 将任何类型转换成整数类型
				parseFloat(bianLiang) : 将任何类型转换成浮点数类型
		8>逻辑判断
			-------------------------
			if (条件) {
				
			} else {

			}
			-------------------------
			switch (表达式) {
				case 1: 
					break;
				case 2:
					break;
				default:
					break;
			}
			-------------------------
		9>循环
			while (条件) {
				
			}
			-------------------------
			do {

			} while (条件)
			-------------------------
			for (var i = 0; i < 10; i++) {
				// 普通for循环
			}
			-------------------------
			for (var i in 数组名) {
				// 增强型for循环
			}
			-------------------------
			案例:
				var names = new Array(
					"哈哈", "呵呵", "嘿嘿", "嘎嘎", "吼吼"
				)
				// 普通for循环
				/*for(var i = 0; i < names.length; i++) {
					document.write("<h1 style='color: red;'>" + names[i] + "</h1>");
				}*/
				// 增强型for循环
				for(var i in names) {
					document.write("<h1 style='color: blue;'>" + names[i] + "</h1>");
				}
		10>定义函数
			JavaScript函数
				1>系统函数
					parseInt(str) : 将字符串的整数转换为Number类型
					parseFloat(str) : 将字符串的浮点数转换为Number类型
					例:
						var num1Str = "88";
						var num2Str = "99.8";
						alert(num1Str + num2Str); // 输出结果: 8899
						var num1 = parseInt(num1Str);
						var num2 = parseFloat(num2Str);
						alert(num1 + num2);  // 输出结果: 187.8
				2>自定义函数
					对比Java方法
						public int methodName(int num1, int num2) {
							if (num1 > 10) {
								// 方法体
								return num1 + num2; 
							}
						}
					1>无参函数
						function 函数名称() {
							// 函数体
							return 10;
						}
					2>有参函数
						function 函数名称(num1, num2) {
							// 函数体
							if (num1 > 10) {
								return num1 + num2;
							}
						}
						
					注:
						NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
						如果一个函数返回值是NaN,代表着当前值是经过了算术运算符的运算,而运算结果是一个 不是数字的值.要避免出现的.
		11>JavaScript中常用的内置对象
			1>Date - 生成日期+时间
			2>Math - 数学函数
		12>自动函数(定时器)
			开启自动函数
				var intervalId = setInterval("函数名()", 毫秒数);
			关闭自动函数
				clearInterval(intervalId);

	javascript
	  	BOM - 浏览器操作对象
			alert() - 输出并确定
			confirm() - 输出并确定或取消
			prompt() - 输入
		事件
			onload - 在页面初始加载时(页面刚刚被打开时)
				此事件必须由body标签绑定.而且此事件只能在页面初始加载时被执行一次.此后只要不刷新页面,此事件就不会再被启用.
			onclick - 某个节点的鼠标左键单击事件
			onmouseover - 某个节点的鼠标移入事件
			onmouseout - 某个节点的鼠标移出事件
			onkeydown - 某个节点的键盘按下事件
			onkeyup - 某个节点的键盘抬起事件
			onmousedown - 某个节点的鼠标按下事件
			onmouseup - 某个节点的鼠标抬起事件
			onfocus - 某个节点获取焦点时触发事件
			onblur - 某个节点失去焦点时触发事件
		DOM(Document Object Model)
			主要获取节点对象的方式
				document.getElementById() 根据节点中id查找 - 返回一个节点对象
				document.getElementsByName() 根据节点中属性名为name的值查找 - 返回一个节点数组
				document.getElementsByTagName() 根据节点的名称查找 - 返回一个节点数组
				document.getElementsByClassName()
				根据节点的class名称查找-返回一个节点数组
			辅助获取节点对象的方式
				节点对象A.firstElementChild - 获取节点对象A的第一个子节点
				节点对象A.lastElementChild - 获取节点对象A的最后一个子节点
				节点对象A.nextElementSibling - 获取节点对象A的下一个相邻节点
				节点对象A.previousElementSibling - 获取节点对象A的上一个相邻节点
				节点对象A.parentNode - 获取节点对象A的父节点对象
			操作节点
				获取节点的名称
					节点对象.nodeName
				为节点对象设置样式
					节点对象.style.设置样式名称 = 具体样式的值
				获取或设置节点对象的文本
					getter - 节点对象.innerText
					setter - 节点对象.innerText = 具体文本内容
				获取或设置节点对象的文本+子节点
					getter - 节点对象.innerHTML
					setter - 节点对象.innerHTML = 具体的节点内容
				获取或设置表单节点对象中的value值
					getter - 表单节点对象.value
					setter - 表单节点对象.value = 值
				获取或设置节点的属性值
					getter - 节点对象.getAttribute("属性名")
					setter - 节点对象.setAttribute("属性名", "属性值")
				去除节点属性
					removeAttribute("属性名");

				创建新的节点[在缓存中]
					document.createElement("节点名称")
				追加新节点到父节点中子节点最后位置
					父节点对象.appendChild(新节点对象)
				追加新节点到父节点中子节点第一个位置
					父节点对象.insertBefore(新节点对象, 父节点对象.firstElementChild)
				追加新节点到父节点中子节点末尾上一个位置(倒数第二)
					父节点对象.insertBefore(新节点对象, 父节点对象.lastElementChild)
		
	正则表达式
		正确的规则,由我们程序员去完成编写,编写法则.
			/正确法则/ : 定义正则
			^ : 以某规则开始
			$ : 以某规则结束
			\d : 只能输入一位数字
			\w : 只能输入一位数字、下划线、英文(忽略大小写)
			{n} : 限制输入的长度只能是指定n的长度,多一位少一位都不行
			{n,} : 限制输入的长度最低不能少于指定n的长度,至多无穷大
			{n,m} : 限制输入的长度最低不能少于指定n的长度,至多不能多于指定m的长度
			* : 等价于{0,}
			+ : 等价于{1,}
			? : 等价于{0,1}
		附加参数:
			g : global,整个字符串全局查找.类似于每个软件的Ctrl+F全局搜索.
			示例:
				var reg = /a/g;
				var str = "abc,abd,afg";
				str = str.replace(reg, "*");
				输出str结果:"*bc,*bd,*fg";
		示例:
			// 设置邮箱和手机的正则
		    var regMobile = /^1[3-8]\d{9}$/;
		    var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;

	jQuery
		写的更少,做的更多.
		使用方式和语法结构
			导入JavaScript程序库
			$() : 装载节点的方式
			"" : 获取节点的选择器
			事件(函数(){})
		事件
		--jQuery和JavaScript共有的事件
			初始加载事件
				1>$(document).ready(function(){})
					与JavaScript中的onload是一个作用.
					但是ready事件在整个HTML页面中可以出现多次.
				2>$().ready(function(){})
				3>$(function(){})
			鼠标左键单击事件
				节点对象.click(function(){})
			鼠标移入事件
				节点对象.mouseover(function(){})
			鼠标移出事件
				节点对象.mouseout(function(){})
			键盘按下事件
				节点对象.keydown(function(){})
			键盘抬起事件
				节点对象.keyup(function(){})
			鼠标按下事件
				节点对象.mousedown(function(){})
			鼠标抬起事件
				节点对象.mouseup(function(){})
		--jQuery独有的事件
			获取焦点
				节点对象.focus(function(){})
			失去焦点
				节点对象.blur(function(){})
			复合事件
				绑定事件(一对多:一个节点对象绑定多个事件)
					节点对象.bind({
			            "事件名称": 匿名函数function() {},
			            "事件名称": 匿名函数function() {},
			             ...
			             "事件名称": 匿名函数function() {}
			        })
					限制:一个绑定事件中只允许出现一次同名事件
				鼠标悬浮事件
					节点对象.hover(
						function(){},  // 鼠标移入
						function(){}   // 鼠标移出
					)
				鼠标连击事件
					节点对象.toggle(
						function(){},
						function(){},
						function(){},
						......
						function(){}
					)
		DOM
			获取节点的方式
				获取当前节点 - this,必须保证外层抓取了多个节点,必须保证调用相应事件和节点共同使用
				选择器
					基本选择器
						标签选择器 - $("标签名")
						类选择器 - $(".类名")
						ID选择器 - $("#ID名")
						并集选择器 - $("选择器1,选择器2") - 同时选择多个节点对象
						全局选择器 - $("*") - 抓取所有节点对象
					层次选择器
						后代选择器 - $("选择器1 选择器2") - 获取选择器1中的所有子孙节点
						子选择器 - $("选择器1>选择器2") - 获取选择器1中的所有子节点,孙后的节点不算
						相邻选择器 - $("选择器1+选择器2") - 获取选择器1后面相邻的节点
						同辈选择器 - $("选择器1~选择器2") - 获取选择器1后面的所有节点,但不包含自己,也不包含前面
					属性选择器
						属性名 - $("[属性名]") - 根据节点中的属性名获取节点对象
						属性值 - $("[属性名='属性值']") - 根据节点中的属性值获取节点对象
						属性值开头 - $("[属性名^='属性值']") - 根据节点中属性值以开头的形式获取节点对象
						属性值末尾 - $("[属性名$='属性值']") - 根据节点中属性值以末尾的形式获取节点对象
						属性值包含指定字符 - $("[属性名*='属性值']") - 根据节点中属性值所包含的字符获取节点对象
						属性中去除指定元素 - $("[属性名!='属性值']") - 根据节点中的属性名所指定的非属性值获取节点对象
					基本过滤选择器
						$(":eq(下标)") - 根据当前节点对象的下标获取
						$(":first") - 根据当前节点对象的第一个下标获取
						$(":last") - 根据当前节点对象的最后一个下标获取
						$(":not(获取节点对象选择器)") - 获取排除某个通过选择器获取的节点对象的其他节点对象
						$(":even") - 根据当前节点对象的偶数下标获取
						$(":odd") - 根据当前节点对象的基数下标获取
						$(":gt(下标)") - 根据当前节点对象下标大于指定的下标获取
						$(":lt(下标)") - 根据当前节点对象下标小于指定的下标获取
					可见性过滤选择器
						:visible - 获取所有显示的节点对象
						:hidden - 获取所有隐藏的节点对象

			操作节点的方式
				设置节点对象样式 - 节点对象.css({"属性":"属性值", "属性":"属性值"})
				显示
					1 - show()
					2 - slideDown()
					3 - fadeIn()
				隐藏
					1 - hide()
					2 - slideUp()
					3 - fadeOut()
				获取表单节点对象的value值
					节点对象.val() - 取值
					节点对象.val("具体的value值") - 赋值
				获取除表单之外的节点对象的文本值
					节点对象.text() - 取值
					节点对象.text("具体的文本值") - 赋值
				获取除表单之外的节点对象的子节点+文本值
					节点对象.html() - 取值
					节点对象.html("具体的子节点+文本值") - 赋值
				获取或设置节点的属性值
					节点对象.attr("属性名")
					节点对象.attr("属性名", "属性值")
				获取多个节点对象中当前节点对象的下标
					$(当前节点对象).index()
				获取指定节点的父节点
					指定节点.parent()
				获取指定节点的指定祖先节点
					指定节点.parents("指定祖先节点名称")
				获取指定节点的所有子节点
					指定节点.children()
				获取指定多节点中的第一个节点
					指定节点.first()
				获取指定多节点的最后一个节点
					指定节点.last()
				获取指定节点的下一个相邻节点
					指定节点.next()
				获取指定节点的上一个相邻节点
					指定节点.prev()
				创建节点
					var $div = $("<div><p style='color:red;font-size:20px;font-family:华文中宋;'>Hello</p></div>")
				追加节点至父节点中子节点的末尾
					父节点对象.append(新节点对象)
				追加节点至父节点中子节点的第一个位置
					父节点对象.prepend(新节点对象)
				追加节点至指定节点的后面
					指定节点.after(新节点对象)
				追加节点至指定节点的前面
					指定节点.before(新节点对象)
				删除指定的节点
					指定节点.remove()
				清空指定节点的所有内容
					指定节点.empty()