JS用法

最新推荐文章于 2024-04-24 19:31:26 发布

aiyanfa0733

最新推荐文章于 2024-04-24 19:31:26 发布

阅读量637

点赞数

文章标签： javascript 人工智能开发工具 ViewUI

原文链接：http://www.cnblogs.com/evident/p/11598453.html

版权

JS

JavaScript是一种运行于JavaScript解释器/引擎中的解释性脚本语言。

JS基本语法

运行环境：
- 1，独立安装的JS解释器（NodeJS）
- 2，嵌入在【浏览器】内核中JS解释器

解释型：运行前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。
编译型：对源码进行编译，还能检查语法错误（C/C++）

JS组成

1，核心（ECMAScript）。eg:可以进行+-*/运算

2，文档对象模型（DOM），让JS有能力与网页进行对话。eg:单击按钮可以改变文字的大小

3，浏览器对象模型（BOM）让JS有能力与浏览器进行对话。eg:单击按钮可以出现浏览器

JS特点

1，开发工具简单，记事本

2，不需要编译，直接由JS引擎负责执行。

3，弱类型语言有数据类型来决定数据类型。

4，面向对象。

JS基本语法

浏览器内核的作用

负责页面内容的渲染。内核主要由两部分组成：

1，内容排版引擎解析HTML和CSS

2,脚本解释引擎解析JavaScript。

3，不同浏览器内核不同。

JS运行环境

1，直接在浏览器Console中输入并执行JS

2，将JS脚本嵌入在HTML页面中执行。

JS使用方法

1.将JS代码嵌入在元素“事件”中：

onlick:当单击元素时所做的操作

div id="" οnclick="JS代码">xxx</div>

<html>
    <body>
        <button οnclick="console.log('Hello World');">
           打印消息
        </button>
    </body>
</html>

console.log:注意单双引号的使用。

2.将JS代码嵌入在<script>标记中

<script></script>

允许出现网页的任意位置处

<html>
    <body>
       页头
        <hr/>
        <script>
            document.write('<b>欢迎</b>');//输出“欢迎”两个字
            console.log('脚本执行结束了...');
        </script>
        <hr/>
       页尾
    </body>
</html>

3.将JS代码写在外部脚本文件中（**.js）

1.创建JS文件，并编写JS代码 ***.js

2.在页面中引入js 文件

<script src="js文件路径"></script>

<html>
    <head>
        <script src="myscript.js"></script>
    </head>
    <body>
    </body>
</html>

注意如果script中引入src属性即src="a.js"再在下面内容中写入js代码是错误的。

<script src=""></script> 该对标记中，是不允许出现任何内容的

以下是错误示范！！！

<script src="a.js"> console.log(); </script>

4.语法规范

4.1 语句

允许被JS引擎所解释的代码

使用分号来表示结束

console.log();

document.write();

大小写敏感

console.log();正确

Console.log()错误

英文标点符号

console.log("");正确

console.log( ’‘’‘ ) ；错误

由表达式、关键字、运算符组成

4.2 注释

单行注释：//

多行注释：/* */

sublime text中 Ctrl+/

4.3 js在html中引用

JS变量

1. 什么是变量

内存：保存程序在运行过程中，所需要用到的数据8bit=1byte

1024byte=1kB

1024KB=1MB

1024MB=1GB

1024GB=1TB

变量：就是内存中的一段存储空间

名：内存空间的别名，可以自定义

值：保存在内存空间中的数据

2.变量的声明

声明：var变量名；

赋值：

var userName;

var bookPrice=25.5;

变量名=值；

2.1语法

注意：声明过程中，尽量不要省略var关键字，否则生命的是“全局变量”

声明一个变量，保存值为25

var age;

age=25;
声明并直接赋值：

var age=25;

在console.log()或document.write()使用变量名取代“”，打印变量stuName的值到控制台上：

var stuName="PP.xz";

console.log(stuName);//结果为pp.xz;

console.log("stuName");//结果为stuName,原因是有双引号“”3.
一次性声明多个变量并赋值

var name1,name2,name3;

var age1,age2=30;
变量名命名规范
- 不允许使用JS的关键字和保留关键字
- 由字母，数字，下划线以及$组成
  
  var stuName;
  
  var stuName1;
  
  var stu_name;
  
  var stu$name;
