笔记

0531

定义图片大小

1.设置图片，只需要设置图片的宽度和高度就行，

2.值可以是绝对值（px），也可以是相对数值（%）

PS：这里的%相对于当前的父元素大小，当浏览器改变大小时，图片的大小也会跟着相对改变。【？】

3.如果我希望不论什么单位下，图片都能自动等比例缩放，那么只要设置宽度和高度之中一个属性就行. 宽度和  高度都设置，图片将变形展示。

eg:

定义图片的横线对齐

图片的对齐方式不能直接通过设置图片的text-align属性来定义。而是需要通过设置其父元素的该属性，使其继承该属性来实现，也就是说：子元素会继承父元素的属性。

eg：

PS :text-align 是作用在子辈对象中 而margin:0px auto ;作用在当前对象中。

定义图片的纵向对齐【？】

文本与图片的对齐方式

1.图片与文本的对齐方式通过设置具体的像素值（px）实现

我是一段文本

通过CSS的vertical-align作用在img元素上实现文本与图片对齐方式。

vertical-align可以取负数，若想实现精确对齐方式，可以通过具体像素值实现。

当设置的值正数时，图片向上移动相应的数字，反之亦然。

…

vertical-align：top|bottom|middle

通过CSS提供的属性值实现文本与图像的对齐方式。

圆角图片的实现：

border-radius：单位为像素

PS：图片的弧度会随着像素的变大而变大。

相对定位与绝对定位：

position：relative :

常用值位relative和absolute.

当取值为relative时，以当前父元素为相对进行偏移。

当取值为absolute时。以body标签的原点为参照进行偏移。

MY:   background-image:url(timg5.jpg);

background-repeat:no-repeat;

background-position:100% 100%;(右下方)

background-size: 200px;}

顺序：（font: 18px 黑体 ;）color:blue;(不用font) （line-height:1.5em ; text-indent:2em;）

a:hover img{border:5px solid red; }(后面空格隔开作用对象)

margin：上下 左右;eg:margin: 0px auto;   (左右居中)【？上下能居中吗】

【？】box-shadow:-5px 5px 4px 1.5px #cbc;

border-right:1px
solid red;

border-radius:10px 10px 0 0;

远程桌面

CMI

0604

1.盒子模型

1.1为什么要学习盒子模型

盒子模型是学习CSS网页布局的基础，只有掌握盒模型的各种规律和特性，才可以更好地控制页面中的每个元素所呈现的效果。

1.2因为所有的元素和对象都是一个一个的方盒子，网页就是由这种基本结构构成的。

举例说明：网页中每个元素就是一块块的砖，砌起了完整的网页。

2盒子的定义：

盒模型是一个现实为方形的，可以拥有外边距，内边距和边框并且能够定义宽度和高度的区域

换句话说：

更搞清楚盒子模型，必须先搞清楚下面几个概念

在网页设计中常听的属性名：内容（content），填充/内边距（padding），边距（border），外边距（margin），

CSS盒子模型都具备以上这些元素。

PS：对于行内元素（内联元素）

1设置margin只有左右有效，上下无效。

2设置padding只有左右有效，上下无效。

margin-top可能会失效，可以用margin-bottom

小结：

（1）.HTML每个元素都可以看成一个盒子

（2）.盒子模型参照物不一样，则使用CSS的属性也不一样。

（3）.如果不想破坏整体外观，则尽量使用margin布局，因为padding可能会改变盒子的大小（相当于这个盒子有弹性），

margin如果过大，盒子内容被挤到外面去，但盒子本身并没有变化。

2.定位

基本概念：CSS定位属性允许你对元素进行定位。

position：属性值；

属性值：

static（默认值）

元素框正常生成，块级元素生成一个矩形框，作为文档流和标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

PS：默认值，left和top无效。

relative（相对）：元素框偏移某个距离，元素仍保持其未定位前的形状（形状不变），它原本所占的空间仍然保留,

从这一角度看，好像该元素仍然在标准流（先后顺序）中一样。

absolute（绝对）：元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档流中的另外一个元素或者是初始包含块，元素原先在

正常文档流中所占的空间会关闭，就好像元素原先不存在一样，元素定位后生成一个块级框，而不论原本它在正常流中生成何种类型的框。

ps:1.绝对定位不一定都是以body定位。

2.元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间。

absolute:是以包含它的非标准流作为参照物。

抛个问题：

使用绝对定位后的元素是否是非标准流？   非标准流

当相对定位在绝对定位中，相对定位是以什么作为参照？

当绝对定位在绝对定位中，绝对定位是以什么作为参照？

当相对定位在相对定位中，相对定位是以什么作为参照？

fixed（固定）：元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身。【验】

0605

JavaScript

数据类型:

string类型

表示文本

由Unicode字符，数字，标点符号组成的序列

首尾由一对单引号或双引号括起。

特殊字符需要转义符,例如：\n, 
\,  ',  "【？】

number类型

不区分整型数值和浮点型数值

所有数字都采用64位浮点格式存储，类似于double格式

整数

10进制的整数由数字的序列组成

16进制数据前面加上0x,八进制前面加0.

浮点数

使用小数点记录数据，如3.4， 5.6

使用指数记录数据，如4.3e23=4.3*10^23.

boolean类型

仅有两个值：true和false；

也代表1和0;

实际运算中true=1,false=0;

多用于流程控制语句

回忆一下:

java中隐式转换：

byte-short-int-long-float-double

char

数据类型的隐藏转换

JavaScript属于松散型类型的程序语言

变量在声明时不需要指定数据类型

变量由赋值操作确定数据类型

不同类型数据在计算过程中会自动进行转换

javascript隐式转换原则：

数字+字符串：数字转换为字符串

数字+布尔值：true转换为1，false转换为0；

字符串+布尔值：布尔值转换为字符串true或false；

布尔值+布尔值：布尔值转换为数字1或0；

从小到大(大同如下)

boolean<number<string

eg ：

var s1 = “a”;

var n1 =1;

var b1 = ture;

var b2 = false;

//测试

alert(s1+n1); a1

alert(s1+b1); atrue

alert(n1+b1); 2

alert(b1+b2); 1

常用函数：

数据类型转换函数

toString()

转换成字符串.

所有数据类型都可转换string类型

parseInt()

强制转换成整数

如果不能转换，则返回NaN(not a number)【？】

eg：parseInt(“61.2”);返回61

parseFloat()

强制转换成小数

如果不能转换，则返回NaN

eg：parseFloat(“6.12”)返回6.12

