JavaScript整理

2023-11-07

第一章 JavaScript概述

1.1 JavaScript简介

JavaScript 简称js 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

总结：js是一种弱类型的语言，由浏览器内核解释运行。

1.2 JavaScript发展史

它最初由Netscape（网景公司）的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程(node.js)。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。

Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。为了互用性，Ecma国际（前身为欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。两者都属于ECMAScript的实现。尽管JavaScript作为给非程序人员的脚本语言，而非作为给程序人员的脚本语言来推广和宣传，但是JavaScript具有非常丰富的特性。

发展初期，JavaScript的标准并未确定，同期有Netscape的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立。1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。

JavaScript 实现是由以下 3 个不同部分组成:ECMAScript、DOM、BOM

1.3 javascript的作用

html负责网页的结构骨架

css负责网页的美观

js负责网页的动态效果。

JavaScript简称js 负责用户与浏览器的交互

表单验证—减轻服务器压力
页面动态效果：层的切换和树形菜单
动态改变页面内容：动态改变表格

1.4JavaScript与Java不同

JS是基于对象，Java是面向对象。
JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
JS是弱类型，Java是强类型。

1.5 JS的声明和引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js的声明和引入</title>
		<!--声明js代码域-->
		<!--引入外部声明好的js文件-->
		<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<script type="text/javascript">
			alert("这是我的第一个js")
		</script>
	</body>
</html>
<!--
	js的声明学习：
		1、在head标签中使用script标签进行js代码域的声明
			<script type="text/javascript">
					alert("这是我的第一个js")
			</script>
			作用：
				声明js代码域
			特点:
				js的代码只会作用于当前网页
		2、在head标签中使用script标签引入外部声明好的js文件
			<script src="相对路径" type="text/javascript" charset="utf-8"></script>
			作用：引入外部声明好的js文件
			特点：
				实现js代码的重复使用，避免代码的冗余。
	注意：
		因为js在HTML文档中是一门单独的语言，可以声明在文档中的任意位置
		一般情况下声明在head标签中。
-->

第二章 JavaScript基本语法

2.1 变量声明

JS中的所有变量声明只有var关键字

<script type="text/javascript">
	var a=123;
	var a1=3.1415926;
	var a2="js";
	var a3='k';
	var a4=true;
	var a5=new Date();
</script>

注意:

js的变量名是严格区分大小的。
js中的字符串可以使用双引号也可以使用单引号。
js中可以声明同名变量，不会报错，后面的会将前面的声明覆盖。
var关键字可以省略，但是一般不省略。
js是弱类型语言，使用var可以定义任意类型的数据。

<!--变量提升-->
<script type="text/javascript">
	var a=12;//全局变量
	alert(a);//12
	function go(){
		/**
		 * 变量作用域提升，
		 * 在函数里面声明一个变量，该变量的声明会被提升到函数的最上面，赋值不会被提到最上面。
		 */
		alert(a);//undefined
		var a=13;//局部变量			
		alert(a);//13
	}
				
	function go1(){
		var a;//变量只有声明，没有赋值那么他就是 undefined 没有被定义的。
		alert(a);//undefined
		a=13;//局部变量			
		alert(a);//13
	}	
	go1();					
</script>

2.2 数据类型

数据类型判断关键字：typeof

数值类型

<script type="text/javascript">
	var a=12;//整数
	var b=12.3;//小数
	alert(typeof a);//number
</script>

字符串类型

<script type="text/javascript">
	var a='今天天气好';
	var b="Hello JavaScript";
	alert(typeof a);//string
</script>

布尔类型

<script type="text/javascript">
	var a=true;
	var b=false;
	alert(typeof a);//boolean
</script>

引用数据类型(对象,数组)

<script type="text/javascript">
	var a=new Date();
    var b=null;
	alert(typeof a);//object
</script>

特殊数据类型(null,undefined)

<script type="text/javascript">
	var a;
	alert(typeof a);//undefined
</script>

2.3 类型转换

