JavaScript

最新推荐文章于 2019-08-13 10:19:42 发布

X-Dragon烟雨任平生

最新推荐文章于 2019-08-13 10:19:42 发布

阅读量9k

点赞数 31

分类专栏：前端语言文章标签： JavaScript

本文链接：https://blog.csdn.net/xielong0509/article/details/80878831

版权

前端语言专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript和EXT

标签（空格分隔）：前端技术

整理知识，学习笔记

JavaScript

1.定义、特点、错误

1.1、JS定义

JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为。
JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

1.2、JavaScript 的特点

可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
解释执行：事先不编译，逐行执行
基于对象：内置大量现成对象 
适宜： 
客户端数据计算 
客户端表单合法性验证 
浏览器事件的触发 
网页特殊显示效果制作

1.png-48.9kB

1.3、定义JS程序三种方式

A: 定义在html元素中

<html>
    <head></head>
    <body>
        <form>
    <input type= “button”  value=“第一个按钮"  onclick=“alert(‘hello,world.');">
 //加分号方便写多个方法
        </form>
    </body>
</html>

B:定义在

   <script type="text/javascript">    
        alert("我刷新页面就第一个出现");    
        function hello(){
            window.alert("HelloWorld!:)");   window可以省略 
        }
   </script>
    在HTML body代码中如下：
    <input type="button" value="来，继续点我" onclick="hello();">

C: 引用外部js文件

代码位于单独的 .js 文件 
html 页面引用 js 文件 

将 JavaScript  代码写入一个单独的文件，并保存为  .js 后缀
外部文件不能包含 <script> 标签

function firstFunc()
{
alert("hello word!"); 
}

html 页面的 <head> 中引用外部的  .js 文件 
在 <head> 中添加 <script> 标签 
并设置 <script> 标签的 “src” 属性，以指定 js 文件的 url

<html>
    <head>
        <script language="JavaScript"  type="text/javascript“    src="myJs.js"> 
        </script> 
    </head>
    <body>
    </body>
</html>

1.4、JavaScript 的代码错误

解释性代码，代码错误，则无效果 
Chrome浏览器、Firefox 浏览器等都提供了控制台，可以查看javascript错误信息。

2、JavaScript 语法

2.1代码及注释

注释：// 单行     /*  多行*/
语句：
表达式、关键字、运算符组成
大小写敏感
使用分号

2.2常量、标识符与关键字

2.2.1常量

直接在程序中出现的数据值

2.2.2标识符

由不以数字开头的字母、数字、下划线(_)、美元符号('\$')组成
常用于表示函数、变量等的名称
例如： _abc , $abc , abc , abc123 是标识符，而 1abc 不是
保留关键字，如 break、if 等

2.2.3变量声明

使用关键字 var 声明变量，如 var x,y;

2.2.4变量初始化

使用 ＝ 赋值 
没有初始化的变量则自动取值为undefined
如： var count = 0;
变量命名同标识符的规则，大小写敏感

2.3数据类型

JS数据类型.jpg-104.5kB

String数据类型
首尾由单引号或双引号括起
特殊字符需要转义符
转义符\，如：\n，\\ ，\’，\’’
var aa="欢迎来到\"JavaScript世界 ";
alert(aa); 

number 数据类型
不区分整型数值和浮点型数值
所有数字都采用 64 位浮点格式存储，类似于double 格式 
整数
10进制的整数由数字的序列组成 
16进制数据前面加上0x，八进制前面加0
浮点数
使用小数点记录数据，如 3.4，5.6
使用指数记录数据，如 4.3e23 = 4.3 x 1023 

boolean 数据类型
仅有两个值：true和false 
也代表1和0 
实际运算中true=1,false=0 
多用于结构控制语句

2.4数据类型转换

2.4.1隐式转换

JavaScript 属于松散类型的程序语言
变量在声明时不需要指定数据类型
变量由赋值操作确定数据类型

不同类型数据在计算过程中会自动进行转换 
数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false 
布尔值 + 布尔值：布尔值转换为数值1或0

2.4.2数据类型转换函数

参考链接

toString ：转换成字符串 
所有数据类型均可转换为 string 类型 
例如    数值.toString();

parseInt ：强制转换成整数 

parseInt(string, radix)
参数  描述
string  必需。要被解析的字符串。也可以是非String num类型
radix   可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。

如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。

如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。
如果不能转换，则返回 NaN 
例如  parseInt("6.32")=6  parseInt(6.32)=6  alert(parseInt(0X011))=(16*1+1) = 17;

数据类型转换函数

parseFloat ：强制转换成浮点数
如果不能转换，则返回 NaN
例如 parseFloat(“6.32”)=6.32
typeof
查询数值当前类型，返回 string / number / boolean / object
例如 typeof(“test”+3)==”string”

null 与 undefined
null
null 在程序中代表“无值”或者“无对象”
可以通过给一个变量赋值 null 来清除变量的内容
undefined
声明了变量但从未赋值或者对象属性不存在

2.5运算

2.5.1算术运算

