前端学习

1.1 JavaScript基础概念：

JavaScript (ECMAScript) ：JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义，但是JavaScript并不是这么一点含义，它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型 这三部分组成。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

1.1.1 ECMAScript

组成部分：语法，类型，语句，关键字，保留字，操作符，对象。

1.1.2 DOM

文档对象模型（DOM ， Document Object Model）是针对XML但是经过拓展用于HTML的应用程序编程接口。DOM把整个页面

映射为一个多层节点结构，开发人员借助DOM Api对节点进行操作。

HTML DOM （文档对象模型）

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

HTML DOM 模型被构造为对象的树。

HTML DOM 树:

 
image.png

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

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

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

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

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

1.1.3 BOM

浏览器对象模型（Browser Object Model）使用BOM控制浏览器显示页面意外的部分。

1.2 在HTML中使用JavaScript方式

1.2.1 javaScript脚本加载的位置

1 通过在网页中加入<Script>…</Script>标记JavaScript的开始和结束，将JavaScript代码放到<Script>…</Script>之间

2 也可以引入一个外部的JavaScript文件，这个JavaScript文件一般以.js作为扩展名

3 原则上，放在<head></head>之间。但视情况可以放在网页的任何部分

4 一个页面可以有几个<Script>…</Script，不同部分的方法和变量，可以共享。

1.2.2 javaScript语句的注意点

（1）对大小写敏感

（2）自动忽略多余的空格

（3）在文本字符串中使用反斜杠对代码行进行换行

（4）单行注释（//）多行注释（/* */）

1.3 JavaScript基本语法：

1.3.1 变量：

什么是变量？

变量是用于存储信息的容器

变量的声明

语法：

var 变量名

变量名 = 值;

变量要先声明再赋值

变量可以重复赋值

变量的命名规则

变量必须以字母开头；

变量也能以$和_符号开头（不过我们不推荐这么做）；

变量名称对大小写敏感（a和A是不同的变量)。

1.3.2 数据类型

typeof操作符：用于检测给定变量的数据类型。

· undefined类型 只有一个特殊的值就是undefined，在使用var声明变量但未初始化时，变量的值是undefined。

· null类型 只有一个特殊的值就是null，null值表示一个空对象指针，使用typeof操作符检测null值会返回“object”。

· boolean类型 布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来。boolean****类型的字面值****true****和****false****是区分大小写的。

· number类型 JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：

123; // 整数123

070; //八进制的56

0xA; //十六进制的10

0.456; // 浮点数0.456

1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5

-99; // 负数

NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示

Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

· string类型 字符串是以单引号’或双引号”括起来的任意文本，比如’abc’，”xyz”等等。请注意，”或”“本身只是一种表示方式，不是字符串的一部分，因此，字符串’abc’只有a，b，c这3个字符。 如果’本身也是一个字符，那就可以用”“括起来，比如”I’m OK”包含的字符是I，’，m，空格，O，K这6个字符。 如果字符串内部既包含’又包含”怎么办？可以用转义字符\来标识，比如：

'I\'m \"OK\"!';

表示的字符串内容是：I’m “OK”! 转义字符\可以转义很多字符，比如\n表示换行，\t表示制表符，字符\本身也要转义，所以\表示的字符就是\。

· object类型 创建object类型的实例并为其添加属性和方法，就可以创建自定义对象。

对象：由花括号分隔，。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔

对象属性有两种寻址方式：

name=person.lastname;

name=person["lastname"];

1.3.3 类型转换：

使用：Number（）、parseInt() 和parseFloat（） 做类型转换

Number()强转一个数值(包含整数和浮点数)。

*parseInt()强转整数，

*parseFloat（）强转浮点数

函数isNaN()检测参数是否不是一个数字。 is not a number

ECMAScript 中可用的 3 种强制类型转换如下：

Boolean(value) - 把给定的值转换成 Boolean 型；

Number(value) - 把给定的值转换成数字（可以是整数或浮点数）；

String(value) - 把给定的值转换成字符串；

1.3.4 运算符

  1. 一元运算符
  • delete：用于删除对象中属性的 如：delete o.name; //删除o对象中的name属性

void： void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。

  • ++ --

一元加法和一元减法

  1. 位运算符

位运算 NOT ~

位运算 AND &

位运算 OR |

位运算 XOR ^ (不同为1，相同则为0)

左移运算 <<

右移运算 >>

  1. 逻辑运算符

逻辑 NOT ! 运算符 非

逻辑 AND && 运算符 与

逻辑 OR || 运算符 或

  1. 乘性运算符：*（ 乘） /(除) %（取模）求余

  2. 加性运算符： + -

*其中+号具有两重意思：字串连接和数值求和。

就是加号”+“两侧都是数值则求和，否则做字串连接

  1. 关系运算符 > >= < <=

  2. 等性运算符 == === != !==

  3. 条件运算符 ? : (三元运算符)

  4. 赋值运算符 = += -= *= /= %= >>= <<=

10 逗号运算符

用逗号运算符可以在一条语句中执行多个运算。

var iNum1=1, iNum2=2, iNum3=3;

 

1.3.5 操作符

位操作符

32位二进制表示整数，第32位为符号位

~ 按位非(NOT)

& 按位与(AND)

| 按位或(OR)

^ 按位异或(XOR)

<< 左移，不影响符号位

>> 有符号右移，保留符号位，不影响正负

<<< 无符号右移，连着符号位一起右移

 

关系操作符

操作符与C语言的语法基本类似，这里不详细说明了。

1.3.6 语句

  1. for-in 精准的迭代语句，可以用来枚举对象的属性
for(var propName in window){

 document.write(propName);

}

 

输出BOM中 window对象的所有属性

迭代前最好先检测对象是否为null或undefined。(ECMAScript5中不执行循环体,以前会报错)

  1. label语句，给代码添加标签

  2. break和continue语句(break跳出循环，直接执行循环后的代码。continue跳出当前循环，接着进入下一次循环)