- 不能以数字开头
  
  var stuName1;
  
  var 1stuName:false
  
  var $stuName;true
- 尽量见名知意
  
  var a,b,c,d,ab,ac,ad;
  
  var stuName.stuAge;更推荐
- 可以采用“驼峰命名法
  
  变量名为合成词时，第一个单词全小写，从第二个单词开始，每个单词首字符变大写
  
  var stuName;
  
  如果只有一个单词作为变量名，全小写
  
  var age;
变量的使用

5.1

var stuName="小猪佩奇"；

console.log(stuName);//结果为小猪佩奇。

var stuAge;

console.log(stuAge);//结果为undefined

变量声明后，从未赋值，称之为未经初始化的变量。

5.2 变量未被定义过，直接打印或使用console.log(stuHeight);结果为错误

5.3 对变量进行的存取操作

1.获取变量的值-GET操作

var oldPwd='123456';

console.log( userPwd);//123456

document.write( userPwd);//123456

var newPwd=uerPwd;//mewPwd=123456
2.保存（设置）变量的值-SET操作

var oldPwd='123';

oldPwd='456';//456

oldPwd=newPwd;//oldPwd=123456(newPwd的值)

3.数据类型

3.1 数据类型

number类型

1.可以表示32位的整数以及64位的浮点数

2.整数：32位即4字节

3.浮点数：即小数，64位，8字节

整数：var n1=0123;//八进制 var n2=0x123;//十六进制

小数：var n1=34.56; var n2=4.5e10;
字符串类型

1.表示一系列文本字符数据，由Unicode字符，数字，标点组成，Unicode下所有的字符，数字，标点在内存中都占2字节

2.“张”charCodeAt().toString(16)//结果为5f20(查看字符张的十六进制表现方式)

3.\u4e00:汉字的起始符 \u9fa5:汉字的结束符
布尔类型

1.作用：用于表示条件的结果

2.取值：true:真，肯定的结果；false:假，否定的结果；

var r1=true;

var r2=false;//除条件判断外，做运算时，true可以当做1运算，false可以当作0运算。

3.空 null

4.未定义undefined

4.1.声明变量未赋值

4.2.访问对象不存在啊的属性
弱类型

var stu;//undefined

var stu=25;//number

var stu="25";//string类型

3.2.隐式转换

2.1 函数

typeof()或typeof

var num1=15;

var s=typeof(num1); :获取num1的数据类型

var s1=typeof num1;:获取num1的数据类型

2.2 NaN

Not a Number不是一个数字

isNaN(数据)：判断数据是否为非数字

是不是一个数字

结果为boolean类型

结果为true : 不是一个数字

结果为 false：是一个数字

注：所有的数据类型与string 做+运算时，最后的结果都为string

3.3强制转换

3.1 toString()

将任意类型的数据转换为string 类型，变量.toString();会得到一个全新的结果，类型为string

var num=15;

var str=num+"";

3.2 parseInt()

整型：Integer
作用：获取指定数据的整数部分
语法：var result=parselnt(数据)；
注意：parselnt,从左向右依次转换，碰到第一个非整数字符，则停止转换，如果第一个字符就是非正式字符的话，结果为NaN

3.3 parseFloat()

Float:浮点类型->小数
作用：将指定数据转换成小数
语法：var result=parseFloat(数据)；

var result=parseFloat("35.25");//35.25

var result=parseFloat("35.2你好！")；//35.2

var result=parseFloat("你好35.2")；//NaN

3.4 Number（）

作用:将一个字符串解析为number
语法：var reult=Number(数据)；
注意：如果包含非法字符，则返回NAN

4.运算符与表达式

4.1什么是运算符与表达式

运算符：能够完成数据计算的一组符号，比如：+-*/······

表达式：有运算符和操作数所组成的式子叫做表达式，每个表达式都有自己的值。15+8；var a=15; //a变量的值为15，整个表达式的值也是15；

4.2运算符

4.2.1 算术运算符

+，-，*，/，%；

var num1=15;

var num2=18;

var str1="15";

"+"：可以表示链接

console.log(num1+num2);//33

console.log(num1+str1);//1515

