JavaScript

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= “buttonvalue=“第一个按钮"  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 JS字符串对象相关方法

JS字符串方法汇总
https://www.cnblogs.com/YYvam1288/p/6973252.html

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文档中的所有元素以一个树形的目录结构描述
    文档.png-99.1kB
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 什么是类
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); 
}

方法3JSON 特定的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
  • 31
    点赞
  • 293
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值