typeof()

查询当前类型，返回string/number/boolean/object/function/undefined

eg：typeof(“test”+3);返回string

isNaN()

返回值为boolean类型

判断是否是数值

如果括号里面是数字返回falser;如果括号里面非数字返回true;

需求：

页面有一文本框，输入数据，点击旁边的计算按钮，弹出平方值，如果输入的是一个非数值，则提示"请录入正确数值"。

提示：获取当前文本框中的数值，使用如下语句

var a = document.getElementById().value;

//1.获取文本框中的值

var a = document.getElementById().value;

//2.判断是否能够转成数字

if(isNaN(a)){alert(“请录入正确数值”}

else{var
c a*a

alert©;}

//3.如果可以，计算平方再输出

特殊数据类型

null

null在程序中代表"无值"或者"无对象"

可以通过给一个变量赋值null来清除变量的内容

undefined

声明了变量但从未赋值或者对象属性不存在。(未定义)

代码演示：

var a;

alert(a);  //undefined

var b = 123;

b = null;

alert (b+123);  //null   【？】

运算符

算术运算

• -  *  /  %  ++  –

PS: - 除了表示减号，也可以表示负号，如x=-y;区分：x-=y; x*=y

+ 除了表示加法，也可以用于字符串的连接。

关系运算

关系运算用于判断数据之间的大小关系

>  <

=  <=  ==  !=

关系表达式的值都是布尔类型boolean(true或false).

关系运算符中的一种特殊形式

全等： ===

类型与数值都相等

等于： ==

类型不同但数值相等也成立

不全等：！==

类型和数值满足一个相等便成立.

eg ：

var a = 10;

var b = 19;

function test01(){

if(a!==b){//true

alert(“equal”); } }

逻辑运算

逻辑非（！），  逻辑与（&&）， 逻辑或（||）

条件运算符

条件运算符又称为"三目"/"三元"运算符,其结构为：

boolean表达式？ 表达式1：表达式2；

先计算boolean表达式的值，如果为true，则整个表达式str的值为表达式1的值，如果为假，则整个表达式的值为表达式2的值。

var a = 11;

var b = 10;

var str
= a>b ？“大了”：“小了”;

var result = b == a ？
“相等”: “str”;

alert(result); //大了

需求：

猜数字游戏

1内置一个结果

2玩家从文本框中录入一个数字

3点击“开始”按钮，程序根据结果提示“大了”或者“小了”

4如果录入的时一个非数值，则提示“请正确输入”

var a = null ; //代表无值

var b ;      //代表未定义

var c = “”; 
// c有值，为空字符串。

流程控制语句。

任何复杂的程序逻辑都可以通过"顺序"，“分支”,“循环”

三种基本的程序结构实现

语句默认为顺序执行

可以使用控制语句改变程序的执行顺序。

if语句（分支）

在运行过程中，根据不同的条件运行不同的语句.

if(表达式){语句1}

else{语句2}

if(表达式1){语句1}

else
if(表达式2){语句2}

else if(表达式3){语句3}

else if(表达式4){语句4}

else{语句5（可省）}

PS:

1.诸多语句中，最终最多只会执行一个，

2.最后不一定要以else结尾。

switch case语句（分支）

根据一个整数表达式的不同取值，从不同的程序入口开始执行

switch(表达式){

case 值1： 语句1; break;

case 值1： 语句1; break;

case 值1： 语句1; break;

…

default: 语句last;break;【？】

}

PS:break用来跳出当前分支结构，也可以跳出语句体。

循环结构：

for语句

for(表达式1;表达式2;表达式3){ 语句(循环体); }  PS:一般用于明确循环体次数。(i<=10)

需求:

页面有一文本框，输入数据，点击旁边的计算按钮，弹出阶乘值，如果输入的是一个非数值，则提示"请录入正确数值"。

while语句

.while语句是先判断后循环

退出条件是在执行循环内部的代码之前计算的.

因此,循环主体可能会一次都不执行.

语法格式:

while(表达式){语句1}

eg: function test01(){

var a=10;

while(a>5){

alert(a);

a–;

}

}

do-while语句

do-while语句是先循环后判断

退出条件在执行代码循环内部的代码之后计算

在计算表达式之前，至少会执行循环主体一次。

do{语句块} while(表达式);

function test01(){

var a = 10 ;

do{

alert(a);

}while(a>20);

}

作业：

猜数字V2.0版

1.程序中内置一个随机生成的小数。（不能超过100）

2.用户从文本框中输入一个整数（不能超过100），程序根据比较结果判断大了或者小了，并且将提示结果写在文本框下面，

如果用户不想玩了输入0则弹出"欢迎下次再来"。

如果用户输入的非数字，则提示用户"正确输入"。

如何产生一个随机小数

Math.random();//产生一个大于等于0但是小于1.

var a = parseInt( Math.random()*100 )

var a = parseInt( Math.random()*100 )

function test01(){

var str = document.getElementById(“d1”).value;

if(  str==0){alert(“欢迎下次再来”);}

else if(isNaN(str)){alert(“正确输入”);}

else{ var str = a>b “小了”：“大了”;

alert(result); }

}

，程序根据比较结果判断大了或者小了，并且将提示结果写在文本框下面，

如果用户不想玩了输入0则弹出"欢迎下次再来"。

如果用户输入的非数字，则提示用户"正确输入"。

0606

常用内置对象

1.什么是JavaScript对象

对象是JavaScript中最重要的元素

.    JavaScript包含多种对象

-内置对象

自定义对象

-浏览器对象

-HTML DOM对象

-…

2 使用对象

.对象由属性和方法构成

属性的引用

使用点 .运算符

eg : alert(str2.length);

方法的引用.

objectName.method();

对象.方法名:  ------告诉对象去帮我完成某件事

常用内置对象

简单数据对象

String, Number, Boolean

组合对象:

高级对象：

String对象

var str1 = “hello
world”;

1.str1是什么类型？string

2.str1是String对象吗？是String对象

//创建对象的同时进行初始化

var str2 = new
String(“hello world”);

alert(str2.length);//11

String对象的常用方法：

获取长度位数（空格逗号也算）

length:  eg：alert(str2.length);

大小写转换方法

X.toLowerCase();转小写

X.toUpperCase();转大写

eg ：

var str2 = new
String(“HEllo world”);

alert(str2.toLowerCase());

alert(str2.toUpperCase());

获取指定字符

X.charAt(index);返回指定位置上的字符

X.charCodeAt(index):返回指定位置上的字符的Unicode编码

解释说明：

index:字符位置（下标从0开始）

eg ：  var str1 = “JavaScript网页编程”;

var str2 =
str1.charAt(12);

alert(str2);//位置从下标0开始

var str3 =
str1.charCodeAt(12);

alert(str3);//返回"编"的Unicode编码。

查询指定的字符串 返回值为字符串首字母的下标。

X.indexOf(findstr,[index]);

X.lastIndexOf(findstr,[index]);

findstr:要查找的字符串

index:开始查找的索引位置（查找第二个a的下标）可以省略。

eg ：var str2 =
str1.indexOf(“a”,2);//结果为3.

var index = str1.lastIndexOf(“a”,2);//结果为index=3. 【？】

PS:最终返回的结果findstr（“a”）首次在X中出现的首字符的位置索引，如果没有找到返回-1.

lastIndexOf:从后面开始找.但是下标位置不变。【？】

var str1 = “JavaScript网页编程”;

var str2 = str1.indexOf(“a”);

alert(str2);//结果为1，首次出现的下标位置

var str3 = str1.lastIndexOf(“va”); //结果为2

alert(str3);

替换子字符串

X.replace(findstr,tostr);

解释说明：

findstr:要找的字符串

tostr:要替换的字符串

返回替换后的字符串

需求：使用String对象替换掉指定字符

var str1 = “dihdailjdashjljadas”

将lj替换为"". 若替换“**”呢？【？】

获去子字符串

X.substring(start,[end]);

解释说明

start:开始位置

end：结束位置加1，可以省略

eg ：var
str1=“abcdefg”;

var str2=str1.substring(2,4);

alert(str2);//结果为cd

PS:含头不含尾

拆分字符串

X.splic(bystr,[howmany])

解释说明：

bystr:分割用的字符串

howmany:指定返回数组的最大长度，可以省略

返回分割后的字符串数组。

Var str1 = “1,2,3,4”；

Var strArray = str1.split(“,”,4);

alert(strArray.toString());

String对象与正则表达式。

方法：

X.replace(regexp,tostr);

X.match(regexp);

X,search(regexp);

解释说明：

regexp:代表正则表达式

eg: /\d/gi(匹配数字\d)  （/lj/gi）

replace：返回替换后的结果

match：返回匹配字符串的数组  【！】

search：返回匹配字符串的首字符的索引。

eg : var str1 = “abc123def”;

var str2 = str1.replace(/\d/gi,"*");

alert(str2);

var array = str1.match(/\d/g);

alert(array);

var index = str1.search(“3”);

alert(index);

需求:使用String对象替换掉指定字符

var str1 =
“dihdailjdashjljadas”;

将lj替换成"***";

1.使用正则表达式  (/lj/gi)  (i)忽略大小写

2.同时弹出替换了多少处。

Array对象

如何创建一个数组(JavaScript方法)

var cnweek = new Array();

var books = new Array(7);//并没有初始化，只是指定数组的长度

初始化数组对象(声明同时初始化)

1 
var test = new Array (“100”,“a”,123);

2  var test1= [100, 200, 300];

3  var
books = new Array(7);

books[0] =
“1”

books[1] = “1”

books[2] = “1”

…

books[6] = “1”

PS:1下标从0开始  2这种方式一般配合for循环初始化。

对象肯定是引用数据类型

对象中有属性和方法

对象（点）.属性或者方法（）

数组名[index]引用里面的值

Java中数组也是引用类型。(看成是对象)

创建二维数组

通过指定数组中的元素为数组的方式可以创建二维甚至或多维数组.

通俗的讲：就是一维数组中的每个元素又是一个一维数组，

var
books = new Array(7);

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

books[i]
= new Array(2);

}