"%":判断数字的奇偶性or获取数字的最后几位。

自增 & 自减

++：自增，在数值的基础上，进行+1操作

--：自减，在数值的基础上，进行-1操作

i++;//相当于i=i+1;

i=1;

j=i++;//i=2,j=1

i=1;

j=++i;//i=2,j=2;

4.3 关系运算符

作用：判断数据之间的大小关系
运算符

==：判断等于（不比较类型，只比较数值）

！=：不等于

===：全等（除数值之外，连同类型也会一起比较）

！==：不全等；

关系表达式的运算结果为boolean类型（true/false）
判断一个数据是否为数据类型

console.log(isNaN(input));

isNaN()会抛开数据类型来判断数据是否为数据，如果数据是数字类型，则返回false；否则返回true;

4.4 逻辑运算符

作用：关联条件

判断考试分数是否在60~80之间

var score=52;

条件1：score>=60

条件2：score<=80;
逻辑运算符

逻辑与：&&；var result=score>=60&&score<=80;如果是则返回ture

逻辑或：||；var =result=bishi>=60||mainshi>=60;只要有一个满足条件为ture

逻辑非：！；对条件进行取反，只是一个操作数。
短路逻辑
1. 短路&&
  
  第一个条件为false，则不需要判断啊后面的条件，结果为false;
2. 短路||
  
  如果第一个条件的结果为true，则不需要判断第二个条件，结果为true。
条件运算符
1. 三目运算符：运算符需要三个操作
2. 语法：表达式1？表达式2：表达式3；
  
  表达式1成立true执行表达式2，不成立false执行表达式3。
3. var=85;
  
  var result=score>=80?"优秀"：（score>=60?"合格"：“不合格”）；

JS函数

5.1 什么是函数

函数（function），也可以被称之为方法(method)，或过程(procedure)。

是一段预定义号，并可以被反复使用的代码块。其中可以包好多条可执行语句。

预定义好：事先声明好，但不被执行。

反复使用：允许被多个地方（元素函数中）所应用。

代码块：允许包含多条可执行的代码。

函数本质上是功能完整的对象。

function 函数名()

{

可执行语句；

}

function printHello()

{

console.log("hello");

console.log("world");

}
函数的调用

执行函数的内容，任何 JS 的合法位置处，都允许调用函数

语法：函数名称（）；

function sayHello()

{

console.log("hello");

console.log("world");

}

sayHello();//调用函数输出“hello”,"world";
定义函数的参数和返回值

parselnt(数据)；//将指定数据转换成整数

parseFloat(数据)；//将指定的数据转换为小数

console.log(“要打印的话”)；
- 定义带参数的函数
  
  function 函数名(参数列表声明)
  
  {
  
  //代码块（函数体，功能体，方法体）
  
  }
  
  参数列表：由一个或多个变量名称来组成，声明函数时定义的参数，可以称之为“形参”。
  
  function printInfo(userName,userPwd)//函数名：print Info 形参：userName，userPwd
  
  {
  
  console.log('用户名：'+userName+‘密码:’+userPwd);
  
  }
  
  printInfo('Tom','123');//传递直接量，叫做实参（‘Tom’和‘123’）
- 定义带返回值的函数
  
  1.声明
  
  function 函数名（0或多个参数）
  
  {
  
  //代码块；
  
  return 值；
  
  }
  
  2.调用
  
  var 变量=函数名（参数）；
  
  function add(num1,num2)
  
  {
  
  return num1+num2;
  
  }
  
  var result=add(10,20);
  
  console.log(result);//输出30；（//实参10.20分别传给对应的num1,num2得到结果result30输出）

5.2变量的作用域

什么是作用域

作用域：就是变量或函数的可访问的范围。它控制着变量或函数的可见性和生命周期

在 JS 中，变量或函数的作用域可分为：

a:函数作用域，只在当前函数内可访问

函数作用域内的变量（局部变量）

b:全局作用域，一经定义，代码的任何位置都可以访问。
函数作用域

function add()

{

var sum=1+2;//局部变量

console .log(sum);//正确

}

console.log(sum);//脚本错误
全局作用域

var sum=0;

function add()

{

sum=1+2;

console.log(sum);//sum=3

}

console.log(sum);//sum=0

}