加(＋)、减(－)、乘(*) 、除(/) 、余数(% )
－可以表示减号，也可以表示负号，如：x=-y
+ 可以表示加法，也可以用于字符串的连接
递增(＋＋) 、递减(－－) i++ 相当于 i=i+1，i– 相当于 i=i-1

2.5.2关系运算及严格相等

关系运算用于判断数据之间的大小关系
“>”（大于）,“<”（小于）,“>=”（大于等于）,“<=”（小于等于）,“==”（等于）,“!=”（不等于）
关系表达式的值为boolean类型（“true”或“false”）

严格相等：= = =
类型相同
数值相同
非严格相等：! = =

var a = "10";
var b = 10;
if (a == b) //true
    alert("equal");
if (a === b) //false
alert("same");

2.5.3逻辑运算

1.png-46.6kB

2.5.4条件运算符

条件运算符又称“三目”/“三元”运算符，其结构为：
boolean表达式 ? 表达式1：表达式2
先计算 boolean 表达式的值，如果为true，则整个表达式的值为表达式1的值
如果为false，则整个表达式的值为表达式2的值

2.6控制语句

任何复杂的程序逻辑都可以通过“顺序”，“分支”，“循环”三种基本的程序结构实现
语句为顺序执行
可以使用控制语句改变程序的执行顺序

2.6.1 if语句

关系表达式：TRUE: 1，-1, 0.1, FALSE: 0，null,undefined
ifelse.png-82.2kB

2.6.2 switch-case语句

1.png-82kB

2.6.3 for语句

for.png-74.2kB

2.6.4 while语句

while.png-54kB

3、JavaScript对象Object简介

3.1 定义：

JavaScript是一种基于对象的语言，对象是 JavaScript 中最重要的元素

3.2 对象分类:

JavaScript中对象非常多，主要有以下类型
A、内置对象：
HTML DOM对象、HTML 元素对象、浏览器对象、自定义对象
B、常用内置对象：
简单数据对象
String、Number、Boolean
组合对象
Array、Math、Date
高级对象
Function、RegExp、Global
String对象实例

3.3.1大小写转换

image.png-78.9kB

3.3.2获取指定字符串

image.png-124.9kB

3.3.3查询指定字符串

image.png-142.3kB

3.3.4获取子字符串

image.png-75.4kB

3.3.5拆分子字符串

image.png-82.3kB

3.4 Aaary对象动态扩展

3.4.1一维数组定义

    未赋值的数组 arr[下标越界] 元素为undefined（），长度（.length）为0。
    数组var test = new Array(100,"a",true); test[3]= ; test[4]= ;//JS数组支持动态扩展 可以直接赋值）
    var arr =  [1,2,3,4,5];

3.4.2二维数组定义

image.png-143.2kB

3.4.3数组转换为字符串

方法：
x.join(bystr)
x.toString()
使用注解：
返回连接后的字符串 
bystr：作为连接数组中元素的字符串
x.toString()：由逗号(,)连接
代码：
var arr1=[1, 2, 3, 4];
alert(arr1.join("-")); //1-2-3-4 
alert(arr1.toString());//1,2,3,4

3.4.4连接数组

方法：arr.concat(value,...)
使用注解：
value 作为数组元素连接到数组的末尾
返回连接后的数组
concat 方法并不改变x自身的值 
代码：
var a = [1,2,3];
var b=a.concat(4, 5) ; 
alert(a.toString());//1,2,3 
alert(b.toString());//1,2,3,4,5

3.4.5获取子数组

方法：x.slice(start, end)
使用注解：
start：开始位置索引
end：结束位置加1，省略则相当于从start位置截取以后所有数组元素 
代码：
var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
alert(arr2.toString());//c,d 
var arr3=arr1.slice(4);
alert(arr3.toString());//e,f,g,h

3.4.6数组反转

方法：x.reverse()
使用注解：
反向数组 
改变数组 x 中数值的顺序 
代码：
var arr1=[32, 12, 111, 444];
arr1.reverse(); 
alert(arr1.toString());//444,111,12,32

3.4.7数组排序函数

使用注解：
x.sort(sortfunc)：数组排序 （JS默认用快速排序）
sortFunction：可选项，用来确定元素顺序的函数的名称

代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test.html</title>
    <script type="text/javascript">
    function test1(){
        //方法一
        var arr = [10,19,6,66,23];
        var arr1 = arr.sort(function(a,b){
            return a-b;//升序
        });
        alert(arr1.toString());
    }
    function test2(){ //方法2
        //定义数组
        var arr = [10,19,6,66,23];
        var arr1 = arr.sort(funSort); 
        alert(arr1.toString());
    }
    //定义排序规则 
    function funSort(a,b){
        return a-b; //升序
    }
    </script>
</head>
<body>
    <input type="button" value="数组排序1" onclick="test1();">
    <input type="button" value="数组排序2" onclick="test2();">
</body>
</html>

3.5 Math对象

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

没有构造函数 Math()
无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法 
如：Math.PI、Math.round(3.56)
          ceil(3.5)   //4
          floor(3.5)  //3

3.5.2 Math 对象的常用方法