eg：  books[0][0] = “星期一”;

books[0][1] = “星期二”;

外层能够取到0~6;

内层只能取到0~1;

Array对象的方法。

数组转换为字符串

X.join([bystr]);

X.toString();

解释说明：

返回连接后的字符串

bystr:作为连接数组中元素的字符串，可省略。

toString():由逗号(,)连接

var array1 = [1,“2”,3];

alert(array1.join("-"));

array1.toString();

alert(array1);

获取子数组：

X.slice(start,[end]);

解释说明：

start：开始位置索引

end：结束位置加1，省略则相当于从start位置截取后面所有元素。

var
arr1=[“a”,“b”,“c”,“d”,“e”,“f”];

var arr2=arr1.slice(2,4);  
//var arr2=arr1.slice(2);

arr2 = arr2.toString();

alert(arr2.length);//结果3

//数组使用toString(),默认使用逗号相连，逗号也算一个元素。

数组倒转与排序。

X.reverse();

反向数组

var arr1 = [1,2,3,4];

arr1.reverse();

alert(arr1);

---

X.sort([sortfunc]);

数组排序

数字首字母排序

var arr1 = [32,11,333,232];

arr2=arr1.sort();

alert(arr2);

将数组排序

var arr1 = [32,11,333,232];

arr1.sort(sortfunc);

alert(arr1.toString());

function
sortfunc(a,b){return a-b;}

0607

JavaScript常用对象（续）

Math对象

Math对象用于执行数学任务。

没有构造函数

无需创建，直接把Math作为对象使用就可以调用其所有的方法和属性。

如：Math.PI ,Math.round(3.56);//round 四舍五入 Math.random()//随机生成一个0~1的小数

常用方法:

三角函数

Math.sin(x),Math.cos(x),Math.tan(x);

反三角函数

Math.asin(x),Math.acos(x),Math.atan(x);

计算函数

Math.sqrt(x).//开平方根

Math.pow(a,b); //a的b次方

eg : Var a=Math.pow(0.8 , 4);

Math.max(x,y…) Math.min(x,y…);//获取最值

---

Number对象

Number对象是原始数字的包装对象.–针对于基本数据类型number

目的是为了：

1，为了符合方法的参数类型。【？】

2，为了更方便使用属性和方法，

创建Number对象

var myNum = 123;

var myNum1 = new Number(value);

var myNum1 = Number(value); //不建议这样写

Number对象常用方法：

toString():数字转换成字符串

toFixed(num)：保留小数点后一定位数（num），同时数值转换成字符串

PS：如果必要，该数字会被舍入，也可以用0补充

var a =
12.56789;

alert(a.toFixed(2)); //12.57

var b = 12.5;

alert(b.toFixed(2));//12.50

需求：

双色球号码生成器