function add(0)

{

sum=1+2;

}

add();//必须调用一次函数，才能得到sum的值。

console.log(sum);
声明提前

JS 在正式执行之前，会将所有的var 声明的变量和function声明的函数，预读到所在作用域的顶部但是，对变量的赋值，还保留在原来的位置处。

console.log(a);//不会出错，输出undefined

var a=100;

console.log(a);//100;

等同于以下

var a;//仅声明提前

console.log(a);//undefined

a=100;//赋值仍保留在原来位置

console.log(a);//100
按值传递

传参时，实际上是对实参赋值了一份副本传给了函数。在函数体内对变量进行修改，实际上是不会影响到外部的实参变量的。

var n=100;//全局变量n

function fun(n)//参数变量也是局部变量

{

n-=3;//修改的是局部变量n

console.log(n);//输出的是局部变量n(97)

}

fun(n);//调用函数，按值传递，输出97

console.log(n);//输出全局变量100

JS 分支结构

1. if -else

1.1 程序的流程控制

程序=数据+算法

程序的三种结构：

顺序结构
分支结构

if (条件表达式)

{

语句块;

}

if(条件){ 语句块1；

}else{

语句块2；

}
循环结构

2. switch case

1.使用场合：优先用于等值判断的条件中

特殊的分支语句，可以i根据一个表达式的不同取值，从不同的程序入口开始执行。

