JavaScript（js）笔记

js注释

JavaScript注释与Java注释相同

// 单行注释

/*

    多行注释

*/

js五大基本类型：

number（数值型）、string（字符串性）、boolean（布尔型）、undefined类型、null类型

number包括：数值类型、包含整型、浮点型、NaN和Infinity（无穷大）。

关于数组的空间长度问题：

如何获取数组的空间长度：

通过length属性获取数组的空间长度

数组的length详解：

java：只读属性

js：读写属性

数组元素的默认值：

java：

1、整数类型（byte、short、int、long）的基本类型变量的默认值为0。

2、浮点型（float、double）的基本类型变量的默认值为0.0。

3、字符型（char）的基本类型变量的默认为 “/u0000”。

4、布尔性的基本类型变量的默认值为 false。

5、引用类型的变量是默认值为 null(null就是空对象)。

js：undefined

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来输出数据：

使用 **window.alert() **弹出警告框。

使用 **document.write() **方法将内容写到 HTML 文档中。

使用 **innerHTML 写入到 HTML 元素。

使用console.log() **写入到浏览器的控制台。

js数组排序：

sort()：函数按照字符串顺序对值进行升序排序。

数组.sort(function(a, b){return a - b});

//字符串数组（字母顺序对数组进行排序）

var arr_str = ["Banana", "Orange", "Apple", "Mango"];

var arr_str_sort = arr_str.sort();

document.write(arr_str_sort);

//整形数组

var arr = [9,5,1,2,7,6,4,3,0];

var arr_sort = arr.sort(function(a, b){return a - b});

console.log(arr_sort);

解决js代码放在标签前面或`<head>`内导致js代码无效的解决方案：

使用<script>无效的解决方案：

window.οnlοad = function() {

    //js代码

}

使用jquery无效的解决方案：

$(document).ready(function() {

    //js代码

})

假设法：

1、定义一个变量，标记该变量的值为true。

2、推翻假设，把标记的值修改为false，并且跳出循环。

3、如果标记的值依旧为true，则证明为真；

如果标记的值修改为false，则证明为假

// 1.通过询问框获得一个正整数

var num = prompt("请输入一个正整数");

// a)假设num就是一个质数

var flag = true; // 设置标记的值为true

// 2.通过循环获得[2, num)之间所有的整数

for(var i = 2; i < num; i++) {

    // b)判断num是否能被i整除。

    if(num % i === 0) {

        // 此处已经证明num不是一个质数，那么推翻假设，修改标记的值

        flag = false;

        // 因为此处已经确定num不是一个质数，所以后续循环没必要进行，那么我们需要跳出循环

        break;

    }

}

// c)价差flag标记的值，从而确定num是否是一个质数

if(flag) { // flag == true

    document.write(num + "是一个质数");

} else { // flag == false

    document.write(num + "不是一个质数");

}

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onload	窗体加载事件
onclick	鼠标单击事件
ondblclick	鼠标双击事件
onfocus	获得焦点事件
onblur	失去焦点事件
onchange	选项改变事件（通常用在下拉列表框）
onmousemove	当鼠标移动到某个事件源就会触发
onmouseover	当鼠标悬停到某个事件源就会触发
onmouseout	当鼠标离开某个事件源就会触发
onmousedown	当鼠标按下某个事件源就会触发
onmouseup	当鼠标释放某个事件源就会触发
onkeyup	键盘释放触发
onkeydown	键盘按下触发
onkeypress	键盘在按下和释放之间触发

条件语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
JavaScript三目运算 - 当条件为true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

常用的正则表达式及使用方法：

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子字符串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子字符串。

（详情参照：https://www.runoob.com/js/js-regexp.html）

/*是否带有小数*/

function    isDecimal(strValue )  {

   var  objRegExp= /^\d+\.\d+$/;

   return  objRegExp.test(strValue);

}  

/*校验是否中文名称组成 */

function ischina(str) {

    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定义验证表达式*/

    return reg.test(str);     /*进行验证*/

}

/*校验是否全由8位数字组成 */

