JavaScript基础内容

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类型 只有一个特殊的值就是null,null值表示一个空对象指针,使用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’只有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中不执行循环体,以前会报错)

  2. label语句,给代码添加标签

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

  4. with语句(不建议使用,可读性差)

  5. switch语句

    var num = 15;switch (true){ //输出 Between 10 and 20,如果是false就输出 Less than 0case 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; // 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的大小,访问索引时要确保索引不会越界。

  6. 转换方法 所有对象都具有toLocaleString(),toString(),valueOf()方法。
  7. · 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,Grigorios
    

      

  8. indexOf
  9. 与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’****是不同的元素。

  10. slice
  11. 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,yellow
    

      

  12. push和pop
  13. push()向Array的末尾添加若干元素,pop()则把Array的最后一个元素删除掉:

    var arr = [1, 2];arr.push('A', 'B'); // 返回Array新的长度: 4arr; // [1, 2, 'A', 'B']arr.pop(); // pop()返回'B'arr; // [1, 2, 'A']arr.pop(); arr.pop(); arr.pop(); // 连续pop 3次arr; // []arr.pop(); // 空数组继续pop不会报错,而是返回undefinedarr; // []
    

      

  14. unshift和shift
  15. 如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

    var arr = [1, 2];arr.unshift('A', 'B'); // 返回Array新的长度: 4arr; // ['A', 'B', 1, 2]arr.shift(); // 'A'arr; // ['B', 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错,而是返回undefinedarr; // []
    

      

  16. unshift和shift
  17. 如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉:

    var arr = [1, 2];arr.unshift('A', 'B'); // 返回Array新的长度: 4arr; // ['A', 'B', 1, 2]arr.shift(); // 'A'arr; // ['B', 1, 2]arr.shift(); arr.shift(); arr.shift(); // 连续shift 3次arr; // []arr.shift(); // 空数组继续shift不会报错,而是返回undefinedarr; // []
    

      

  18. sort
  19. 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
    

      

  20. reverse
  21. reverse()把整个Array的元素反转:

    var arr = ['one', 'two', 'three'];arr.reverse();arr; // ['three', 'two', 'one']
    

      

  22. splice
  23. 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 - 返回数组中只包含一项
    

      

  24. concat
  25. 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]

     

  26. join
  27. 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)访问对象的属性

    objectNamepropertyNamevar 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 内置函数

  28. Date:日期函数
  29. 属性(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()返回布我对象的原始值

  30. String :字符函数
  31. 属性: 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" οnsubmit="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"οnsubmit="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\. 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οntextmenu=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); //FFreturn 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 οnclick="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 //获取的是显示的内容,会包含HTMLouterTextouterHTML表单value
    

      

    c. 操作样式

    aobj.style.backgroundColor="red";aobj.style.fontSize="3cm";classNameaobj.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, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=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");
    

      

     

转载于:https://www.cnblogs.com/WinkJie/p/11286346.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/569037.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何利用navicat可视化软件添加与新建mysql数据库

新建 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 打开navicat,如下图&#xff1a; 点击连接 名称可以…

mysql -- 死锁

死锁&#xff08;Deadlock&#xff09; 什么是死锁 所谓死锁&#xff1a;是指两个或两个以上的进程在执行过程中&#xff0c;因争夺资源而造成的一种互相等待的现象&#xff0c;若无外力作用&#xff0c;它们都将无法推进下去。此时称系统处于死锁状态或系统产生了死锁&#xf…

在windows下的cmd中如何进入与退出mysql

在windows下的cmd中如何进入与退出mysql https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 进入&#xff1a;…

在shell中全局变量与局部变量的区别及其举例

主要区别&#xff1a; 1.作用域不同&#xff1a;全局变量的作用域为整个程序&#xff0c;它的声明在后面的各个部分都可以发生作用&#xff0c;而局部变量仅仅为定义的某个函数。且局部变量只能在局部进行使用。 2.优先级不同&#xff1a;局部变量优先于全局变量。 3.生命周期…

黑盒测试概念简述,黑盒测试优缺点、黑盒用例设计方法简单介绍及黑盒测试方法使用总结

黑色测试黑盒测试概念&#xff1a;黑盒的优缺点介绍&#xff1a;黑盒测试用例设计方法简单介绍&#xff1a;黑盒测试方法使用总结&#xff1a;黑盒测试概念&#xff1a; 又称功能测试或数据驱动测试&#xff0c;是用来检测每个功能是否正常使用。黑盒测试主要意味着测试要在软…

超文本css样式换行

之前有关于LODOP中纯文本换行的相关博文&#xff1a;Lodop纯文本英文-等符号自动换行问题纯文本的遇到不拆分的单词的时候&#xff0c;可以通过LODOP 语句设置允许标点溢出&#xff0c;且英文单词拆开。超文本需要通过css样式控制&#xff0c;相关博文&#xff1a;Lodop打印控件…