var num =0;

outer:

 for(var i=0;i<10;i++){

 for(var j=0;j<10;j++){

 if(i == 5 && j==5){

 continue outer;

 }

 num++;

 }

 }

alert(num); //95

 

  1. with语句(不建议使用，可读性差)

  2. switch语句

var num = 15;

switch (true){ //输出 Between 10 and 20，如果是false就输出 Less than 0

 case num<0:

 alert("Less than 0");

 break;

 case num>=0&&num<=1:

 alert("Between 0 and 1");

 break;

 case num>10&&num<=20:

 alert("Between 10 and 20");

 break;

 default:

 alert("More than 20");

}

 

1.3.7 数组

JavaScript的Array可以包含任意数据类型，并通过索引来访问每个元素。

要取得Array的长度，直接访问length属性：

var arr = [1, 2, 3.14, 'Hello', null, true];

arr.length; // 6

 

这里要注意，直接给Array的length赋一个新的值会导致Array大小发生变化：

var arr = [1, 2, 3];

arr.length; // 3

arr.length = 6;

arr; // arr变为[1, 2, 3, undefined, undefined, undefined]

arr.length = 2;

arr; // arr变为[1, 2]

 

Array可以通过索引把对应的元素修改为新的值，因此，对Array的索引进行赋值会直接修改这个Array：

var arr = ['A', 'B', 'C'];

arr[1] = 99;

arr; // arr现在变为['A', 99, 'C']

 

请注意，如果通过索引赋值时，索引超过了范围，同样会引起Array大小的变化：

大多数其他编程语言不允许直接改变数组的大小，越界访问索引会报错。然而，JavaScript的Array却不会有任何错误。在编写代码时，不建议直接修改Array的大小，访问索引时要确保索引不会越界。

  • 转换方法 所有对象都具有toLocaleString()，toString()，valueOf()方法。
· var colors = ["red", "blue", "green"]; //creates an array with three strings

· alert(colors.toString()); //red,blue,green

· alert(colors.valueOf()); //red,blue,green

· alert(colors); //red,blue,green

 

首先调用toString()方法，返回数组的字符串表示。toLocaleString()方法经常返回与toString()和valueOf()方法相同的值，但不同的是，调用的是每一项的toLocaleString()方法，而不是toString()。

 var person1 = {

 toLocaleString : function () {

 return "Nikolaos";

 },

 toString : function() {

 return "Nicholas";

 }

 };

 var person2 = {

 toLocaleString : function () {

 return "Grigorios";

 },

 toString : function() {

 return "Greg";

 }

 };

 var people = [person1, person2];

 alert(people); //Nicholas,Greg

 alert(people.toString()); //Nicholas,Greg

 alert(people.toLocaleString()); //Nikolaos,Grigorios

 

  • indexOf

与String类似，Array也可以通过indexOf()来搜索一个指定的元素的位置：

var arr = [10, 20, '30', 'xyz'];

arr.indexOf(10); // 元素10的索引为0

arr.indexOf(20); // 元素20的索引为1

arr.indexOf(30); // 元素30没有找到，返回-1

arr.indexOf('30'); // 元素'30'的索引为2

 

数字****30****和字符串****’30’****是不同的元素。

  • slice

slice()就是对应String的substring()版本，它截取Array的部分元素，然后返回一个新的Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

arr.slice(0, 3); // 从索引0开始，到索引3结束，但不包括索引3: ['A', 'B', 'C']

arr.slice(3); // 从索引3开始到结束: ['D', 'E', 'F', 'G']

 

注意到slice()的起止参数包括开始索引，不包括结束索引。

如果不给slice()传递任何参数，它就会从头到尾截取所有元素。利用这一点，我们可以很容易地复制一个Array：

var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];

var aCopy = arr.slice();

aCopy; // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

aCopy === arr; // false

 