一共7个号码。前六个是红色球产生的号码（1-33），后一个是蓝色球产生的号码（1-16）

要求前六个在1-33之间并且不能重复。最后

常用内置对象

.正则表达式对象

RegExp对象概述

RegExp对象表示正则表达式，它是对字符串执行匹配模式的强大工具（必须掌握）。

创建正则表达式对象

1.var RegExp = /pattern/flags;

2.var RegExp = new
RegExp(“pattern”,[“flags”]);

flags :标识有以下几个：（可以省略）

i:忽略匹配中大小写的检测

g:设定当前匹配为全局模式【验】

m:多行搜索模式【验】

var Reg1 = /^\d{3,6}$/;

var Reg2 = new RegExp("^\d{3,6}$");

^:开始   $:结束   \d{3,6}:匹配数字范围3~6（只能输入3到6位数字）

RegExp对象的常用方法；

RegExpObject.test(string)

如果字符串string中含有与RegExpObject匹配的文本，则返回true，否则返回false。

RegExpObject.exec(str):检索字符串中指定的值，返回找到的值并确定其位置

RegExpObject.compile(pattern,[flags]).【？】

var str = “aaaaaa”;

var reg = new
RegExp("¹$");

var isRight = reg.test(str);

if(isRight){alert(“恭喜通过”);}

else{aleart(“请正确输入”);}

输入验证：

需求：

1页面上有两个文本框，一个用来让用户输入用户名（用户名的要求必须是3到6位的数字字母组合）

2第二个文本框用来输入电话号码（号码必须6位内，而且必须是数字）

3要求鼠标一移开就验证，如果验证不通过则弹出提示框提示用户。

Date对象

Date对象用于处理日期和时间

创建Date对象

var now = new Date(); //本身含有默认值：为当前系统时间。

如果我希望生成指定时间：

var now = new Date(“2017/6/7 15:40”);

Date对象的常用方法。

读取日期的相关信息

getDate();返回一个数字，代表月份中的某一天。

-getDay(); 返回一个数字，代表一星期中的第几天 星期日为0

getFullYear()返回年份

修改日期

setDate(),setDay(),setFullYear()等【？】

转换成字符串

toString()

toLocaleString();转换成本地格式

toLocaleDateString();转换成本地格式

需求：

页面上有一对单选按钮，旁边的内容为"三天内"，“一周内” 单击按钮，分别显示当前

时间和三天后或者一周后的时间，以弹框的方式显示，

arguments对象

arguments对象是一种特殊对象，在函数代码中，表示函数的参数数组。

通俗的讲：

1.无需创建，可直接拿来使用。

2.有使用范围，只能存在于函数中（function的大括号中）。

3.表示参数数组。

4.函数中如果使用arguments,则无需使用变量接受参数。

20180607作业

1.模拟方法的重载

页面上有两个按钮，分别写着"计算平方"，“计算和”

计算方法的触发方法传入一个参数，计算和的触发方法传入两个参数

2.两个按钮的onclick时间必须是同一个方法。

需求：

双色球号码生成器

一共7个号码。前六个是红色球产生的号码（1-33），后一个是蓝色球产生的号码（1-16）

要求前六个在1-33之间并且不能重复。最后

0608

Function 对象

函数与Function对象

函数（方法）：是一个可以重复执行的代码段，

一组可以运行的语句

Function对象可以表示开发者定义的任何函数

函数实际上是功能完整的对象

函数：通过function关键字创建，同时也是Function对象

然后还有一些函数，就只是函数类型，不是对象，比如：

parseInt /  parseFloat. /isNaN

PS:通过function关键字,我们可以定一个函数,同时该函数又是一个Function对象,

然后该Function对象又是众多object对象中的其中一种.

---

函数的定义

由关键字function定义

函数名的定义规则和标识符一致，大小写敏感.

可以使用变量，常量或表达式作为函数调用的参数

返回值必须使用return;

return语句也可以用来终止函数的执行

function 函数名([参数])

{函数体;

return 返回值;}

使用function对象创建函数

语法格式：

var functionName = new
Function(arg1,…arg2…,functionbody);

eg: var aaa = new
Function(“x”,“y”,“return x+y;”);

function test02(){

var aaaaa = new
Function(“x”,“y”,“return x+y;”);//函数

var
result = aaaaa(1,2);

alert(result);

var aaa =
function(x,y){“return x+y;”};//匿名函数

var result = aaa(1,2);

alert(result);

}

---

匿名函数：

创建一个匿名函数：

var func
= function(arg1,arg2…argn){ func_body}

var aaa= functin(x,y){return x+y;}

var result = aaa(1,2);

alert(result);

---

数组的排列2.0：