switch （表达式）{

case 值1：

语句1；

语句2；

break;

case 值2：

语句3；

语句4；

break;

default:

语句n;//如果没有碰到break则会继续向下执行。

<!DOCTYPE html>
<html>
<head>
 <title>D</title>
 <meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
 //根据商品单价和购买数量以及收款金额 计算并输出应收金额和找零。
 // 当总价大于后者等于500时享受8折优惠 
 //当收款金额小于应收金额，报错误，给出提示 
 // 定义输入变量：单价，数量，收款金额 -->
 var price,count,money;
 // 定义输出变量 ：总价。找零-->
 var total,change;
 //为输入变量赋值 -->
 price = prompt("请输入商品单价");
 count = prompt("请输入商品数量");
 //根据单价和数量计算出 商品总价 -->
 total = price*count;
 //console.log(total);
 //alert(total);//直接弹出框
 //判断，判断商品总价》=500，享受8折优惠
 if(total>=500){
  alert("您的消费金额已经大于等于500元，可以享受8折优惠");
  total = total*0.8;
 }
 alert("您此次一共消费:"+total+"元");
 //判断应收金额total和收款金额money之间的关系
 money = prompt("收款:");
 if (money>=total) {
  //计算找零
  change =money-total;
  alert("共找您"+change+"元");

 }else{
  alert("您给的钱不够，请多给点吧");
 }
 
</script>
 

</body>
</html>

循环结构

continue 关键字：用在循环中，用于终止本次循环，继续执行下次循环

Break 关键字：用在循环中，终止整个循环结构！！!
- while循环：先判断后执行
  
  var i=0;
  
  while(i<100){
  
  console.log(i);
  
  if(i==5){
  
  break;
  
  }
  
  i++;
  
  }//输出结果：0，1，2，3，4，5.当i=5时，退出循环。
- do-while循环：先执行后判断
  
  do{
  
  可执行语句；
  
  }while(boolean表达式);
  
  先执行循环操作，再判断循环条件，如果条件为真，则继续执行循环操作，若果条件为假，则终止循环即退出循环。
  
  无论条件满足于否，至少要执行一次循环操作。
- for循环
  
  for(表达式1；表达式2；表达式3)
  
  {
  
  循环体语句；
  
  }
  
  var sum=0;
  
  for(var i=0;i<100;i++){
  
  sum+=i;
  
  }
  
  console.log("1到100的和为："+sum);

//猜数字游戏
<!DOCTYPE html>
<html>
<head>
 <title>U</title>
 <meta charset="utf-8">
</head>
<body>
<script  type="text/javascript">
 //猜数字
 //1，生成一个随机数（100以内）
 var r = parseInt(Math.random()*100);

 do{
  var input = prompt("请用户输入一个数字");
  if(input > r){
   alert("您输入的数值大了");

  }else if(input < r){
   alert("您输入的值小了");
  }else{
   alert("您猜对了");
  }

 }while(input != r);
 alert("游戏结束");
</script>
</body>
</html>

JS数组

1 索引数组

下标为数字的数组

数组：

内存中连续存储多个数据的数据结构，在起一个名字。存储多个数据的时候使用数组。
创建数组
- 创建空数组：两种
  
  数组直接量：var arr=[];
  
  用new:var arr=new Array();//不知道数组中元素有多少时使用。
访问数组中元素
- 访问：下标，数组中唯一标识每个元素存储的位置的序号
- 特点：从0开始，连续不重复。
- 只要访问数组元素，只能用下标
- 数组名 [i]--用法和单个变量完全一样。
数组GET操作与SET操作
- set
var scores=[95,88,100];

scores[2]=98;//将值为100的元素重新赋值为98

scores[3]=75;//在数组尾部添加一个新的元素
- 获取数组元素的值：get
  
  var cities=new Array('南京'，‘杭州’，‘青岛’);
  
  console.log(cities[1]);//杭州
  
  console.log(cities[3]);//undefined 不会抛出数组下标越界异常
访问数组中的元素

数组的length属性：记录了数组中理论上的元素个数length属性的值永远是最大下标+1

var arr4=new Array(10);//创建10个空元素

console.log(arr4.length);//长度为10

var arr5=[ ];//长度为0

arr5[0]=87;//长度变为1

arr5[3]=98;//长度变为4
数组的的遍历

遍历数组元素，通常选择for 循环语句，元素的下标作循环遍历

var muns = [50,90,20,10];

for(var i=0;i<nums.length;i++)

{

nums[i]+=10;

}//元素下标从0开始，到length-1结束。
固定套路
- 获得数组最后一个元素：arr[arr.length-1]
- 获得倒数第n个元素的位置：arr[arr.length-n]
- 数组缩容：减小arr/length的数值，会删除结尾的多余元素
- 遍历数组：依次访问数组中每个元素，对每个元素执行相同的操作
  
  for (var i=0;i<arr.length;i++){
  
  arr[i]//当前正在遍历的元素
  
  }
特殊：三个不限制
- 不限制数组元素的个数：长度可变
- 不限制下标越界：
  
  获取元素值：不报错！返回undefined
  
  修改元素值：不报错！自动在指定位置创建新元素，并且自动修改length属性为最大下标+1
  
  如果下标不连续的数组--稀疏数组
- 不限制元素的数据类型

2 关联数组

可自定义下标名称的数组

数组
- 索引数组中数字下标没有明确的意义
- 只要希望每个元素都有专门的名称时，就使用关联数组
- 2步：
  - 创建空数组
  - 向空数组中添加新元素，并自定义下标名称。
创建方式

var bookInfo = [ ];

bookInfo[ 'bookName']='西游记';

bookInfo['price']=35.5;

由于关联数组的length属性值无法获取其中元素的数量，所以遍历关联数组只能用 for...in循环

for (var key in hash){

key;//只是元素的下标名

hash[key]//当前元素值

}

3 对比索引数组和关联数组

索引数组	关联数组
以字符串输出	不能用字符串输出
下标是数字	下标是自定义的字符串
length属性有效	length属性失效（=0）
访问元素都用数组名["下标"]	访问元素都用数组名["下标"]
可用for循环遍历	不能用for循环遍历——for in
查找遍历	hash数组查找不用遍历
受存储位置影响	和存储位置无关
受数组元素个数影响	和数组中元素个数无关

JS数组API

1 数组转换字符串

String（arr):将arr中每个元素转换为字符串，用逗号分隔

固定套路：对数组拍照：用于鉴别是否数组被修改过
- 将字符组成单词：chars.join("")->无缝拼接
  
  扩展：判断数组是空数组：arr.join("")==""
- 将单词组成句子：words.join("")
- 将数组转化为页面元素的内容：
  
  “<开始标签>”+
  
  arr.join("</结束标签><开始标签>")
  
  +“</结束标签>”
arr.join(“连接符”)：将arr中每个元素转为字符串，用自定义的连接符分隔。

//将字符拼接为单词

var chars=["H","e","l","l","o"];

console.log(chars,join(""));//Hello

2 拼接和选取