<script type="text/javascript">
	var a=parseInt("12");//通过parseInt将字符串转换成number类型
	var b=parseFloat("3.14");//通过parseFloat将字符串转换成number类型
	var q="we12";//string类型
	var w=parseInt(q);//NaN 会转换失败变成NaN
	document.write(转换后:"+w+"是"+typeof(w)+"类型"+"<br/>");//转换后:NaN是number类型
	var q1="12we";
	var w1=parseInt(q1);//12 当它检查到字符 w 时，就会停止检测过程
	document.write(转换后:"+w1+"是"+typeof(w1)+"类型"+"<br/>");//转换后:12是number类型
	document.write(isNaN("abc")+"<br/>"); //true  isNaN()函数,判断是否为数值
	document.write(isNaN("123")+"<br/>"); //false
</script>

第三章运算符

3.1 算术运算符

(+ - * / %)

加法运算符:

<script type="text/javascript">
	alert(1+2);//3
	alert(1+"2");//12 字符串拼接
	var a=NaN;
	alert(a+2);//NaN 某个运算数是 NaN，那么结果为 NaN
	alert(1+true);//2 变量是布尔类型的时候，true=1, false=0;
	alert("hello"+true);//Hellotrue 字符串拼接
</script>

除法运算符

<script type="text/javascript">
	alert(3/2);//1.5
	alert(parseInt(11/4));//2 求商,取整
	alert(3%2);//1 取余
	alert(1/0);//Infinity 除数为0的话结果值是Infinity表示无穷大
 alert(1/Infinity);//0
	alert(Math.ceil(2/3));//1 向上取整
	alert(Math.floor(2/3));//0 向下取整
</script>

3.2 关系运算符

<script type="text/javascript">
 //(>  <  >=  <=  !=  ==   ===)
	alert(3>2);//true
	alert("3">2);//true JS会把字符串转换成数字再进行比较
	var a=1;
	var b="1";
 var c=true;
 var d="true";
 alert(a==c);//true
 alert(a==d);//false
 alert(b=c);//true
	alert(a==b);//true 
 //等值运算符:== 先判断类型，类型一致则直接比较。类型不一致，则先使用Number()进行强转后再进行比较。
	alert(a===b);//false 
 //等同运算符:=== 先判断类型，类型不一致直接返回false。类型一致再根据内容相同返回true/false。
	//null和undefined在做==判断时候返回true	
</script>

3.3 逻辑运算符

(! & && | || ) 跟Java一致

3.4自增运算符

(++ – += -=等) 跟Java一致

第四章流程控制语句

在判断语句中,判断的条件会发生自动类型转换：

number：如果非0为true，0为false

string：如果非null或非空为true，否则为false

undefined：false

NaN: false

对象类型：非null为true，null为false。
switch语句与Java的不同点
1. 基本数据类型都可以传递给switch case语句。
2. case语句可以是表达式(比如x>18)
循环体内声明的变量能在循环体外访问

for-in循环对应Java的for-each循环

<script type="text/javascript">
	for(var item in window){
		document.write(item+"<br/>");
	}
</script>

With语句

<script type="text/javascript">
	with(document){
		write("你好!");
		write("<br/>这个文档的标题是:"+title);
		write("<br/>这个文档的URL是:"+URL);
		write("<br/>现在你不用每次都写出document对象的前缀了!");
	}
</script>

第五章函数

<script type="text/javascript">
	/*
	function 函数名(形参列表){ 
		函数体;
	}
	*/
// 	1.声明一个无参函数
	function hello(){
		alert("hello JavaScript!");
	}
	hello();//hello JavaScript!
	var a=hello();//hello JavaScript!
	alert(a);//undefined 
    //如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。
//	2.声明一个有参函数
	function add(a,b){
		alert(a+b);
	}
	add(1,2);//3
//	3.声明一个有形参有返回值的方法
//	return 1.结束方法2.把返回值的值返回给调用者
	function fun(a,b){
		return a+b;
	}
	var c=fun(1,2);//3
</script>

注意:

不需要类型,只写形参的名称就可以了
JavaScript中的函数没有重载的形式,后定义的函数会直接覆盖前面的函数
一个函数可以接收任意个实际参数
实参个数少于形参个数时,没指定的是undefined
实参个数多余形参个数时,多余的舍去.

特点:

使用function关键字定义函数。
没有任何的返回值类型。
函数的定义优先执行，与顺序无关。
参数列表不能有var关键字。
函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
JavaScript函数天然的支持可变参数。
同名的函数最后声明会覆盖前面以声明。Javascript中没有函数重载。

第六章事件

基本上所有的HTML元素中都可以指定事件属性。
所有的事件属性都是以on开头，后面的是事件的触发方式

常用的事件类型:

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

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				height: 30px;
				width: 150px;
				background-color: green;
				font-size: 20px;
			}
			#div2{
				height: 30px;
				width: 150px;
				background-color: red;
				line-height: 30px;
			}
		</style>
		<script type="text/javascript">
			function testOnclick(){
				alert("点我干嘛!");
			}
			function testOndblclick(){
				alert("还敢点我两下!");
			}
			function mOver(obj){
				obj.style.backgroundColor="yellow";
				obj.innerHTML="onmouseover";
			}
			function mOut(obj){
				obj.style.backgroundColor="red";
				obj.innerHTML="onmouseout";
			}
			function onFocus(obj){
				obj.style.backgroundColor="yellow";
				obj.placeholder="onfocus";
			}
			function onBlur(obj){
				obj.style.backgroundColor="#fff";
				obj.placeholder="onblur";
			}
			function mDown(obj){
				obj.style.backgroundColor="#1ec5e5";
				obj.innerHTML="onmousedown";
			}
			function mUp(obj){
				obj.style.backgroundColor="red";
				obj.innerHTML="onmouseup";
			}
			function onChange(){
				var a=document.getElementById("txt");
				a.value="onchange";
			}
		</script>
	</head>
	<body>
		<p><input type="button" value="单击" onclick="testOnclick()"/></p>
		<p><input type="button" value="双击" ondblclick="testOndblclick()"/></p>
		<div id="div1" onmouseover="mOver(this)" onmouseout="mOut(this)"/>
			我是div
		</div>
		<br/>
		<div id="div2" onmousedown="mDown(this)" onmouseup="mUp(this)">
			请按住我
		</div>
		<p><input type="text" placeholder="请点击输入框" onfocus="onFocus(this)" onblur="onBlur(this)"/></p>
		<p>onchange<input type="text" id="txt" onchange="onChange()"/></p>
	</body>
</html>

第七章复合数据类型

7.1 JS内置的对象String