在只有一个参数时，返回从该参数指定位置开始到当前数组末尾的所有项，如果有两个参数，返回起始和结束位置之间的一项（但不包括结束位置的项）。 slice(****）方法不会影响原始数组

 var colors = ["red", "green", "blue", "yellow", "purple"];

 var colors2 = colors.slice(1);

 var colors3 = colors.slice(1,4);

 alert(colors2); //green,blue,yellow,purple

 alert(colors3); //green,blue,yellow

 

  • push和pop

push()向Array的末尾添加若干元素，pop()则把Array的最后一个元素删除掉：

var arr = [1, 2];

arr.push('A', 'B'); // 返回Array新的长度: 4

arr; // [1, 2, 'A', 'B']

arr.pop(); // pop()返回'B'

arr; // [1, 2, 'A']

arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次

arr; // []

arr.pop(); // 空数组继续pop不会报错，而是返回undefined

arr; // []

 

  • unshift和shift

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

var arr = [1, 2];

arr.unshift('A', 'B'); // 返回Array新的长度: 4

arr; // ['A', 'B', 1, 2]

arr.shift(); // 'A'

arr; // ['B', 1, 2]

arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次

arr; // []

arr.shift(); // 空数组继续shift不会报错，而是返回undefined

arr; // []

 

  • unshift和shift

如果要往Array的头部添加若干元素，使用unshift()方法，shift()方法则把Array的第一个元素删掉：

var arr = [1, 2];

arr.unshift('A', 'B'); // 返回Array新的长度: 4

arr; // ['A', 'B', 1, 2]

arr.shift(); // 'A'

arr; // ['B', 1, 2]

arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次

arr; // []

arr.shift(); // 空数组继续shift不会报错，而是返回undefined

arr; // []

 

  • sort

sort()可以对当前Array进行排序，它会直接修改当前Array的元素位置，直接调用时，按照默认顺序排序：

var arr = ['B', 'C', 'A'];

arr.sort();

arr; // ['A', 'B', 'C']

 

比较函数

 function compare(value1, value2) {

 if (value1 < value2) {

 return -1;

 } else if (value1 > value2) {

 return 1;

 } else {

 return 0;

 }

 }

 var values = [0, 1, 5, 10, 15];

 values.sort(compare);

 alert(values); //0,1,5,10,15

 

降序排序

 function compare(value1, value2) {

 if (value1 < value2) {

 return 1;

 } else if (value1 > value2) {

 return -1;

 } else {

 return 0;

 }

 }

 var values = [0, 1, 5, 10, 15];

 values.sort(compare);

 alert(values); //15,10,5,1,0

 

  • reverse

reverse()把整个Array的元素反转：

var arr = ['one', 'two', 'three'];

arr.reverse();

arr; // ['three', 'two', 'one']
  • splice

splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素： 1.删除：指定2个参数：要删除的第一项和要删除的项数。 2.插入：提供3个参数：起始位置、要删除的项数、要插入的项数。 3.替换：指定3个参数：起始位置、要删除的项数、要插入的任意数量的项。

 var colors = ["red", "green", "blue"];

 var removed = colors.splice(0,1); //删除第一项

 alert(colors);   //green,blue

 alert(removed); //red - 返回数组中只包含一项

 removed = colors.splice(1, 0, "yellow", "orange"); //从位置1开始插入两项

 alert(colors); //green,yellow,orange,blue

 alert(removed); //返回的是一个空数组

 removed = colors.splice(1, 1, "red", "purple"); //插入两项，删除一项

 alert(colors); //green,red,purple,orange,blue

 alert(removed); //yellow - 返回数组中只包含一项
  • concat

concat()方法把当前的Array和另一个Array连接起来，并返回一个新的Array：

var arr = ['A', 'B', 'C'];

var added = arr.concat([1, 2, 3]);

added; // ['A', 'B', 'C', 1, 2, 3]

arr; // ['A', 'B', 'C']

concat()****方法并没有修改当前****Array****，而是返回了一个新的****Array****。

实际上，concat()方法可以接收任意个元素和Array，并且自动把Array拆开，然后全部添加到新的Array里：

var arr = ['A', 'B', 'C'];

arr.concat(1, 2, [3, 4]); // ['A', 'B', 'C', 1, 2, 3, 4]
  • join

join()方法是一个非常实用的方法，它把当前Array的每个元素都用指定的字符串连接起来，然后返回连接后的字符串：

var arr = ['A', 'B', 'C', 1, 2, 3];

arr.join('-'); // 'A-B-C-1-2-3'

如果Array的元素不是字符串，将自动转换为字符串后再连接。

1.3.8 对象

属性是与对象相关的值。

方法是能够在对象上执行的动作。

（1）创建 javaScript对象

JavaScript 中的几乎所有事务都是对象：字符串、数字、数组、日期、函数，等等。

你也可以创建自己的对象。

person=new Object(); person.firstname="Bill"; person.lastname="Gates"; person.age=56; person.eyecolor="blue";

(2)访问对象的属性

objectNamepropertyName

var message="Hello World!"; var x=message.length;

(3)访问对象的方法

objectNamemethodNamevar message="Hello world!"; var x=message.toUpperCase();

Date对象：

创建方式：

 myDate = new Date();

日期起始值:1970年1月1日00:00:00

主要方法

getYear(): 返回年数 setYear(): 设置年数

getMonth(): 返回月数 setMonth():设置月数

getDate(): 返回日数 setDate():设置日数

getDay(): 返回星期几 setDay():设置星期数

getHours():返回小时数 setHours():设置小时数

getMinutes():返回分钟数 setMintes():设置分钟数

getSeconds():返回秒数 setSeconds():设置秒数

getTime() : 返回毫秒数 setTime() :设置毫秒数

1.3.9 异常

try 语句测试代码块的错误。 catch 语句处理错误。 throw 语句创建自定义错误。

（****1****）****JavaScript 测试和捕捉 try 语句允许我们定义在执行时进行错误测试的代码块。 catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。 JavaScript 语句 try 和 catch 是成对出现的。 （****2****）****Throw 语句 throw 语句允许我们创建自定义错误。 正确的技术术语是：创建或抛出异常（exception）。 如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>

1.3.10 函数

（1）函数语法

function functionname()

{

这里是要执行的代码

}

（2）带参数的函数

function myFunction(var1,var2)

{

这里是要执行的代码

}

（3）带有返回值的函数

function myFunction()

{

var x=5;

return x;

}

若仅仅希望退出函数时 ，也可使用 return 语句

function myFunction(a,b)

{

if (a>b)

{

return;

}

x=a+b

}

1.3.11 内置函数

  1. Date：日期函数

属性(1): constructor 所修立对象的函数参考 prototype能够为对象加进的属性和方法 办法(43): getDay() 返回一周中的第几天(0-6) getYear() 返回年份.2000年以前为2位,2000(包括)以后为4位 getFullYear()返回完全的4位年份数 getMonth()返回月份数(0-11) getDate() 返回日(1-31) getHours() 返回小时数(0-23) getMinutes() 返回分钟(0-59) getSeconds() 返回秒数(0-59) getMilliseconds() 返回毫秒(0-999) getUTCDay() 依据国际时间来得到如今是礼拜几(0-6) getUTCFullYear() 根据邦际时间来失掉完全的年份 getUTCMonth()依据国际时间来得到月份(0-11) getUTCDate() 依据国际时间来失掉日(1-31) getUTCHours() 依据国际时间来失掉小时(0-23) getUTCMinutes() 根据邦际光阴来往归分钟(0-59) getUTCSeconds() 依据国际时间来返回秒(0-59) getUTCMilliseconds()依据国际时间来返回毫秒(0-999) getTime() 前往自1970年1月1号0:0:0到如今一同花来的毫秒数 getTimezoneoffset()往归时区偏偏差值,便格林威乱均匀时光(GMT)取运转足原的盘算机所处时区设置之间相差的分钟数) parse(dateString) 返回正在Date字符串中自从1970年1月1日00:00:00以来的毫秒数 setYear(yearInt)设置年份.2位数或4位数 setFullYear(yearInt)设置年份.4位数 setMonth(monthInt)设放月份(0-11) setDate(dateInt) 设置日(1-31) setHours(hourInt) 设置小时数(0-23) setMinutes(minInt) 设置分钟数(0-59) setSeconds(secInt) 设放秒数(0-59) setMilliseconds(milliInt) 设放毫秒(0-999) setUTCFullYear(yearInt) 依据国际时间来设置年份 setUTCMonth(monthInt)依据国际时间来设置月(0-11) setUTCDate(dateInt) 依据国际时间来设置日(1-31) setUTCHours(hourInt) 依据国际时间来设置小时 setUTCMinutes(minInt)依据国际时间来设置分钟 setUTCSeconds(secInt)依据国际时间来设置秒 setUTCMilliseconds(milliInt)根据邦际时间来设置毫秒 setTime(timeInt)设置自1970年1月1日开端的时间.毫秒数 toGMTString()依据格林威乱时光将Date对于象的日期(一个数值)改变成一个GMT光阴字符串,如:Weds,15 June l997 14:02:02 GMT toUTCString() 依据通用时间将一个Date对象的日期转换为一个字符串 toLocaleString()把Date对象的日期(一个数值)改变成一个字符串,使用所在盘算机上配置使用的特定日期格局 toSource()显示对象的源代码 toString()将日期对象转换为字符串 UTC(yyyy, mm, dd, hh, mm, ss, msec)往归自格林威乱尺度光阴到指订时光的差距,双位为毫秒 valueOf()返回日期对象的本初值

