JavaScript

写在标签内

例：<button onclick=\"alert('js学习')\">按钮</button>

行内书写

写在script双标签中

例：<script>        alert('该学习了')    </script>

内嵌

单独创建一个后缀名为js的文件使用script的src属性进行引用

例：//外部 JavaScript.jsalert('认真学js')//内部 JavaScript.html<script src=\"../js/JavaScript.js\"></script>

外部

浏览器自带弹窗，有确认按钮 页面显示的内容就是写在小括号里面的内容（有阻断代码的效果）

例：alert('该学习了')

alert

弹窗，有输入框 有确认取消按钮 页面上显示的内容就是写在小括号里面的内容（有阻断代码的效果）

例：prompt('请输入你的年龄')

prompt

打印语句，在控制台查看 用于给前端程序员做提示

例：console.log('123');

console.log

script双标签内部如果有js代码就不能使用src属性引用外部的js（内部js和外部js不可以出现在同一个script双标签上）

行内js可读性差、可维护性差

使用内部js时，尽量写在结构的后面，防止js代码拿不到html结构的情况

alert和prompt都有阻断代码的效果，后面的代码都不会执行

console.log——程序员使用alert和prompt：用来给用户做提示

注意

输出语句

一个容器

用来存储数据的容器

本质：在内存中申请一块空地用来存放数据

变量

语法：var 变量名=变量值

例：// 存储a的值为1000        var a = 1000        // 输入a        console.log(a);

通过var关键字来声明一个变量

语法：var 变量名1，变量名2，变量名3；  变量名1=值，  变量名2=值，  变量名3=值，

一次性声明多个变量 并且分开赋值

语法：var 变量名1=值1，变量名2=值2；

一次性声明多个变量并赋值

通过var关键字来声明多个变量

由字母 数字 下划线（_） $组成

不能以数字开头（字母 下划线 $）

有语义化

get Element By Id---小驼峰（第一个首字母小写，后面的首字母大写）

Get Element By Id---大驼峰（所有首字母大写）

使用驼峰命名

不能使用关键字或者保留字命名（var class=123  var var=123）

变量命名的规范：

变量的声明

元素.innerHTML

获取元素

元素.innerHTML=新的内容

修改元素

语法1

元素.innerText

元素.innerText='新的内容'

语法2

innerHTML:可以识别标签

innerText：不能识别标签，将标签当作内容一起渲染

innerHTML和innerText的区别

例：// 1.获取标签        var box = document.getElementById('box')        // box.innerHTML = '新内容'        // 解决覆盖问题        box.innerHTML+='新内容'

解决覆盖问题

操作元素的内容

语法：元素.属性名

获取属性

语法：元素.属性名=新的属性值

修改属性

标签自带的一些属性

原有属性

语法：元素.getAttribute('属性名')

语法：元素.setAttribute('属性名'，'属性值')

程序员自己添加上的属性

非原有属性

操作属性

只能获取行内样式

例：<div id=\"box\" style=\"background-color:red ;\"></div>    <script>        var box=document.getElementById('box')        // 获取样式        console.log(box.style.backgroundColor);        </script>

获取样式：元素.style.样式名

例：<div id=\"box\" style=\"background-color:red ;\"></div>    <script>        var box=document.getElementById('box')        // 修改样式        box.style.backgroundColor='green'     </script>

修改样式：元素.style.样式名=样式值

语法：元素.style.cssText='样式值'

例：<style>        div {            width: 200px;            height: 200px;            background-color: aqua;        }    </style>    <div id=\"box\" style=\"background-color:red ;\"></div>     <script>        var box = document.getElementById('box')'        // 修改多个样式        box.style.cssText = 'width:200px;height:200px;background:green'    </script>

修改多个样式：批量修改

例：box.className = 'box'

通过属性（class）的方式修改样式tongg

1.box.className += ' box'2.box.className ='div box'3.清空类：box.className=''

解决类名覆盖问题

操作样式

语法：元素.classList.add()

例：box.classList.add('box')

添加类

语法：元素.classList.remove()

例：box.classList.remove('div')

移除一个类

扩展操作类

操作元素

js初体验

事件源——触发事件的元素

事件类型——通过什么方式触发的

事件处理函数——当事件触发之后要做什么事情

三要素

元素（事件源）.事件名（事件类型）=事件处理函数（当事件触发之后要做什么事情）

事件绑定的语句

box.onclick = function () {        }

单击事件

box.ondblclick = function (){        }

双击事件

离开事件

box.onmousedown = function () {        }

按下事件

box.onmouseup = function () {        }

抬起事件

box.onmouseenter = function () {        }

经过事件

box.onmousemove = function () {        }

移动事件

box.oncontextmenu = function () {        }

右击事件

常用事件

事件的分类

语法:input.value

修改内容:input.value=‘新的值’