function test02(){

var arr =
[11,1,8,22,2,33,9,3];

//使用Function

arr.sort(new Fuction(
“x”,“y”,“return x-y”));

arr.toString();

alert(arr);

//使用匿名对象

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

arr.toString();

alert(“匿名:”+arr);

---------------------------------------------------

全局函数概述。

.全局函数可以用于所有的JavaScript对象

常用的全局函数有：

对象就是函数，函数就是对象，两者在本质上没有区别，在形式上要区分。

parseInt/parseFloat.

isNaN.

eval.计算JavaScript字符串，并把它作为脚本代码来执行。

decodeURI/encodeURI

encodeURI与decodeURI

encodeURI:把字符串作为URI进行编码

decodeURI:对encodeURI函数编码多的URI进行解码。

var str1 =
“http://localhost:8080/llm/index.html?name=liaolimin”;

var s1 = encodeURI(str1);

alert(s1);

var s2 = decodeURI(s1);

alert(s2);

eval函数

.eval函数用于计算某个字符串，以得到结果；或者用于执行其中的JavaScript代码。

只接受原始字符串作为参数

如果参数中没有合法的表达式和语句，则抛出异常

var str = “2+3”

alert(str);

alert(eval(str));

var str = “2+3A”;

var str = “alert(’'hello)”;

alert(str);

eval(str);

简单计算器：

0611

window对象（重点）

DOM(document,object,model)HTML

操作HTML以创造各种动态视觉效果

一种浏览器端的动态网页技术。

DHTML的功能

动态改变页面元素

与用户进行交互（区分静态网页与动态网页的根本区别）。

DHTM对象模型包括浏览器对象模型和DOM对象模型

BOM与DOM

BOM:浏览器对象模型，用来访问和操作浏览器窗口。

使用JavaScript又能跟浏览器对话

通过使用BOM，可以移动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作

DOM:文档对象模型，用来操作想要显示的文档

定义了访问和操作HTML文档的标准方法

应用程序通过对DOM树的操作，来实现对HTML文档的数据的操作

window对象

window表示浏览器窗口:

所有的JavaScript全局对象，函数以及变量均自动成为window对象的成员

常用属性：  var a =
window.document.getElementById("").value

//方法的连缀使用，因为对象的属性返回的是一个对象window.document返回是一个对象

Document:窗口中显示的HTML文档对象。

History:浏览器浏览过的窗口的记录对象。

location:窗口文件地址对象

name:窗口名称。返回字符串类型

opener:打开当前窗口的window对象。

常用方法：

常用方法：

alert();confirm(),    prompt():对话框【？】

close(); open();关闭，打开窗口

focus(),blur();窗口获得焦点或者失去焦点。【？】

moveBy(),moveTO();移动窗口。【？】

alert(“str”):提示对话框，显示str字符串的内容

confirm(“str”):确认对话提示框，显示str字符串的内容

PS：按"确定"按钮返回true, 取消按钮返回false.

【验】

If(confirm(“确定要删除吗？”)){  }

.prompt(str,value):

输入对话框，采用文本框输入信息

str为提示信息，value为初始值

-按"确认"按钮返回输入值，其他返回undefined.【验】

需求:

页面有一个文本框，旁边有一删除按钮，点击删除按钮弹出提示框：

点击确定将文本框中内容删除，点击取消则取消

//通过onclick = “return method();”

//返回值为false，方法中return语句之前的语句也会执行。

窗口的打开和关闭

window.open([url],[name],[config]);

url:打开的超链接地址。 （不可省略）

name:窗口的名称

config：窗口的配置参数（width
height）返回新的窗口对象

var url = “http://www.baidu.com”;

var name =
“por”;

var config = “width=500px,height=300px”;

window.open(url,name,config);

window.close();【验】

定时器

多用于网页动态时钟，制作倒计时，跑马灯等效果

周期性时钟

以一定的间隔执行代码，循环往复

一次性时钟

在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。

周期性定时器

setInterval(exp,time):周期性触发代码exp;

exp:可执行语句。

time：时间周期，单位为毫秒

clearInterval(tID);停止启动的定时器

tID：启动的定时器对象（全局对象）

var tID;

function test01(){

tID = window.setInterval(func,2000);

}

function
func(){ 
【？】

alert(123);

}

function
test02(){

window.clearInterval(tID);

}

一次性定时器

setTimeout(exp,time);一次性触发代码exp:

exp:执行语句

time:间隔时间，单位毫秒

返回已经启动的定时器对象tID

clearTimeout(tID):停止启动的定时器

tID:启动的定时器对象

//window.setTimeout(func,1000);

function
func(){

alert(“hello”);

}

1页面有"goto.baidu"(按钮),点击之后5秒钟的新窗口中打开百度。5秒钟之内点击“取消”(超链接)然后就不跳转

2动态时钟，页面上只能有一个按钮停止按钮，设计成一个闹钟行式

0612

document对象（重点）

//黑客领域----欺骗服务器的 ， JS ， document抓包

//sql注入-----

1.任何载入浏览器的HTML文档就会成为一个document对象【？】

2.通过使用document对象，可以从脚本中对HTML页面中的所有元素进行访问

document对象是window对象的一部分，可以通过window.document属性对其进行访问

DOM(Document,Object,
Model)概述

文档对象模型

PS：当网页被加载时，浏览器会自动创建页面的文档对象模型，

通过DOM,可以访问所有的html元素，连同他们所包含的文本和属性

可以对其中的内容进行修改和删除，同时也可以创建的新元素。

HTML文档中的所有节点组成一文档树（节点树）

document对象是一个文档树的根

节点树

HTML文档中的每个元素，属性，文本等都代表着树中的一个节点

整个文档是一个文档节点

每个HTML标签是一个元素节点

每个HTML属性是一个属性节点

注释属于注释节点

一切皆节点

Java中一切皆对象

树根为document的对象

通过document对象，操作整个节点树。

一棵节点树中的所有节点。彼此之间都有关系。

父节点

子节点

兄弟

后代

DOM操作

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

查找节点：nodeName  nodeType

读取节点信息

修改节点信息

创建新节点

删除节点

1.需求：

广告轮播-------四张图片 每一秒切换一次，

1图片使用数组引入

2使用定时器每隔一秒切换掉指定位置上的图片

3，鼠标放上去则轮播停止，移开鼠标则继续轮播

DOM操作

读取:

nodeName:节点名称

元素节点和属性节点：标签或属性名称

文本节点：永远是#text

文档节点：永远是#document

nodeType:节点类型

返回数值

元素节点：返回1

属性节点：返回2

文本节点：返回3

注释节点：返回8

文档节点：返回9

//加载触发

a

---

元素节点的内容

innerText

设置或获取位于对象起始和结束标签内的文本（纯文本）

innerHTML

设置或获取位于对象起始和结束标签内的HTML（包括标签和文本）

PS：两个方法很像，经常可以混用(纯文本情况下)

代码示例:

第一行文本

段落中的文本

------------------------------------------------------

节点属性：

getAttribute()方法：根据属性名称获取属性的值

setAttribute(), 【验】

removeAttribute()【验】

代码示例:

function test01(){

var a1 =
document.getElementById(“a1”);

var href = a1.getAttribute(“href”);

alert(href);

a1.innerHTML = “Click you”;//修改文本

alert(a1.innerHTML);

}

Click me

---

拓展

将HTML标记，属性对象化      元素对象

元素节点的样式

CSS样式对象化。

style属性

node(节点).style.color;

node.style.fontSize;

className:样式名称

function test01(){

var p1 = document.getElementById(“p1”);

p1.style.color =
“red”;

p1.style.fontSize =
“50px”;

}

一周畅销榜

0613

DOM操作—查询

查询节点:

.如果需要操作HTML元素，必须首先找到该元素

.查询节点:

-通过id查询

-通过层次（节点关系）查询

-通过标签名称查询

-通过name属性查询

exp1  通过ID查找节点

一会走畅销

function test01(){

var ol =
document.getElementById(“p1”);

alert
(ol.innerHTML);

}

方法：document.getElementById()

-通过指定的ID来返回元素节点（元素对象），忽略文档的结构

-查找整个HTML文档中的任何HTML元素

-如果ID值错误，则返回null;

js代码:

var o = document.getElementById(“h1”);

o.innerHTML =
“new text”;

o.className =
“style1”;

var o1 = document.getElementById(“txt1”);

o1.value=“默认值”;//类似html本身自带属性

o1.style.color=“red”;//类似CSS样式表修饰

css代码:

h1.style1{

font-weight:
bolder;

background-color:
silver;

border: 1px solid
red;

}

html代码:

h1 text

根据层次查找节点

.parentNode,
firstChild 和 lastChild

-遵循文档的上下层次结构，查找单个节点

.childNodes

-遵循文档的上下层次结构，查找多个节点

.previousSibling

-前一个同级节点

.nextSibling

-后一个同级节点

文本段落

a b c

click me

---

var s1 = document.getElementById(“select1”);

alert(s1.childNodes.length);//7

var ol = s1.firstChild;

alert(ol.innerHTML);//undefined

alert(s1.nextSibling.innerHTML);//click me

alert(s1.previousSibling.innerHTML);//undifined

===========================================================

根据标签名查找节点

.getElementsByTagName():根据指定的标签名称返回所有的元素

-忽略整个HTML文档中所有的元素

-如果标签名称错误，则返回长度为0的节点列表（数组）

.返回一个节点列表（数组）

-使用节点列表的length属性获取个数

-【index]:定位具体的元素

段落1

div中的段落1

div中的段落2

div中的段落3

var a =
document.getElementsByTagName(“p”);

alert(a.length);//4

alert(a[1].innerHTML);//div中的段落1

根据name属性查找节点

male;

female;

var nodes0 =
document.getElementsByName(“sex”);

alert(nodes0.length);//2

var nodes1 =
document.getElementsByName(“state”);

alert(nodes1.length);//3

alert(nodes0[0].innerHTML);//取不到值，因为是单标签。

0614

DOM-增加

1.创建新的节点：

document.createElement(elementName);

-elementName:要创建的元素标签名称

-返回新创建的节点

.设置节点信息

//创建新的节点

var newNode =
document.createElement(“input”);

//设置具体的节点信息

newNode.type = “text”;

newNode.value = “值”;

PS:将CSS对象化

newNode.style.color = “red”;

2 添加新节点：

.parentNode.appendChild(newNode);

-追加:新节点作为父节点 的最后一个子节点存在。

.parentNode.insertBefore(newNode, refNode);

-refNode:参考节点，新节点位于此节点之前。

-----------------------------------------------------------------

==================================================================

需求：动态创建页面元素

1.页面有个按钮"添加新元素"点击之后按钮左边出现一个新按B钮"new utton" 右边出现一个超链接（去百度）。

点击这个新按钮 ，弹出hello。点击超链接在新窗口打开百度页面。

2动态评论区

===================================================================

删除节点

删除方法中传入的是子节点元素对象（document.getElementBy…)。

