JAVAScript和Query

发表于 2021-03-13 更新于 2021-03-22
本文字数： 16k 阅读时长 ≈ 15 分钟

JAVAScript和jQuery

第一章、初识javaScript

一、了解JavaScript

1、学习JS的原因

①客户端表单验证

②页面的动态效果

2、JS的简介和组成

2.1简介：JS是一种描述性语言，也是一种基于对象（Object）和事件驱动（EventDriven）的，具有安全性能的脚本语言

2.2组成

①ECMAScript标准:规定了语法、变量和数据类型、运算符、逻辑控制语句、关键字/保留字、对象的标准，不与浏览器绑定

②BOM：浏览器对象模型。提高独立于内容和浏览器窗口进行交互的对象，BOM对象可以实现与HTML交互

③DOM：文档对象模型，用来访问和操作HTML文档

二、JS的基本结构

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>主页</title>
		<!--js存放在script中，script可以放在html的任意位置，建议放在head标签中，但是有的数据需要先加			载再使用JS，这个时候JS需要放在末尾-->
		<!--type是用于指定MIME类型,告诉浏览器应该用什么方式解析-->
        <!--引入js的三种方式:1.内部js-->
		<script type="text/javascript">  
			alert("Hello,js!");  //警告框，弹框
			document.writeln("女神节大放送！<br/>");	
		</script>
		
		<!--引入js的三种方式:2.外部js-->
		<script type="text/javascript" src="js/index.js" ></script>
	</head>

	<body>
 			这是一个js的
 			演示。
 			<br />
 			<!--引入js的三种方式:3.行内js-->  <!--onclick点击事件-->
 			<input type="button" value="点我" onclick="javascript:alert('哈哈');"  />
 				
	</body>
 
</html>
<!--<script type="text/javascript">  <!-- html可以有多个js-->
<!--	alert("Hello,js 22!"); //警告框，弹框
</script>-->

三、JS的基本语法

1、变量的声明和赋值

语法:

var 变量名（使用var关键字声明，如果没有使用var声明变量，直接使用，则变量是一个全局变量）

var 变量名=值；（变量名或函数命名可以包括大写字母、小写字母、数字、下划线和美元符号，但必须以字母、下划线或美元符开头）

②注意事项：JS区分大小写，大写字母和小写字母不能互相替换。

JS的关键字，如for和if，永远都是小写；

内置对象，如Math和Date是以大写字母开头的；

对象的名称通常是小写，方法是第一个字母小写，后面的单词首字母大写

以分号为一个代码的结束

2、数据类型

1、undefined(未定义类型)：当声明的变量未初始化时，该变量的默认值是undefined。var width

2、null（空类型）：null表示对该变量赋予了一个空值。undefined实际上是值null派生的，null==undefined返回值为true

3、number：即可以表示32位的整数，又可以表示64位的浮点数。对非常大或非常小的数，可以用科学计数，一个特殊值NaN表示非数字，也是number类型

4、String：被单引号或双引号括起来的文本

字符的属性与方法：一个length属性，表示字符串的长度（包括空格等）str.length

方法:字符串对象.方法名（）；

方法	描述
toString()	返回字符串
toLowerCase()	把字符串转化为小写
toUpperCase()	把字符串转化为大写
charAt(index)	返回在指定位置的字符
indexOf(str,index)	查找某个指定的字符串在字符串中首次出现的位置，如果没有找到则返回-1
subString(index1,index2)	返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符
split(str)	将字符串分割为字符串数组

5、boolean

返回值：false或true。

有时候需要检测变量的数据类型JS提供了typeof运算符来判断一个值或变量就近属于哪些数据类型。