单表签操作内容

事件

数值型（Number）——数字、小数、NaN

Number——数值型

字符串类型（String）——使用引号引起来的都是字符串

String——字符串类型

布尔类型（Boolean）——true（对）、false（错）

Boolean——布尔类型

null——空undefined——没定义或者未赋值

undefined和null——空

例：<script>        var a =10        console.log(typeof(a));//namber    </script>

语法1：typeof(变量名)

例：<script>        var a =10        console.log(typeof a);//namber    </script>

语法2：typeof 变量名

typeof——用来检测数据类型

数据类型

var a = 10//var a =0.1//NaN        console.log(typeof a);//数值型

var a=Infinity  //无穷大console.log(typeof a );//numbervar a=-Infinity  //无穷小console.log(typeof a );//number

数字 小数（浮点数） NaN

和谁都不相等，包括自己

当一些非法运算的时候返回值就是NaN

NaN和其他的数据进行操作 返回值也是NaN

NaN——not a number 不是一个数字（但归为数值型）

var a=10console.log(isNaN(a));//false 不对，他是一个数

语法：isNaN(变量名)

true：不是一个数

false：是一个数

isNaN——是不是 不是一个数？

会出现小数点精确度偏差的问题

var a=0.1var b=0.2console.log(a+b);//0.30000000004 console.log(a*100+b*100==0.3*100);

小数计算时可以转化为整数进行计算

关于浮点数：

var str='123'console.log(typeof str);//stringvar str='a'console.log(typeof str);//stringvar str1='NaN'console.log(typeof str1);//string4

使用引号引起来的都是字符串类型，有长度 有下标 可读不可写

语法：变量名.length

var str ='123456789'console.log(str.length);//字符串长度 9

返回值是字符串的长度

字符串的长度

语法：字符串[下标]

     var str ='abc'        //第一种方式        console.log(str[0]);//a        //第二种方式        console.log(str.charAt(2));//c

字符串的下标——可以通过下标来获取字符串中的字符

语法：字符串.charCodeAt()

数字0-9：48-57大写字母A-Z：65-90小写字母a-z：97-122console.log('A'.charAt());//65

获取码值

var a='100'        var b=true        var c =a+b        console.log(c);//100true        console.log(typeof c);//string        console.log(100+'10');//10010 string

语法：字符串+其他数据=字符串类型

字符串的拼接：

var a=true        var b=false        var str=string        console.log(typeof a);//boolean        console.log(typeof b);//boolean        console.log(typeof str);//报错

只有两种结果：true false

//1+x=2 2-1=x x=1        console.log(1+true);        // 1-x=1 1-1=x x=0        console.log(1-false);

参与运算时自动转换 true—1 false—0

undefined--声明了一个变量 但是没有赋值

null--没有值

=：赋值

==：判断 数值是否相等

===：严格判断 即判断数值是否相等也判断数据类型是否相等

=个数的区别

一个具体的事物都是一个对象，万物皆对象

以花括号（{}）包裹的，内部是以键值对的形式存在的的数据叫做对象

键值对：键名（key）：键值（value）

对象：名词

属性：形容词--用来描述对象张什么样子

方法：动词--这个对象可以做什么

对象中存在属性名和属性值，有方法，可以存储任何的数据类型

对象——object

1.var字面量的方式去声明一个对象

语法：var 对象名={ 属性名：属性值}

new关键字的方式

语法：var 对象名=new Object（写属性，方法）

声明一个对象

语法：对象名.属性名

获取值

语法：对象.属性名=’新的属性值‘

语法：对象名.新的属性名='新的的属性值'

添加属性

语法：对象名.方法名（）

使用方法

方法是以函数的形式存在的--方法中的函数都是匿名函数

属性和方法 或者和属性之间以逗号隔开，属性名和属性值之间是以（：）的形式存在

当一个变量要作为属性名放到一个对象中时，需要使用中括号的形式

注意点：

使用对象

函数是一个可以重复使用的代码块，函数可以实现代码的复用

语法：var 函数名=function() {代码块}

var fun=function(){            console.log(1);        }

函数声明不会执行，只有当调用的时候才会执行，不调用不执行

1.使用var

语法：function 函数名 （） {代码块}

function fun(){            console.log('函数');        }

2.使用function

声明函数

函数——function

语法：函数名（

function fun(){            console.log('函数');        }        fun()//函数

关于函数的调用

function fun(){var a=10}console.log(a);//报错fun()//函数

函数的花括号是一个单独的作用域，在内部声明的变量在外部无法使用

函数调用几次就执行几次，使用function声明的函数可以在声明之前调用

函数作用域

语法：var 数组名=[数据，数据]

使用关键字var

语法：var 数组名=new Array（数据）

使用new

语法：数组名.length

获取数组的长度

语法：数组名[下标]

获取数组中的某一元素