<script type="text/javascript">
	var str = "Hello JavaScript!";
	document.write(str + "<br/>");
	document.write(str.length + "<br/>"); //返回字符串的长度
	document.write(str.blink() + "<br/>"); //显示闪动(???)
	document.write(str.bold().italics().big().strike().fontcolor("red") + "<br/>"); //粗体,斜体,大号,删除线,颜色(红色)
	document.write(str.charAt(2) + "<br/>"); //l
	document.write(str.charCodeAt(2) + "<br/>"); //108
	var str1 = "Hello";
	var str2 = "JavaScript!";
	document.write(str1.concat(str2) + "<br/>"); //与+功能一样
	document.write(str.fontsize(7) + "<br/>"); //size 参数必须是从 1 至 7 的数字。
	document.write(String.fromCharCode(72, 69, 76, 76, 79) + "<br/>"); //HELLO
	document.write(str.indexOf("JavaScript") + "<br/>"); //6
	document.write(str.link("https://www.baidu.com") + "<br/>"); //链接到百度
	document.write(str.replace(/JavaScript/, "world") + "<br/>"); //替换
	document.write(str.search(/JavaScript/) + "<br/>"); //6
	document.write(str.slice(1, 3) + "<br/>"); //el 截取片段
	document.write(str.substr(1, 2) + "<br/>"); //el 2代表长度
	document.write(str.substring(1, 5) + "<br/>"); //ello 与slice类似
	document.write(str.split("") + "<br/>"); //H,e,l,l,o, ,J,a,v,a,S,c,r,i,p,t,! 返回的是数组
	document.write(str1.sup() + str2.sub() + "<br/>"); //上标和下标
	document.write(str.toLowerCase() + "<br/>"); //转换为小写
	document.write(str.toUpperCase() + "<br/>"); //转换为大写
	var str = "1 plus 2 equal 3"
	document.write(str.match(/\d+/g)); //1,2,3 正则表达式
</script>

7.2 JS内置的对象Date

方法	描述
Date()	返回当日的日期和时间。
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setTime()	以毫秒设置 Date 对象。
toSource()	返回该对象的源代码。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。
toDateString()	把 Date 对象的日期部分转换为字符串。
toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串。
UTC()	根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。
valueOf()	返回 Date 对象的原始值。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<span id="time"></span>
	</body>
			<script type="text/javascript">
		function showDate() {
			var date = new Date();
			// alert(date);//Tue Apr 09 2019 11:32:00 GMT+0800 (中国标准时间)
			// alert(date.toLocaleString());//2019/4/9 上午11:33:19
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			var hour = date.getHours();
			var minute = date.getMinutes();
			var second = date.getSeconds();
			var week = date.getDay();
			switch (week) {
				case 0:
					week = "周日";
					break;
				case 1:
					week = "周一";
					break;
				case 2:
					week = "周二";
					break;
				case 3:
					week = "周三";
					break;
				case 4:
					week = "周四";
					break;
				case 5:
					week = "周五";
					break;
				case 6:
					week = "周六";
				default:
					break;
			}
			var str=year+"年 "+month+"月 "+day+"日 "+hour+":"+minute+":"+second+week;
			document.getElementById("time").innerHTML=str;
		}
		//调用函数
		showDate();
		//JS提供的定时器
		setInterval("showDate()",1000);//每经过指定毫秒值后执行指定的代码。
		//setTimeout(代码, 毫秒数)  经过指定毫秒值后执行指定的代码（只执行一次）。
	</script>
</html>

7.3 JS内置的对象Math

Math对象属性

属性	描述
E	返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2	返回 2 的自然对数（约等于0.693）。
LN10	返回 10 的自然对数（约等于2.302）。
LOG2E	返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E	返回以 10 为底的 e 的对数（约等于0.434）。
PI	返回圆周率（约等于3.14159）。
SQRT1_2	返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2	返回 2 的平方根（约等于 1.414）。

Math对象方法

方法	描述
abs(x)	返回数的绝对值。
ceil(x)	对数进行上舍入。
cos(x)	返回数的余弦。
exp(x)	返回 e 的指数。
floor(x)	对数进行下舍入。
log(x)	返回数的自然对数（底为e）。
max(x,y)	返回 x 和 y 中的最高值。
min(x,y)	返回 x 和 y 中的最低值。
pow(x,y)	返回 x 的 y 次幂。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。
toSource()	返回该对象的源代码。
valueOf()	返回 Math 对象的原始值。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential()	把对象的值转换为指数计数法。
toPrecision()	把数字格式化为指定的长度。

7.4 JS数组

JS数组的特点:

数组定义时无需指定数据类型
数组定义时可以无需指定数组长度
数组可以存储任何数据类型的数据

Array 对象方法

方法	描述
concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始

<script type="text/javascript">
	//第一种:使用Array的构造函数
	var arrs=new Array();//不指定长度,默认长度是0
	arrs[0]="hello";
	arrs[1]="1";
	arrs[2]="3.14";
	arrs[4]=true;
	var arr=new Array(10);//创建数组并指定长度
	var arr=new Array("hello","hi");//直接实例化
	//第二种:
	var arr=["aa",100,true];//隐式创建
	var arr=[];//创建空数组
	//数组的遍历
	//方式一:使用for循环(通常的做法)
	for (var i = 0; i < arrs.length; i++) {
		document.write(arrs[i]+"<br/>");
	}
	//方式二:使用for-in循环(一般遍历对象时用)
	for(var i in arrs){
		document.write(i+"-->"+arrs[i]+"<br/>");
	}//不会输出未定义的元素
	document.write(arrs[6]+"<br/>");//undefined 下标越界时显示undefined
	document.write("----------------"+"<br/>");
	//数组方法的使用
	var a=new Array();//不指定长度,默认长度是0
	a[0]="hello";
	a[1]="1";
	a[2]="3.14";
	a[3]=true;
	a.push("push");//向数组的末尾添加一个元素
	for(var i in a){
		document.write(i+"-->"+a[i]+"<br/>");
	}
	document.write(a.length);//返回数组的长度
</script>

7.5 自定义对象