不直接修改原数组，而返回新数组！

拼接： concat()拼接两个或更多的数组，并返回结果

var newArr=arr1.concat(值1，值2，arr2,值3，....)将值1，值2和arr2中每个元素，以及值3都拼接到arr1的元素之后，返回新数组，其中：arr2的元素会被先打散，再拼接

var arr1=[90,91,92];

var arr2[80,81];

var arr3[70,71,72,73];

var arr4=arr1.concat(50,60,arr2,arr3);

console.log(arr1 );//现有数组值不变

console.log(arr4 );//[90,91,91,50,60,80,81,70,71,72,73]
选取：slice()返回现有数组的一个子数组

var subArr=arr.slice(starti,endi+1)

选取arr中starti位置开始，到endi结束的所有

元素组成新数组返回——原数组保持不变

强调：*凡是两个参数都是下标的函数，都有一个特性：含头不含尾

var arr1=[10,20,30,40,50];

var arr2=arr1.slice(1,4);//20,30,40含头不含尾

var arr3=arr1.slice(2);//30,40,50//从头开始一直到最后

var arr4=arr1.slice(-4,-2);//反向选取，含头不含尾

console.log(arr1);//现有数组不变
- 选取简写
  
  1 一直选取到结尾：可省略第二个参数
  
  2 如果选区的元素离结尾近：可用倒数下标
  
  arr.slice(arr.length-n,a,rr.length-m+1)
  
  简写为arr.slice(-n,-m+1);
  
  3 复制数组
  
  arr.slice(0,arr.length);
  
  简写为arr.slice();
修改数组
- 删除：splice 直接修改原数组
  
  arr.splice(starti,n);
  
  删除arr中starti位置开始的n个元素不考虑含头不含尾
  
  其实，var deletes=arr.splice(starti,n);
  
  返回值deletes保存了被删除的元素组成的临时数组
- var arr1=[10,20,30,40,50];
  
  var arr2=arr1.splice(2,1);//删除从下标为2的元素开始，删除1个,把30删除
  
  var arr2=arr1.splice(2,2,21,22,23);//删除从下标2元素开始，删除2个，即把20，30删除，删除以后再把21，22，23填进去
  
  var arr2=arr1.splice(2,2,[91,92,93]);
  
  console.log(arr1);
  
  console.log(arr2);
- 插入
  
  arr.splice(starti,0,值1，值2，....)
  
  在arr中starti位置，插入新值1，值2...原starti位置及其以后的值被向后顺移。
- 替换：
  
  其实就是删除旧的，插入新的
  
  arr.splice(starti,n,值1，值2...)
  
  先删除arr中starti位置的n个值，再在starti位置插入
  
  强调：删除的元素个数和插入的新元素个数不必一致。
- 颠倒：
  
  reverse()颠倒数组中元素的顺序
  
  arr.reverse();
  
  console.log(arr1);
  
  强调：仅负责原样颠倒数组，不负责排序
- 排序
  
  将元素从小到大排序重新排列
  - 排序API：
    
    arr..sort():默认将所有元素转为字符串再排序
    
    只能排列字符串类型的元素，所以使用自定义比较器函数
  - 排序算法：
    
    冒泡快速插入排序

3 DOM

DOM：document object model

是W3C的标准，是中立于平台和语法的接口，

DOM查找

按id属性，精确查找一个元素对象

var elem=document.getElementById("id")

强调：getElementById只能用在document上

只能用在精确查找一个元素

不<是所有元素都有id

<ul id="myList">
    <li id="m1">首页</li>
    <li id="m2">企业介绍</li>
    <li id="m3">联系我们</li>
</ul>

var ul=document.getElementById("myList");
console.log(ul);

按标签名找

var elems=parent.getElementsByTagName("tag");

查找指定parent节点下的所有标签为tag的子节点。

强调：
- 可用在任意父元素上
- 不仅查看直接子节点，而且查所有子代节点
- 返回一个动态集合
  
  即使只找到一个元素，也返回集合，必须用[0],取出唯一元素
- 不但找直接节点，而且找所有子代。
```
<ul id="myList">
    <li id="m1">首页</li>
    <li id="m2">企业介绍</li>
    <li id="m3">联系我们</li>
</ul>

var ul=document.getElementById("menuList");
var list=ul.getElmentsByTagName("li");
console.log(ul);
```