三角函数 
Math.sin(x) 、 Math.cos(x)、 Math.tan(x) 等 
反三角函数 
Math.asin(x) 、 Math.acos(x) 等
计算函数 
Math. sqrt(x) 、 Math.log(x) 、 Math.exp(x)等
数值比较函数 
Math.abs(x)、 Math.max(x,y,...)、Math.random( )、 Math.round(x)等

3.6 Number对象

3.6.1 定义

Number 对象是原始数值的包装对象 
创建 Number 对象 : var myNum=new Number(value); 或者  var myNum=Number(value);

3.6.2 Number 对象的常用方法

toString：数值转换为字符串 
toFixed：数值转换为字符串，并保留小数点后一定位数 
如果必要，该数字会被舍入，也可以用 0 补足
var data = 23.56789;
alert(data.toFixed(2));//23.57
data = 23.5;
alert(data.toFixed(2));//23.50

3.7 RegExp 对象

3.7.1 概述

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具
创建正则表达式对象

var rgExp=/pattern/g;
var rgExp=new RegExp("pattern"); 
var reg1 = /^\d{3,6}$/g; 
var reg2 = new RegExp(“^\\d{3,6}$");

3.7.2常用方法

RegExp.test(string)

如果字符串 string 中含有与 RegExp 匹配的文本，则返回 true，否则返回 false 
var name = “aaaa”;
var reg = new RegExp("^[a-zA-Z0-9]{3,6}$");
var rght = reg.test(name);
if (!right)
alert("录入错误！");

3.8 Date 对象

3.8.1定义

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

创建 Date 对象 
var now = new Date();
var nowd2=new Date("2013/3/20 11:12");

3.8.2 Date 对象的常用方法

读取日期的相关信息

getYear()、getMonth()、getDate()、getHours()、getMinutes()、getSeconds()、getDay()、getFullYear()等

修改日期

setDate()、setMonth()、setHours()等

转换为字符串

toString 
toLocaleTimeString()
toLocaleDateString()

3.9 函数与Function 对象

函数（方法）是一组语句
Function 对象可以表示开发者定义的任何函数
函数实际上是功能完整的对象
函数可以没有返回值:若没有return，默认返回undefined。

3.9.1 函数的定义

函数的定义
由关键字function定义
函数名的定义规则与标识符一致，大小写敏感
可以使用变量、常量或表达式作为函数调用的参数
返回值必须使用return

function 函数名 (参数) {
    函数体;
    return 返回值;
}

3.9.2 函数的调用

函数可以通过其名字加上括号中的参数进行调用
如果有多个参数，则参数之间用逗号隔开
如果函数有返回值，则可以声明变量等于函数的结果结果即可

function sum(iNum1, iNum2){ 
    return iNum1 + iNum2; 
} 
var iResult = sum(1,1); 
alert(iResult); //输出 "2"

3.10 arguments 参数对象

arguments 是一种特殊对象，在函数代码中，表示函数的参数数组 
在函数代码中，可以使用 arguments 访问所有参数 
arguments.length：函数的参数个数 
arguments[i]：第 i 个参数

3.10.1 使用 Function 对象创建函数

可以使用 Function 对象直接创建函数

代码格式:
    var functionName = new Function( arg1, ... argN, functionBody ); 
实例:
var add = new Function("x", "y", "return(x+y);");  
var result = add(2,3); 
alert(result); // 5 
alert(add); //弹出方法的文本

3.10.2 匿名函数

创建匿名函数

var func = function(arg1,…,argN) {
       func_body;
    return value;
};

3.11 Global对象

Global全局对象是预定义的，包括全局函数和全局属性。全局函数可用于所有内建的 JavaScript 对象 
常用的全局函数有： 
   parseInt()/parseFloat() 
   isNaN(str)//是否不是数字
   eval() 
   decodeURI()/encodeURI() 
常用的全局属性有： 
   undefined
   NaN

3.12 eval函数

eval 函数用于计算某个字符串，以得到结果；或者用于执行其中的的 JavaScript 代码 。
只接受原始字符串作为参数。 
如果参数中没有合法的表达式和语句，则抛出异常。

var str = "2+3";
alert(str); //2+3 
alert(eval(str)); //5 
var str2 = "{id:101,name:'张三'}";
//（），表示通知eval将str强制转换成对象
var obj = eval("("+str2+")");
alert(obj.id);//结果101

3.13 encodeURI 与 decodeURI

encodeURI() ：把字符串作为 URI 进行编码 
decodeURI() ：对 encodeURI() 函数编码过的 URI 进行解码 
var str = "http://www.baidu.com?keyword=张三";
var r1 = encodeURI(str);
alert(r1);
var  r2 = decodeURI(r1);
alert(r2);

3.13.X 表单提交方式 post/get区别

建议通常定义form,指定method属性值为post
提交表单方式可以有get/post
- get、post区别：
  get:
  默认提交方式，提交表单，数据大小有限制（1K，2K）
  提交表单，表单的数据会显示在浏览器的地址栏中
  数据在请求数据包的请求行中
  post:
  不是默认提交方式，提交表单，数据大小没限制
  提交表单，表单的数据不会显示在浏览器的地址栏中
  数据在请求数据包的主体中
  action属性指定表单数据提交的目的地

4、HTML DOM 简介

4.1 定义：

HTML DOM是HTML Document Object Model的缩写，称为文档对象模型。
HTML DOM 定义了一系列标准的对象，以及访问和处理 HTML 文档的标准方法，将网页中的每个元素都看作一个对象。
通过 HTML DOM， JavaScript可访问HTML文档的所有元素和属性。

4.2 Document 对象

每个载入浏览器的 HTML 文档都会成为 Document 对象
通过使用 Document 对象，脚本可以对 HTML 页面中的所有元素进行访问
– document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
DOM:文档对象模型，JS将HTML文档中的所有元素以一个树形的目录结构描述

4.3 查找元素节点的方法

一、方法：**getElementById()** 
var XX = document.getElementById("ID");
Þ   通过指定的 ID 来返回元素节点 
Þ   如果 ID 值错误，则返回 null
二、方法：**getElementsByTagName()** (返回的是**数组**， 需要指定下标到指定元素)
Þ   根据指定的标签名称返回所有的元素 
Þ   如果标签名称错误，则返回 长度为 0 的节点列表
方法：**getElementsByName()**(返回的是数组， 需要指定下标到指定元素)
Þ   根据指定的name属性值返回所有的元素 
Þ   如果标签名称错误，则返回 长度为 0 的节点列表 
方法：**getElementsByClassName()**(返回的是数组， 需要指定下标到指定元素)
Þ   根据指定的class属性值返回所有的元素,该方法是HTML5 新增的DOM API。IE8以下不支持 
三、返回一个节点列表
Þ   使用节点列表的 length 属性获取个数
Þ   [index]：定位具体的元素

4.4 修改元素节点的内容和样式

innerHTML 、src、href属性

style 属性 :
node.style.color 
node.style.fontSize 
className 属性 :

代码：
var o = document.getElementById("p1");
o.style.color = “red”;
o.style.fontSize = 20;
o.className = “样式类名称”;

  4.4.1通过className 加载类选择器样式   不能通过 class 属性来修改 
  4.4.2 通过style 属性进行修改
    style.js对应的样式属性 要求把 css中的样式属性 的 中划线‘——’去掉 然后 后面的字母变大写
    要么你就使用 类选择器加载。
 4.4.3 还可以通过 style.cssText="这里就是把样式表中的大阔号去掉之后的内容";

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"> //类选择器加载
    .div{
        color:blue;
    }

</style>
<script type="text/javascript">
    function loadContent(){
        var content = document.getElementById('123');
//      alert(content);
        content.innerHTML = '123';
    }

    function changeCss(){
        var img = document.getElementById('123');//根据ID获得元素
//      img.className = 'div'; //方式一:类选择器
//      img.class = 'div'; //错误的方式:错误 语法不报错
        img.style.width = '200px';
        img.style.height = '100px';
        img.style.border = '2px solid red';
        img.style.backgroundColor = 'RGB(111,111,111)';// 方式二:JS语法 backgroundColor  对应 CSS语法     background-color: 
        img.style.cssText = 
            'width:200px; height:100px; border:2px solid; color:blue;'; //方式三：把样式表中的{}去掉的内容
        }
</script>

</head>
<body>
    <input type="button" value="加载内容" onclick="loadContent()" />
    <input type="button" value="点击切换样式" onclick="changeCss()">
    <div id="123" class='div'>
    </div>
</body>
</html>

4.5 根据层次查找元素节点

parentNode 、firstChild 和 lastChild
遵循文档的层次结构，查找单个节点
childNodes
遵循文档的层次结构，查找多个节点
nodeName,nodeValue ,nodeType
nodeName 元素节点返回标签名;属性节点返回属性名;文本节点返回#text
nodeValue 元素节点返回null;属性节点返回属性值;文本节点返回内容
nodeType 1表示元素节点;2表示属性节点;3表示文本节点
attributes 获取所有的属性节点然后把属性节点作为值存入一个Map结构中以属性名作为 key
遵循文档的层次结构，查找多个属性

代码示例：
    <div id="div1"> hello world </div>     
 其中:   <div></div>元素节点 
         id='div1' 属性节点
         hello world 文本节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

    function NodeOperate() {

        var div = document.getElementById('divId'); //根据ID获取div元素

        alert('div的nodeName: ' + div.nodeName); //元素节点返回标签名 div
        alert('div的nodeValue: ' + div.nodeValue);//元素节点返回null  
        alert('div的nodeType: ' + div.nodeType); //元素节点返回1

        var attrs = div.attributes;//获得元素的属性
        alert(attrs);//object NamedNodeMap
        var att = attrs.getNamedItem('id');//等同于 var att = attrs['id'];
        alert(att);//object Attr
        alert('att的nodeName: ' + attrs.getNamedItem('id').nodeName); //属性节点返回属性名 id
        alert('att的nodeValue: ' + attrs.getNamedItem('id').nodeValue);//属性节点返回属性值 divId
        alert('att的nodeType: ' + attrs.getNamedItem('id').nodeType); //2表示属性节点 2

        //获取文本途径
        //方式一: 元素.innerHTML
        alert("文本信息1:"+div.innerHTML);
        //方式二: 元素.孩子节点.nodeValue
        alert("文本信息2:"+div.firstChild.nodeValue);
        //方式三:方式二变形
        alert("文本信息3:"+div.childNodes[0].nodeValue);    
    }

</script>
</head>
<body>
    <input type="button" value="节点操作" onclick="NodeOperate()"> </input>
    <div id="divId" class='divClass'>hello world</div>
</body>
</html>

实例：
<select id="s1">
    <option value="101">娜英</option>
    <option value="102">周杰伦</option>
    <option value="103">哈林</option>
    <option value="104">汪峰</option>
 </select> 
var s1 = document.getElementById("s1");
alert(s1.childNodes.length);//7 
var o1 = s1.firstChild;

4.6 元素节点的定义增删

创建新的元素节点

document.createElement(elementName)
elementName：要创建的元素标签名称 
返回新创建的节点 

代码：
var newNode = document.createElement("input");
newNode.type = "text";
newNode.value = "mary";
newNode.style.color = "red";

添加新的元素节点

parentNode.appendChild(newNode)
追加：新节点作为父节点的最后一个子节点存在 
parentNode.insertBefore(newNode,refNode)
refNode：参考节点，新节点位于此节点之前

删除元素节点

删除某个子节点 ： parentNode.removeChild(childNode)
function deleteNode()
{
    var delNode = document.getElementById("a1");
    delNode.parentNode.removeChild(delNode);
}
删除多个子节点 ：
function removeAll() {
    //方式一 循环删除 只删除第一个元素 
    var sel1 = document.getElementById('sel1');
    var list = sel1.childNodes;
    for (var i = 0; i < list.length; i++) {
        sel1.removeChild(list[0]);
        list --;
    }

    //方式二 修改属性长度
    var  sel1 = document.getElementById("sel1");
    var  options = sel1.options;
    //alert(options.length);
    options.length=0;
}

综合Demo代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function remove() {//删除单个节点
        var sel1 = document.getElementById('sel1');
        var A = document.getElementById('A');
        sel1.removeChild(A);
    }

    function add() {
    var sel = document.getElementById('sel1');
    var opt = document.createElement('option');
    opt.innerHTML = 'ADD';
    sel.appendChild(opt)
    }

    function removeAll() {
        //方式一 循环删除 只删除第一个元素 
        var sel1 = document.getElementById('sel1');
        var list = sel1.childNodes;
        for (var i = 0; i < list.length; i++) {
            sel1.removeChild(list[0]);
            list --;
        }

        //方式二 修改属性长度
        var  sel1 = document.getElementById("sel1");
        var  options = sel1.options;
        //alert(options.length);
        options.length=0;
    }
</script>
</head>
<body>
    <input type="button" value='增加节点' onclick='add()'>
    <input type="button" value='删除节点' onclick='remove()'>
    <input type="button" value='删除节点全部' onclick='removeAll()'>
    <select id='sel1'>
        <option id='A'>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
</body>
</html>

5、HTML元素对象

5.1 结构图：

1.png-184.6kB

5.2 Select元素对象

ß   Select 对象代表 HTML 表单中的一个下拉列表 
Þ   "<"select">"  标签即表示一个 Select 对象 
ß   常用属性 
Þ   options、selectedIndex 
ß   常用方法 
Þ   add(option)、remove(index)
ß   事件 
Þ   onchange

代码
Þ   <select onchange=“alert(this.selectedIndex);”>//更改时间 显示选中后的下拉框序号 从0开始
Þ       <option value=“1”>aa</option>
Þ       <option value=“2”>bb</option>
Þ   </select>

5.3 Option元素对象

ß   Option 对象代表 HTML 表单中下拉列表中的一个选项
Þ   <option> 标签表示一个 Option 对象
ß   创建对象 
Þ   var o = new Option(text,value);
ß   常用属性 
Þ   index、text、value、selected

代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function add(){
        var sel = document.getElementById('sel');
        var node = document.createElement('option');
        node.innerHTML = 'E';
        sel.appendChild(node);
    }

    function remove(){
        var sel = document.getElementById('sel');
        var opts = sel.options;//获取sel的所有下拉选框
        alert(opts.length);//长度为4
        opts.length = 0; //置空 相当于删除所有的下拉选项
    }

</script>
</head>
<body>
<input type="button" value="增加" onclick="add()">
<input type="button" value="删除" onclick="remove()">
    <select id="sel" onchange="alert(this.selectedIndex);" >
        <option id='A'>A</option>
        <option>B</option>
        <option>C</option>
        <option>D</option>
    </select>
</body>
</html>

5.4 Table元素对象

Table 对象代表一个 HTML 表格
    </table>; 标签表示一个 Table 对象
    常用属性 
Þ   rows、cells
ß   常用方法 
Þ   insertRow(index)：返回 TableRow 对象 
Þ   deleteRow(index)

5.5 TableRow 对象

ß   TableRow 对象代表一个 HTML 表格行
Þ   <tr> 标签表示一个 TableRow 对象 
ß   常用属性 
Þ   cells、innerHTML、rowIndex 
ß   常用方法 
Þ   insertCell(index)：返回 TableCell 对象 
Þ   deleteCell(index)

5.6 TableCell 对象

ß   TableCell 对象代表一个 HTML 表格单元格
<td> 标签表示一个 TableCell 对象 
ß   常用属性 
cellIndex、innerHTML、colSpan、rowSpan

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function remove(btn) {//删除方法
        var row = btn.parentNode.parentNode;//btn=this指针 是input标签; btn.parentNode是<td>标签 ; btn.parentNode.parentNode是<tr>标签
        alert(row.nodeName);// tr
        alert(row.nodeValue);// null
        alert(row.nodeType);// 1 元素节点
        row.parentNode.removeChild(row);
    }

    var id = 1;

    function add() {//新增方法
        var t1 = document.getElementById('t1');
        var row = t1.insertRow(t1.rows.length);// 增加一行
        var c0 = row.insertCell(0); // 增加一个单元格
        c0.innerHTML = id + "";//设置c0(第一个)单元格内容
        var c1 = row.insertCell(1);
        c1.innerHTML = "test" + id;//设置c1(第三个)单元格内容
        var c2 = row.insertCell(2);
        c2.innerHTML = "<input type='button' value='删除' onclick='remove(this)'>";//设置c2(第三个)单元格内容

        id++;
    }
</script>
</head>
<body>

</body>
<input type="button" value="添加一行" onclick="add()">
<table id='t1'>
    <tr>
        <td>ID</td>
        <td>NAME</td>
        <td>SEX</td>
    </tr>
</table>
</html>

6、浏览器对象

6.1 浏览器对象模型

image.png-172.3kB

6.2 浏览器对象windows

window 对象表示浏览器中打开的窗口 
常用属性 
document：窗口中显示的 HTML 文档 
history：浏览过窗口的历史记录 
location：窗口文件地址 
name：窗口名称 
opener：打开当前窗口的 window 对象

    window.location="demo1.html";//跳转到当前项目路径下+demo1.html window可以省略

6.2.1 window对话框

alert(str)
提示对话框，显示str字符串的内容
confirm(str)
确认对话框，显示str字符串的内容
按“确定”按钮返回true，取消操作返回false
prompt(str,value)
输入对话框，采用文本框输入信息
str为提示信息，value为初始值
按“确定”按钮返回输入值，取消操作返回null

6.2.2 window的打开和关闭

window.open(url,name,config) 
    url：打开的超链接 
    name：窗口的名称 
    config：窗口的配置参数 
    返回新窗口对象 
window.close()

代码实例：
var config = "toolbar=yes,location=no, 
width=500px,height=300px"; 
//打开窗口 
var openurl = "http://www.google.com"; 
var newWin = window.open(openurl,"popwin",config); 
newWin.focus();

6.3 定时器

6.3.1 window定时器

用途：多用于网页动态时钟、制作倒计时、跑马灯效果等 。
周期性时钟：
setInterval(exp,time)：周期性触发代码exp 
    exp：执行语句 
    time：时间周期，单位为毫秒 
    返回已经启动的定时器对象 
clearInterval(tID)：停止启动的定时器 
    tID：启动的定时器对象 
一次性时钟：
setTimeout(exp,time)：一次性触发代码exp 
    exp：执行语句 
    time：间隔时间，单位为毫秒 
返回已经启动的定时器 
clearTimeout(tID)：停止启动的定时器 
tID：启动的定时器对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    // 设置时间的工作 
    function setTime() {
        // 获取sp1 这个元素 
        var sp1 = document.getElementById("sp1");
        // 构建当前时间对象  赋值给sp1这个元素
        var date = new Date();
        sp1.innerHTML = date.toLocaleString();
    }
    var tid = null;
    function startTimer() {
        // 先给span 赋值了一个当前时间 
        setTime();
        // 10秒之后改变当前时间 
        tid = window.setTimeout(setTime, 10000);
    }
    function stopTimer() {
        window.clearTimeout(tid);
    }
</script>
</head>
<body>
    <input type="button" value="开始" onclick="startTimer()">
    <span id="sp1"></span>
    <input type="button" value="停止" onclick="stopTimer()">
</body>
</html>

6.4 screen、history、location、navigator 对象：

screen 对象：
- screen 对象包含有关客户端显示屏幕的信息，常用于获取屏幕分辨率的宽度、高度
- 常用属性
  常用属性
  width/height 宽度/高度
  availWidth/availHeight 可用宽度/可用高度

    alert(window.screen.width+':'+screen.height);
    alert(window.screen.availWidth+':'+screen.availHeight);

history 对象：
- history 对象包含用户（在浏览器窗口中）访问过的 URL
   length属性：浏览器历史列表中的 URL 数量
- 方法
   back() //后退一步
   forward() //前进一步
   go(num) //num -1往后退一步 num1往前走一步


    history.back();//单击“后退”按钮 
    history.go(-2);//单击两次“后退”按钮
//      window.history.go(-1);
//      window.history.back();

//      window.histoty.forward();
//      window.history.go(1);

location 对象：
- location 对象包含有关当前 URL 的信息
  常用于获取和改变当前浏览的网址
- href 属性：当前窗口正在浏览的网页地址
  方法：
  replace(url)：转向到url网页地址
  reload()：重新载入当前网址，同按下刷新按钮

    window.location.hreplace("demo1.html");  代表替换当前页面 没有记录历史
    window.location="demo1.html";    定位到某个页面  记录历史 
    window.f = "
    http://www.baidu.com"; location.href="place(“http://www.baidu.com");
    window.location.reload(); //实现刷新 重新加载

navigator 对象：
- navigator 对象包含有关浏览器的信息，常用于获取客户端浏览器和操作系统信息

示例代码：var txt = "Navigator对象属性信息：\n"; 
for (var propName in navigator) 
    { 
        txt+= propName + ": " 
        + navigator[propName] + "\n"; 
    } 
alert(txt);

6.5 event与事件

1 事件

1.1 什么是事件

    在html 中  元素的状态改变、 鼠标操作、 键盘操作都会触发相应的事件(行为和动作)。

1.2 event 对象
为了以对象的形式体现事件引入了事件对象的概念.
1.3 事件的分类
事件句柄.png-327.3kB
- 状态事件:
onload onunload onchange onfocus onblur onsubmit
- 键盘事件:
onkeydown onkeyup
- 鼠标事件:
onclick ondbclick onmousedown onmouseup onmouseover onmouseout

1.X 事件冒泡机制

1.png-379.3kB
html dom 模型底层元素触发的事件会依次激活上层元素同类型事件的处理这就是事件冒泡

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function div1_click(){
        alert('div1');
    }
    function div2_click(){
        alert('div2');
    }
    function p_click(){
        alert('p');
    }
</script>
</head>
<body>
    <div onclick="div1_click()">
        hello
        <div onclick="div2_click()">world</div>
        <p onclick="p_click()">你好哇，李银河！</p> //点击会依次触发 p_click()、div2_click()、div1_click()等事件
    </div>
</body>
</html>

1.5取消事件冒泡

  event.cancleBubble=true;
  event.stopPropagation(); 

  示例代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function div1_click(){
        alert('div1');
    }
    function div2_click(){
        alert('div2');
    }
    function p_click(){
        alert('p');
        event.stopPropagation();   //取消时间冒泡方式1
        event.cancelBubble = true; //取消时间冒泡方式2
    }
</script>
</head>
<body>
    <div onclick="div1_click()">
        hello
        <div onclick="div2_click()">world</div>
        <p onclick="p_click()">你好哇，李银河！</p>
    </div>
</body>
</html>

2、event

event 这个对象在IE中可以直接使用在firefox中默认不能使用event 需要手工传入event对象才能使用。
- event 对象可以获取的信息
  可以获取那个键、那个鼠标按钮、以及时间信息、位置信息元素相关信息。
  位置信息:
  clientX 和 clientY
  screenX 和 screenY

    //alert(event.clientX+':'+event.clientY);
    //alert(event.screenX+':'+event.screenY);

元素信息:
- srcElement IE触发事件的元素对象
- target 属于标准的事件触发的元素对象
- 可以采用兼容写法
- var t = event.srcElement||event.target;
- 这个t对象就是 html dom 对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

function test2(){
    alert('world div click');
}

function test1(event){
        event.cancelBubble = true;
        var t = event.srcElement||event.target;
        alert(t);// [object HTMLDivElement]
        alert(t.innerHTML);// world
        alert("nodeName" + t.nodeName);// div
        alert("nodeType" + t.nodeType);// 1
        alert("nodeValue" + t.nodeValue);//null
    }

</script>
</head>
<body>

</body>
<div onclick="test2()">
     hello
     <div onclick="test1(event)">world</div>
     <span>this is span</span>
</div>
</html>

3、键盘

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
</style>
<script type="text/javascript">

function  test2(event){
    alert(event.keyCode);
}
</script>
</head>
<body>
<!--  有些浏览器上没反应 加上 tabindex 就可以了 -->
<div  tabindex="-1" onkeydown="test2(event)"> 
     hello world 
</div>
</body>
</html>

7、JS面向对象与JSON

7.1 什么是类

类是由一组具有共同特征和共同行为的对象抽象。
OOA(object-oriented analysis 面向对象分析)
OOD(object-oriented design 面向对象设计)
OOP(object-oriented programming 面向对象语言)
参考链接: https://blog.csdn.net/jiangeeq/article/details/51073206

7.2 JS 中如何创建对象？

通用模板创建对象

方法1：使用构造器创建 
语法：function ObjName(参数1,参数2,…){} 

function Person (n,a){ 
    //name 和 age 属性 
    this.name = n; 
    this.age = a; 
    //show方法 
    this.show = function(){ 
        alert(“My Name is ” + this.name); 
    }; 
}

//测试对象 
function test(){ 
    var o1 = new Person(“mary”,18); 
    alert(o1.age); 
    o1.show(); 

    var o2 = new Person(“john”,20); 
    alert(o2.age); 
    o2.show(); 
}

方法2：使用Object对象 创建对象实例    
function TestObject(){ 
    var personObj=new Object(); 
    //添加属性 
    personObj.name="John"; 
    personObj.age=50; 
    //添加方法 
    personObj.eat = eat; 
    //测试 
    personObj.eat(); 
    alert(personObj.age); 
}

function eat(){ 
    alert(“name:“ + this.name); 
}

方法3：JSON 特定的JS中定义对象的格式  其他语言与JS数据交换的通用格式   
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式 
定义格式{“key”:value, “key”:value} 
访问时用“json对象.key”方式 

var person = {name:'张三',age:20,fun:function(){console.info("特定格式的对象")}};    
        console.info(person.name);
        console.info(person.age);       
        person.fun();

7.3 JSON

7.3.1 什么是JSON

JSON 是 javascript Object Notification javascript 对象通知
它是一种轻量级的数据交互格式

7.3.2 JSON对象的格式

{“key1”:值,”key2”:值}
访问数据时直接使用对象名.key 来访问数据

7.3.3 JSON字符串

‘{“key1”:值,”key2”:值}’
“{\”key1\”:值,\”key2\”:值}”

7.3.4 JSON字符串转换成JSON对象

JSON.parse(jsonStr); 可以把json字符串变成json对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
    width: 600px;
    border-collapse: collapse;
    text-align: center;
}
table,td,th{
    border:1px solid  purple;
}
</style>
<script type="text/javascript">

     function test1(){
         //var  obj = {"name":"zhangsan","age":23,"salary":334455};
         var  obj = {"name":"zhangsan","age":"23","salary":"334455"};
         alert(obj.name);
         alert(obj.age);
         alert(obj.salary);
     }

     function  test2(){
         var  jsonObjArr = [{"name":"zhangsan","age":23,"salary":334455},
                            {"name":"lisi","age":33,"salary":534455},
                            {"name":"wangwu","age":63,"salary":134455}];
         //alert(jsonObjArr[1].name);
         for(var i=0;i<jsonObjArr.length;i++){
             var obj = jsonObjArr[i];
             alert(obj.name+':'+obj.age+':'+obj.salary);
         }
     }

     function    test3(){
         //var jsonStr = '{"name":"zhangsan","age":23,"salary":334455}';
         var  jsonStr = "{\"name\":\"zhangsan\",\"age\":23,\"salary\":334455}";
         //jsonStr = JSON.parse(jsonStr);
         jsonStr = eval('('+jsonStr+')');
         alert(jsonStr.name+':'+jsonStr.age+':'+jsonStr.salary);
     }

     function  test4(){
         var jsonObjArrStr = '[{"name":"zhangsan","age":23,"salary":334455},'+
                            '{"name":"lisi","age":33,"salary":534455},'+
                            '{"name":"wangwu","age":63,"salary":134455}]';
         var jsonObjArr = JSON.parse(jsonObjArrStr);
         // 使用 html dom 操作表格 
         var t1 = document.getElementById("t1");
         var dataStr = '<tr> <th>姓名</th> <th>年龄</th> <th>月薪</th>  </tr>';
         for(var i=0;i<jsonObjArr.length;i++){
             /* var row = document.createElement("tr");
             //row.innerHTML='<td>'++'</td> <td>22</td> <td>11111112</td>';
             row.innerHTML='<td>'+jsonObjArr[i].name+'</td> <td> '
             +jsonObjArr[i].age+'</td> <td>'+jsonObjArr[i].salary+'</td>';
             t1.appendChild(row);*/
             dataStr = dataStr+'<tr><td>'+jsonObjArr[i].name+'</td> <td> '
             +jsonObjArr[i].age+'</td> <td>'+jsonObjArr[i].salary+'</td></tr>';
         }
         t1.innerHTML=dataStr;
     }