2.Math：数学函数

constructor 所树立对象的函数参考 prototype可以为对于象参加的属性和方式 E欧推常质,天然对数的顶(约等于2.718) LN2 2的天然对数(约即是0.693) LN10 10的天然对数(约等于2.302) LOG2E 以2为顶的e的对数.(约等于1.442) LOG10E 以10为顶的e的对数(约等于0.434) PI ∏的值(约即是3.14159) SQRT1_2 1/2(0.5)的平方根(便l除以2的平方根,约即是o.707) SQRT2 2的平方根(约等于1.414) 方法: abs(x) 返回数字的相对值 acos(x)返回数字的反余弦值 asin(x)返回数字的反正弦值 atan(x)返回位于-PI/2 和 PI/2 的反正切值 atan2(y,x)前往（x,y）位于 -PI 到 PI 之间的角度 ceil(x)返回 x 四舍五入后的最大整数 cos(x)前往一个数字的余弦值 exp(x)返回 E^x 值 floor(x)返回 x 四舍五入后的最小整数 log(x)返回底数为E的自然对数 max(x,y)返回 x 和 y 之间较大的数 min(x,y)返回 x 和 y 之间较小的数 pow(x,y)返回 y^x 的值 random()返回位于 0 到 1 之间的随机函数 round(x)四舍五进后与整 sin(x)返回数字的正弦值 sqrt(x)返回数字的平方根 tan(x)返回一个角度的正切值 toSource()显示对象的流代码 valueOf()返回数教对象的本初值3.Number 属性: MAX_VALUE The largest possible value a number in JavaScript can have 1.7976931348623157E+308 MIN_VALUE The smallest possible value a number in JavaScript can have 5E-324 NaN Equal to a value that is not a number. NEGATIVE_INFINITY A value that is less than MIN_VALUE. POSOTIVE_INFINITY A value that is greater than MAX_VALUE. prototype A static property of the Number object 方法: toString Returns a string representing the specified object valueOf() 返回数教对象的本初值4.Boolean属性: constructor 所树立对象的函数参考 prototype可以为对象参加的属性和方式 法子: toSource() 显示对象的流代码 toString()将布我值转换为字符串,并且返回成果 valueOf()返回布我对象的原始值

  1. String ：字符函数

属性: constructor 所树立对象的函数参考 prototype可以为对于象参加的属性和方式 length返回字符串的字符长度 法子(20): anchor("name")用来把字符串转换为HTML锚面标志内(<A NAME=>) big() 把字符串中的文本变成大字体(<BIG>) blink() 把字符串中的文本变成闪耀字体(<BLINK>) bold() 把字符串中的文本变成乌字体(<B>) fixed() 把字符串中的文本变成流动间距字体,便电报情势(<TT>) fontcolor(color)设置字符串中文本的色彩(<FONT COLOR=>) Fontsize(size) 把字符串中的文本变成指定大小(<FONTSIZE=>) italics() 把字符串中的白原变成斜字体(<I>) Link(url)用来把字符串转换-HTML链交标志中(<A HREF=>) small() 把字符串中的文本变成小字体(<SMALL>) strike() 把字符串中的文本变成划掉字体(<STRIKE>) sub() 把字符串中的文本变成下标(subscript)字体((SUB>) sup() 把字符串中的文本变成上标(superscript)字体(<SUP>) charAt(index) 返回指定索引处的字符 charCodeAt(index)返回一个整数,该整数表现String对象中指定位置处的字符的Unicode编码 concat(string2)衔接两条或少条字符串 fromCharCode(num1, num2, …,BB霜, numN)获取指定的Unicode值并返回字符串 indexOf(searchString, startIndex)返回字符串中第一个呈现指定字符串的地位 lastlndexOf(searchString, startIndex)返回字符串中最后一个呈现指定字符串的地位 match(regex)在字符串中查觅指定值 replace(regex, newString)将字符串中的某些字符替代成其它字符 search(regex)针对某施行值对字符串入止查觅 slice(startIndex, endIndex)将部门字符抽出并在新的字符串中返回剩余局部 split(delimiter)将字符串分配为数组 substr(startIndex, length)从startIndex与,取length个字符 substring(startIndex, endIndex)从startIndex和endIndex之间的字符,没有包含endIndex toLowerCase() 把字符串中的文本变成小写 toUpperCase()把字符串中的白本变成大写 toSource()显示对象的源代码 valueOf()返回字符串对象的原始值

4.Array ：数组函数

属性: constructor 所修立对象的函数参考 prototype能够为对象加入的属性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length获取数组元素的个数,即最大下标加1办法(13):concat(array1,arrayn)将两个或两个以上的数组值衔接止来,合并后返回成果 join(string)将数组中元素合并为字符串,十月妈咪,string为分隔符.如省详参数则直交合并,不再分隔 pop()移除数组中的最后一个元素并返回当元素 push(value)在数组的终尾加上一个或多个元素,并且返回新的数组长度值 reverse()倒置数组中元素的次序,反背排列 shift()移除数组中的第一个元素并返回当元素 slice(start, deleteCount, [item1[, item2[,...[,itemN]]]])返从一个数组中移除一个或少个元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function)在已指定排序号的情形下,依照元素的字女次序排列,假如不是字符串类型则转换成字符串再排序,返回排序后的数组 splice()为数组删除并加加新的元素 toSource()显示对象的源代码 toString()将数组一切元素返回一个字符串,其间用逗号分隔 unshift(value)为数组的开端部门加上一个或者少个元荤,并且返回当数组的新长度 valueOf()返回数组对象的原始值