详述白盒测试逻辑覆盖法的语句覆盖及其缺点

语句覆盖的定义&#xff1a; 语句覆盖就是设计若干个测试用例&#xff0c;使被测试程序中的每条可执行语句至少执行一次。比如说我们测试用例里面有10个语句&#xff0c;那么这10个语句都要被测试到。 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01;…

HDU - 6183 Color it 2017广西邀请赛(线段树)

题目链接 题意&#xff1a; 有四种操作 0操作 清空所有点 1操作 在&#xff08;x,y&#xff09;处插入一个带颜色的点 2 操作统计(1~x)(y1~y2&#xff09;这个范围的不同的颜色数 3 结束 思路&#xff1a; 颜色数只有51个 我们可以建51颗线段树 因为每次查询都是1~x范围的 所以…

详述白盒测试的逻辑覆盖法的判定覆盖及其优缺点

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 详述白盒测试的逻辑覆盖法的判定覆盖及其优缺点&#xff1…

详述白盒测试的逻辑覆盖的条件覆盖及其优缺点

条件覆盖详述白盒测试的逻辑覆盖的条件覆盖及其优缺点&#xff1a;条件覆盖的定义&#xff1a;与判定覆盖的区别&#xff1a;条件覆盖率&#xff1a;测试实例&#xff1a;代码&#xff1a;优缺点&#xff1a;详述白盒测试的逻辑覆盖的条件覆盖及其优缺点&#xff1a; https://b…

详述白盒测试的逻辑覆盖法的条件判定覆盖及其优缺点

条件判定覆盖的定义&#xff1a; 设计足够多的测试用例&#xff0c;使被测程序中每个判定的每个条件的所有可能取值&#xff08;真假&#xff09;至少执行一次&#xff0c;并且每个判定的所有可能&#xff08;真假&#xff09;分支也至少执行一次 。通俗来讲&#xff0c;就是条…

利用可视化软件navicat对mysql进行语句查询的使用(增删改查)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 增&#xff1a;insert 语法&#xff1a;INSERT [INTO] 表…

C# 3.0入门系列(三)

从本节开始&#xff0c;笔者将会和大家一起开始体验dlinq了。前面我们准备了数据库&#xff0c;也对数据库之间的关系做了初步的了解。有了数据库之后&#xff0c;数据和对象是一个什么样的关系呢&#xff1f;从dlinq的设计来看&#xff0c;它主要是为了解决data!objects 的问题…

(Navicat for MySQL)利用可视化软件navicat操作mysql,创建一个表举例(基础)

https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&#xff08;如不注明&#xff0c;盗者必究&#xff09; 步骤&#xff1a; 首先我们打开navicat:先点击下图中的表…

eclipse中egit插件使用

这篇文章当时制作有点粗糙&#xff0c;建议阅读升级版&#xff1a;eclipse中egit插件使用--升级版 使用git作为项目的代码管理工具现在是越来越火&#xff0c;网上有各种各样的文章、博客、讨论&#xff0c;其中以命令行居多。使用eclipse作为开发工具的人也是很多&#xff0c;…

以VMware workstation15.5.2pro为例如何新建虚拟机,安装镜像文件(最新)

需要用到VMware软件与镜像文件:链接:https://blog.csdn.net/hanhanwanghaha/article/details/105674470 第一步:打开VMware,点击创建新的虚拟机 第二步:选择典型,点击下一步 第三步:选择安装程序光盘镜像文件,并且下面提示已经检测到,再点击下一步

续--Flask, Django - 区别

1. 目录结构 参考&#xff1a;https://blog.csdn.net/yang9520/article/details/79740374 中文文档&#xff08;http://docs.jinkan.org/docs/flask/&#xff09;一般情况下&#xff0c;Django很系统、统一。Flask项目目录风格不同一&#xff0c;即使用上了蓝图。 2…

VMware workstation 15.5.2及镜像文件下载

链接: https://pan.baidu.com/s/175imV_FeTFcitFHay07vHQ 提取码: ayh3 希望对大家有用&#xff01; https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出…

无法连接虚拟设备 floppy0,因为主机上没有相应的设备。 您要在每次开启此虚拟机时都尝试连接此虚拟设备吗?

如果出现以上情况&#xff0c;应该是没有连接镜像文件&#xff0c;在添加镜像文件的地方添加镜像文件就可以了 https://blog.csdn.net/hanhanwanghaha宝藏女孩 欢迎您的关注&#xff01; 欢迎关注微信公众号&#xff1a;宝藏女孩的成长日记 如有转载&#xff0c;请注明出处&…

CentOS 6.5 下安装 Kibana5

1. 导入Elastic PGP Key 执行命令 rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch 2. 安装Kibana的rpm库使用 ll /etc/yum.repos.d/ 查看当前机器上已经安装的rpm库&#xff0c;如果没有Kibana的话需要创建。用vim创建新的repo文件&#xff0c;vim /etc/yu…