function isStudentNo(str) {

    var reg=/^[0-9]{8}$/;   /*定义验证表达式*/

    return reg.test(str);     /*进行验证*/

}

/*校验电话码格式 */

function isTelCode(str) {

    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;

    return reg.test(str);

}

/*校验邮件地址是否合法 */

function IsEmail(str) {

    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;

    return reg.test(str);

}

操作DOM元素的属性

innerHTML：改变DOM树的结构

innerText：不会改变，只会在元素里面添加文本信息

$("div1").innerHTML="<a href='#'>点击我</a>";

$("div2").innerText="<a href='#'>点击我</a>";

setAttribute(属性名,属性值);

getAttrribute(属性名);

removeAttribute(属性名);

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style>

			img{

				width:200px;

				height:200px;

				border:1px solid red;

			}

		</style>

		<script>

			window.onload=function(){

                function $(id){

					return document.getElementById(id);

				}

				$("btn").onclick=function(){

					// 设置操作：将字符串../img/photo.jpg，赋值给img元素的src属性

					$("myImg").setAttribute("src","../img/photo.jpg");

				}

				$("btn2").onclick=function(){

					var imgPath=$("myImg").getAttribute("src");

					alert(imgPath);

				}

				$("btn3").onclick=function(){

					$("myImg").removeAttribute("src");

				}

			}

		</script>

	</head>

	<body>

		<img src=""  id="myImg"/><br />

		<input type="button" id="btn" value="显示图像" />

		<input type="button" id="btn2" value="获取图像路径" />

		<input type="button" id="btn3" value="删除图像路径" />

	</body>

</html>

节点操作

parentNode：访问子节点的父节点

children：访问父节点的子节点

创建和插入子节点

createElement：建立子节点

insertBefore：插入子节点

removeChild：删除父节点的子节点

cloneNode：克隆子节点

全选、全否、反选案例

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>全选、全否、反选</title>

		<script>

			window.onload=function (){

				function $(id){

					return document.getElementById(id);

				}

				/**

				 * 1.定义变量hobbys：存储所有选择的爱好

				 * 2.遍历所有的复选框，取出复选框的值，追加到hobbys变量中

				 * 3.将hobbys变量的值，设置到文本框

				 * */

				// 获取所有的爱好

				var hobbyList =document.getElementsByName("hobby");

				var hobbys="";

				$("btn1").onclick=function(){

					for(var i=0;i<hobbyList.length;i++){

						hobbyList[i].checked=true;

						hobbys+=hobbyList[i].value+"-";

					}

					$("txtResult").value=hobbys;

				}

				// 全否

				$("btn2").onclick=function(){

					for(var i=0;i<hobbyList.length;i++){

						hobbyList[i].checked=false;

					}

					// 清空之前全选的数据

					hobbys="";

					$("txtResult").value="";

				}

				// 反选：获取所有的爱好集合，遍历每个元素，进行取反操作(true->false, false->true)

				$("btn3").onclick=function(){

					hobbys="";

					for(var i=0;i<hobbyList.length;i++){

						//条件成立表示之前已经选中了，true改为false

						if(hobbyList[i].checked){

							hobbyList[i].checked=false;

						}else{

							hobbyList[i].checked=true;

							//一旦选中将复选框的值追加到hobbys变量

							hobbys+=hobbyList[i].value+"-";

						}

					}

					// 将复选框选中的值设置到文本框

					$("txtResult").value=hobbys;

				}

			}

		</script>

	</head>

	<body>

		<input type="checkbox" name="hobby" value="football" />足球

		<input type="checkbox" name="hobby" value="basketball" />篮球

		<input type="checkbox" name="hobby" value="pingpong" />乒乓球

		<input type="checkbox" name="hobby" value="tennis" />网球

		<input type="checkbox" name="hobby" value="swimming" />游泳

		<br />

		<input type="button" id="btn1" value="全选" />

		<input type="button" id="btn2" value="全否" />

		<input type="button" id="btn3" value="反选" />

		<br />

		<input type="text" id="txtResult" size="50px"  placeholder="展示所有爱好"/>

	</body>

</html>

js中Window方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