.node.removeChild(childNode);  //childNode必须为对象

-删除某个子节点 （若删除的节点是父节点，他的子节点全删除）

-childNode必须是Node的子节点

childNode.parentNode.removeChild(childNode);

由兄弟节点找到父节点，然后父节点出发去删除指定的子节点。

---

link1

文本

=======================================================================

HTML DOM对象

传统的DOM对象操作.document.getElementBy…(“a1”);

HTML DOM概述

.HTML DOM定义了用于HTML的一系列标准的对象

以及访问和处理HTML文档的标准方法，

HTML元素对象化

将网页中每个元素都看成一个对象

//通过HTML DOM方式

//1.获取form父节点

var form
= document.getElementById(“form1”);

//2.创建(图片)对象

var
newNode = new Image();

//3.赋值

newNode.src
= “1.png”;

//4.通过appendChild()方法添加新的子节点

form.appendChild(newNode);

标准DOM与HTML DOM

.标准DOM提供了统一的操作接口（方法）

-createElement

-appendChild

-nodeName

-nodeType

…

.HTML DOM提供了封装好的各种对象

Image

Select

Option

var newNode1 =
document.getElementById(“img”);

newNode1.src="";

||都可以为img标签加入新的图片但前者是修改，后者是创建还未加入到HTML中

var newNode2 =
new Image();

newNode2.src="";

注意：

js:代码(错误)

var div =
document.getElementById(“div1”);

div.createElement(“a”);

var newDiv =
new Div();

newDiv.createElement(“a”);    (X)两者是完全不同的概念

=================================================================

DOM 和 HTML DOM怎样取舍

.操作节点，如：创建form.appendChild(newNode) ，删除， 查找等

-使用标准DOM比较合适

.操作属性，如读取或者修改属性的值

-使用HTML DOM比较合适

Select对象

.Select对象代表HTML表单中的一个下拉列表

-标签即表示一个Select对象

.常用属性

-options,
selectIndex, size【？】

.常用方法

add(option),
remove(index)

.onchange

Option 对象

Option对象代表HTML表单中下拉列表中的一个选项

-标签表示一个Option对象

.创建对象

-var o = new
Option(text,value);

.常用属性

text, value, selectedIndex;

0619

HTML DOM对象

.Table对象

Table对象代表一个HTML表格

-标签代表一个Table对象

常用属性：

-rows, cols

-两个属性的返回值类型：数组对象或者对象数据类型

常用方法：

-insertRow(index):返回TableRow对象

-deleteRow(index)

TableRow对象

-TableRow对象代表一个HTML表格行

-标签代表一个TableRow对象

常用属性

-cells, rowIndex,
innerHTML

常用方法

insertCell(index):返回一个TableCell(单元格)对象

deleteCell(index).

TableCell对象

.TableCell对象代表一个HTML表格的单元格

-标签表示一个TableCell对象

常用属性

-cellIndex,
innerHTML, colSpan, rowSpan

数据表格的经典案例

需求:界面山有数据表格，用于显示产品的名称和价格信息 ， 并可以添加新产品，或者删除某条产品数据。

概念：window对象是一切对象的父类

(任何对象都能通过window对象以"."的方式引出)

window.document.getElementById(“d1”).innerHTML;

document对象

介绍一类window对象的直接属性或方法。（对象）

Screen对象

Screen对象包含有关客户端显示屏幕的信息

常用于获取屏幕的分辨率和色彩。

常用属性

-width/height

-availWidth/availHeight

单位：px

history对象

.history对象包括（在浏览器窗口中）访问过得URL

-length属性：浏览器历史列表中的URL数量

.方法

-back();

-forward();

-go(num);

//alert(history.length);

//history.back();//等同于点击"后退"按钮

//history.forward();//等同于单击"前进"按钮

