Javascript笔记——基础

javascript

	学好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 - 生成日期+时间
      实例化构造函数获取时间对象
              这里显示的是中国标准时间。
              var date = new Date();
              console.log(date);

              这里显示的是毫秒。
              var date2 = Date.now();
              console.log(date2);

              获取特a定的年月日小时等。
              var date3 = new Date();
              console.log(date3.getDetHours()); //获取当前小时
              console.log(date3.getDate()); //获取当前日
              console.log(date3.getFullYear); //获取年份
              console.log(date3.getMonth() + 1); //获取月份
              这里强调一下，JS中月份的数组是从0开始的，所以要+1。
              JS中获取的时间是计算机本地时间。

			2>Math - 数学函数
      这里记录几个很常用的：

              1.Math.abs() // 函数取绝对值

              2.Math.random() //函数返回一个浮点数，范围在[0,1)之间。
              公式：取2到8之间的数字
              Math.random()*( 8 - 2 ) + 2
              获取 n - m 之间的随机数值
              Math.random() * (m - n) + n
              往后取特定的范围都这样取值！！！

              3.Math.floor() //返回小于或等于一个给定数字的最大整数。
        
      3>数组Array对象
              使用push()方法向数组里面最后一个添加元素：
              var arr = [1,2,3,4,5,6,7];
              var s = 8;
              arr.push(s);
              console.log(arr);
              
              使用pop()方法删除最后一个元素：
              var arr = [1,2,3,4,5,6,7];
              arr.pop();
              console.log(arr);
             
              使用slice()方法，由begin和end(不包括end),这里只是提取了一部分，原数组不变：
              var arr = [1,2,3,4,5,6,7];
              console.log(arr.slice(2,4));
              console.log(arr);
            
              使用concat()方法，来合并数组：
              var arr = [1,2,3,4,5,6,7];
              var arr2 = ['A','B','C'];
              var arr3 = arr.concat(arr2);
              console.log(arr);
              console.log(arr3);
             
              使用join()方法和分隔符来将所有数组中的元素连接成字符串：
              var s = arr.join();
              console.log(s);
              这里显示的字符串，中间会参杂“ ，”，因此需要分隔符的帮助。
              例如：
              没有分隔符号：
              var s = arr.join('');
              console.log(s);
              分隔符为‘ - ’：
              var s = arr.join('-');
              console.log(s);

              使用forEach()方法对数组的每一元素执行一次提供的函数。
      4>字符串对象
      举例学一些常用的：

            indexOf()方法来查找相应的字符或字符串第一次出现的位置：
            var s = 'wasdfsdfsdf';
            var arr = s.indexOf('d');
            console.log(arr);
            
            substr(start , Length)方法返回一个字符串中从指定位置开始到指定字符数的字符。
            var s = 'wasdfsdfsdf';
            var arr = s.substr(2,5);
            console.log(arr);
            上面就是从索引为2的位置开始的后5位。

            toLowerCase()方法，将所有字符转换为小写。
            toUpperCase()方法，将所有字符转换为大写。
            var s = "Hello,World"
            var arr = s.toLowerCase();
            console.log(arr);
            
            replace(‘被替换’ , ‘要替换’)方法，替换字符或字符串。

            trim()方法会从一个字符串的两端删除空白字符。

            以下是一个查询JS的一些相关内函数和语句的网站，可以看看：
            https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

            这个网站必备的！

		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()

转载自 (opens new window)