语法：typeof(变量或值）

3、数组

① 创建数组的语法： var 数组名称=new Array(size);

②为数组元素赋值，声明数组时，直接为数组元素赋值：

var fruit=new Array(“apple”,”orange”,”peach”,”bannaner”);

或者 var fruit=[“apple”,”orange”,”peach”,”bannaner”];

③访问数组元素：数组名[下标]，下标从0开始

④数组的常用属性和方法

属性：

length:返回数组中元素的个数，返回值为整型。

方法：

join(分隔符）:通过一个指定的分隔符把数组元素放在一个字符串

sort()：对数组排序

push():向数组末尾添加一个或更多元素，并返回新的长度

4、运算符号

类型	运算符
算数运算符	+ - * / % ++ –
赋值运算符	=
比较运算符	> < >= <= == !=
逻辑运算符	&& \|\| !

5、逻辑控制语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//if结构：和java不一样，遵循非0为真，非空位真
			if (表达式) {
				
			} else{
				
			}
			
			//swith结构
			switch (){
				case value:
					break;
				default:
					break;
			}
			
			//循环结构
			//1、for循环
			for(初始化;条件;增量或减量){
				JS语句
			}
			//2、while循环语句，先判断后执行，条件为真就执行，条件为假就退出循环
			while (条件){
				
			}
			//3、do-while循环语句，先执行后判断，为假退出
			do{
				
			}while(条件)
			//4、for-in循环，常用于数组操作
			for(变量 in 数组){
				JS
			}
			//5、中断循环
			break:可以立即退出循环
			continue:只是退出当前的循环,根据判断条件决定是否进行下一次循环
            //注释
            单行注释：//   
            多行注释：/* JS */
		</script>
	</head>
	<body>
	</body>
</html>

6、常用的输入输出

alert(“提示信息”):警告，只有一个参数，一个确定按钮。在对这个对话框处理之前，后面的代码不会被执行，只有处理后才能继续显示后面的内容

prompt(“提示信息”，“输入框的默认信息”)

四、JS中的函数

1、常用系统函数(有很多，可以查看API帮助文档)

①parseInt(“字符串”)：把非数字的原始值转换成数字的函数，先看位置0处是不是数字，如果不是就返回NaN,如果是就继续查看，一直到不是数字为止。

var str = “123ddfg”; //返回值是123 var str=”12.34”,返回12； var str=”asd123”；返回NaN

②parseFloat(“字符串”)：把非数字的原始值转换成浮点数的函数

③isNaN(X):用于检查其参数是否是非数字。如果X不是数字，则返回true，否则返回false

2、自定义函数

使用function关键字

①语法： function 函数名（参数1，参数2，…）{

[return 返回值]

}

②调用函数

事件名=”函数名（）”

3、匿名函数

①匿名函数没有函数名，语法： function（参数）{}

②匿名函数的调用。可以将匿名函数定义的整个语句像值一样赋给一个变量进行保存，再用变量名调用匿名函数

var show=function(count){语句}

onlick=”show(prompt(‘xxx’,’’))”

4、变量的作用域

<script>
	
	function show(){
		num1 = 100; //如果没有声明变量，直接使用，则变量是一个全局变量 
		var num2 = 300;
		
	}
	
	show();
	
	alert(num1);
	alert(num2);
	
</script>

第二章、JS对象（BOM）

BOM能将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力

一、window对象

是BOM的核心，可以实现：

①弹出新的浏览器窗口

②移动。关闭浏览器窗口和调整窗口的大小

③在浏览器窗口中实现页面的前进后退功能

1、属性

history：有关客户访问过的URL的信息

location：有关当前URL的信息

语法：window.属性名=”属性值”；

2、方法

名称	说明
prompt()	显示可提示用户输入的对话框，有两个参数，取消返回null,确定返回输入的值
alert()	显示一个带有提示信息和确定按钮的警示对话框，没有返回值
confirm()	返回true或false，显示一个带有提示信息，确定和取消按钮的对话框，在用户做选择前，用户不能对浏览器做任何操作
close()	关闭浏览器窗口
open()	打开一个新的浏览器窗口，加载给定URL指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式，只调用一次
setInterval()	按照指定的周期，以毫秒计，来调用函数或表达式，是一直不停调用，可以让”时钟“走起来

语法：window.方法名（），window对象是全局对象，window可以省略

2.1 open(“弹出窗口的URL”，“窗口名称”，“窗口特征”)

名称	说明
height、width	窗口文档显示区的高度、宽度，以像素计
left、top	窗口的X坐标、y坐标，以像素计
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏，默认是yes
scollbars=yes….	是否显示滚动条，默认yes
location=yes….	是否显示地址栏，默认是yes
status=yes….	是否显示状态栏，默认是yes
menubar=yes….	是否显示菜单栏，默认是yes
resizable=yes….	窗口是否可调节尺寸，默认是yes
titlebar=yes….	是否显示标题栏，默认是yes
fullscreen=yes….	是否使用全屏模式显示浏览器，默认是yes

3、常用事件

window对象的方法通常和时间结合使用

名称	说明
onload	一个页面或一副图像完成加载
onmouseover	鼠标指针移到某元素之上
onclick	鼠标单击某个对象
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

二、history对象

名称	描述
back()	加载history对象列表中的前一个URL
forward()	加载history对象列表中的后一个URL
go(n)	加载history对象列表中的某个具体URL，go(1)，相当于前进；go(-1)，相对于后退

三、location对象

1、属性

名称	描述
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL ，例 location.href=”index.html”

2、方法

名称	描述
reload()	重新加载当前文档，相当于刷新本页
replace()	用新的文档替换当前文档

四、document对象

document对象既是window对象的一部分，又代表了整个HTML文档，可用来访问页面中的所有元素

1、属性

属性	描述
referrer	返回载入当前文档的URL，用于获取当前页面的来源页，当前文档如果不是通过超链接返回的，document.referrer的值为null
URL	返回当前文档的URL，

2、方法

名称	说明
getElementById()	返回对拥有执行id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合（数组）
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JS代码

例：document.getElementById(“clock”).innerHTML

innerHTML是几乎所有的HTML元素都有的属性，它是一个字符串，用来设置或获取当前对象的开始标签和结束标签之间的HTML

3、使用document对象的方法实现复选框的全选，全不选效果

分析：判断复选框是否被选中的属性是checked，如果checked属性的值为true，则说明复选框已选中，如果为false说明复选框未被选中。先将每个复选框的name设置为同名，然后使用getElementsByName()方法访问所有同名的复选框，最后使用循环语句来统一设置所有复选框的checked属性，从而实现全选全不选效果。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function check() {
				var arr = document.getElementsByName("t");
				for(var i = 0; i < arr.length; i++) {
					
				arr[i].checked = true;
			}
			}
			
			function uncheck() {
				var arr = document.getElementsByName("t");
				for(var i = 0; i < arr.length; i++) {
					
				arr[i].checked = false;
			}
			}
		</script>
	</head>

	<body>

		您喜欢的交通方式是什么:
		<input type="button" name="jiao" id="jiao" onclick="check()" value="全选" />
		<input type="button" name="ull" id="ull" value="全不选" onclick="uncheck()" /><br />

		<input type="checkbox" name="t" value="乘坐飞机" class=" traffic " />乘坐飞机<br />

		<input type="checkbox" name="t"  value="乘坐高铁火车" class=" traffic " />乘坐高铁火车<br />

		<input type="checkbox" name="t" value="乘坐汽车" class=" traffic " />乘坐汽车<br />

		<input type="checkbox" name="t" value="其他" class=" traffic " />其他<br />

	</body>

</html>

五、JS内置对象

JS中，系统内置对象有Date对象、Array对象、String 对象和Math对象

1、Date对象

①语法：

var 日期实例 =new Date（参数），如var today =new Date()

var tdate=new Date(“July15,2012.16:32:12”)，参数字符串格式“MMDD,YYYY,hh:mm:ss”
②方法

方法	说明
getDate()	返回Date对象的一个月中的每一天，其值为1~31
getDay()	返回Date对象的星期中的每一天，其值为0~~6，代表星期天，1~~6彼此对应
getHours()	返回Date对象的小时数，值为0~23
getMinutes()	返回Date对象的分钟数，其值为0~59
getSeconds()	返回Date对象的秒数，值0~59
getMonth()	返回Date对象的月份，其值为0~11,从0开始数，所以写的时候要+1
getFullYear()	返回Date对象的年份，值为4位数
getYear()	返回Date对象的年份，值为当前年份-1900的值，如2016，返回116
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>上机任务4</title>
		<script>
			function time(){
				var today=new Date();
				
				var year=today.getFullYear();
				var month=today.getMonth()+1;
				var dat=today.getDate();
				var day=today.getDay();
				switch (day){
					case 1:
					var days="星期一";
						break;
					case 2:
					var days="星期二";
						break;
					case 3:
					var days="星期三";
						break;
					case 4:
					var days="星期四";
						break;
					case 5:
					var days="星期五";
						break;
					case 6:
					var days="星期六";
						break;
					case 0:
					var days="星期天";
						break;
					
				}
				var hh =today.getHours();
				if (hh>12) {
					var hs="PM";
				} else{
					var hs="AM";
				}
				var mm=today.getMinutes();
				if(mm<10){
					mm="0"+mm;
				}
				var ss=today.getSeconds();
				if(ss<10){
					ss="0"+ss;
				}
				document.getElementById("clock").innerHTML=year+"年"
				+month+"月"+dat+"日&nbsp"+hh+":"+mm+":"+ss+"&nbsp"+hs+"&nbsp"+days;
			
			}
			var myTime=setInterval("time()",1000);
		</script>
	</head>
	<body onload="time()">
		<div id="clock">
			
		</div>
	</body>
</html>

2、Math对象

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5):返回26；Math.ceil(-25.5)，返回-25
floor()	对数进行下舍入	Math.ceil(25.5):返回25；Math.ceil(-25.5)，返回-26
round()	把数四舍五入为最接近的数	Math.ceil(25.5):返回26；Math.ceil(-25.5)，返回-25
random()	返回0~1中的随机数	Math.random()，返回0.627360881413736，不包括0和1。如果要返回1-100中的整数，包括1，100:var iNumber=Math.floor(Math.random()*100+1);

六、定时函数

1、setTimeout()

setTimeout(“调用的函数名称”，等待的毫秒数)

在指定的毫秒数后调用函数，就执行一次

2、setInterval()

setInterval(“调用的函数名称”，周期性调用函数之间间隔的毫秒数)

按照指定的周期来调用函数，会不停的调用函数，直至窗口被关闭或被其他方法强制停止

3、clearTimeout()

clearTimeout(setTimeout函数返回的ID的值),清除由setTimeout设置的timeout

4、clearInterval()

clearInterval(setInterval函数返回的ID的值)，清除由setInterval设置的timeout

如：onclick=”clearInterval(myTime)”

第三章、jQuery 基础

一、初识jQuery

1、定义

jQuery是JavaScript的程序库，相当于JavaScript技术的一个子集，是对JS的一个封装

2、作用

①访问和操作DOM元素

②控制页面样式

③对页面事件的处理

④方便地使用jQuery插件

⑤与Ajax技术的完美结合

3、优势

①轻量级

②强大的选择器

③出色的DOM封装

④可靠的时间处理机制

⑤出色的浏览器兼容性

⑥隐式迭代

⑦丰富的插件支持

4、配置jQuery环境

在jquery.com下载的版本，然后把下载的包放入项目的js文件夹中，然后使用script src=””引入，再开始写JS的代码

<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
<script>
	$(function(){
		alert("我编写的第一个jQuery程序！")
	})
</script>

二、jQuery语法

1、Jquery的页面事件载入

语法

$(document).ready(function(){

})

	window.onload	$(document).ready()
执行时机	必须等到网页中所有内容加载完毕后才能执行，包括图片，视频	网页中所有DOM文档结构绘制完毕后即刻执行，可能视频，图片还未加载完
编写个数	同一个页面不能同时编写多个	同一个页面能同时编写多个
简化写法	无	$(function(){})

2、结构

①工厂函数 $()

$=jQuery，工厂函数作用是将DOM对象转化为jQuery对象，便于使用JQ的方法。注意，当$()的参数是DOM对象时，参数不需要用双引号包括

②选择器$(selector)

③方法action()

如：$(“.class”).css(“”,”)；

3、代码风格

①美元符的使用

②操作连缀书写

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>网站左导航</title>

		<style type="text/css">
			.licss {
				list-style: none;  
				line-height: 22px;
			}
			
			.current {
				background: #6cf;
				font-weight: bold;
				color: #fff;
			}
		</style>
		<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
		<script>
			jQuery(function(){   //在jquery中  $ 等同于 jquery
				
				jQuery("#test").click(function(){
					
					//jquery支持的连缀写法，以及多个css样式如何书写
					$("#current").addClass("current").nextAll().css("font-size","30px").
					css({ "color": "red", "background": "blue" });;
					
					//等同于
					var $Current = $("#current").addClass("current");
					var $li = $Current.nextAll();
					$li =$li.css("color","red");
				});
				
			})
		</script>
	</head>

	<body>

		<ul>
			<li class="licss" id="current">jQuery简介</li>
			<li class="licss">jQuery语法</li>
			<li class="licss">jQuery选择器</li>
			<li class="licss">jQuery事件与动画</li>
			<li class="licss">jQuery方法</li>
		</ul>

		<input type="button" id="test" value="改变样式" />

	</body>

</html>

三、DOM对象和jQuery对象

1、DOM模型

DOM模型就是开发人员写的HTML代码，在DOM中存在不同类型的节点，包括了：

①元素节点：

等等

②文本节点：
文本节点
，标签里的文字内容

③属性节点：<img title=””,alt=””>,title和alt就属于属性节点

2、DOM对象

var od=document.getElementById(“id”); //获取DOM对象

var odH=od.innerHTML; //调用DOM的innerHTML属性

3、jQuery对象

var $t=$(“#title”)

4、jQuery对象与DOM对象的互相转换

jQuery对象无法直接使用DOM对象的任何方法，同样DOM对象也无法使用jQuery方法，如果要使用方法，就必须要进行转换

①jQuery对象转换成DOM对象

var $txtName=$(“#txtName”); //JQ对象

var txtName =$txtName[0]; //DOM对象

alert(txtName.checked)； //DOM对象的属性

②DOM对象转换成jQuery对象

var txtName=document.getElementById(“txtName”) //DOM对象

var $txtName=$(txtName) //JQ对象

第四章 jQuery选择器

一、jQuery选择器简介

1、jQuery可以通过CSS选择器、条件过滤两种方式获取元素，有更好的浏览器兼容性。

二、基本选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签名匹配元素	$(“h2”)，选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(“.title”)，选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$(“#title”)，选取id为title的元素
并集选择器	selector1,selector2,..N	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title”)，选取所有div、p和拥有class为title的元素
交集选择器	element.class或elemet#id	匹配指定class或id的某元素或元素集合	$(“h2.title”)，选取所有拥有class为title的h2元素
全局选择器	*	匹配所有元素	$(“*”)，选取所有元素

三、层次选择器

名称	语法构成	描述	示例
后代选择器	ancestor descendant	选取a元素里的所有d（后代）元素	$(“#menu span”)，选取#menu下的元素
子选择器	parent>child	选取p下面的c（子）元素	$(“#menu>span”)，选取#menu的子元素
相邻元素选择器	prven+next	选取紧邻prev元素之后的next元素	$(“h2+d1”)，选取紧邻h2元素之后的同辈元素d1
同辈元素选择器	prven~sibings	选取prev元素之后的所有siibings元素	$(“h2~d1”)，选取h2元素之后所有的同辈元素d1

四、属性选择器

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$(“[href]”)，选取含有href的元素
[attribute=value]	选取等于给定属性是某个特定值的元素	$(“[href=’#’]”)，选取href属性值为#的元素
[attribute！=value]	选取不等于给定属性是某个特定值的元素	$(“[href！=’#’]”)，选取href属性值不为#的元素
[attribute^=value]	选取给定属性是以某个特定值开始的元素	$(“[href^=’en’]”)，选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某个特定值结尾的元素	$(“[href$=’.jpg’]”)，选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(“[href*=’txt’]”)，选取href属性值中含有txt的元素
[selector][selector2][selector][selector3]	选取满足多个条件的复合属性的元素	$(“li[id][title=新闻要点]”)，选取含有id属性和title属性为新闻要点的li元素

五、基本过滤选择器

语法构成	描述	示例
：first	选取第一个元素	$(“li:first”)，选取所有li元素中的第一个li元素
：last	选取最后一个元素	$(“li:last”)，选取所有li元素中的最后一个li元素
：even	选取索引是偶数的所有元素（index从0开始）	$(“li:even”),选取索引是偶数的所有li元素
：odd	选取索引是奇数的所有元素（index从0开始	$(“li:odd”),选取索引是奇数的所有li元素
:eq(index)	选取索引等于index的所有元素index从0开始	$(“li:eq(1)”)，选取索引等于1的li元素
:gt(index)	选取索引大于index的所有元素index从0开始	$(“li:gt(1)”)，选取索引大于1的li元素，不包括1
:lt(index)	选取索引小于index的所有元素index从0开始	$(“li:lt(1)”)，选取索引小于1的li元素，不包括1
:not(selector)	选定去除所有与给定选择器匹配的元素	$(“li:not(.three)”)，选取class不是three的元素
:header	选取所有标题元素，如h1~h6	$(“：header”)，选取网页中所有标题元素
：focus	选取当前获得焦点的元素	$(“:focus”)，选取当前获得焦点的元素

六、可见性过滤选择器

语法构成	描述	示例
：visible	选取所有可见的元素	$(“:visivble”)，选取所有可见的元素
：hidden	选取所有隐藏的元素	$(“:hidden”)，选取所有隐藏的元素

七、使用jQuery选择器注意事项

1、选择器中含有特殊符号的注意事项

<div id="id#a"> aa</div>
<div id="id[2]">cc</div>

如果要在JS中获取正确元素
$("#id\\#a")
$("#id\\[2\\]")

2、选择器中含有空格的注意事项

多一个空格少一个空格都会有不同的结果

第五章、jQuery中事件和动画

一、jQuery的事件

事件总体分为两类：简单时间和复合事件。

1、基础事件

基础事件有window事件、鼠标事件、键盘事件和表单事件。

①语法：

事件名=“函数名（）”；

DOM 对象.事件名=函数；

1、window事件

就是当用户执行某些会影响浏览器的操作时触发的事件。如加载页面，关闭窗口。最常用的是文档就绪时间，window.ready()。

2、鼠标事件

当用户在文档上移动或单击鼠标时产生的事件。常被用于网站导航、下拉菜单、选项卡、轮播广告

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout()	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

3、键盘事件

当键盘聚焦到web浏览器时，用户每次按下或者释放键盘上的按键时会产生的事件。在键盘事件方法中，可以获取当前按键的键值，使用keyCode属性，识别按下哪个键。常用于类似淘宝搜索框中的自动提示、快捷键的判断、表单字段校验等场合

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup()	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress()	触发或将函数绑定到指定元素的keypress事件	当keydown事件产生可打印的字符时

4、表单事件

方法	描述	执行时机
focus()	触发或将函数绑定到指定元素的focus事件	获得焦点
blur()	触发或将函数绑定到指定元素的blur事件	失去焦点

2、绑定事件与移除事件

它们属于基础事件，为匹配的元素一次性绑定或移除一个或多个事件时使用

①绑定事件

语法:

bind(type,[data],fn)

type:事件类型，包括blur、focus、click、mouseout基础事件或自定义事件

[data]：可选参数，作为event。data属性值传递给事件对象的额外数据对象，该参数不是必需的

fn:处理函数，用来绑定的处理函数
绑定单个事件例子：
$(function(){
$("#id").bind("click",function(){
$("p").css("color","blue");
})
})

绑定多个
$(function(){
$("li").bind({
mouseover.function(){
$("p").css("color","blue")
},
mouseout.function(){
$("p").removeClass();
}
})
})

②移除事件

语法：

unbind（[type],[fn])

[type] /[fn] 与绑定事件意思一致

3、复合事件

1、hover()方法

语法：
hover(enter,leave)
用于模拟鼠标指定悬停事件。当鼠标指针移动到元素上时会触发第一个函数enter，当鼠标移除时，会触发指定的第2个函数leave。

例：
$(function(){
	$("#d2").hover(
					function() {
						$("#mobile").css("z-index", "0");
						$("#er").css("z-index", "-1");

					},
					function() {
						$("#mobile").css("z-index", "-1");
						$("#er").css("z-index", "0");
					}
				);
})

2、toggle()方法

1
2

toggle(fn1,fn2,...fnN)
用于模拟鼠标连续click事件。第一次单击元素，触发指定的第一个函数fn1，当再次单击同一个元素时，则触发第二个函数fn2,如果有更多函数，则依次触发，随后每次单击都重复对这几个函数的轮番调用

二、jQuery中的动画

1、控制元素显示与隐藏

①控制元素显示

语法：

$(selector).show（[speed],[callback]）

speed:可选，规定元素从隐藏到完全可见的速度。默认为0，值：1000、slow（0.6s）、normal(0.4s)、fast(0.2s)。在设置速度的情况下，元素从隐藏到完全可见中，会逐渐地改变高度、宽度、外边距、内边距和透明度

callback:可选，show函数执行完之后，要执行的函数

②控制元素隐藏

$(selector).hide（[speed],[callback]），speed callback与show的含义一样

③控制元素可见状态

toggle()方法

2、改变元素透明度

①控制元素淡入（渐渐的出现）

$(selector).fadeIn（[speed],[callback]）

②控制元素淡出（从很明显，渐渐的看不见）

$(selector).fadeOut（[speed],[callback]）

3、改变元素高度

slideUp()：若元素display是none,使用这个方法，元素会从下到上缩短直至隐藏

slideDown():若元素display是none,使用这个方法，元素会从上向下延伸显示

4、animate()方法

animate(params,[speed],[easing],[fn])

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串(“slow”,”normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供”linear” 和 “swing”.

fn:在动画完成时执行的函数，每个元素执行一次。

用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）

jQuery 代码:
$("p").animate({
   left: 50, opacity: 'show'
 }, 500);

JAVAScript和jQuery

第一章、初识javaScript

一、了解JavaScript

1、学习JS的原因

2、JS的简介和组成

二、JS的基本结构

三、JS的基本语法

1、变量的声明和赋值

2、数据类型

3、数组

4、运算符号

5、逻辑控制语句

6、常用的输入输出

四、JS中的函数

1、常用系统函数(有很多，可以查看API帮助文档)

2、自定义函数

3、匿名函数

4、变量的作用域

第二章、JS对象（BOM）

一、window对象

1、属性

2、方法

3、常用事件

二、history对象

三、location对象

1、属性

2、方法

四、document对象

1、属性

2、方法

3、使用document对象的方法实现复选框的全选，全不选效果

五、JS内置对象

1、Date对象

2、Math对象

六、定时函数

1、setTimeout()

2、setInterval()

3、clearTimeout()

4、clearInterval()

第三章、jQuery 基础

一、初识jQuery

1、定义

2、作用

3、优势

4、配置jQuery环境

二、jQuery语法

1、Jquery的页面事件载入

2、结构

①工厂函数 $()

②选择器$(selector)

③方法action()

三、DOM对象和jQuery对象

1、DOM模型

等等L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false}); ②文本节点：文本节点，标签里的文字内容 ③属性节点：<img title=””,alt=””>,title和alt就属于属性节点

2、DOM对象

3、jQuery对象

4、jQuery对象与DOM对象的互相转换

①jQuery对象转换成DOM对象

②DOM对象转换成jQuery对象

第四章 jQuery选择器

一、jQuery选择器简介

二、基本选择器

三、层次选择器

四、属性选择器

五、基本过滤选择器

六、可见性过滤选择器

七、使用jQuery选择器注意事项

第五章、jQuery中事件和动画

一、jQuery的事件

1、基础事件

1、window事件

2、鼠标事件

3、键盘事件

4、表单事件

2、绑定事件与移除事件

3、复合事件

2、toggle()方法

二、jQuery中的动画

1、控制元素显示与隐藏

2、改变元素透明度

等等

②文本节点：
文本节点
，标签里的文字内容

③属性节点：<img title=””,alt=””>,title和alt就属于属性节点