name属性查找

document.getElmentsByName('name属性值')

可以返回DOM树中具有指定name属性值的所有子元素集合。

<form id="registerForm">
    <input type="checkbox"
           name="boy"/>
    <input type="checkbox"
           name="boy"/>
    <input type="checkbox"
           name="boy"/>
</form>

var list=document.getElementsByName('boy');
console.log(typeof list);

class查找

朝朝父元素下指定的class属性的元素

var elems=parent.getElemnetsByClassName("class");

有兼容性问题：IE9+

<div id="news">
    <p class="main Title">
        新闻标题1
    </p>
    <p class="subTitle">
        新闻标题2
    </p>
    <p class="mainTitle">
        新闻标题3
    </p>
</div>

var div=document.getElementById('news');
var list=div.getElementsByClassName('main Title');
console.log(list);

通过css选择器查找

只找一个元素：

var elem=parent.querySelector("selector")

selector支持一切css中选择器

如果选择器匹配的有多个，只返回第一个

找多个：

var elems=parent.querySelectorAll("selector")

selector API 返回的是非动态集合；
- 元素选择器
- 类选择器
- Id选择器
- 后代选择器
- 子代选择器
- 群组选择器

//产生随机验证码
<!DOCTYPE html>
<html>
<head>
 <title>D</title>
 <meta charset="utf-8">
 <style>
  #code{
   width:150px;
   height: 50px;
   background-color: lightblue;
   font-size: 44px;
   letter-spacing: 5px;//设置字符间距

  }
 </style>
</head>
<body>
 <script>
  function createRndCode(){
   var chars=['a','b','c','1','2','3'];
   var randCode="";
   for(var i=0;i<4;i++){
    var randPos= Math.floor(Math.random()*(chars.length-1));
    chars[randPos]//math.floor函数对产生的随机数取整，math.random()产生随机数，将0-1的范围扩展到0-chars数组长度减1的范围。由于作为下标所以要对乘起来的数取整。
    //产生了一个随机的位置
    randCode += chars[randPos];//将产生的随机位置连接到产生的随机验证码字符上，形成一个完整的随即验证码（位置+数值）
    //每次随机产生一个字符，，然后产生一个随机码
   }

   document.getElementById("code").innerHTML=randCode;//产生随机验证码
  }
 </script>
 <div id="code">
  
 </div>
 <button οnclick="createRndCode()">验证码 </button>

</body>
</html>

DOM修改

DOM标准：

核心DOM	HTML DOM
可操作一切结构化文档的API	专门操作hHTML文档的简化版DOM API
包括HTML和XML	仅对常用的复杂的API进行了简化
万能	不是万能的
繁琐	简单

开发：先用简单的，再用复杂的补充——以实线效果为目标

修改属性：

核心DOM4个操作：

读取属性值：2种
- 先获得属性节点对象，再获得节点对象的值：
  
  var attrNode= elem.attributest[下标/属性名]；
  
  var attrNode=elem.getAttributeNode(属性名)
  
  attrNode.value——属性值
- 直接获得属性值
  
  var value=elem.getAttribute("属性名")；
修改属性值：elem.setAttribute("属性名"，value);

var h1=document.getElementById("a1");

h1.setAttributeNode("name",zhengyuemei);
判断是否包含指定属性：

var bool=elem.hasAttribute("属性名")

element.hasAttribute("属性名")//true或false

document.getElementById('bt1').hasAttribute('onclick');
移除属性：elem.removeAttribute("属性名")

<a id="alink" class="slink" href="javascript:void(0)"onlink="jump">百度搜索<a>

var a=document.getElementById('alink');

a.removeAttribute('class');

修改样式

内嵌样式：elem.style.属性名

强调：属性名：去横线，变驼峰

css:backgrouond-color=>backgroundColor

list-style-type=>listStyleType

4 DOM添加

添加元素步骤：

创建空元素

var elem=document.createElement("元素名")

var table+document.createElement('table');

var tr=document.createElement('tr');

var td=document.createElement('td');

var td=document.createElement('td');

console.log(table);
设置关键属性

a.innnerHTML="go to tmooc"