<script type="text/javascript">
	//用字面量创建对象
	var p={
		id:1001,//用,号隔开
		name:"Jack",//属性值可以是任意类型的数据
		age:37,
		sex:'男',
		sayHello:function(){//创建方法
			alert('你好!');
		},
		girlFriend:{//子对象
			name:'rose',
			age:33,
			sex:'女'//最后一个属性不用加,
		},
		babys:[
			{
				name:"xiaoming"
			},
			{
				name:"xiaohua"
			}
		]
	};
	p.money=99999;//给对象追加属性
	alert(p.id+"--"+p.name+"--"+p.money);//访问对象属性
	p.sayHello();//调用方法
	alert(p.girlFriend.name);//访问子对象属性
	alert(p.babys[1].name);
</script>

第八章 JSON

JSON指的是JavaScript对象表示法(JavaScript Object Notation)

JSON是轻量级的文本数据交换格式

JSON独立于语言

JSON具有自我描述性,更易理解

<script type="text/javascript">
	//key是字符串 value是object
	var p = {
		"name": "Jack",
		"age": 37,
		"sex": "男",
		"girlfriend": {
			"name": "rose",
			"age": 33,
			"sex": "女"
		},
		"friends": [{
				"name": "lili"
			},
			{
				"name": "feifei"
			},
			{
				"name": "lisa",
				"girlfriend": {
					"name": "xiaolizi",
					"age": 22,
					"sex": "男"
				}
			}
		]
	}
	alert(p.name);//访问属性
	alert(p.friends[2].girlfriend.name);
	//将json对象转成json格式的字符串 使用JSON内置对象
	var jsonStr=JSON.stringify(p);
	alert(jsonStr);
	//把json格式的字符串转成js对象
	var p1=JSON.parse(jsonStr);
	alert(typeof(p1)+"-->"+p1.girlfriend.name);
	//eval方法可以把字符串当作js代码来解析
	var p2=eval("("+jsonStr+")");//内层的括号可以强制把字符串当做js的对象来进行解析。
	alert("eval-->"+typeof(p2)+"-->"+p2.friends[2].girlfriend.name);
</script>

第九章 BOM编程

BOM全称 Browser Object Model，浏览器对象模型。

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

BOM编程主要是操作：window对象;screen对象;history对象;location对象

9.1 window对象

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在或每次出现时被自动创建。

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
        function del() {
            //1.prompt() 输入框
            var str = prompt("请输入del删除:" /* ,del */ ); //第二个参数是用户输入的默认值
            if (str == "del") {
                //2.confirm() 选择确定框
                if (confirm("确认删除吗?")) {
                    //3.显示一个警告框
                    alert("删除成功");
                }
            }
        }

        function testOpen() {
            window.open("https://www.baidu.com", "_blank", "width=1366px,height=768px");
            // window.open() - 打开新窗口
            // window.close() - 关闭当前窗口
            // window.moveTo() - 移动当前窗口
            // window.resizeTo() - 调整当前窗口的尺寸
        }
    </script>
</head>
<body>
    <p><input type="button" onclick="del()" value="删除" /></p>
    <p><input type="button" onclick="testOpen()" value="百度" /></p>
</body>

定时器相关

<script type="text/javascript">
    var x = setTimeout("fun()", 5000); //设置5秒后执行一次代码
    clearTimeout(x); //清除定时器
    var y = setInterval("fun()", 5000); //没隔5秒执行一次代码
    clearInterval(y); //清除定时器
</script>

9.2 screen对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

属性：

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。

availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。

height 获取屏幕的垂直分辨率。

width 获取屏幕的水平分辨率。

<script type="text/javascript">
    document.write("屏幕工作区: " + screen.availHeight + "," + screen.availWidth + "<br>");
    document.write("屏幕分辨率: " + screen.height + "," + screen.width + "<br>");
</script>

9.3 location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location对象在编写时可不使用window这个前缀。

<script type="text/javascript">
    //hostname:返回 web 主机的域名
    document.write(location.hostname + "<br/>"); //127.0.0.1
    //pathname:返回当前页面的路径和文件名
    document.write(location.pathname + "<br/>"); // /%E4%BD%9C%E4%B8%9A/demo.html
    //port:返回 web 主机的端口
    document.write(location.port + "<br/>"); //8848
    //protocol:返回所使用的 web 协议
    document.write(location.protocol + "<br/>"); //http:
    //href:返回当前页面的 URL
    document.write(location.href + "<br/>"); //http://127.0.0.1:8848/%E4%BD%9C%E4%B8%9A/demo.html
    location.reload();//重载,刷新
</script>

9.4 history对象

window.history 对象包含浏览器的历史。

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

<script type="text/javascript">
    function testForward(){
        history.forward();//与在浏览器中点击按钮向前相同
    }
    function testback(){
        history.back();//与在浏览器点击后退按钮相同
    }
    function testGo(){
        history.go(2);//前进2次;负数代表后退
    }
</script>

第十章 DOM编程

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

· JavaScript 能够改变页面中的所有 HTML 元素。

· JavaScript 能够改变页面中的所有 HTML 属性。

· JavaScript 能够改变页面中的所有 CSS 样式。

· JavaScript 能够对页面中的所有事件做出反应

10.1 查找HTML元素

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
				//1.通过id找到html元素
				var inp1=document.getElementById("inp1");
				alert(inp1.id);//inp1
				//2.通过标签名找到html元素-->是个数组
				var arr=document.getElementsByTagName("div");
				alert(arr[0].innerHTML);//1
				//3.通过类名找到html元素-->是个数组
				var arr2=document.getElementsByClassName("cl1");
				alert(arr2[1].innerHTML);//2
			}
		</script>
	</head>
	<body>
		<input type="text"  id="inp1" />
		<input type="text"  id="inp2" />
		<div class="cl1">1</div>
		<div class="cl1">2</div>
		<div>3</div>
	</body>