//history.go(-2);//等同于单击"后退"两次

window.location

location对象（很有用）

location可以打开某个页面，也可以跟控制器URL，对控制器发送请求

location对象包含有关当前URL的信息

-常用语获取和改变当前浏览的网址

.href:当前窗口正在浏览的网页地址

方法：

-replace(url):转向到URL网页地址

-reload();重新载入当前网址。//等同于刷新

event对象

.任何事件触发后将会产生一个event对象

.event对象记录事件发生的鼠标位置，键盘按键状态和触发对象等信息

-获得event对象

-使用event对象获得相关信息，如单击位置，触发对象等

常用属性

clientX/clientY等

.获取event对象

.需要考虑浏览器的兼容性

IE浏览器：

-js或者html代码中直接使用event关键字

function test01(){

alert(event.clientX+":"+event.clientY);

}

p
text

ps:在火狐浏览器中上面第一种方式中会发生错误，不能再js代码中直接使用event关键字。

解决方案：

在定义js方法时，使用event关键字将事件对象作为参数传入方法

function
test01(e){

alert(e.clientX+":"+e.clientY);

}

function
test01(e){

//获取事件源

alert(e.srcElement.nodeName);

}

.对于event对象，经常需要获取事件源。

-事件源：即触发事件的元素（事件的目标节点）

-event.srcElement;-------只在IE浏览器中有效

-火狐：event.target;

需求：

写一个程序，解决IE和火狐之间的兼容性问题

弹出事件源，无论使用什么浏览器都有效

function
test01(e){

var  obj =
e.srcElement||e.target;

alert(obj.nodeName);

}

面向对象基础。

.对象是一种特殊的数据类型，由属性和方法封装而成

-对象是一种特殊的数据类型，由属性和方法封装而成

-属性指与对象有关的值：对象名.属性名

-方法指的对象可以执行的行为或可以完成的功能：对象名.方法名（）

.定义对象

String对象

Select对象

Array对象

Number对象

Function对象

自定义一种对象   XX对象-----目的是为了解决问题

函数

创建通用对象

.使用Object对象创建通用对象

var XX = new Object();//自定义一个名为XX对象

//添加属性

XX.shenggao = 180;

XX.age = 25;

//添加方法

XX.eat = new Function(“alert(‘我能吃1斤’);”);

创建对象的模板

function XX(n,a){

//定义name和age属性

this.name
= n;

this.age
= a;

//定义方法

this.eat
= function(){

alert(“我想吃饭”)

}

}

非常重要(JSON数据交换格式)

.JSON(JavaScript
Object Notation)是一种轻量级的数据交换格式

-使用名/值对的方式定义

-名称需要使用""引起来

-多对定义之间使用,隔开

.名称可以是属性

-字符串类型的属性值，需要使用""引起来

“userName”:“wuwei”,“age”:28

0620

jQuery

1jQuery介绍

什么事jQuery?

jQuery是一个优秀的JavaScript框架。一个轻量级的JavaScript库

兼容CSS3以及各种浏览器

使用户更方便地处理HTML，Events,实现动画效果

并且方便的为网站提供Ajax交互

使用户的HTML页面保持代码和HTML分离【？】

PS：jQuery2.x开始不再支持IE6,7,8.

jQuery核心理念：write less， do  more

2006年1月发布的

浏览器是如何解析我们的HTML文档的

1读取HTML文档—》2.形成DOM树（内存）—》渲染（显示在浏览器视窗）

jQuery中的重要知识点

1.选择器（大量）

2.方法（少量）

3.动画效果

代码示例：

HELLO

利用jQuery提供的选择器选中指定的元素节点

使用jQuery锁定元素节点后能够添加样式和行为

$(“div”)-----------标签选择器实现定位

$("#d1")-----------ID选择器实现定位

代码示例:使用jQuery操作节点样式

$(“div”).css(“font-size”,“50px”);

$("#d1").css(“font-size”,“50px”);

jQuery的编程步骤

1.引入jQuery的js文件

2.使用选择器定位节点

3.通过方法操作节点

jQuery对象和DOM对象之间的转换

1.什么是jQuery对象

jQuery对象是为了解决浏览器的兼容问题而提出的一种统一封装后的对象描述

jQuery提供的方法都是针对对象特有的，而且大部分方法返回值类型也是jQuery对象，所有方法可以连缀使用。

“jQuery对象.方法().方法()…”

如:$("div"),$("#d1")都是$(“div”)对象

DOM对象—》jQuery对象

实现方式  :  $(DOM对象)

function test01(){

//锁定之后变成jQuery对象

//$(“div”).css(“font-size”,“50px”);

var obj = document.getElementById(“d1”);

//DOM对象----》jQuery对象

//没有区别：都代表div元素对象

var $obj = $(obj);

$obj.html(“fengjie”);   //[?]

}

jQuery对象—》DOM对象

实现方式

$obj.get(0)或者$obj.get()[0]

var $obj = $(“div”);

//jQuery对象 ----》DOM对象

var obj = $obj.get()[1];

obj.innerHTML = “wuwei+fengjie”;

PS:使用jQuery获取的对象返回值类型是一个数组，可以通过下标的形式转换成指定的DOM对象。此方式

对ID选择器可能会失效。

jQuery选择器

什么是jQuery选择器

.jQuery选择器类似于CSS选择(定位元素，施加样式),

能够实现定位元素，施加元素以及添加行为。

.使用jQuery选择器能够将内容与行为分离

选择器的种类

1.基本选择器

2.层次选择器

3.过滤选择器

4.表单选择器

基本选择器

#id

特点:最快，尽量使用id选择器

.class

.特点:根据class属性定位元素

$(".s1").css(“font-size”,“50px”);

Hello

world

element【？】

标记选择器或者元素选择器，一句HTML标记来区分

合并选择器:即所有选择器的合集

select1, select2,
…selectN

$("#d1,.s1,p").css(“font-size”,“30px”);

hello

world

dome

锁定所有页面元素，很少使用

$("*").css(“font-size”,“30px”);

层次选择器

select1 空格
select2

根据select1找到节点后，再去寻找子节点中符合select2的节点（重要）