a.herf="http://tmooc.cn"

<a herf+"http://tmooc.cn">go to tmooc</a>

设置关键样式：

a.style.opacity="1";

a.style.cssText="width:100px;height:100px";
将元素添加到DOM树
- parentNode.appendChild(childNode)
  
  可用于将为一个父元素追加最后一个子节点
  
  var div=document.createElment('div');//创建一个元素div
  
  var txt=document.createTexNode("版权声明");//创建一个文本文件内容为“版权声明 ”
  
  div.appendChild(txt);//将txt文件内容放在div里面
  
  document.body.appendChild(div);//将创建好的div放到body里面
- parentNode,insertBefore(newChild,existingChild)
  
  用于在父元素中的指定子节点之前添加一个新的子节点

首页
联系我们

var ul=document.getElementById('menu');

var newLi=document.createElement('li');

u.insertBefore(newLi,ul.lastChild);

添加元素优化：

文档片段：内存中，临时保存多个平级子元素的虚拟父元素，用法和普通父元素完全一样。

创建片段：

var frag=document.createDocumentFragment();

2.将子元素div临时追加到frag种

frag.appendChild(div );

3.将frag追加到页面

parent.appendChild(frag);

强调：append之后，frag自动释放，不会占用元素。

5 BOM

BOM

专门操作浏览器窗口的API——没有标准，有兼容性问题

浏览器对象模型：

window	history	navigator	document	location	screen	event
代表整个窗口	封装当前窗口打开后，成功访问过的历史url记录	封装浏览器配置信息	封装当前正在加载的网页内容	封装当前窗口正在打开的url地址	封装了屏幕的信息	定义了网页中的事件机制

窗口大小：

完整窗口大小：

window.outerWidth/outerHeight

文档显示区大小：

window.innerWidth/innerHeight

定时器
- 定义：
  
  让程序按指定时间间隔自动自行任务
  
  网页动态效果、计时功能等
- 分类：
  
  周期性定时器：让程序按照指定时间间隔自动执行一项任务
  
  语法：
  
  setInterval(exp,time):周期性出发代码exp;
  
  exp:执行语句
  
  time：时间间隔，单位为毫秒
  
  setInterval(function(){
  
  console.log("Hello World");
  
  },1000);
  
  停止定时器：
  1. 给定时器取名：
    
    var timer=setInterval(function(){
    
    console.log("Hello World");
    
    },1000);
  2. 停止定时器
    
    clearInterval(timer);
  一次性定时器
  
  让程序延迟一段时间执行
  
  语法：
  
  setTimeout(exp,time):一次性触发
  
  exp:执行语句
  
  time：间隔时间，单位为毫秒。
  
  setTimeout(function(){
  
  alert("恭喜过关")
  
  }，3000)；
- 只要反复执行，就用周期性。之要执行一次，就用一次性。

魔方案例：
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8">
 <style type="text/css">
  *{
   margin: 0;
   padding: 0;

  }
  .container{
   width:300px;
   height: 300px;
   /*border: 1px solid #000;*/
   margin: 150px auto;//上下150px居中
   /*视觉距离*/
   perspective: 200000px;
  }
  .box{
   width: 300px;
   height: 300px;
   /*控制子元素3D转换*/
   transform-style: preserve-3d;
   /*测试代码，将盒子旋转*/
   transform: rotateX(45deg)rotateY(45deg);

  }
  .box-page{
   width: 300px;
   height: 300px;
   /*位置初始化*/
   position:absolute;
  }
  .top{
   background-color: red;
   transform: translateZ(150px);
  }
  .bottom{
   background-color:green ;
   transform: translateZ(-150px)rotateX(180deg);

  }
  .left{
   background-color: orange;
   transform: translateX(-150px)rotateY(-90deg);
  }
  .right{

转载于:https://www.cnblogs.com/evident/p/11598453.html

aiyanfa0733

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
JS用法

JSJavaScript是一种运行于JavaScript解释器/引擎中的解释性脚本语言。JS基本语法运行环境：1，独立安装的JS解释器（NodeJS）2，嵌入在【浏览器】内核中JS解释器解释型：运行前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。编译型：对源码进行编译，还能检查语法错误（C/...
复制链接

扫一扫