</html>

10.2 查找HTML属性2(了解)

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			访问属性
				all 	获取页面所有标签
				forms	获取页面form标签
				images	获取页面img
				links	获取页面a
				anchors	获取锚链接
				body	获取页面的body
			 */
		window.onload=function(){
			var  allNodes=document.all;
			alert(allNodes.length);//23
			var  form=document.forms;
			alert(form.length);//1
			var  img=document.images;
			alert(img.length);//3
			var  aNodes=document.links;
			alert(aNodes.length);//3 只统计带href的a标签
		}
			
		</script>
	</head>
	<body>
		<img src="xxx" alt="这是一个美女1"/>
		<img src="xxx" alt="这是一个美女2"/>
		<img src="xxx" alt="这是一个美女3"/>
		<a href="http://www.baidu.com">百度一下</a>
		<a href="http://www.google.com">谷歌</a>
		<a href="http://www.baigu.com">百谷一下</a>
		<a name="one"></a>
		<a name="two"></a>
		<form>
			<label>姓名:</label><!--默认不写type 就是文本输入框-->
			<input  type="text"/>
		</form>
	</body>
</html>

10.3 通过节点关系查找(了解)

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/**
			从一个节点出发开始查找：
			parentNode	获取当前元素的父节点。
			childNodes	获取当前元素的所有下一级子元素。(儿子节点) (包括空格换行和注释)
			firstChild	获取当前节点的第一个子节点。(包括空格换行和注释)
			lastChild	获取当前节点的最后一个子节点。(包括空格换行和注释)
			nextSibling	获取当前节点的下一个节点。（兄节点）(包括空格换行和注释)
			previousSibling	获取当前节点的上一个节点。（弟节点）(包括空格换行和注释)
			
			parentElemnt  也可以获取父节点
			children	获取当前元素的所有下一级子元素 (只包含元素节点)
			firstElementChild	获取当前节点的第一个子节点 (只包含元素节点)
			lastElementChild	获取当前节点的最后一个子节点 (只包含元素节点)
			nextElementSibling	获取当前节点的下一个节点 没有的话返回null (只包含元素节点)
			previousElementSibling	获取当前节点的上一个节点 (只包含元素节点)
			
			获取节点对象的信息
			nodeType	节点类型[元素:1;文本:3;注释:8]
			nodeName	节点名称[元素:标签名称;属性:属性名称;文本:#text;文档:#document]
			nodeValue	节点值[文本:所包含的文本;属性:属性值;注释:注释内容]
			*/
			
			window.onload=function(){
				//获取页面的第一个表单元素
				var f=document.forms[0];
				//parentNode	获取当前元素的父节点。
				var pNode=f.parentNode;
				//nodeName 对于标签 就是标签名
				//alert(pNode.id);
				
				//childNodes	获取当前元素的所有下一级子元素。   儿子节点
				var allCN=f.childNodes;
				for(var i=0;i<allCN.length;i++){
					alert(allCN[i].nodeName+"--->");
					
				}
				
				alert("firstChild："+f.firstChild.nodeName);
				alert("lastChild："+f.lastChild.nodeName);
				alert("nextSibling："+f.nextSibling.nodeName);
				alert("previousSibling："+f.previousSibling.nodeName);

				alert("firstElementChild："+f.firstElementChild.nodeName);
				alert("lastElementChild："+f.lastElementChild.nodeName);
				alert("nextElementSibling："+f.nextElementSibling.nodeName);
				alert("previousElementSibling："+f.previousElementSibling.nodeName);
			}
		</script>
	</head>
	<body id="bd">
		<img src="xxx" alt="这是一个美女1"/>
		<img src="xxx" alt="这是一个美女2"/>
		<img src="xxx" alt="这是一个美女3"/>
		<a href="http://www.baidu.com">百度一下</a>
		<a href="http://www.google.com">百度两下</a>
		<a href="http://www.baigu.com">百谷一下</a>
		<a name="one"></a>
		<a name="two"></a>
		<form>
			<label>姓名:</label><!--默认不写type 就是文本输入框-->
			<input  type="text"/>
			<div>
				<span>111</span>
			</div>
		</form>
		<div>1111</div>	
	</body>
</html>

10.4 节点操作

