第六章——JavaScript语言基础
JavaScript特点及规范
弱数据类型：浏览器根据变量取值情况确定变量的类型，变量类型随取值的改变而改变。
JavaScript使用形式
行内JavaScript脚本
<a href="javascript:alert('Hello World!')">Click</a>
内部JavaScript脚本
可以位于<head>标签内，又可以位于<body>标签内。
<script type="text/javascript">
alert('内部JavaScript脚本，<script>标签可位于<head>标签内,又可以位于<body>标签内');
</script>
外部JavaScript脚本
将JavaScript脚本与HTML代码彻底进行分离
<script type="text/javascript" src="js/test.js"></script>
JavaScript基本语法
1、通过关键字var进行声明。
2、通过typeof运算符或typeof()函数来获得变量的当前数据类型。
3、未定义的变量直接赋值时，浏览器会将变量定义为全局变量。而未定义的变量直接使用时，会抛出Undefined错误。
4、变量的作用域
（正解：B）
5、运算符
（正解：C；
对于“+”运算符，当两操作数均为数值类型时，两者相加，否则，视为字符串连接）
6、for in循环
多用于对集合的遍历。由于部分浏览器对for in数组遍历的支持不够，可能出现未知错误，建议尽量不使用for in循环对数组进行遍历。
<script type="text/javascript">
//字符串操作
var name="徐徐前行，未来可期";
for(var i in name){//for(var i=0;i<name.length;i++)
var size=i;
document.write("<font size='"+size+"'>" +name.substr(i,1)+"</font>");
}
document.write("<br/>");
//数组操作
var songs=["北极的企鹅","模仿","樱花","孤独行星"];
var color=["red","blue","orange","pink"];
for(var i in songs){
var size=i;
document.write("<font color='"+color[i]+"'>" +songs[i]+"</font><br/>");
}
//对象操作
document.write("<br/>");
var person={
name:"xzw",
authority:"root",
address:"china",
tel:"123456789"
};
for(var property in person){
document.write(property+": "+person[property]+"<br/>");
}
</script>
7、with语句*（了解即可）
使用with语句可以简化对象操作，使代码更加简洁。但其运行效率相对缓慢，一般情况下，应尽量避免使用。
8、函数
-
parseInt(string,[radix])函数：字符串–>整型
-
radix表示要解析的数字基数，其值介于2~36之间。
-
第一个字符就不能转换时，返回NaN
-
-
parseFloat(string)：字符串–>浮点型
-
isNaN(value)函数
检查其参数是否是一个非数字值
（当参数是一个数字时，返回false，否则返回true） -
eval(string)函数
- 当string是一个表达式：执行表达式，并返回计算结果。
- 当string是JavaScript脚本：执行相应脚本。
-
对话框函数
- alert( )函数用于弹出一个提示对话框
- confirm( )函数用于弹出一个确认对话框，在确认对话框中，单击“确定”时返回true，单击取消时返回false。
- prompt( )用于接收用户输入的输入框。
-
自定义函数
-
命名函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>for in 循环</title> </head> <body> <script type="text/javascript"> //无参函数 function input(){ return prompt("input numbers"); } //有参函数 function count(data){ var sum=0; for(var i=0;i<data.length;i++){ sum+=parseInt(data[i]); } return sum; } //函数调用（可以在函数定义之前） var data=input(); var sum=count(data); document.write(data+"中各数字的和为:"+sum); </script> </body> </html> -
匿名函数
通过表达式的形式来定义一个函数，定义格式与命名函数基本相同，只是没有提供函数的名称，且在函数结束位置以分号结束。<script type="text/javascript"> //由于没有函数名字，所以需要使用变量对匿名函数进行接收，方便后面函数的调用 var f=function(name){ alert("匿名函数"+name); } var test=f; f("OK"); test("OK"); </script> -
自调用函数
自调用函数将函数的定义与调用一并实现。<script type="text/javascript"> (function(name){ alert("自调用函数"+name); })("OK"); </script>此函数中，“name"为形参（可选），”OK”为实参，在函数调用时传入数据。
-
5、关于输出
- document.write( ) 在文档中输出HTML
- alert( ) 显示一个提醒对话框
- console.log( ) 向web控制台输出一条消息
实验一：素数问题求解
//判断是否为素数
function check(x){
if(x<2) return false;
for(var i=2;i*i<=x;i++){
if(x%i==0) return false;
}
return true;
}
//将判断结果以表格形式输出
function print(){
document.write("<table border='1' width='500' height='500' align='center'>");
for(var i=0;i<=9;i++){
document.write("<tr>");
for(var j=1;j<=10;j++){
var num=i*10+j;//数字1-100
//用不同颜色加以区分
if(num==1){
document.write("<td bgcolor='#8A2BE2' align='center' width='50'>"+num+"</td>");
}
else if(check(num)){
document.write("<td bgcolor='#00aaff' align='center' width='60'>"+num+"</td>");
}
else{
document.write("<td bgcolor='#ffaaff' align='center' width='60'>"+num+"</td>");
}
}
document.write("</tr>");
}
document.write("</table>");
}
习题
第七章——JavaScript对象
JavaScript是一种基于对象的语言。对象是一种特殊的数据类型，由变量和函数共同构成。其中，变量成为对象的属性，函数称为对象的方法。
分为内置对象（系统预先定义好的，直接使用），自定义对象。
Array数组对象
有序的数据集合，使用单独的变量名来存储的一系列数据。
数组对象的创建
定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存放到一个数组中。
//无参构造函数，返回一个空数组，数组长度为0
var colors=new Array();
colors[0]="pink";
colors[1]="blue";
//一个参数的构造函数Array(size)，返回一个长度为size的数组，且数组中的元素均为undefined
var numbers=new Array(10);
//使用多个参数的构造函数，使用参数指定的值来初始化数组，数组的长度等于参数的个数
var cities=new Array("长沙","广州","上海");
//简写形式创建数组对象
var foods=["辣椒炒肉","麻辣香锅","剁椒鱼头"];
//将不同类型的数据存放到一个数组中
var myArr=new Array('a',2,true,new Date());
Array的常用属性和方法
-
concat( )：用于连接两个或多个数组，返回合并后的新数组，而原数组保持不变。
-
join(separator)：把数组中的所有元素放入一个字符串中，并通过指定的分隔符隔开，分隔符默认为逗号。
-
push( )：向数组的末尾添加一个或多个元素，返回数组的新长度。
-
slice(start,[end])：从数组中返回选定的元素
参数start是必需的，表示元素选取的开始位置；参数end可选，表示元素选取的结束位置(不包括end)，当参数end省略时，将选取从start开始到数组末尾的所有元素。和C++一样
start和end允许取负数，-1表示字符串的最后一个字符，-2表示倒数第二个字符，以此类推。
-
sort([sortby])：对数组元素进行排序
//sort var num=[30,20,90,10,5]; document.write("排序前的数组: "+num+"<br/>"); //默认排序按字符编码的顺序进行排序 document.write("默认排序方式: "+num.sort()+"<br/>"); document.write("指定排序方式: "+num.sort(cmp)); function cmp(a,b){ return b-a; } -
splice(index,howmany,[item1,…,itemX])：向数组中添加1~n个元素或从数组中删除元素
参数index必需，规定添加或删除元素的位置，index为负数时，从数组末尾向前计数
参数howmany必需，表示要删除元素的数量，0代表不删除数据
当删除元素时，返回被删除的元素后的数组
参数列表item1,…itemX可选，表示向数组中添加或替换新的元素
二维数组
通过在一维数组中存放另一个数组来实现
var movies=
[
["科幻","《2012》",80],
["喜剧","《超能陆战队》",100],
["战争","《我是战士》",95]
];
String字符串对象
用于对文本字符串进行处理。
字符串的创建
1、用单引号或双引号均可生成一个字符串（字面量方式）
var src="Web程序设计";//string类型
var des='前端开发'; //string类型
2、调用构造函数创建字符串对象（new方式）
var src=new String("Web程序设计");//Object类型
var des=String("前端开发"); //仅使用构造方法，string类型
String是string的包装类，String的类型为Object，而string的类型为string
字符串对象常用属性和方法
slice( )方法参数start和end允许取负数（-1代表字符串最后一个数字），而substring( )方法不接受负参数。
Date日期对象
操作日期和时间，通过日期对象的构造函数创建一个系统当前时间或指定时间的日期对象。
Date对象的创建
<script type="text/javascript">
var d1 = new Date();
var d2 = new Date(1218253167595);//1970年1月1日至今的毫秒数
var d3 = new Date(2022,1,1);
var d4 = new Date(2022,1,1,18,30,15);
var d5 = new Date("1/1/2022 18:30:15");
var d6 = new Date("May 1,2020");
var d7 = new Date("May 1,2020 18:30:30")
showTime(d1);
function showTime(date){
var str="";
var year = date.getFullYear();
var month = date.getMonth() + 1;//月份的取值范围为0~11，故需加一
var day = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
str = str + year + "年" + month + "月" + day +"日" + h + ":" + m + ":" + s;
document.write(str);
}
</script>
Date对象的常用方法
Math数学对象
Math对象没有提供构造方法，可以直接使用Math对象。
Math对象常用属性和方法
RegExp正则表达式对象*（了解即可）
正则表达式是一种字符串匹配的模式，通过单个字符串来描述和匹配一系列符合某个句法的规则。
自定义对象
原始方式
首先创建一个Object对象，然后为对象添加所需的属性和方法。
var food = new Object();
food.name = "Cake";//添加属性
food.price = "66";
food.color = "pink";
food.showInfo = function(){//添加方法
document.write("食物名称：" + food.name + "\n食物价格：" + food.price);
创建多个同种类型的对象时，代码的重复度非常高。
构造函数方式
function Food(name,price,color){//类名，首字母大写
this.name = name;
this.price = price;
this.color = color;
this.showInfo = function(){//添加方法
document.write("食物名称：" + food.name + "\n食物价格：" + food.price);
}
}
var food1 = new Food("cake","66","pink");
food1.showInfo();
会重复生成对象所引用的函数，为每个对象都创建一个独立的函数版本。
原型方式
通过prototype属性为对象添加新的属性或方法。
（不仅能为自定义对象添加属性和方法，也能对内置对象进行扩展。
object.prototype.name = value;
//prototype表示对象的原型
//name表示所添加的属性或方法
JSON方式
JSON轻量级数据交换格式。
//创建对象实例
var food = {
name : "Cake",
price :"66",
color : "pink",
type : ["apple","banana","strawberry"],
toEat :[
{
name:"apple",
number:2
},
{
name:"banana",
number:3
}
],
showInfo : function(){
document.write("食物名称：" + this.name + "\n食物价格：" + this.price);
}
};
//方法的调用
food.showInfo();
document.write("名称：" + food.name + "口味：" + food.toEat[0].name);
用点或方括号读写属性。
第八章—— BOM与DOM编程
BOM和DOM模型
BOM模型
浏览器对象模型（Browser Object Model）定义了JavaScript操作浏览器的接口，提供了与浏览器窗口交互的功能。
BOM是用于描述浏览器中对象与对象之间层次关系的模型，提供了独立于页面内容并能够与浏览器窗口进行交互的对象结构。
当浏览页面时，浏览器会为每一个页面自动创建下述对象。
- window对象是BOM模型中的顶层对象，其他对象都是该对象的子对象。通过其属性和方法来实现浏览器窗口的操作。
- document对象是BOM的核心对象，提供了访问HTML文档对象的属性、方法以及事件处理。
- location对象包含当前页面的URL地址，如协议、主机名、端口号和路径等信息。
- navigation对象包含与浏览器相关的信息，如浏览器类型、版本等。
- history对象包含浏览器的历史访问记录，如访问过的URL、访问数量等信息。
DOM模型
文档对象模型（Document Object Model）属于BOM的一部分，用于对BOM中的核心对象document进行操作。定义了JavaScript操作HTML文档的接口。
提供了一系列的函数和对象来实现访问、添加、修改及删除操作。
document对象是DOM模型的根节点。
事件机制
JavaScript采用事件驱动的响应机制，用户在页面上进行交互操作时会触发相应的事件。
在JavaScript中，事件分为两大类。
- 操作事件：用户在浏览器中操作所产生的事件。
- 鼠标事件（Mouse Events）：单击、双击、按下、松开、移动、移出和悬停等
- 键盘事件（Keyboard Events）：按下、松开、按下后又松开
- 表单及表单元素事件（Form & Element Events）：表单提交、重置和表单元素的改变、选取、获得/失去焦点等事件。
- 文档事件：文档本身所产生的事件，如文件加载完毕、卸载文档和文档窗口改变等事件。
HTML元素绑定事件的方式：
-
HTML元素的属性绑定事件：在HTML标签内，使用以on开头的某一属性（如onclick、onmouseover等）为该元素绑定指定的事件处理函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <script type="text/javascript"> function dosomething(){ alert("响应用户的操作"); } </script> <input type="button" onclick="dosomething()" id="myButton" value="Click"/> </body> </html> -
JavaScript脚本动态绑定事件：通过JavaScript脚本获得文档中的某一对象object，然后通过object.onxxxx方式为该元素绑定指定的事件处理函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <!--不知道为什么这个input如果写在script的后面就会报错--> <input type="button" id="myButton" value="Click"/> <script type="text/javascript"> var myButton=document.getElementById("myButton");//获取页面中ID为myButton的元素 myButton.onclick=function(){//匿名函数 alert("响应用户的操作"); } </script> </body> </html>
window对象
- window对象与浏览器窗口相对应
- 当页面包含frame或iframe元素时，每个框架对应页面也各有window对象。
- window对象的属性和方法，允许以全局变量或系统函数的方式进行使用（window.document可以简写成document）
window的常用属性和方法
需要多次循环调用时，可在code代码中再次调用setTimeout( )方法形成递归调用，或直接使用setInterval( )方法来实现。
location对象
window对象的子对象，用于提供当前窗口或指定框架的URL地址。
location对象的常用属性及方法
history对象
navigation对象
包含浏览器的相关信息，如浏览器名称、版本号和脱机状态等信息
document对象
document对象是window对象的子对象，是指在浏览器窗口中显示的内容部分。可以通过window.document来访问当前文档的属性和方法。
document对象的属性
cookie属性
- cookie是浏览器在客户端保存的用户访问服务器时的会话信息（对客户端硬盘数据进行存取的技术），该信息允许服务器端访问。
- cookie本质上是一个字符串，其使用方法如下：
其中，cookieStr是要保存的cookie值，使用时需要注意：document.cookie = cookieStr;- cookie本身有一定大小限制，每个cookie所存放的数据不能超过4KB
- cookie是由一些键值对( cookieName-value)构成，根据cookieName检索cookie中信息，包括expires、 path和domain等信息
- expires表示cookie的过期时间，是UTC格式，可通过Date.toGMTString( )方法来生成。当cookie到达过期时间时，cookie就会被删除；默认情况下，当浏览器关闭时cookie立即失效。
- path表示允许访问cookie的路径，只有在此路径下的页面才可以读写该cookie。一般情况下将path设为"/"，表示同一站点下的所有页面都可以访问cookie。
- domain表示域，可以使浏览器确定哪些cookie能够被提交。如果没有指定域，则域值为该cookie页面所对应的域。
- 一般情况下，cookie信息都没有经过编码。当cookie中包含空格、分号、逗号等特殊符号时，需要使用escape()函数进行编码；当从cookie中取出数据时，需要使用unescape()函数进行解码。
- cookie的有效期
- 会话Cookie：临时性的，只在浏览器打开时存在
- 永久Cookie（设置了expires属性）：永久地存在于用户的硬盘上并在有效日期之前一直可用
document对象的方法
分为两类：对文本流的操作、对文档元素的操作
-
querySelector( )、querySelectorAll( )均返回指定CSS选择器的元素
var span=document.querySelector("#myid");//返回第一个符合条件元素 var span=document.querySelector(".myclass"); var span=document.querySelectorAll("#myid");//返回所有符合条件元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script type="text/javascript">
function print(){
var userName=document.getElementById("userName");
//document.write(userName.value);
userName.value="hqx";//在id为userName的表单元素中写入特定内容
//document.write(userName.value);
}
</script>
<form name="myform">
<input type="text" name="userName" id="userName" />
<input type="button" value="test" onclick="print()" />
</form>
</body>
</html>
Form对象
Form对象是document对象的子对象，通过Form对象可以实现表单验证等效果。通过Form对象可以访问表单对象的属性及方法。
document.表单名称.属性
document.表单名称.方法(参数)
document.forms[索引].属性
document.forms[索引].方法(参数)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Form对象的常用属性及方法</title>
</head>
<body>
<script type="text/javascript">
function checkUserName(){
//获取表单元素的第一种方法
var userName=document.getElementById("userName");
if(userName.value.length==0){
alert("用户名不能为空");
return false;
}
if(userName.value.length<3||userName.value.length>20){
alert("用户名长度应介于3~16位，请重新输入");
userName.select();//元素内容被选中,select方法用于将某元素的内容处于选中状态
return false;
}
return true;
}
function checkUserPwd(){
//获取表单元素的第二种方法
var userPwd=document.myform.userPwd.value;
if(userPwd.length<6){
alert("密码长度不低于6位");
return false;
}
for(i in userPwd){
if(isNaN(i)){
alert("密码必须是数字");
return false;
}
}
return true;
}
function checkEmail(){
//获取表单元素的第三种方法
var email=document.forms[0].email;
//邮箱正则验证
var emailReg=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
if(!emailReg.test(email.value)){
alert("邮箱格式不正确，请重新输入！");
email.focus();//元素获得焦点
return false;
}
return true;
}
function checkMobilePhone(){
//获取表单元素的第四种方法--下标从0开始，表单的第三个元素
var mobilePhone=document.forms[0].elements[3];
var mobilePhoneReg=/^1[3|4|5|8][0-9]{9}$/
if(!mobilePhoneReg.test(mobilePhone.value)){
alert("手机号码格式不正确");
mobilePhone.focus();
return false;
}
return true;
}
function checkForm(){
return checkUserName()&&checkUserPwd()&&checkEmail()&&checkMobilePhone();
}
function checkForm1(){
if(checkUserName()&&checkUserPwd()&&checkEmail()&&checkMobilePhone()){
document.myform.action="http://www.moocollege.cn";
document.myform.target="_blank";
document.myform.submit();//用于手动提交表单
}
}
</script>
<form name="myform" action="http://www.itshixun.com" method="post" onsubmit="return checkForm()">
用户名：<input type="text" name="userName" id="userName" /><br/>
密码：<input type="password" name="userPwd" id="userPwd" /><br/>
邮箱：<input type="text" name="email" id="email" /><br/>
手机号：<input type="text" name="mobilePhone" id="mobilePhone" /><br/>
<input type="submit" value="submit提交" />
<input type="button" value="button提交" onclick="checkForm1()"/>
</form>
</body>
</html>
Table对象
在JavaScript中提供了Table、TableRow和TableCell对 象用于对表格、行和单元格进行操作。
Table对象的属性和方法
TableRow对象的常用属性和方法
TableCell对象的常用属性
代码示例–影视资源后台管理
//增加一行
function appendRow(index){
var myTable=document.getElementById("myTable");
//在表格中的指定位置插入一个新行，新行将被插入index所在行之前；参数index小于0或大于等于表中的行数时，将抛出异常。
//insertRow()函数返回一个TableRow对象
var row=myTable.insertRow(index);
//insertCell()函数返回一个TableCell对象
var idCell=row.insertCell(0);
var imgCell=row.insertCell(1);
var nameCell=row.insertCell(2);
var clasCell=row.insertCell(3);
var briefCell=row.insertCell(4);
var nationCell=row.insertCell(5);
var operateCell=row.insertCell(6);
//innerHTML属性设置单元格内容
idCell.innerHTML=index;
operateCell.innerHTML="<input type='button' value='删除' οnclick='deleteRow(this)'/>"+"<input type='button' value='编辑' οnclick='insertEnd()'/>";
}
//在表尾增加一行
function insertEnd(){
//var myTable=document.getElementById("myTable");
var index=myTable.rows.length;
appendRow(index);
//appendRow(index);
}
//删除一行
function deleteRow(btnDelete){
var isOK=confirm("确认要删除此记录吗？");
if(!isOK) return;
//获得被单击按钮所在行的索引
var currentIndex=btnDelete.parentNode.parentNode.rowIndex;
//获取表格
var myTable=document.getElementById("myTable");
//删除该表格中的特定行
myTable.deleteRow(currentIndex);
}
//编辑内容
function editRow(btnEdit){
var fa=btnEdit.parentNode.parentNode;//Table
var son=fa.children;
var len=son.length;
//console.log(len);
for(var i=0;i<len;i++){
if(i>0&&i<len) console.log(son[i].innerHTML);
}
var poster=document.getElementById("poster");
poster.src=son[1].firstElementChild.src;
var name=document.getElementById("moiveName");
name.value=son[2].innerHTML;
var clas=document.getElementById("moiveType");
clas.value=son[3].innerHTML;
var brief=document.getElementById("movieBrief");
brief.value=son[4].innerHTML;
var nation=document.getElementById("moiveNation");
nation.value=son[5].innerHTML;
var film=document.getElementById("Film");
var fedit=document.getElementById("filmEdit");
fedit.style.display="block";
film.style.display="none";
var makesure=document.getElementById("makesure");
makesure.onclick=function(){
var film=document.getElementById("Film");
var fedit=document.getElementById("filmEdit");
film.style.display="block";
fedit.style.display="none";
son[2].innerHTML=name.value;
son[3].innerHTML=clas.value;
son[4].innerHTML=brief.value;
son[5].innerHTML=nation.value;
}
}
DOM节点
DOM节点常用类型如下：
各种节点统称为Node对象，通过Node对象的属性和方法可以遍历整个文档树。
Element对象继承了Node对象，是Node对象中的一种。
Element对象常用属性和方法
NodeList对象是一个节点集合。
childNodes属性返回的集合包含元素节点和文本节点，而children属性返回的集合中仅包含元素节点。
事件处理
JavaScript采用事件驱动的响应机制，用户在页面上进行交互操作时会触发相应的事件。
事件驱动：在页面中响应用户操作的一种处理方式
事件处理：页面在响应用户操作时所调用的程序代码。
事件的响应与产生均由浏览器完成。
事件流和事件对象
DOM结构式一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程称为DOM事件流。
事件流的顺序：
- 事件冒泡:从叶子节点沿祖先节点一直向上传递直到根节点。
- 事件捕获：由DOM树最顶层元素一直到最精确的元素。
Event对象（包含当前触发事件的状态，如键盘按键状态、鼠标位置和鼠标按键状态等）
HTML事件
习题
第十一章——JQuery基础
JQuery概述
- 一个开源的、轻量级的JavaScript脚本库
- 代码更高效、浏览器兼容性更好
- 引用JQuery
程序入口：$(document).ready( )可以简写为$( )
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" />
<!--jQuery库-->
<script type="text/javascript" src="js/jquery - 1.x.js"></script>
</head>
<body>
<div id="myDiv">Hello jQuery！</div>
<script type="text/javascript">
//$符号即为jQuery对象的缩写形式
/* $(document).ready(function(e) {//类似于window.onload事件
//alert(jQuery("#myDiv").html());
alert($("#myDiv").html());
});*/
$(function(e){
alert($("#myDiv").html());
});
</script>
</body>
</html>
DOM对象和jQuery对象
jQuery对象本身不能直接调用DOM对象的方法，而是通过将jQuery对象转换成DOM对象后再调用DOM对象的方法。
1、DOM对象转换成jQuery对象
//获得DOM对象
var domObject = document.getElementById("myDiv");
//获得DOM对象中的innerHTML属性值
alert(domObject.innerHTML);
//将DOM对象转换成jQuery对象
var jQueryObject = $(domObject);
//调用jQuery对象的html()方法
alert(jQueryObject.html);
2、jQuery对象转成DOM对象
将jQuery对象看作一个数组
//获得jQuery对象(由页面中所有的DIV构成)
var jQueryObject = $("div");
//1、通过下标获取DOM对象
var domObject1 = jQueryObject[0];
//2、通过get()方法获取DOM对象
var domObject1 = jQueryObject.get(1);
jQuery选择器
完全继承CSS选择器风格，返回jQuery对象数组
基本选择器
查找页面中的元素
层次选择器
通过DOM对象的层次关系来获取特定的元素。
- $(“prev+next”)，prev元素和next元素有共同的父元素，功能与$("prev).next(“next”)相同。
- $(“prev~siblings”)，两者有共同的父元素而不必紧邻，功能与$("prev).nextAll(“siblings”)相同。
过滤选择器
根据特定过滤规则来筛选出所需要的页面元素。书写均以冒号( : )开头。
1、简单过滤选择器
元素位置或一些特定的元素
2、内容过滤选择器
根据元素的文字内容或所包含的子元素的特征
3、可见性过滤选择器
根据元素的可见性来筛选元素
4、属性过滤选择器
根据元素的属性来筛选元素
5、子元素过滤选择器
nth-child(N|odd|even)选择器中，元素的下标从1开始。
6、表单对象属性过滤选择器
通过表单对象的属性特征进行筛选
表单选择器
jQuery基本操作
属性操作
当元素属性（如checked、selected和disabled等）取值为true或false时，通过prop( )方法对属性进行操作，而其他普通属性通过attr( )方法操作。
//attr( )方法的使用
//获取所匹配元素的集合中第一个元素，设置一个或多个属性
$("img").attr("src");//返回<img>集合中第一个图像的src属性值
$("#myImage").attr("src");//返回id为myImage图像的src属性值
$("#myImage").attr("src","images/img_1.jpg");//设置myImage的src属性值
$("#myImage").attr({src:"images/img_1.jpg",title="图一"});//通过properties（名/值对）的方式设置属性
$("#myImage").attr("title",function(){return this.src});//用函数的返回值作为属性值
//removeAttr()方法的使用
$("img").removeAttr("title");//删除所有的img的title属性
样式操作
通过class属性指定HTML标签的样式名
-
attr()方法
-
增加样式
-
移除样式
无参方法用于移除匹配元素的所有样式
-
样式操作变换
-
css( )方法
内容操作
- html( )方法
获取第一个匹配元素的HTML内容或修改匹配元素的HTML内容。该方法仅对XHTML文档有效，不能用于XML文档。 - text( )方法
读取或设置匹配元素的文本内容，返回纯文本内容。 - val( )方法
设置或获取表单元素的值，包括文本框、下列列表、单选框和复选框等元素。
jQuery事件处理
页面加载事件
事件绑定
事件对象
event.属性名
event.方法名
习题
JQuery进阶
JQuery文档处理
创建节点
$( )函数用于动态创建元素节点。创建节点时，尽量使用双标签或闭合标签，节点动态创建后并不会自动添加到文档中，需使用append( )等方法将所创建的节点插入到文档的指定位置。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" />
<script type="text/javascript" src="js/jquery - 1.x.js"></script>
</head>
<body>
<div id="myDiv">Hello jQuery！</div>
<script type="text/javascript">
//创建节点
var span1 = $("<span></span>");//元素节点
var span2 = $("<span>具有文本内容的节点</span>");//文本节点
var span3 = $("<span title ='属性节点'></span>");//属性节点
//将节点添加到父节点中
$("#myDiv").append(span1);
$("#myDiv").append(span2);
$("#myDiv").append(span3);
console.log($("#myDiv span").length);
</script>
</body>
</html>
可在开发者工具的源代码看到，div部分被添加了3个span节点。
插入节点
根据元素的插入位置不同，插入方法分为内部插入和外部插入。
在追加或插入内容时，插入的内容可以是html字符串、DOM元素（或DOM数组）、jQuery对象、函数（返回值）。当操作内容是页面中的DOM元素时，该元素将从原位置上消失，即该操作属于元素的移动操作，而非复制操作。
插入后，开发者工具中所示源代码区别如下：
复制节点
删除节点
清空元素内容，但不会删除该元素。
包裹节点
在现有节点的外围包裹一层其他元素标签，使当前节点成为新元素的子节点。
删除包裹节点
遍历节点
祖先遍历
又称向上遍历，通过向上遍历DOM树的方式来查找元素的祖先元素。
后代遍历
又称向下遍历，通过向下遍历DOM树的方式来查找元素的后代元素。
同胞遍历
prev( )、prevAll( )和prevUntil( )方法的功能与next( )、nextAll( )和nextUntil( )方法类似，只不过操作方向相反，从当前元素向前检索，返回所匹配元素之前的同胞元素。
节点过滤
- first( )、last( )、eq( )方法
- filter( )方法
返回符合筛选规则的元素集合
$(“span”,this)表示在当前元素中查找<span>元素，$(“span”,this).length表示当前元素中拥有<span>元素的个数。 - not( )方法
用于返回指定规则之外的其他元素，与filter( )方法恰好相反。
JQuery动画效果
- 显示与隐藏
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>显示与隐藏-jQuery动画效果</title>
<script type="text/javascript" src="js/jquery-1.x.js"></script>
<style type="text/css">
#showDiv{background-color:#FFF38F; border:1px solid #333;width:200px;height:200px; }
</style>
</head>
<body>
<div >
<input type="button" value="显示DIV" id="showDefaultBtn"/>
<input type="button" value="隐藏DIV" id="hideDefaultBtn"/>
<input type="button" value="显示DIV(Slow)" id="showSlowBtn"/>
<input type="button" value="隐藏DIV(Slow)" id="hideSlowBtn"/>
<input type="button" value="显示DIV(CallBack)" id="showCallBackBtn"/>
<input type="button" value="隐藏DIV(CallBack)" id="hideCallBackBtn"/>
</div>
<div id="showDiv"></div>
<script type="text/javascript">
$(function(e){
$("#showDefaultBtn").click(function(){
$("#showDiv").show();
});
$("#hideDefaultBtn").click(function(){
$("#showDiv").hide();
});
$("#showSlowBtn").click(function(){
$("#showDiv").show("slow");
});
$("#hideSlowBtn").click(function(){
$("#showDiv").hide("slow");
});
$("#showCallBackBtn").click(function(){
//动画结束后，调用指定的函数
$("#showDiv").show("slow",function(){
//动画结束后，将背景颜色恢复到原来的样式
$(this).css("background-color","#FFF38F");
});
//动画效果时，元素的背景颜色为gray
$("#showDiv").css("background-color","gray");
});
$("#hideCallBackBtn").click(function(){
$("#showDiv").hide("slow",function(){
alert("元素暂时被隐藏，点击显示恢复可见状态。");
});
});
});
</script>
</body>
</html>
-滑上与滑下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑上与滑下-jQuery动画效果</title>
<script type="text/javascript" src="js/jquery-1.x.js"></script>
<style type="text/css">
img{border:10px solid #eee;width:220px; margin-top:10px;}
</style>
</head>
<body>
<div >
<input type="button" value="显示DIV" id="slideDownBtn"/>
<input type="button" value="隐藏DIV" id="slideUpBtn"/>
<input type="button" value="显示/隐藏DIV" id="slideToggleBtn"/>
</div>
<img src="images/girl1.jpg" id="showImage"/>
<script type="text/javascript">
$(function(e){
$("#slideDownBtn").click(function(){
$("#showImage").slideDown("fast");
});
$("#slideUpBtn").click(function(){
$("#showImage").slideUp("slow");
});
$("#slideToggleBtn").click(function(){
//动画结束后，调用指定的函数
$("#showImage").slideToggle("slow",function(){
//动画结束后，将背景颜色恢复到原来的样式
$("#showImage").css("border","10px solid #eee");
});
//动画效果时，元素的背景颜色为#aaa
$("#showImage").css("border","10px solid #aaa");
});
});
</script>
</body>
</html>
- 淡入与淡出
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淡入与淡出-jQuery动画效果</title>
<script type="text/javascript" src="js/jquery-1.x.js"></script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.js"> </script>
<style type="text/css">
img{border:10px solid #eee;width:140px;height:150px; margin-top:10px;}
</style>
</head>
<body>
<div >
<input type="button" value="显示DIV" id="fadeInBtn"/>
<input type="button" value="隐藏DIV" id="fadeOutBtn"/>
<input type="button" value="显示/隐藏(faceToggle)" id="faceToggleBtn"/>
<input type="button" value="显示/隐藏(faceTo)" id="faceToBtn"/>
</div>
<img src="images/clothes1.jpg" id="showImage1"/>
<img src="images/clothes2.jpg" id="showImage2"/>
<img src="images/clothes3.jpg" id="showImage3"/>
<img src="images/poster.jpg" id="showImage4"/>
<script type="text/javascript">
$(function(e){
$("#fadeInBtn").click(function(){
// showImage3、showImage2、showImage1依次淡入
$("#showImage3").fadeIn(4000,function(){
$("#showImage2").fadeIn("slow",function(){
$("#showImage1").fadeIn("fast");
});
});
});
$("#fadeOutBtn").click(function(){
// showImage3、showImage2、showImage1同时淡出，但速度不同
$("#showImage1").fadeOut("fast");
$("#showImage2").fadeOut("slow");
$("#showImage3").fadeOut(4000);
});
$("#faceToggleBtn").click(function(){
// showImage3、showImage2、showImage1依次淡入或淡出
$("#showImage1").fadeToggle("fast",function(){
$("#showImage2").fadeToggle("slow",function(){
$("#showImage3").fadeToggle(4000);
});
});
});
//fadeToggle( )方法将元素隐藏之后不再占据页面空间，而fadeTo( )方法隐藏后的元素仍然占据页面位置。
// 偶数次点击，调用第一个函数；奇数次点击，调用第二个函数
$("#faceToBtn").toggle(function(){
$("#showImage1").fadeTo("slow",0.15);
$("#showImage2").fadeTo("fast",0);
$("#showImage3").fadeTo(2000,0.3);
},function(){
$("#showImage1").fadeTo("slow",1);
$("#showImage2").fadeTo("fast",1);
$("#showImage3").fadeTo(2000,1);
});
});
</script>
</body>
</html>
- 自定义动画
- 动画延时和停止
数组和对象操作
- each( )方法
$( ).each( )方法多用于DOM对象数组的遍历，而$.each( )方法多用于Array数组或JSON对象的遍历。 - extend( )方法
- merge( )方法和unique( )方法
- parseJSON( )方法
jQuery插件开发
习题
2259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
