手机域名网站怎么做,网页制作工具按其制作方式可分为,什么是事件营销,企业网站建设资金预算表1.1 JavaScript基础概念#xff1a; JavaScript (ECMAScript) #xff1a;JavaScript 是脚本语言。JavaScript和ECMAScript通常被人用来表达相同的含义#xff0c;但是JavaScript并不是这么一点含义#xff0c;它是由ECMAScript 核心. DOM 文档对象模型. BOM 浏览器对象模型… 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 树: 通过可编程的对象模型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类型 只有一个特殊的值就是nullnull值表示一个空对象指针使用typeof操作符检测null值会返回“object”。 · boolean类型 布尔值和布尔代数的表示完全一致一个布尔值只有true、false两种值要么是true要么是false可以直接用true、false表示布尔值也可以通过布尔运算计算出来。boolean****类型的字面值****true****和****false****是区分大小写的。 · number类型 JavaScript不区分整数和浮点数统一用Number表示以下都是合法的Number类型 123; // 整数123070; //八进制的560xA; //十六进制的100.456; // 浮点数0.4561.2345e3; // 科学计数法表示1.2345x1000等同于1234.5-99; // 负数NaN; // NaN表示Not a Number当无法计算结果时用NaN表示Infinity; // Infinity表示无限大当数值超过了JavaScript的Number所能表示的最大值时就表示为Infinity· string类型 字符串是以单引号’或双引号”括起来的任意文本比如’abc’”xyz”等等。请注意”或”“本身只是一种表示方式不是字符串的一部分因此字符串’abc’只有abc这3个字符。 如果’本身也是一个字符那就可以用”“括起来比如”I’m OK”包含的字符是I’m空格OK这6个字符。 如果字符串内部既包含’又包含”怎么办可以用转义字符\来标识比如 I\m \OK\!; 表示的字符串内容是I’m “OK”! 转义字符\可以转义很多字符比如\n表示换行\t表示制表符字符\本身也要转义所以\表示的字符就是\。 · object类型 创建object类型的实例并为其添加属性和方法就可以创建自定义对象。 对象由花括号分隔。在括号内部对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔 对象属性有两种寻址方式 nameperson.lastname;nameperson[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 运算符 一元运算符delete用于删除对象中属性的 如delete o.name; //删除o对象中的name属性void void 运算符对任何值返回 undefined。没有返回值的函数真正返回的都是 undefined。 --一元加法和一元减法 位运算符位运算 NOT ~ 位运算 AND 位运算 OR | 位运算 XOR ^ (不同为1相同则为0) 左移运算 右移运算 逻辑运算符逻辑 NOT ! 运算符 非 逻辑 AND 运算符 与 逻辑 OR || 运算符 或 乘性运算符* 乘 /(除) %取模求余 加性运算符 - *其中号具有两重意思字串连接和数值求和。 就是加号”“两侧都是数值则求和否则做字串连接 关系运算符 等性运算符 ! ! 条件运算符 ? : (三元运算符) 赋值运算符 - * / % 10 逗号运算符 用逗号运算符可以在一条语句中执行多个运算。 var iNum11, iNum22, iNum33; 1.3.5 操作符 位操作符 32位二进制表示整数第32位为符号位 ~ 按位非(NOT) 按位与(AND)| 按位或(OR)^ 按位异或(XOR) 左移不影响符号位 有符号右移保留符号位不影响正负 无符号右移连着符号位一起右移 关系操作符 操作符与C语言的语法基本类似这里不详细说明了。 1.3.6 语句 for-in 精准的迭代语句可以用来枚举对象的属性 for(var propName in window){document.write(propName);}输出BOM中 window对象的所有属性 迭代前最好先检测对象是否为null或undefined。(ECMAScript5中不执行循环体,以前会报错) label语句给代码添加标签 break和continue语句(break跳出循环直接执行循环后的代码。continue跳出当前循环接着进入下一次循环) with语句(不建议使用可读性差) switch语句 var num 15;switch (true){ //输出 Between 10 and 20如果是false就输出 Less than 0case num0:alert(Less than 0);break;case num0num1:alert(Between 0 and 1);break;case num10num20: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; // 3arr.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大小的变化 var arr [1, 2, 3];arr[5] x;arr; // arr变为[1, 2, 3, undefined, undefined, x]大多数其他编程语言不允许直接改变数组的大小越界访问索引会报错。然而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,Gregalert(people.toString()); //Nicholas,Gregalert(people.toLocaleString()); //Nikolaos,GrigoriosindexOf 与String类似Array也可以通过indexOf()来搜索一个指定的元素的位置 var arr [10, 20, 30, xyz];arr.indexOf(10); // 元素10的索引为0arr.indexOf(20); // 元素20的索引为1arr.indexOf(30); // 元素30没有找到返回-1arr.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,purplealert(colors3); //green,blue,yellowpush和pop push()向Array的末尾添加若干元素pop()则把Array的最后一个元素删除掉 var arr [1, 2];arr.push(A, B); // 返回Array新的长度: 4arr; // [1, 2, A, B]arr.pop(); // pop()返回Barr; // [1, 2, A]arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次arr; // []arr.pop(); // 空数组继续pop不会报错而是返回undefinedarr; // []unshift和shift 如果要往Array的头部添加若干元素使用unshift()方法shift()方法则把Array的第一个元素删掉 var arr [1, 2];arr.unshift(A, B); // 返回Array新的长度: 4arr; // [A, B, 1, 2]arr.shift(); // Aarr; // [B, 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错而是返回undefinedarr; // []unshift和shift 如果要往Array的头部添加若干元素使用unshift()方法shift()方法则把Array的第一个元素删掉 var arr [1, 2];arr.unshift(A, B); // 返回Array新的长度: 4arr; // [A, B, 1, 2]arr.shift(); // Aarr; // [B, 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错而是返回undefinedarr; // []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,0reverse 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,bluealert(removed); //red - 返回数组中只包含一项removed colors.splice(1, 0, yellow, orange); //从位置1开始插入两项alert(colors); //green,yellow,orange,bluealert(removed); //返回的是一个空数组removed colors.splice(1, 1, red, purple); //插入两项删除一项alert(colors); //green,red,purple,orange,bluealert(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 中的几乎所有事务都是对象字符串、数字、数组、日期、函数等等。 你也可以创建自己的对象。 personnew Object(); person.firstnameBill; person.lastnameGates; person.age56; person.eyecolorblue;(2)访问对象的属性 objectNamepropertyNamevar messageHello World!; var xmessage.length;(3)访问对象的方法 objectNamemethodNamevar messageHello world!; var xmessage.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 xdocument.getElementById(demo).value;
if(x) throw empty;
if(isNaN(x)) throw not a number;
if(x10) throw too high;
if(x5) throw too low;
}
catch(err)
{
var ydocument.getElementById(mess);
y.innerHTMLError: err .;
}
}
/script1.3.10 函数 1函数语法 function functionname(){这里是要执行的代码}2带参数的函数 function myFunction(var1,var2){这里是要执行的代码}3带有返回值的函数 function myFunction(){var x5;return x;}若仅仅希望退出函数时 也可使用 return 语句 function myFunction(a,b){if (ab){return;}xab}1.3.11 内置函数 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.7976931348623157E308 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()返回布我对象的原始值 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.colorred;注意属性名相当于变量名,所以css属性名中的减号要去掉将后面的首字母大写。如font-sizecss--- 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 mystrhello;document.write(mystrbr);//输出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 typetext/javascriptvar mymessageconfirm(你喜欢JavaScript吗?);if(mymessagetrue){document.write(很好,加油!);}else{document.write(JS功能强大要学习噢!);}/script1.4.6 提问prompt 消息对话框 有时候不仅希望用户回答Yes/No。而是希望得到更特定的响应。这中情况我们可以利用prompt。 prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框包含一个确定按钮、取消按钮与一个文本输入框。 语法 prompt(str1,str2);参数说明 str1:要显示在消息对话框中的文本不可修改 str2:文本框中的内容可以修改 返回值 1、点击确定按钮文本框中的内容将作为函数返回值 2、点击取消按钮将返回null function rec(){var score; //score变量用来存储用户输入的成绩值。score prompt(请输入你的成绩,90);if(score90){document.write(你很棒!);}else if(score75){document.write(不错吆!);}else if(score60){document.write(要加油!);}else{document.write(要努力了!);};} ;scriptvar myName prompt(输入您的名字);if(myName ! null myName ! ){document.write(welcom to myName);}else{document.write(welcom to my friend);}/script1.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 typetext/javascriptwindow.open(http://,_blank,width300,height200,menubarno,toolbarno, statusno,scrollbarsyes)1.4.8 关闭窗口window.close close()关闭窗口 用法 window.close();//关闭本窗口窗口对象.close();//关闭指定的窗口//例如:关闭新建的窗口。script typetext/javascriptvar mywinwindow.open(//www.jb51.net); //将新打的窗口对象存储在变量mywin中mywin.close();/script1.4.9 innerHTML属性 innerHTML属性用于获取或替换HTML元素的内容。 语法 Object.innerHTMLObject是获取的元素对象如通过document.getElementById(ID)获取元素。 h2 idconjavascript/H2script typetext/javascriptvar mychardocument.getElementById(con);document.write(原标题:mychar.innerHTMLbr); //输出原h2标签内容mychar.innerHTMLhello worlddocument.write(修改后的标题:mychar.innerHTML); //输出修改后h2标签内容/script1.4.10 改变HTML样式 语法 Object.style.propertynew style;//注意Object是获取的元素对象如通过document.getElementById(id)获取的元素h2 idconI love JavaScript/h2script typetext/javascriptvar mychar document.getElementById(con);mychar.style.colorred;mychar.style.background#ccc;mychar.style.width300px;/script1.4.11 显示和隐藏display属性 语法 Object.style.display valuevalue值 none 此元素不会被显示及隐藏block 此元素将显示为块级元素即显示mychar.style.display block1.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表单认证 htmlheadscript typetext/javascriptfuvtion check(){if(document.text.t.value){alert(字符不能为空);return false}return true}/script/headbodyfrom nametest actiontest.html onsubmit return check()input typetext nametinput typesubmit valueOK/body/html1.5.2 必填或必选项目 htmlheadscript typetext/javascriptfunction validate_required(field,alerttxt){with (field){if (valuenull||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/headbodyform actionsubmitpage.htm οnsubmitreturn validate_form(this) methodpostEmail: input typetext nameemail size30input typesubmit valueSubmit/form/body/html1.5.3 E-mail验证 意思就是说输入的数据必须包含 符号和点号(.)。同时 不可以是邮件地址的首字符并且 之后需有至少一个点 htmlheadscript typetext/javascriptfunction validate_email(field,alerttxt){with (field){aposvalue.indexOf()dotposvalue.lastIndexOf(.)if (apos1||dotpos-apos2){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/headbodyform actionsubmitpage.htmοnsubmitreturn validate_form(this); methodpostEmail: input typetext nameemail size30input typesubmit valueSubmit/form/body/html说明 with(field){};设定作用域 focus() 方法用于给予该元素焦点。这样用户不必点击它就能编辑显示的文本了。 1.6 JavaScript事件处理 1.6.1 使用一个匿名或回调函数添加事件 有三种方法加事件 第一种 格式 tag on事件事件处理程序 /*第二种 script对象.on事件事件处理程序/script 第三种(火狐不兼容) script for事件源ID eventon事件事件处理程序/script1.6.2 事件对象 属性 1\. srcElement2\. keyCode 键盘值1.6.3 事件 event window.event 1\. srcElement 代表事件源对象2\. keyCode 事件发生时的键盘码 keypress , keydown keyup3\. clientX, clientY 坐标位置4\. screenX, screenY5\. returnValue6\. cancelBubble;//为页面添加鼠标右点击事件window.document.οncοntextmenufunction(ent){//兼容IE和火狐浏览器兼容var eventent || window.event;//获取事件坐标位置var xevent.clientX;var yevent.clientY;...}/*********************对象添加事件*******************/function addEvent(obj,type,fun){obj$(obj);if(obj.addEventListener){obj.addEventListener(type,fun); //FFreturn true;}else if(obj.attachEvent){return obj.attachEvent(ontype,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(ontype,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而其他浏览器下的值为01.7 BOM 1.7.1 window对象 button οnclickwindow.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.widthpxbr / );document.write( 屏幕高度screen.heightpxbr / );document.write( 屏幕可用宽度screen.availWidthpxbr / );document.write( 屏幕可用高度screen.availHeightpx );参考了解其他属性信息获取方式 网页可见区域宽 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.availWidth1.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 文档的对象。 节点根据 DOMHTML 文档中的每个成分都是一个节点。 DOM 是这样规定的 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。 大部分元素节点都有子节点。 当节点分享同一个父节点时它们就是同辈同级节点。 节点也可以拥有后代后代指某个节点的所有子节点或者这些子节点的子节点 节点也可以拥有先辈。先辈是某个节点的父节点或者父节点的父节点 查找并访问节点 你可通过若干种方法来查找您希望操作的元素 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素节点的 parentNode、firstChild 以及 lastChild childNodes属性 节点信息 每个节点都拥有包含着关于节点某些信息的属性。这些属性是 nodeName节点名称nodeValue节点值nodeType节点类型nodeName 属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document1.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 文件 标记语言) bodydiv!-- --a href#wwww/a/div/body节点 将文档想成一个倒树 每一个部分根、元素、文本内容 属性 注释都是一节点。 根据 DOMHTML 文档中的每个成分都是一个节点。 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节点名nodeNamenodeName 是只读的元素节点的 nodeName 与标签名相同属性节点的 nodeName 是属性的名称文本节点的 nodeName 永远是 #text文档节点的 nodeName 永远是 #document节点值nodeValue元素节点的 nodeValue 是 undefined文本节点的 nodeValue 是文本自身属性节点的 nodeValue 是属性的值nodeType节点类型元素类型节点类型元素 1属性 2文本 3注释 8文档 91.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 //获取的是显示的内容会包含HTMLouterTextouterHTML表单valuec. 操作样式 aobj.style.backgroundColorred;aobj.style.fontSize3cm;classNameaobj.classNametest;aobj.className demo;aobj.className;e. 操作节点 appendChild()向节点的子节点列表的结尾添加新的子节点。cloneNode()复制节点。removeChild()删除并返回当前节点的指定子节点。replaceChild()用新节点替换一个子节点。hasAttributes() 判断当前节点是否拥有属性。hasChildNodes() 判断当前节点是否拥有子节点。insertBefore() 在指定的子节点前插入新的子节点。f. 创建节点 * createElement() 创建元素节点createAttribute() 来创建属性节点 可以元素节点.属性名值createTextNode() 来创建新的文本节点 可以元素节点.innerHTML文本内容有了以上三点的操作之前先转成对象 转成对象的两种形式 1. 标记名(多个)、 id唯一、 name多个 document中的三个方法 var objsdocument.getElementsByTagName(div); //获取多个var objsdocument.getElementById(one);//获取一个var objsdocument.getElementsByName(two);1.10 Ajax var xmlhttp; 1.10.1 创建请求对象 if(window.XMLHttpRequest){// code for IE7, Firefox, Chrome, Opera, Safarixmlhttpnew XMLHttpRequest();}else{// code for IE6, IE5xmlhttpnew ActiveXObject(Microsoft.XMLHTTP);}1.10.2 设置回调函数监听 xmlhttp.onreadystatechange函数名或xmlhttp.onreadystatechangefunction(){函数体。。。}1.10.3 初始化 xmlhttp.open(GET,gethint.php?qstr,true); //异步以get方式发送到gethint.php1.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(fnameBilllnameGates);转载于:https://www.cnblogs.com/WinkJie/p/11286346.html