5.齐局

属性: Infinity 指定一个正负无限大的数值 NaN指定一个 “非数字” 值 undefined指订一个已被赋值的变质法子:decodeURI() 为加稀的URI入止解码 decodeURIComponent()为加稀的URI组件解码 encodeURI()将字符串加密为URI encodeURIComponent() 将字符串加稀为URI组件 escape(string)加密一个字符串 ()使用escape()对一个字符串入止解码 eval_r(string)断定一个字符串并将其以足本代码的情势施行 isFinite(number)检测一个值能否为一个有限数字,返回True或False isNaN(string) 检测一个值能否没有是一个有限数字 Number()将一个对象的值转换为一个数字 parseFloat(string)将一个字符串解析为一个浮面数字 parseInt(string)将一个字符串解析为一个整数,没有是四舍五进操做,而是切尾 String(object)将一个对象值转换为一个字符串 number(object)

6.事情

属性: a.窗心事件,只在body和frameset元素中才有效 onload页里或者图片加载完成时 onunload用户分开页里时 b.表双元素事情,正在表双元素中才有效 onchange框内容转变时 onsubmit点打降接按钮时 onreset沉新点击鼠标按键时 onselect白原被挑选时 onblur元素失来焦点时 onfocus该元素获与焦面时 c.键盘事情,base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆无效 onkeydown按下键盘按键时 onkeypress按下或按住键盘按键时 onkeyup搁启键盘按键时 d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元荤里皆无效 onclick鼠标点打一个对象时 ondblclick鼠标双打一个对象时 onmousedown鼠本被按下时 onmousemove鼠标被挪动时 onmouseout鼠本分开元荤时 onmouseover鼠标经由元素时 onmouseup开释鼠本按键时

1.4 JavaScript常用技巧函数：

1.4.1 HTML的标签（节点）操作

document.write(""); //输出的

document.getElementById("id名")； //获取html页面标签中，标签id属性等于此值的对象。

如：var id = document.getElementById("hid"); //获取id值为hid的标签对象

document.getElementsByTagName("标签名"); //获取当前文档执行的标签对象

1.4.2 HTML标签对象的操作：

标签对象.innerHTML="内容"；//在标签对象内放置指定内容

标签对象.style.css属性名="值" //改变标签对象的样式。

示例：id.style.color="red";

注意：属性名相当于变量名,所以css属性名中的减号要去掉，将后面的首字母大写。

如：font-size（css）---> fontSize(JS属性)

标签对象.value；

//获取标签对象的value值

标签对象.value=”值“；//设置标签对象的value值

1.4.3 输出内容（document.write）

document.write()直接在网页中输出内容。

第一种：输出内容用“”括起，直接输出“”号内的内容。

document.write("I love JavaScript!");

第二种：通过变量，输出内容

var mystr = "hello world";

document.write(mysrt);//直接写变量名，输出变量存储的内容

第三种：输出多项内容，内容之间用+号连接。

var mystr = "hello";

document.write(mystr + "I love Java Script");//多项内容之间用+号连接

第四种:输出HTML标签，并起作用，标签使用“”括起来。

var mystr="hello";

document.write(mystr+"<br>");//输出hello后，输出一个换行符

document.write("JavaScript");

1.4.4 警告（alert 消息对话框）

我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。

语法：alert(字符串或变量);

var mynum = 30;

alert("hello!");

alert(mynum);

结果：按顺序弹出消息框（alert弹出消息对话框包含一个确定按钮）

注意:

1. 在点击对话框"确定"按钮前，不能进行任何其它操作。

2. 消息对话框通常可以用于调试程序。

3. alert输出内容，可以是字符串或变量，与document.write 相似

1.4.5 确认选择（confirm 消息对话框）

除了向用户提供信息，我们还希望从用户那里获得信息。这里就用到了confirm 消息对话框。

confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。

语法：confirm(str);

参数说明：str:在消息对话框中要显示的文本 返回值：Boolean值

返回值：

当用户点击"确定"按钮时，返回true

当用户点击"取消"按钮时，返回false

注: 通过返回值可以判断用户点击了什么按钮

<script type="text/javascript">

 var mymessage=confirm("你喜欢JavaScript吗?");

 if(mymessage==true){

 document.write("很好,加油!");

 }else{

 document.write("JS功能强大，要学习噢!");

 }

</script>