动态表格案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				border-collapse: collapse;
				margin: 0 auto;
			}
			th,td {
				width: 120px;
				height: 46px;
				border: 1px solid blue;
			}
			.btn {
				width: 100px;
				height: 29px;
				background-color: deepskyblue;
				color: palevioletred;
				font-size: 20px;
			}
			input {
				width: 120px;
				height: 46px;
			}
		</style>
		<script type="text/javascript">
			/*
			document.createElement("标签名") 创建新元素节点
			document.setAttribute("属性名","属性值") 设置属性
			
			elt.removeChild(eChild) 删除指定的子节点
			node.remove() 删除该节点
			
			elt.appendChild(e) 添加元素到elt中最后的位置
			elt.insertBefore(new child); 添加到elt中,child之前
			*/
			var num = 1;
			window.onload = function() {
				document.getElementById("add").addEventListener("click", function() {
					//创建一个tr标签
					var tr = document.createElement("tr");
					//创建3个td标签
					var td1 = document.createElement("td");
					td1.innerHTML = ++num;
					var td2 = document.createElement("td");
					var td3 = document.createElement("td");
					//创建input标签
					var inp = document.createElement("input");
					inp.setAttribute("type", "text");
					//把input标签放到td2里面
					td2.appendChild(inp);
					var inp2 = document.createElement("input");
					inp2.setAttribute("type", "text");
					td3.appendChild(inp2);
					//把td放到tr里
					tr.appendChild(td1);
					tr.appendChild(td2);
					tr.appendChild(td3);
					//需要把tr追加到tbody标签里
					document.getElementById("tb").appendChild(tr);
				});

				document.getElementById("del").addEventListener("click", function() {
					var tb = document.getElementById("tb");
					var del = tb.lastElementChild;
					//删除最后一个节点
					del.remove();
					num--;
				});
			}
		</script>
	</head>
	<body>
		<div>
			<table>
				<caption>1901班学员</caption>
				<caption>
					<input type="button" class="btn" id="add" value="添加" />
					<input type="button" class="btn" id="del" value="删除" />
				</caption>
				<thead>
					<tr>
						<th>ID</th>
						<th>name</th>
						<th>sex</th>
					</tr>
				</thead>
				<tbody id="tb">
					<tr>
						<td>1</td>
						<td>老王</td>
						<td>男</td>
					</tr>
				</tbody>
			</table>
		</div>
	</body>
</html>

第十一章正则表达式

/**
就是一个模式串,常用于判断字符串是否匹配指定的模式
组合:
	[abc]	匹配abc中的一个,要么是a,要么是b,要么是c
	[a-z]	匹配a-z
	[1-9]	匹配1-9
通配符:
	.		任意字符(除'\n'外)
	\d		数字
	\D		非数字
	\s		空白字符
	\S		非空白字符
	\w		单词字符[a-z A-Z 0-9 _ ]
	\W		非单词字符
次数:
	X?		0次或1次
	X*		任意次
	X+		至少一次
	X{n}	正好n次
	X{n,}	至少n次
	X{n,m}	至少n次,最多m次


一、校验数字的表达式

1 数字：^[0-9]*$
2 n位的数字：^\d{n}$
3 至少n位的数字：^\d{n,}$
4 m-n位的数字：^\d{m,n}$
5 零和非零开头的数字：^(0|[1-9][0-9]*)$
6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$
7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$
8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$
9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$
12 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$
13 非负整数：^\d+$ 或 ^[1-9]\d*|0$
14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
18 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

二、校验字符的表达式

1 汉字：^[\u4e00-\u9fa5]{0,}$
2 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3 长度为3-20的所有字符：^.{3,20}$
4 由26个英文字母组成的字符串：^[A-Za-z]+$
5 由26个大写英文字母组成的字符串：^[A-Z]+$
6 由26个小写英文字母组成的字符串：^[a-z]+$
7 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
12 禁止输入含有~的字符：[^~\x22]+

三、特殊需求表达式

1 Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3 InternetURL：[a-zA-z]+://[^\s]* 或 ^https://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
4 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$ 
6 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7 身份证号：
		15或18位身份证：^\d{15}|\d{18}$
		15位身份证：^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$
		18位身份证：^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$
8 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
10 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
11 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 
12 日期格式：^\d{4}-\d{1,2}-\d{1,2}
13 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
14 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$ 
15 钱的输入格式：
16 1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$ 
17 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$ 
18 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$ 
19 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$ 
20 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$ 
21 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$ 
22 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$ 
23 8.1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$ 
24 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
25 xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
26 中文字符的正则表达式：[\u4e00-\u9fa5]
27 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
28 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
29 HTML标记的正则表达式：<(\S*?)[^>]*>.*?|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
30 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
31 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
32 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
33 IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
 */
//java正则表达式默认是全局匹配,JavaScript默认是局部匹配(只要匹配到都是对)
//js需要在表达式开头加^结尾加$ 代表全局匹配
//在字符串""中 \ 需要成对出现,因为字符串中的 \ 有转义的作用。
//js声明一个正则表达式不要用字符串括起来
public class 正则表达式 {
	public static void main(String[] args) {
		// matches() 判断字符串是否匹配正则表达式的格式
		String email="g124543h@163.com";
		String pattren="\\w{6,}@\\w{2,}\\.(com|net|cn)";
		System.out.println(email.matches(pattren));
	}
}

<script type="text/javascript">
	var regex=/^\w+$/;
    alert(regex.test("a"));//true 使用test()判断是否匹配
    alert("a1".match(regex));//a1 字符串如果匹配就弹出,否则弹出null
</script>

第十二章经典案例

省市二级联动

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			省份:<select id="pro">
				<option value="">--请选择--</option>
				<option value="001">北京</option>
				<option value="002">上海</option>
				<option value="003">浙江</option>
			</select>
			市:<select id="city">
				<option value="">--请选择--</option>
			</select>
		</div>
	</body>
	<script type="text/javascript">
		document.getElementById("pro").onchange=function(){
			var pro=this.value;
			var bjCity=['朝阳','东城','西城','昌平','海淀区'];
			var shCity=['黄浦','浦东','长宁','普陀'];
			var zjCity=['杭州','宁波','温州','绍兴','湖州'];
			var cityHTML="<option value=''>--请选择--</option>";
			if (pro == '001') {
				for (var i = 0; i < bjCity.length; i++) {
					cityHTML+="<option>"+bjCity[i]+"</option>";
				}
			}else if(pro=='002'){
				for (var i = 0; i < shCity.length; i++) {
					cityHTML+="<option>"+shCity[i]+"</option>";
				}
			}else{
				for (var i = 0; i < zjCity.length; i++) {
					cityHTML+="<option>"+zjCity[i]+"</option>";
				}
			}
			document.getElementById("city").innerHTML=cityHTML;
		}
	</script>