$("#d1
p").css(“font-size”,“30px”);

ps:不止针对直系子节点，类似于我们的包含选择器

$("#d1>div").css(“font-size”,“30px”);

PS:只能找自己的直系子节点，类似于我们的子选择器。

$("#d1+div").css(“font-size”,“30px”);

PS:"+"表示下一个兄弟节点

$("#d1~div").css(“font-size”,“30px”);

PS:"~"表示下面所有的兄弟节点

过滤选择器

1.基本过滤选择器

过滤选择器以":“或者”[]"开始

:first          
第一个元素

:last          
  最后一个元素

:not(selector)  
把selector排除在外

:even          
  挑选偶数行

:odd              挑选奇数行

:eq(index)       下标等于index的元素

:gt(index)       下标大于index的元素

:lt(index)       下标小于index的元素

PS:当基本过滤器产生冲突的时候以JavaScript标签中下面的位置

$(“table tr:even”).css(“background-color”,“green”);

$(“table
tr:first”).css(“background-color”,“red”);

$(“table
tr:eq(1)”).css(“background-color”,“blue”)

$(“table
 tr:gt(2)”).css(“background-color”,“green”);

$(“table
tr:lt(2)”).css(“background-color”,“green”);

2.内容过滤选择器

:contains(text) 
匹配包含给定文本的元素

:empty          
 匹配所有不包含子元素或文本的空元素

:has(element)   
匹配含有选择器所匹配的元素

:parent         
 匹配含有子元素或者文本的元素

---

内容过滤选择器

这里是div

含有p标记的div

含有p标记的div

===============================================================================

3.可见性过滤选择器

:hidden   
匹配所有不可见元素

:visible  
匹配所有可见元素

$(“div:hidden”).css(“display”,“block”);

$(“div:hidden”).show(“normal”);

$(“div:visible”).hide(800);

hello jquery

hello ajax

可见性过滤选择器

==========================================================================

jQuery操作

查询：

html()

.读取或修改节点的HTML内容

$("#d1").html();

ps:获取整个节点内的HTML内容

$("#d1").text();

ps:获取整个节点内的文本内容

val():读取或修改节点的value属性值

$(“input”).val();

PS:获取文本中的值

另一种写法：

$(":text").val();

表单选择器

attr()

.读取或修改节点的属性

$("#d1").attr(“style”,“color:red;”);

jQuery操作创建-插入-删除

创建节点：

语法：$(html代码)

创建一个div并且加在body的最后一个节点

1.创建

var $obj =
$(“

我的新节点

”);

2.添加

$("body").append($obj);

简写形式：

$(“body”).append(“

我的新节点

”);

插入节点

.append()    做为最后一个子节点添加进来

.prepend()   做为第一个子节点添加进来

.after()     做为下一个兄弟节点添加进来

.before()    做为上一个兄弟节点添加进来

删除节点

.remove()            移除

.remove(selector)    按选择器定位后删除

.empty()             清空节点

样式移除（清空自己）

$(“div:first”).empty();

若干：

复制节点

遍历节点

样式操作

==========================================================================

无缝滚动

overflow

这个属性定义元素内容在溢出的情况下怎么处理

scroll:内容会被修剪，但是浏览器会显示滚动条

visible:默认值，内容不会被修剪，会撑出元素框

hidden:内容会被修剪，并且其余内容不可见

scrollLeft:20px;

设置scrollLeft就如同你拖动滚动条，默认值为0

当你为该属性设置值后，浏览器将从scrollLeft的位置开始显示。而不显示0-scrollLeft.

单位大概为px的两倍。

0621

jQuery事件处理

使用jQurey实现事件绑定

.语法：

-$obj.bind(事件类型,事件处理函数)

比如:$obj.bind(“click”,“func”);

简写:

$obj.click(func);

event对象

获得事件对象event

.只需要为事件处理函数传递任意一个参数

如:$obj.click(function(e){})

e就是事件对象，但已经经过jQuery对底层事件对象的封装。

封装后的事件对象经验方便的兼容各浏览器

事件对象的常用属性

.获取事件源var a = e.target返回值DOM对象

.获取鼠标点击的坐标

-e.pageX

-e.pageY

需求:页面上有一个div和超链接

1.点击第一个超链接弹出div中的文本

$(function(){

$("#a1").blind(“click”,function(){

$("#d1").html(“The Last Lesson about jQuery”)

});

});

hello jquery

绑定事件处理函数

PS:当文档中出现多个具有相同id属性的元素时，可以配合过滤选择器对要触发事件的元素进行筛选。

2.点击第二个超链接改变div中的内容，顺便弹出点击的坐标

3.当前页面有多个超链接，使用标签选择器对所有超链接添加相同的方法，但是顺便弹出是哪个元素触发了该方法

$(function(){

$("#a1").bind(“click”,function(e){

//通过事件对象找到事件源

var
obj = e.target;//返回一个DOM对象

alert(obj.innerHTML);

alert(e.pageX);

alert(e.pageY);

$("#d1").html(“The Last Lesson about jQuery”) ;

});

});

文本内容123

文本0

文本1

文本2

===========================================================================

事件冒泡

.子节点产生的事件会依次向上抛给父节点

如何取消事件冒泡

//e.stopPropagation();

我在div中

===========================================================================

jQuery增强操作

jQuery动画

显示，隐藏的动画效果

1.show(), hide()

.作用:通过同时改变元素的宽度和高度来实现显示或隐藏

用法:$obj.show(执行时间,回调函数);

执行事件:slow.normal,毫秒数

回调函数:动画执行完之后要执行的函数

2.上下滑动式的动画实现

.slideDown(执行时间)/slideUp(执行时间)

.作用:通过改变高度来实现显示或者隐藏的效果

.用法同show(执行时间)/hide(执行时间)。

3.整体显示和隐藏:

.fadeIn(执行时间)/fadeOut(执行时间)

---

显示或隐藏的内容

=========================================================================

自定义动画

animate();

用法：

animate(js对象,执行时间,回调函数)

js对象:描述动画执行后元素的样式

执行时间:毫秒数

回调函数:动画执行完之后要调用的函数(可以省略)

$(“div”).click(function(){

//代表直线前行。

$(this).animate({“left”:“500px”},4000);

});

加点文本

==========================================================================

jQuery类数组

.什么是类数组

.jQuery对象封装的多个DOM对象

类:指的是类似

.具备自己特有的操作方法。

类数组的操作

.length属性

.each(func):遍历类数组，func用来处理DOM对象，在func中this表示正在被遍历的那个DOM对象，func函数

可以添加一个参数i用于表示正在被遍历的DOM对象的下标（从0开始）

eq(index):将下标等于index的DOM对象取出

.get():返回一个DOM对象组成的数组

.index(obj):返回DOM或jQuery对象在类数组的下标

---

1. a-zA-Z0-9 ↩︎