1.4.6 提问（prompt 消息对话框）

有时候，不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。

prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。

语法：

prompt(str1,str2);

参数说明：

str1:要显示在消息对话框中的文本，不可修改

str2:文本框中的内容，可以修改

返回值：

1、点击确定按钮，文本框中的内容将作为函数返回值

2、点击取消按钮，将返回null

function rec(){

 var score; //score变量，用来存储用户输入的成绩值。

 score = prompt("请输入你的成绩","90");

 if(score>=90){

 document.write("你很棒!");

 }else if(score>=75){

 document.write("不错吆!");

 }else if(score>=60){

 document.write("要加油!");

 }else{

 document.write("要努力了!");

 };

} ;

<script>

 var myName = prompt("输入您的名字");

 if(myName != null && myName != ""){

 document.write("welcom to" + myName);

 }else{

 document.write("welcom to my friend");

 }

</script>

1.4.7 打开新窗口（window.open）

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。

窗口名称：可选参数，被打开窗口的名称。

1.该名称由字母、数字和下划线字符组成。

2.窗口名称：可选,该字符串是一个由逗号分隔的特征列表，声明了被打开窗口的名称。可以是"_top"、"_blank"、"_selft"、"_parent"等。

_blank 在新窗口显示目标网页

_selft 在当前窗口显示目标网页

_parent 框架网页中当前整个窗口位置显示目标网页

_top 框架网页中在上部窗口中显示目标网页

3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。

4.name 不能包含有空格。

参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表：

top　　　　Number　　窗口顶部离开屏幕顶部的像素数

left　　　　Number　　窗口左端离开屏幕左端的像素数

width　　　　Number　　窗口的宽度

height　　　　Number　　窗口的高度

menubar　　　　yes,no　　窗口有没有菜单

toolbar　　　　yes,no　　窗口有没有工具条

scrollbars　　　　yes,no　　 窗口有没有滚动条

status　　　　　　yes,no　　 窗口有没有状态栏

<script type="text/javascript">

 window.open('http://','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')

1.4.8 关闭窗口（window.close）

close()关闭窗口

用法：

 window.close();//关闭本窗口

 <窗口对象>.close();//关闭指定的窗口

例如:关闭新建的窗口。

 <script type="text/javascript">

 var mywin=window.open('//www.jb51.net'); //将新打的窗口对象，存储在变量mywin中

 mywin.close();

 </script>

1.4.9 innerHTML属性

innerHTML属性用于获取或替换HTML元素的内容。

语法：

Object.innerHTML

Object是获取的元素对象，如通过document.getElementById("ID")获取元素。

<h2 id="con">javascript</H2>

<script type="text/javascript">

　　var mychar=document.getElementById("con");

　　document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容

　　mychar.innerHTML="hello world"

　　document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容

</script>

1.4.10 改变HTML样式

语法：

Object.style.property=new style;

注意：Object是获取的元素对象，如通过document.getElementById("id")获取的元素

<h2 id="con">I love JavaScript</h2>

<script type="text/javascript">

 var mychar= document.getElementById("con");

 mychar.style.color="red";

 mychar.style.background="#ccc";

 mychar.style.width="300px";

</script>

1.4.11 显示和隐藏（display属性）

语法：

Object.style.display = value

value值：

none 此元素不会被显示（及隐藏）

block 此元素将显示为块级元素（即显示）

mychar.style.display = "block"

1.4.12 控制类名（className属性）

className属性设置或返回元素的class属性。

语法：

object.className = classname

作用：

1、获取元素的class属性

2、为网页内的某个元素指定一个css样式来更改该元素的外观

p2.className = "two";

以上这篇Javascript基础学习笔记(菜鸟必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

1.5 JavaScript 表单验证

JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证

被JavaScript 验证的这些典型的表单数据有：

· 用户是否已填写表单中的必填项目？

· 用户输入的邮件地址是否合法？

· 用户是否已输入合法的日期？

· 用户是否在数据域 (numeric field) 中输入了文本？

1.5.1 利用onsubmit表单认证

如下为一个javacript的一个重要功能应用，利用onsubmit表单认证

<html>

<head>

<script type="text/javascript">

fuvtion check(){

if(document.text.t.value==""){

alert("字符不能为空");

return false；

}

return true；

}

</script>

</head>

<body>

<from name="test" action="test.html" onsubmit ="return check()">

<input type="text" name="t">

<input type="submit" value="OK">

</body>

</html>

1.5.2 必填（或必选）项目

<html>

<head>

<script type="text/javascript">

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_required(email,"Email must be filled out!")==false)

{email.focus();return false}

}

}

</script>

</head>

<body>

<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

1.5.3 E-mail验证

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点

<html>

<head>

<script type="text/javascript">

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos<1||dotpos-apos<2)

{alert(alerttxt);return false}

else {return true}

}

}

function validate_form(thisform)

{

with (thisform)

{

if (validate_email(email,"Not a valid e-mail address!")==false)

{email.focus();return false}

}

}

</script>

</head>

<body>

<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

说明：

with(field){};设定作用域

focus() 方法用于给予该元素焦点。这样用户不必点击它，就能编辑显示的文本了。

1.6 JavaScript事件处理：

1.6.1 使用一个匿名或回调函数添加事件

有三种方法加事件

第一种：

格式：

<tag on事件="事件处理程序" />

*第二种：

<script>

对象.on事件=事件处理程序

</script>

第三种：(火狐不兼容)

<script for="事件源ID" event="on事件">事件处理程序</script>

1.6.2 事件对象：

属性：

1\. srcElement

2\. keyCode 键盘值

1.6.3 事件 event window.event

1\. srcElement 代表事件源对象

2\. keyCode 事件发生时的键盘码 keypress , keydown keyup

3\. clientX, clientY 坐标位置

4\. screenX, screenY

5\. returnValue

6\. cancelBubble;