</html>

jQuery

第一章 jQuery概述

1.1 jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.2 什么是jQuery？

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。jQuery库包含以下功能:

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

第二章 jQuery使用

在页面中引入jquery,一般在head里面引入

<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
</head>

第三章 jQuery语法

Query 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action()

在jq中，我们通过KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”)来获取id为id的元素…。为了简单一般都是使用$而不是使用jQuery

<script type="text/javascript">
	/* 3种页面初始化的写法 */
	//js写法
	window.onload=function(){}
	//jq写法1:
	$(document).ready(function(){})
	//jq写法2:是第一种的简写形式,一般都采用此方式
	$(function(){})
	
    /* Js对象和jq对象互相转换： */
	var inp=document.getElementById("inp");//js的dom对象
	var $inp=$("#inp");//jq的对象
	alert("inp的value:"+inp.value);
	alert("$inp的value:"+$inp.val());
	// alert("inp的val():"+inp.val()); 会报错,不能互相使用对方的方法
	// alert("$inp的value:"+$inp.value); 会报错
	//1.js对象转jq对象  用$()把js对象包裹起来
	alert("inp的val():"+$(inp).val());
	//2.jq对象如何转js对象  jq对象[下标] jq对象.get（下标）
	alert("$inp的value:"+$inp[0].value+"或者"+$inp.get(0).value);
</script>

3.1 jQuery选择器

<html>
	<head>
		<meta charset="utf-8" />
		<title>三大选择器</title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				/* id选择器 */
				$("#id").css("background-color","yellow").css("height","50px");
				/* 元素选择器 */
				$("input").click(function(){//会给所有input框都派发单击事件
					$("#id").hide();//让div隐藏
					// $(this).hide();//让自身隐藏
				})
				/* class选择器 */
				$(".cls2").css("color","red");//选中class=cls2的标签
				$(".cls1").click(function(){
					this.style.display="none";//js的隐藏方式
				})
			})
		</script>
	</head>
	<body>
		<div id="id">id选择器</div>
		<input type="button" value="隐藏div" />
		<input type="button" value="按钮1" class="cls1"/>
		<input type="button" value="按钮2" class="cls1"/>
		<input type="button" value="按钮3"/>
		<input type="button" value="按钮4" class="cls2"/>
	</body>
</html>

3.2jQuery事件

$(“选择器”).click(function(){…}); ===> dom对象.οnclick=function(){…}

事件名称为js事件名称去掉on

第四章 jQuery效果

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(function(){
		/* 隐藏和显示 */
		$(selector).hide(speed,callback);//隐藏
		$(selector).show(speed,callback);//显示
		$(selector).toggle(speed,callback);//可以在 hide() 与 show() 方法之间进行切换。
		//可选的speed参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
		//可选的callback参数是隐藏或显示完成后所执行的函数名称。
		$("#id").hide();
		$("#id").hide(2000);
		$("#id").hide(2000,function(){});
		
		/* 淡入淡出 */
		$(selector).fadeIn(speed,callback);//淡入
		$(selector).fadeOut(speed,callback);//淡出
		$(selector).fadeToggle(speed,callback);//可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
		$(selector).fadeTo(speed,opacity,callback);//允许渐变为给定的不透明度
		//opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
		
		/* 滑动 */
		$(selector).slideDown(speed,callback);//向下滑动元素
		$(selector).slideUp(speed,callback);//向上滑动元素
		$(selector).slideToggle(speed,callback);//在 slideDown() 与 slideUp() 方法之间进行切换。
	})
</script>

第五章 jQuery HTML

5.1 捕获和设置

jQuery 拥有可操作 HTML 元素和属性的强大方法。
jQuery DOM 操作
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>捕获和设置</title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//text() 返回所选元素的文本内容
					//text("要设置的内容") 设置所选元素的文本内容
					alert("Text:"+$("#test").text());//Text:粗体文本
					$("#test").text($("#test").text()+"增加");//粗体文本增加 (不显示粗体)
				});
				$("#btn2").click(function(){
					//html() - 返回所选元素的内容(包括 HTML 标记)
					//html("要设置的内容") 设置所选元素的内容(包括 HTML 标记)
					alert("HTML:"+$("#test").html());//HTML:<b>粗体</b>文本
					$("#test").html($("#test").html()+"<b>增加</b>");//粗体文本增加 (显示粗体)
				});
				$("#btn3").click(function(){
					//val() 返回表单字段的值
					//val("要设置的内容") 设置表单字段的值
					//input:first 表示获取第一个input  input:last获取最后一个input
					alert("值为:"+$("input:first").val());
					$("input:first").val("改变");//将'内容'变成'改变'
				});
				$("#btn4").click(function(){
					//attr();
					//attr("属性名")表示根据属性名来获取属性值
					//attr("属性名","属性值")设置属性值
					$("#link").attr("href","https://www.google.com");
					alert($(".ck").prop("checked"));
					$("#op2").prop("selected",1);
				});
				$("#btn5").click(function(){
					//prop():jq1.6之后新增的获取属性 
                      //attr()在获取checked属性和selected属性的时候有问题(???,测试正常)
					alert($(".ck").prop("checked"));//让 class =ck radio选中
					$(".ck").prop("checked",1);
					$("#op2").prop("selected",1);//让帅哥选中
				});
			});
		</script>
	</head>
	<body>
		<p id="test"><b>粗体</b>文本</p>
		<p><input type="text" value="内容"/></p>
		<p><a href="http://www.baidu.com" id="link" target="_blank">百度</a></p>
		<p>
			男:<input type="radio" class="ck" value="男"  />
			女:<input type="radio" class="ck" value="女"  />
			<select>
				<option id="op1">美女</option>
				<option id="op2">帅哥</option>
			</select>
		</p>
		<hr/>
		<button id="btn1">显示文本</button>
		<button id="btn2">显示HTML</button>
		<button id="btn3">显示value内容</button>
		<button id="btn4">百度变谷歌</button>
		<button id="btn5">prop属性</button>
	</body>