数组的声明

数组

复杂的数据类型

只能转换纯数字的字符串

var a ='10'        var b=Number(a)        console.log(b);//10        console.log(typeof b);//number

语法：Number（数据）

var a ='10a'        var b=Number(a)        console.log(b);//NaN        console.log(typeof b);//number

能转换的就转换，遇到不能转换的就放弃转换即使后面有能转换的也不转换了，直接返回已经转换的，如果开始就不能转换直接返回NaN，不可以转化小数

var a ='10'        var b=parseInt(a)        console.log(b);//10

var a ='10.9'        var b=parseInt(a)        console.log(b);//10

语法：parseInt （数据）

parselnt---转化成数值型

能转换的就转换，遇到不能转换的就放弃转换即使后面有能转换的也不转换了，直接返回已经转换的，如果开始就不能转换直接返回NaN

var a='10.9'        var b=parseFloat(a)        console.log(b);//10.9

语法：parseFIoat （数据）

var a='10.90000000123213'        var b=parseFloat(a).toFixed(2)//保留小数点后几位，默认取整数        console.log(b);//10.90

.toFixed（保留的小数位数，默认取整数

parseFloat--转化成数值型

console.log(Number(true));//1console.log(Number(false));//1console.log(Number(null));//0console.log(Number(undefined));//NaNconsole.log(parseInt(true));//NaN

Number（）只能转换纯数字的字符串，可以转换布尔值、null，但是parselnt、parseFloat不可以转换

parselnt只能转化成整数

parseFloat可以转化小数 可以通过tofexed（）控制小数位数

区别：

转换成数值型--Number（）

console.log(Boolean(1));//true        console.log(Boolean(0));//false        console.log(Boolean ('10'));//true        console.log(Boolean (100));//true        console.log(Boolean (-100));//true

语法：Boolean（数据

console.log(Boolean (0));//false        console.log(Boolean (''));//false        console.log(Boolean (null));//false        console.log(Boolean (undefined));//false        console.log(Boolean (false));//false        console.log(Boolean (NaN));//false

转化成false的情况

转换成布尔类型

console.log(typeof  String(true));//stringconsole.log(String(100));//100console.log(String(null));//nullconsole.log(String(undefined));//undefined

语法：String（数据）

String（）--转成字符串

var str=truevar a=str.toString()console.log(a);//trueconsole.log(typeof a);//string

var str=nullvar a=str.toString()console.log(a);//报错var str=undefinedvar a=str.toString()console.log(a);//报错

语法：数据.toString()

toString--转成字符串

String可以转化null undefined 但是同toString ()不能转换null undefined语法上也存在区别

转化成字符串类型

如果等号两边都是布尔值，调用Number（）-->number类型

一方是Number 一方是string 会将string类型调用Numer（）-->number类型

一方是Boolean 一方是string 将string调用Boolean（）--boolean类型

一方是Number 一方是Object 将object--调用的是ValueOf（）--number类型

一般隐士转化调用的都是 Number（） Boolean（）toString（）

关于==的隐士转换

数据类型的转换

用于执行两个变量之间的运算

+（加号、连接符）

如果两边都是字符串的情况下，就是进行字符串拼接

如果一般是字符串，一边是数值型类型，调用tostring方法将数值型转化成字符串，再进行拼接

加号两边都是字符串的话，调用Number（）方法，在进行加法运算

如果一方是对象，先调用tostring（）方法转成字符串，再进行计算

+加   -减   *乘   /除   %取余

算数运算符

在变量自身进行+1（++递增）或者是-1（--递减）

前置递增和迁至递减：先自身进行增加或减少，再进行运算（++a --a）

后置递增和后置递减：先进行运算再自身进行加1或减1（a++ a--）

++递增   --递减

递增递减运算符

== 双等 相等运算符，在对两个操作数进行比较之前，会将两个操作数转换成相同的类型，比较相等返回true，不相等则返回false。=== 三等 不会对操作数进行类型转换，只有当值相等并且类型也是相等时才会返回 true，否则返回false。> 大于 只有当左操作数大于右操作数时才返回 true，否则返回false。< 小于 只有当左操作数小于右操作数时才返回 true，否则返回false。>= 大于等于 只有当左操作数大于或者等于右操作数时才返回 true，否则返回false。<= 小于等于 只有当左操作数小于或者等于右操作数时才返回 true，否则返回false。！= 不相等 只有当操作数不相等时才返回true，否则返回false。如果两个操作数不是同一类型，会将操作数转为同一类型再进行比较。！== 不全等 操作数不相等或不同类型时返回 true，否则返回false。不会将操作数转为同一类型再进行比较。

>大于 < 小于  >=大于等于  <=小于等于

比较运算符

进行布尔值运算，返回值是布尔值，经常用于多个条件的判断