//为页面添加鼠标右点击事件

window.document.oncontextmenu=function(ent){

//兼容IE和火狐浏览器兼容

var event=ent || window.event;

//获取事件坐标位置

var x=event.clientX;

var y=event.clientY;

...

}

/*********************对象添加事件*******************/

function addEvent(obj,type,fun){

obj=$(obj);

if(obj.addEventListener){

obj.addEventListener(type,fun); //FF

return true;

}else if(obj.attachEvent){

return obj.attachEvent("on"+type,fun); //IE

}else{

return false;

};

};

/*********************对象删除事件*******************/

function delEvent(obj,type,fun){

obj=$(obj);

if(obj.addEventListener){

obj.removeEventListener(type,fun);

return true;

}else if(obj.attachEvent){

obj.detachEvent("on"+type,fun);

return true;

}else{

return false;

};

};

document.getElementById("one").offsetHeight; //获取one对应对象的高度

obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；

1.7 BOM

1.7.1 window对象

<button onclick="window.location=''">跳转</button>

常用的属性：

*document ：对 Document 对象的只读引用

*history

：对 History 对象的只读引用。

*location：用于窗口或框架的 Location 对象

Navigator： 对 Navigator 对象的只读引用

*parent： 返回父窗口。

length: 设置或返回窗口中的框架数量。

Screen: 对 Screen 对象的只读引用

status: 设置窗口状态栏的文本。

top: 返回最顶层的先辈窗口。

常用方法：

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

prompt() 显示可提示用户输入的对话框。

close() 关闭浏览器窗口。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

scrollTo() 把内容滚动到指定的坐标。

setTimeout() 在指定的毫秒数后调用函数或计算表达式。

clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

clearInterval() 取消由 setInterval() 设置的 timeout。

1.7.2 Navigator 对象

Navigator 对象包含的属性描述了正在使用的浏览器。可以使用这些属性进行平台专用的配置。

常用属性：

with(document) {

write ("你的浏览器信息：<ul>");

write ("<li>代码："+navigator.appCodeName+"</li>");

write ("<li>名称："+navigator.appName+"</li>");

write ("<li>版本："+navigator.appVersion+"</li>");

write ("<li>语言："+navigator.language+"</li>");

write ("<li>编译平台："+navigator.platform+"</li>");

write ("<li>用户表头："+navigator.userAgent+"</li>");

write ("</ul>");

}

1.7.3 Screen 对象

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

常用属性：

document.write( "屏幕宽度："+screen.width+"px<br />" );

document.write( "屏幕高度："+screen.height+"px<br />" );

document.write( "屏幕可用宽度："+screen.availWidth+"px<br />" );

document.write( "屏幕可用高度："+screen.availHeight+"px" );

参考了解其他属性信息获取方式

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

1.7.4 History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

1.7.5 Location 对象

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

//获取页面中第二form表单中，一个username输入框的值（7种方式）

//alert(document.forms[1].username.value);

alert(document.myform.username.value);

//alert(document.forms.myform.username.value);

//alert(document.forms.item(1).username.value);

//alert(document.forms['myform'].username.value);

//alert(document['myform'].username.value);

//alert(document.forms.item('myform').username.value); //火狐不兼容

1.8 DOM

1.8.1 基本概念

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

HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。

DOM 被分为不同的部分：

1.Core DOM

定义了一套标准的针对任何结构化文档的对象

2.XML DOM

定义了一套标准的针对 XML 文档的对象

3.HTML DOM

定义了一套标准的针对 HTML 文档的对象。

节点：根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

整个文档是一个文档节点

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

包含在 HTML 元素中的文本是文本节点

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

注释属于注释节点

节点彼此间都存在关系。

除文档节点之外的每个节点都有父节点。

大部分元素节点都有子节点。

当节点分享同一个父节点时，它们就是同辈（同级节点）。

节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点

节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点

查找并访问节点

你可通过若干种方法来查找您希望操作的元素：

通过使用 getElementById() 和 getElementsByTagName() 方法

通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是：

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

nodeName 属性含有某个节点的名称。

元素节点的 nodeName 是标签名称

属性节点的 nodeName 是属性名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

1.8.2 HTML DOM 对象参考

Document: 代表整个 HTML 文档，可被用来访问页面中的所有元素

常用集合属性：forms

Anchor : 代表 <a> 元素

Area : 代表图像映射中的 <area> 元素

Base : 代表 <base> 元素

Body : 代表 <body> 元素

Button : 代表 <button> 元素

Event : 代表某个事件的状态

Form : 代表 <form> 元素

Frame : 代表 <frame> 元素

Frameset: 代表 <frameset> 元素

Iframe : 代表 <iframe> 元素

Image : 代表 <img> 元素

Input button : 代表 HTML 表单中的一个按钮

Input checkbox

: 代表 HTML 表单中的复选框

Input file : 代表 HTML 表单中的文件上传

Input hidden : 代表 HTML 表单中的隐藏域

Input password : 代表 HTML 表单中的密码域

Input radio : 代表 HTML 表单中的单选按钮

Input reset : 代表 HTML 表单中的重置按钮

Input submit : 代表 HTML 表单中的确认按钮

Input text : 代表 HTML 表单中的文本输入域（文本框）

Link : 代表 <link> 元素

Meta : 代表 <meta> 元素

Object : 代表 <Object> 元素

Option : 代表 <option> 元素

Select : 代表 HTML 表单中的选择列表

Style : 代表单独的样式声明

Table : 代表 <table> 元素

TableData : 代表 <td> 元素

TableRow : 代表 <tr> 元素

Textarea : 代表 <textarea> 元素

1.8.3 HTML的DOM

Object : 代表 <Object> 元素

Option : 代表 <option> 元素

Select : 代表 HTML 表单中的选择列表

Style : 代表单独的样式声明

Table : 代表 <table> 元素

TableData : 代表 <td> 元素