</html>

5.2添加和删除元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>添加和删除</title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//以下四种方式创建的都是标签都是一个效果
				var $p1=$("<p>我是新行</p>");//使用 jQuery 创建文本
				var $p2=$("<p></p>").html("我是新行");//使用 jQuery 创建文本
				var p3="<p>我是新行</p>";// 使用 HTML 标签创建文本
				var p4=document.createElement("p");p4.innerHTML="我是新行";// 使用DOM创建文本
				
				$(function(){
					$("#btn1").click(function(){
						//append在被选元素的结尾插入内容
						$("div").eq(0).append($p1);
						$("div").eq(0).append($p1,$p2,p3,p4);可同时追加多个新元素
					});
					$("#btn2").click(function(){
						//prepend在被选元素的开头插入内容
						$("div").eq(0).prepend($p2);
					});
					$("#btn3").click(function(){
						//before在被选元素之前插入内容
						$("div").eq(1).before(p3);
					});
					$("#btn4").click(function(){
						//after在被选元素之后插入内容
						$("div").eq(0).after(p4);
					});
					$("#btn5").click(function(){
						//empty删除被选元素的子元素。
						$("div").eq(0).empty();//div的p标签内容被删除,div还在
					});
					$("#btn6").click(function(){
						//remove删除被选元素及其子元素。
						$("div").eq(1).remove();//整个div被删除
					});
				})
			});
		</script>
	</head>
	<body>
		<div style="background-color: yellow;">
			<p>我是一行</p>
		</div>
		<div style="background-color: green">
			<p>我是二行</p>
		</div>
		<button id="btn1">append</button>
		<button id="btn2">prepend</button>
		<button id="btn3">before</button>
		<button id="btn4">after</button>
		<button id="btn5">empty</button>
		<button id="btn6">remove</button>
	</body>
</html>

5.3 CSS类和CSS方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>操作CSS</title>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					//addClass() - 向被选元素添加一个或多个类
					$("h1,p").addClass("blue");
					$("p").addClass("import blue");//添加多个类
				});
				$("#btn2").click(function(){
					//removeClass() - 从被选元素删除一个或多个类
					$("h1,p").removeClass("blue");
				});
				$("#btn3").click(function(){
					//toggleClass() - 对被选元素进行添加/删除类的切换操作
					$("h1,p").toggleClass("blue");
				});
				$("#btn4").click(function(){
					//css("propertyname");返回指定的 CSS 属性的值
					alert($("p").css("font-weight"));//400(说明粗体的值是400)
				});
				$("#btn5").click(function(){
					//css("propertyname","value");设置指定的CSS属性
					$("p").css("color","red");
				});
				$("#btn6").click(function(){
					//css({"propertyname":"value","propertyname":"value",...});设置多个CSS属性
					$("p").css({"color":"red","font-size":"200%"});
				});
			});
		</script>
		<style type="text/css">
			.blue{
				color:blue;
			}
			.import{
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<h1>标题</h1>
		<p>内容</p>
		<button id="btn1">addClass</button>
		<button id="btn2">removeClass</button>
		<button id="btn3">toggleClass</button>
		<button id="btn4">返回CSS属性</button>
		<button id="btn5">设置CSS属性</button>
		<button id="btn6">设置多个CSS属性</button>
	</body>
</html>

第六章 jQuery遍历

<script type="text/javascript">
    /* 祖先 */
	$("#id").parent(); // 父节点
	$("#id").parents(); // 全部父节点
	$("#id").parents("ul");// 所有标签是<ul>的父节点
	$("span").parentsUntil("div");// 返回介于<span>与<div>元素之间的所有父节点
    /* 后代 */
	$("#id").children(); // 全部子节点
	$("#id").children("p.1");// 返回子节点中类名为"1"的所有<p>节点
	$("#id").find("span");// 返回所有后代标签为<span>的节点
	$("#id").find("*");// 返回所有后代
    /* 同胞 */
	$("#id").siblings();// 返回所有兄弟节点
    $("#id").siblings("p");// 返回所有标签为<p>的兄弟节点
	$("#id").next();// 下一个兄弟节点
	$("#id").nextAll();// 之后所有兄弟节点
	$("h2").nextUntil("h6");// 返回介于<h2>和<h6>之间的所有兄弟节点
	$("#id").prev();// 上一个兄弟节点
	$("#id").prevAll();// 之前所有兄弟节点
	$("h2").prevUntil("h6");// 返回介于<h2>和<h6>之间的所有兄弟节点

	/* 过滤 */
	$("div p").first();// 返回<div>子节点中第一个<p>节点
	$("div p").last();// 返回<div>子节点中最后一个<p>节点
	$("p").eq(0);// 返回第一个<p>节点(索引号从0开始)
	$("p").filter(".cls");// 返回带有cls类名的所有<p>节点
	$("p").not(".cls");// 返回不带有cls类名的所有<p>节点
</script>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

前端

javascript