&& 逻辑与（和  并且） 符号两边返回都是成立的（true），则返回true，有一方不成立（false），则是返回false|| 逻辑或 只要符号两边有一方成立，返回值就是true，符号两边都是不成立的才会是false！ 非（取反） 原来是对的却反就变成错的 true--》false

&&与（和）   ||或者

逻辑运算符

= 等于 赋值+= 加等于 在原来的基础上进行相加- 减等于 在原来的基础的进行相减*= 乘等于 在原来的基础上乘等于

=   +=   -=

赋值运算符

小括号 （）                                    1一元运算符 ++    --    ！                 2算术运算符 +-*/                             3关系运算符 >< >= <=                   4相等运算符 == ===   ！=    ！== 5逻辑运算符 && || 先与后或             6赋值运算符 = +=                            7逗号 ，                                           8

运算符的优先级

运算符

语法：document.getElementById('div')

<div id=\"div\">内容</div>    <script>        var div=document.getElementById('div')    </script>

通过id的方式获取

语法：document.getElementsByTagName('div')

var div=document.getElementsByTagName('div')        div[0].innerHTML='div'

通过标签名的方式获取

语法：document.getElementsByClassName('box')

var box = document.getElementsByClassName('box')        box[0].innerHTML='华清远见'        box[1].innerHTML='还不错'

通过类名获取

语法：document.querySelector('div')

// 获取第一个// var box=document.querySelector('div')// var box=document.querySelector('.box')var box=document.querySelector('#bos')console.log(box);//识别选择器var box=document.querySelector('div ul li')console.log(box);

获取第一个

语法：document.querySelectorAll('div')

// 获取全部的标签var box=document.querySelectorAll('div')console.log(box);

获取全部的标签

1.getElementById   querySelector只会获取到一个元素，其他的都是伪数组

getElementById只可以通过id的方式获取，querySelector可以通过id  class标签名  选择器方式获取

- getElementsByTagName：通过标签名

- getElementsByClassName：通过类名的方式获取

- querySelectorAll  id  class   标签名  选择器方式获取

2.getElementsByTagName，getElementsByClassName，querySelectorAll获取到的都是一个集合，伪数组，有长度  有下标

3.H5新增是静态获取         id  class  标签名动态获

总结：

H5新增的

//获取bodyvar  body=document.body//获取Htmlvar html = document.documentElement

if(条件){//满足条件后执行代码}

单分支

if(条件){//满足条件后执行的代码}else{//不满足条件后执行的代码}

双分支

if(条件){//满足条件后执行的代码}else if(条件){//满足条件后执行的代码}else if（）条件{//满足条件后执行的代码}else{//以上条件都不满足执行的语句}

多分支

switch(条件){case 字符://满足条件后执行的代码break;//跳出循环default://以上条件都不满足后执行的代码break;//跳出循环}

switch

基本if选择结构： 处理单一或组合条件的情况

if-else选择结构：处理简单的条件分支情况

多重if选择结构：处理复杂的条件分支情况

嵌套if选择结构：用于较为复杂的流程控制

表达式的结果是boolean类型

常用于区间判断

if

多重分支，并且条件判断是等值判断的情况

常用于等值判断

if语句和switch 的区别

分支结构

条件？条件满足：条件不满足

语法

var num =10num>9?console.log('大于9'):console.log('小于9');

例

三目运算

流程控制

例：<div id=\"box\">JavaScript</div>    <script>// 1.获取标签// 在文档中通过id的方式获取到元素var box=document.getElementById('box')console.log(box)// 2.改变内容// console.log(box.innerHTML);JavaScript 标签中的内容// 改变标签中的内容box.innerHTML='new js'console.log(box.innerHTML);    </script>

var box = document.getElementById('box')        //<h1>js</h1>        box.innerText='<h1>js</h1>'        // 可以识别标签        box.innerHTML='<h1>js</h1>'        console.log(box.innerText)

例：<div id=\"box\" class=\"a1\">123</div>    <script>        var box=document.getElementById('box')        // 获取id的值        console.log(box.id)        // 获取class的值        console.log(box.className)         // 修改原有属性        box.className='a2'

例：<div id=\"box\" class=\"div\" a=\"22\

例：<div id=\"box\"></div>    <script>        // 1.获取元素        var box = document.getElementById('box')        // 2.点击事件        // 事件源——div        // 事件类型——点击        // 事件处理函数——让div显示“我被触发了”        box.onclick = function () {            box.innerHTML = \"我被触发了\"        }    </script>

//非法运算var a='abc'*'qwe'console.log(a);//NaN//NaN和其他的数据进行操作返回值也是NaNconsole.log(NaN+10);//NaNconsole.log(NaN*'abc');//NaN//和谁都不相等，包括自己也不相等console.log(NaN == 0.1);console.log(NaN == NaN);

JavaScript