TableRow : 代表 <tr> 元素

Textarea : 代表 <textarea> 元素

1.9 XML的DOM

DOM （Document Object Model） 文档对象模型

1.9.1 document 文档 HTML XML 文件 （标记语言)

<body>

<div>

<!-- -->

<a href="#">wwww</a>

</div>

</body>

节点：

将文档想成一个倒树， 每一个部分（根、元素、文本（内容）， 属性， 注释）都是一节点。

根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：

1\. 整个文档是一个文档节点(根节点)

2\. 每个 HTML 标签是一个元素节点

3\. 包含在 HTML 元素中的文本是文本节点

4\. 每一个 HTML 属性是一个属性节点

5\. 注释属于注释节点

1.9.2 父、子和同级节点

节点树中的节点彼此之间都有等级关系。

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。

1\. 在节点树中，顶端的节点成为根节点

2\. 根节点之外的每个节点都有一个父节点

3\. 节点可以有任何数量的子节点

4\. 叶子是没有子节点的节点

5\. 同级节点是拥有相同父节点的节点

只要知道一个节点， 按关系找到其它节点

父节点： parentNode

子节点（第一个， 最后一个） childNodes firstChild lastChild

同胞（同辈）节点 （上一个， 下一个）nextSibling previousSibling

1.9.3 获取节点的方式：

array getElementsByTagName("节点名"); //获取所对应节点名（所有），返回的是数组

object getElementById("id名"); //获取id名的唯一节点对象

示例：(找节点)

document.getElementsByTagName("li"); //所有所有li节点

document.getElementById("lid"); //获取id值为lid的唯一节点

document.getElementById("uid").getElementsByTagName("li");

//获取id值为uid中所有li子节点

document.getElementsByTagName("ul")[0].getElementsByTagName("li");

//获取第一个ul节点中所有li子节点

获取到的标记名(多个)、 id（唯一）、 name（多个）

1.9.4 每个节点中的内容

节点类型nodeType、节点名nodeName，节点值nodeValue

节点名nodeName：

nodeName 是只读的

元素节点的 nodeName 与标签名相同

属性节点的 nodeName 是属性的名称

文本节点的 nodeName 永远是 #text

文档节点的 nodeName 永远是 #document

节点值nodeValue

元素节点的 nodeValue 是 undefined

文本节点的 nodeValue 是文本自身

属性节点的 nodeValue 是属性的值

nodeType（节点类型）

元素类型

节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

1.9.5 Object 对象 （HTML元素 转成的对象(js对象)）

注意： 如果使用js操作HTML文档， 就需要选将HTML文档结构转成Js对象

a. 操作属性:

nodeName（节点名称）

nodeValue（节点值）

nodeType（节点类型）

其他属性：（针对于节点）

childNodes 返回节点到子节点的节点列表。

firstChild 返回节点的首个子节点。

lastChild 返回节点的最后一个子节点。

nextSibling 返回节点之后紧跟的同级节点。

previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）

parentNode 返回节点的父节点。

textContent设置或返回节点及其后代的文本内容。

b. 操作内容

innerText(IE) textContent(FF) //获取的是显示的内容，不包含HTML标签

innerHTML //获取的是显示的内容，会包含HTML

outerText

outerHTML

表单

value

c. 操作样式

aobj.style.backgroundColor="red";

aobj.style.fontSize="3cm";

className

aobj.className="test";

aobj.className+=" demo";

aobj.className="";

e. 操作节点：

appendChild()

向节点的子节点列表的结尾添加新的子节点。

cloneNode()

复制节点。

removeChild()

删除（并返回）当前节点的指定子节点。

replaceChild()

用新节点替换一个子节点。

hasAttributes() 判断当前节点是否拥有属性。

hasChildNodes() 判断当前节点是否拥有子节点。

insertBefore() 在指定的子节点前插入新的子节点。

f. 创建节点：

* createElement() 创建元素节点

createAttribute() 来创建属性节点 可以：元素节点.属性名=值；

createTextNode() 来创建新的文本节点 可以：元素节点.innerHTML=文本内容；

有了以上三点的操作之前先转成对象

转成对象的两种形式：

1. 标记名(多个)、 id（唯一）、 name（多个）

document中的三个方法

var objs=document.getElementsByTagName("div"); //获取多个

var objs=document.getElementById("one");

//获取一个

var objs=document.getElementsByName("two");

1.10 Ajax

var xmlhttp;

1.10.1 创建请求对象

if(window.XMLHttpRequest){

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{

// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

1.10.2 设置回调函数（监听）

xmlhttp.onreadystatechange=函数名；

或

xmlhttp.onreadystatechange=function(){

函数体。。。

}

1.10.3 初始化：

xmlhttp.open("GET","gethint.php?q="+str,true); //异步以get方式发送到gethint.php

1.10.4 发送：

xmlhttp.send();

其中：xmlhttp请求对象：

**属性：

*readyState //请求状态：0,1,2,3,4

*responseText//响应内容

responseXML //xml响应对象

*status

//浏览器响应状态：200正常， 404 请求地址不存在 ,,

statusText //状态内容

*onreadystatechange //回调函数属性

方法：

abort() //取消当前响应，关闭连接并且结束任何未决的网络活动。

getAllResponseHeaders() //把 HTTP 响应头部作为未解析的字符串返回。

getResponseHeader() //返回指定的 HTTP 响应头部的值

*open()

//初始化 HTTP 请求参数

*send() //发送 HTTP 请求，使用传递给 open() 方法的参数

*setRequestHeader() //向一个打开但未发送的请求设置或添加一个 HTTP 请求。

模拟POST提交代码：

xmlhttp.open("POST","ajax_test.php",true);

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

xmlhttp.send("fname=Bill&lname=Gates");



posted @ 2019-12-16 17:32  林小冉  阅读(251)  评论(1)  编辑  收藏  举报