</script>
</head>
<body>
<input  type="button"  value="JSON对象"  onclick="test1()"/> <br>
<input  type="button"  value="JSON对象数组"  onclick="test2()"/><br>
<input  type="button"  value="JSON字符串转JSON对象 " onclick="test3()"/><br>
<input  type="button"  value="JSON字符串转JSON对象数组" onclick="test4()"/><br>
<table  id="t1">


</table>
</body>
</html>

补充:

1、JS中的FOR循环

参考链接: https://www.cnblogs.com/Youngly/p/6709546.html

警告:永远不要使用for each…in语句遍历数组,仅用来遍历常规对象。

EXT

1、EXT概述

1.1 EXT概述

Ext JS是一个流行的JavaScript框架，它为使用跨浏览器功能构建Web应用程序提供了丰富的UI。 Ext JS基本上用于创建桌面应用程序它支持所有现代浏览器，如IE6 +，FF，Chrome，safari 6+ 等。而sencha，sencha touch的另一个产品用于移动应用程序。
Ext JS基于MVC / MVVM架构。最新版本的Ext JS 6是一个单一的平台，可以用于桌面和移动应用程序，而不需要为不同的平台提供不同的代码。

2、第二天

1、原始方法用EXTJS创建一个window

X-Dragon烟雨任平生

关注

31
点赞
踩
293

收藏

觉得还不错? 一键收藏
3
评论
JavaScript

JavaScript标签（空格分隔）：工作学习整理知识，学习笔记 1.定义、特点、错误1.1、JS定义JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。1.2、JavaScript 的...
复制链接

扫一扫