JavaScript篇(学习中的思考与探索 啃完书后进行知识总体梳理 目前比较零碎)
2021,11.19(P3) 自废武功重修的第一步 按自己的节奏走 才是最好的路 别急别急别急 你可以
汇编语言即符号语言
高级语言:高级语言又主要是相对于汇编语言而言的，它是较接近自然语言和数学公式的编程，基本脱离了机器的硬件系统，用人们更易理解的方式编写程序
起源
JavaScript诞生于1995年,它的出现用于处理网页中的前端验证
前端验证:就是指检查用户输入的内容是否符合一定的规则(例子:用户名的长度,密码的长度,邮箱的格式等)
JS的特点
属于解释型语言(无需编译)
动态语言(下方有解读)
基于原型的面向对象(即 面向对象+原型 下方有解读)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- JS代码需要编写到script标签中 --> <script type=""> /* 控制浏览器弹出一个警告框 alert("哥,你真帅啊!!!"); */ /* 向页面中输出一个内容 document.write()可以想body中输出一个内容 document.write("看我出不出来~~~") */ /* 向控制台输出一个内容 console.log()的作用是向控制台输出一个内容 console.log("你猜猜我在哪出来呢?"); */ // alert("Hellow World!!!"); 三者都统称为输出语句 // document.write("要输出的哦!!!!"); // console.log("向控制台输出哈!!!"); </script> </head> <body> </body> </html>
2021,11,21
解读动态语言和静态语言(以下语句没有绝对的定义 仅提供帮助理解):
动态语言和静态语言最大的区别，在于可读性、可维护性的不同。
动态语言只适合写非常非常小的程序，中型以上的程序，通常要使用静态语言编写，才会比较容易维护
动态语言，是指程序在运行时可以改变其结构:新的函数可以被引进，已有的函数可以被删除等在结构上的变化，类型的检查是在运行时做的，优点为方便阅读，清晰明了，缺点为不方便调试
所谓的动态类型语言，意思就是类型的检查是在运行时做的，比如如下代码是不是合法的要到运行时才判断
静态类型语言的类型判断是在运行前判断(如编译阶段)，比如C#、java就是静态类型语言
静态语言是在编译时变量的数据类型即可确定的语言，多数静态类型语言要求在使用变量之前必须声明数据类型。 例如：C++、Java、Delphi、C#等。 动态语言是在运行时确定数据类型的语言。
静态类型语言的主要优点在于其结构非常规范，便于调试，方便类型安全;缺点是为此需要写更多的类型相关代码，导致不便于阅读、不清晰明了。动态类型语言的优点在于方便阅读，不需要写非常多的类型相关的代码;缺点自然就是不方便调试，命名不规范时会造成读不懂，不利于理解等
基于原型的面向对象
面向对象语言都会现有一个类的概念 ，先有类再有对象
JavaScript 没有类的概念，是基于原型的面向对象方式。它们的区别在于：
在基于类的面向对象方式中，对象（object）依靠类（class）来产生。
在基于原型的面向对象方式中，对象（object）则是依靠构造函数（constructor）和原型（prototype）构造出来的。可以移步这个大佬的文章
原型对象：在声明了一个函数之后，浏览器会自动按照一定的规则创建一个对象，这个对象就叫做原型对象。这个原型对象其实是储存在了内存当中。
在声明了一个函数后，这个构造函数（声明了的函数）中会有一个属性prototype，这个属性指向的就是这个构造函数（声明了的函数）对应的原型对象；原型对象中有一个属性constructor，这个属性指向的是这个构造函数（声明了的函数)
如何区别数据库和服务器?
看来了很多文章后:
数据库:一种存储数据的软件
服务器:就是我们能看到的硬件,那个黑箱子(可以直接搜索服务器图片 我相信看到了就秒懂了)
数据库(电子化的文件柜)是存放数据的仓库。它的存储空间很大，可以存放百万条、千万条、上亿条数据。但是数据库并不是随意地将数据进行存放，是有一定的规则的，否则查询的效率会很低
服务器作为电子设备，其内部的结构十分的复杂，但与普通的计算机内部结构相差不大，如：cpu、硬盘、内存，系统、系统总线等。 服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵
2021.11,22
radio:单选按钮
checkbox:复选按钮
textarea:实现文本域(自我介绍类较多文字的文本框)
submit是通过valus改变内部文字的
2021.11.23
console.log 控制台输出
script:脚本
document.write后面需要加分号吗?
这个世界上有许多语言。大量语言是不用分号作为EOS（End of Statement）的;
个人理解:
可以根据<<JavaScript权威指南>>里面的标准(注:在《javascript权威指南》中有一段话“如果一条语句以“（”、“[”、“/”、“+”、或“-”开始，那么它极有可能和前一条语句合在一起解释。”)执行,公众认可度较高而且大多数大佬着墨自己的见解较多,但最后也多少会绕到这本书里面的规定.
可以移步到这个大佬的文章 我读后很有收获 (昨天承诺给兄弟们补充这部分知识的) 11.24号下午六点这个<<JavaScript权威指南>>这本书到了 我读后 我提供给兄弟们的理解就是 可以按照林锐博士的高质量代码C 那种规范来使用 在我的理解内那种规范不会再Js里面出错 这些理解仅仅提供小伙伴们思路哈
html中href什么意思?
HTML中的href指的是超文本引用，它的值是任何有效文档的相对或绝对URL，包括标识符或Js代码段，一般用于a标签中来指定超链接跳转目标URL.
什么是URL? URL是Uniform Resource Locator的缩写，即统一资源定位系统，也就是我们通常所说的网址
什么叫做拓展名?
文件扩展名也叫文件的后缀名，是操作系统用来标志文件类型的一种机制。 一般一个扩展名是跟在主文件名后面的，由一个分隔符分隔。 比如，”QQ.exe”的文件名中，QQ是主文件名，exe是扩展名，表示这个文件是一个可执行程序
什么叫做耦合?
耦合（Coupling）表示两个子系统（或类）之间的关联程度，当一个子系统（或类）发生变化时对另一个子系统（或类）的影响很小，则称它们是松散耦合的；反之，如果变化的影响很大时，则称它们是紧密耦合的。耦合的强弱取决于模块间接间的复杂性、引用模块的位置和数据的传送方式等。设计时应尽量使模块间的耦合度（Coupling degree）小，模块间的耦合度直接影响系统的可理解性、可测试性、可靠性和可维护性 [6]
耦合也可分为七级 耦合度应越低越好
JS最好代码写在外部 与CSS类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<!-- 可以讲Js代码编写到外部Js文件中,然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用,也可以利用浏览器的缓存机制
推荐使用的方式-->
<!-- script标签一旦用于引入外部文件了,就不能再编写代码了,即使编写了浏览器也会忽略
如果需要则可以再创建一个新的scirpt标签 -->
<script type="text/javascript" src="../script.js"></script>
<script type="text/javascript">alert("我是内部的Js代码");</script>
<!--
可以将Js代码编写到script标签中
<script type="text/javascript">
alert("我是scirpt标签中的代码!!!");
</script> -->
</head>
<body>
<!-- 可以将Js代码编写到标签的onclick属性中
当我们点击按钮时,Js代码才会执行 -->
<button onclick="alert('你点我干嘛~~');">点我一下</button>
<!--
可以将Js代码写在超链接的href属性中,这样当点击超链接时,会执行Js代码
虽然可以写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
-->
<!-- <a href="javascript:alert('让你点你就点!!!');">你也点我一下</a> -->
<a href="javascript:;">你也点我一下</a>
</body>
</html>注意要点:1.要合理使用注释,使用多行注释和单行注释都要使用,而且多行注释(/**/)和单行注释(//),注释中的内容不会被执行,但是可以在源代码中查看
2.要严格区分大小写
3.Js中会忽略多个空格和换行对代码进行格式化
Token是什么？
所谓的Token，其实就是服务端生成的一串加密字符串、以作客户端进行请求的一个“令牌”
在计算机身份认证中是令牌（临时）的意思，在词法分析中是标记的意思。一般作为邀请、登录系统使用。。
1.字面量 即常量 同时字面量都是可以直接使用的,但我们一般不会直接使用字面量
2.使用关键字var来声明一个变量 同时可以进行描述 且 声明和赋值可以同时进行
var age = 10;3.所谓规范就是大家都习惯的方式
4.标识符:
-在Js中所有的可以由我们自主命名的都可以称为是标识符
例如:变量名,函数名,属性名都属于标识符
命名一个标识符:1.标识符中可以含有字母,数字,_,$
2.标识符不能以数字开头
3.标识符不能是ES中的关键字或保留字(可以查阅W3school)
JavaScript 保留词
https://www.w3school.com.cn/js/js_reserved.asp
JavaScript 保留词
4.标识符一般都采用驼峰命名法
首字母小写,每个单词的开头字母大写,其余字母小写
例子:helloWorld xxxYyyZzz
5.Js底层保存标识符时实际上时采用的Unicode编码, 所以理论上讲, 所有的utf-8中含有的内容都可以作为标识符
注:建议兄弟们移步大佬博客 理解 utf-8与Unicode编码:
彻底弄懂 Unicode 编码 - crazyYong - 博客园
彻底弄懂 Unicode 编码 - crazyYong - 博客园
简介utf-8:UTF-8 是一个非常惊艳的编码方式，漂亮的实现了对 ASCII 码的向后兼容，以保证 Unicode 可以被大众接受。
简介:Unicode编码:
一种标准方案来展示世界上所有语言中的所有字符.Unicode 当然是一本厚的字典，记录着世界上所有字符对应的一个数字。Unicode 给所有的字符指定了一个数字用来表示该字符。
2021,11.24
*
* 数据类型指的就是字面量的类型
* 再Js中一共有六种数据类型
* Sring 字符串
* Number 数值
* Boolean 布尔值
* Null 空值
* Undefined 未定义
* Object 对象
* 其中Srtring Number Boolean Null Undefined属于基本数据类型
* 而Object属于引用数据类型
* String字符串
* 在Js字符串需要使用引号扩起来
* 使用双引号或单引号都可以,但不要混着用
* 引号不能嵌套,双引号不能放双引号,单引号不能放单引号
*
* 在字符串种我们可以使用\作为转义字符,
* 当表示一些特殊符号时可以使用\进行转义
* \" 表示 "
* \' 表示 '
* \n 表示换行
* \t 是制表符(相当于摁了一次Tab键)
* 输出\ 则 \\
2021, 11.25
// Js中可以表示的数字的最大值
// Number.MAX_VALUE 表示的是1.7976931348623157e+308
// Infinity代表无穷大 是个字面量(就是常量)
// 如果使用Number表示的数字超过了最大值,则会返回一个Infinity 表示正无穷
// NaN 是一个特殊的字符 表示 Not a Number
不要用Js进行精确度较高的运算
// Js里面没有解决浮点数精确的计算
/*
在Js中所有的数值都是Number类型
包括整数和浮点数(小数)
typeof 来检查一个变量的类型
语法: typeof 变量
*/
/*
Boolean 布尔值
布尔值只有两个 主要用来做逻辑判断
true
表示逻辑上的真
false
表示逻辑上的假
*/
Null类型的值只有一个,就是null
null这个值专门用来表示一个为空的 对象
使用typeof检查一个null值时,会返回object
Undefinded (未定义) 类型的值只有一个, 就undefind
当声明一个变量,但是并不给变量赋值时,它的值就是undefined
使用typeof检查一个undefined时也会返回undefined
Js中有几种数据类型?有几种基本数据类型?(有些面试会问)
强制类型转换
指将一个数据类型强制转换为其他数据类型
类型转换主要指,将其他数据类型,转换为
String Number Boolean
转换成Null 和 Object是没有意义的\
将其他数据类型转换为String
方式一:
调用被转换数据类型的toString()方法
该方法不会影响原变量 仅仅将结果转换
调用什么什么的方法就是 什么什么.什么什么
例子: 调用a的toString()方法
调用xxx的yyy()方法,就是 xxx.yyy()
方式二:
调用String()函数,并将被转换的数据作为参数传递给函数
调用什么函数 直接写 例子: String();h
null和undefined 就不会调用toString()方法;
它会将null直接转换为"null"
将undefined直接转换为"undefined"
调用什么什么的方法就是 什么什么.什么什么
例子: 调用a的toString()方法
调用xxx的yyy()方法,就是 xxx.yyy()
在Js中,如果需要16进制的数字,则需要以0x(零艾克斯)开头
如果需要表示8进制的数字,则需要以0(零)开头
如果要表示2进制的数字,则需要以0b(零比)开头
但是不是所有的浏览器都支持
像"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10进制解析
a = "070"
//可以在parseInt()中传递一个第二参数,来制定数字的进制
例子:a = parseInt(a,10)
// 将其他的数据类型转换成Boolean
// 使用Boolean()函数
// 调用Boolean()函数来将a转换为布尔值
除了0(null)和NaN,空串业是false,其余的都是true
对象也会转换成true
2021,11.26
运算符
// 运算符也叫操作符
// 通过运算符可以对一个或多个值进行运算,并获取运算结果
// 比如: typeof就是运算符,可以来获得一个值的类型
// 它会将该值的类型以字符串的形式返回
// number string boolean undefined object
// 双引号必须在同一行
// 任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
// 我们可以利用这一特点,来将任意的数据类型转换为String
// 我们只需要为任意的数据类型 + 一个"" 即课将其转换为String
// 这是一种隐式的类型转换,由浏览器自动完成,实际上他也是调用String函数
// 当对非Number类型进行运算时,
// 会将这些值转换为Number然后再运算任何值和NaN做运算都得NaN
一元运算符,只需要一个操作数
+正号
-负号
对于非Number类型的值
它会将它先转换为Number,然后再运算
可以对一个其他的数据类型使用+,来及那个其转换number
它的原理和Number()函数一样
例子 var a = "1213";
a = +a; 此时以及转换为number
// a++的值等于原变量的值(自增前的值) // ++a的值等于新值 (自增后的值)
//为任意的数据类型做两次非运算,即可将其转换为布尔值
例子: var a = 123;
a = !!a; //true;
第一个值为false,不会检查第二个指
例子: false && alert("213"); //此时alert不会被执行
与运算:如果两个值都为true,则返回后边的
例子: var ans = 8 && 2;//返回2
逻辑运算符就是 非(!) 与(&&) 或(||)
非数值情况会将非数值转换成Number 再进行比较
任何值和NaN进行比较时候都是 false
如果字符两侧的值都是字符串时,不会将其转换为数字进行比较,而回分别比较字符串中的字符的Unicoude编码
如果比较两个字符串 一定要转型 可能会得到不可预测的结果
编码是一位一位比较的
== 会做自动的类型转换 大部分情况转换为数字(Number)
NaN不和任何值相等,包括他自身
可以通过isNaN()函数来判断一个值是否是NaN;
=== 全等 用来判断两个值是否相等,它和相等类似,不同的是它不会做自动的类型转换 如果两个值的类型不同, 直接返回false !== 不全等 用来判断两个值是否不全等,和不等类似,不同的是它不会自动的类型转换 如果两个值的类型不同,直接返回true条件运算符也叫三目运算符(和C里面的三目运算符类似)
语句(statement)语句是程序的基本单位 Js也是默认从上往下执行Js中的代码块,只具有分组的作用,没有其他的用途
{} 仅仅起到分组的作用
2021.11.28
看到的数据类型不是 String Number Boolean Null Undefined 就为对象 0bject
// 值和值之间没有任何联系
// 主要学习的就是Object
// 在Js中表示一个人的信息()
对象属于一种复合数据类型,在对象中可以保存多个不同数据类型的属性
对象的分类
1.内建对象
ES标准中定义的对象,在任何ES的实现中都可以使用
比如 Math String Number Boolean Function Object.......
2.宿主对象
由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
比如 BOM(浏览器对象模型) DOM(文档对象模型)
例子: docuemnt.write() 这二者里面的 document 和 console属于对象无需自己创建
console.log()
3.自定义对象
由开发人员自己创建的对像
/* 读取对象中的属性 语法,对象,属性名 */ /* 修改对象的属性值 语法: 对象.属性名 = 新值 */ // obj.name = "小可爱"; /* 删除对象的属性 语法: delete 对象.属性名 */对象可以视为一个容器
向对象中添加属性
属性名:
对象的属性名不强制要求遵守标识符的规范
什么名字都可以使用,但最好以标识符规范去做
如果要使用特殊的属性名,不能采用 .的方式来操作
需要使用另一种方式
语法: 对象["属性名"] = 属性值
obj["123"] = 789;
使用[]这种形式去操作属性,更加的灵活,
在[]中可以直接传递一个变量, 这样变量值使多少就会读取那个属性
属性值
Js对象的属性值,可以是任意的数据类型
甚至也可以是一个对象
in 运算符 用来检查一个对象中是否含有指定的属性
通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true,没有则返回false
语法
"属性名" in 对象
什么是API?
程序员只需要简单地调用这些函数就可以完成复杂的工作，让编程变得简单有趣。这些封装好的函数，就叫做API(Application Programming Interface)，即应用程序编程接口。
说得更加通俗易懂一些，别人写好的代码，或者编译好的程序，提供给你使用，就叫做API。你使用了别人代码（或者程序）中的某个函数、类、对象，就叫做使用了某个API。
API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。——百度百科
什么是API？（看完你就理解了）_lph-China的博客-CSDN博客_api是什么
OS:(operating system) 即操作系统 操作系统（operating system，简称OS）是管理计算机硬件与软件资源的计算机程序。操作系统需要处理如管理与配置内存、决定系统资源供需的优先次序、控制输入设备与输出设备、操作网络与管理文件系统等基本事务。操作系统也提供一个让用户与系统交互的操作界面。------百度百科
什么是XML?
XML(Extensible Markup Language) ( 其实我在思考为啥不是EML然后我发现这和邮件简称出现重合 所有才叫XML ---来自菜鸡小卓的推测): 即扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言
2021,12.24
什么是方法?
在类中的函数叫方法,不在类中的函数叫函数
方法和函数的区别:
同: 1.都是通过名字来进行调用.
不同: 1. 所有传递给函数的数据都是显示传递的函数和对象无关.
而方法中的数据是隐式传递
2.方法它跟一个对象相关联. 方法可以操作类内部的数据 (注释: 对象是类的实例化 ----类定义了一个数据类型,而对象是该数据类型的一个实例化)
什么是重载?
重载(即overload),它是指我们可以定义一些名称相同的方法,通过定义不同的输入参数来区分这些方法,然后再调用时,VM就会自动根据不同的参数样式,来选择合适的方法执行.
同时: overload最常见于java的编写过程中,是面向对象程序设计(Object Oriented Programming)的特征之一.
VM:VM主机简称VM,成为VM服务器.VM主机是灵动网络利用虚拟机(Virtual Machine)技术,将一台服务器分割成多个虚拟机(即VM主机)的优质服务.
重载,从简单说就是,函数或者方法有相同的名称.但参数列表不同的情形,这样的同名不同参数的函数或者方法之间,互相称之为重载函数或者重载方法.在Java中同一类中的2个或者2个以上的方法可以有同一个名字,只要他们的参数声明不同即可.这种情况下,该方法就被称为重载: 大佬的理解"为了省了给方法重新命名,差不多都用一个"
为什么需要重载?
1.重载的最直接作用是方便了程序员可以根据不同的参数个数，顺序，类型，自动匹配方法，减少写过个函数名或方法名的重复步骤。
2. 方法重载的主要好处就是不用为了对不同的参数类型或参数个数，而写多个函数。
为什么需要VM?
说白了:VM是为了缓解 电脑执行程序占用内存很大或者很多时导致的内存消耗殆尽
以下为一位大佬的理解:
什么是重载？重载的作用？_Thinkingcao的专栏-CSDN博客_重载
注: 若将单个字符用双引号括起来 编译器会报错
2021.12.25
字面量就是指这个量本身，比如字面量3。也就是指3. 再比如 string类型的字面量"ABC", 这个"ABC" 通过字来描述 就是一眼就知道的量
基本数据类型 String Number Boolean Null Undefined 引用数据类型 Object
基本数据类型和引用数据类型的区别?
内存分两大块:
栈内存:基本数据类型的值直接在栈内存中存储
值与值之间是独立存在,修改一个变量不会影响其他的变量
堆内存: 对象(即引用数据类型) 是保存到堆内存中的(看到new Object 就是在堆内存中开辟出来一个新的空间 专门用来保存对象的) 栈内存中保存的是堆的地址 每创建一个新的对象,就会在堆内存中开辟出一个新的空间 而变量保存的是对象内存地址(对象的引用) 如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也会受到影响
当比较两个基本数据类型的值时,就是比较值
而比较两个引用数据类型时,它是比较的对象的内存地址
如果两个对象是一模一样的,但是地址不同,它也会返回false
基本数据类型保存的是值,而引用数据类型保存的是地址
12.26
DOM(即文档对象模型) : 处理网页内容的方法和接口
BOM(即浏览器对象模型): 与浏览器交互的方法和接口
DOM是W3C的标准(所有浏览器公共遵守的标准)
BOM是各个浏览器厂商根据DOM在各自浏览器上的实现(表现为不同浏览器定义有区别,实现方式不同)
/*
使用对象字面量,可以在创建对象时,直接指定对象的属性
语法:{属性名:属性值,属性名;属性名...}
属性名可加可不加双引号 例子: "name":"猪八戒" 效果与 name:"猪八戒" 等同
属性名和属性值是一组一组的名值结构
名和值之间使用 : (即冒号) 连接,多个名值之间使用 , (即逗号) 隔开
如果一个属性之后没有其它属性了,就不要写 逗号
*/
var obj = {
name:"猪八戒",
age:"28",
gender:"男",
test:{name:"沙和尚"}
};
console.log(obj);
函数的三种表达形式:
/*
函数 function
函数也是一个对象
函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
函数中可以保存一些代码在需要的时候调用
使用typeof检查一个函数对象时候,会返回function
万物皆对象
*/
//创建一个函数对象
//可以将封装的代码以字符串的形式传递给构造函数;
//var fun = new Function("document.write('Hello 这是我的第一个函数')");
/*封装到函数中的代码不会立即执行
函数中的代码会在函数调用的时候执行
调用函数语法: 函数对象()
当调用函数时候,函数中封装的代码会按照顺序执行
*/
/*
我们在实际开发中很少使用构造函数来创建一个函数对象
一般使用函数声明来创建一个函数
语法：
function 函数名（[形参1，形参2，。。。形参n]） []即中括号代表可选 写不写都行
{
语句 {}大括号语句代表函数体
}
*/
function fun2()
{
console.log("这是我的第二个函数~~~~");
alert("哈哈哈哈");
document.write("!!!!!!");
}
console.log(fun2);
/*
console.log(fun);
调用fun2
*/
//fun2();
/*
使用函数表达式 来创建一个函数
var 函数名 = function([形参1，形参2.。。。。形参N]);
*/
var fun3 = function()
{
console.log("我");
};函数的形参与实参
/*
定义一个用来求两个数和的函数
可以在函数的（）中指定一个或多个形参（形式参数）
多个形参之间使用 ，即逗号 隔开 声明形参就相当于在函数内部声明了对应的变量
但并不赋值
*/
function sum(a,b)
{
document.write(a+b);
}
/*
在调用函数时，可以在（）中指定实参（实际参数）
实参将会赋值给函数中对应的形参
*/
// sum(123,456);
/*
调用函数时解析器不会检查实参的类型
所以要注意，是否有可能会接收到非法参数，如果有可能则需要堆参数进行类型的检查
调用函数时候，系欸想起也不会检查实参的数量 多余实参不会被赋值
如果实参的数量少于形参的数量，则没有对应实参的形参将时undefined
*/
//sum(123,"sad");
sum(123,123,3123,3213);2022,1,4
函数一般使用其返回结果
函数中 return 后的语句都不执行
return; 即return 后不跟值 或者 不加return 都是返回undefined
在JS中 return可以返回任意类型的值
2022,1,14
script:脚本语言 又称扩建的语言
如今还有没有必要在script标签中添加type="text/javascript"
在HTML规范中,script的type属性默认是text/javascript,所以可以省略;但是在HTML4.01和XHTML1.0规范中,type属性是必须的. (注: XHTML是比HTML更严谨 但基本一样)
parseInt:意思是 解析整型;将字串转换成小数 在Js中则是 函数解析字符串并返回整数.
2022,1,15
处理了多参数问题 创建一个对象打包输入
例子:
function sayHello(o)
{
document.write("我是" +o.name+ "，今年我" +o.age+ "岁了，" + "我是一个" +o.gender+ "人" + "我住在" +o.address);
}
//sayHello("孙悟空", 18, "男", "花果山");
var obj = {
name:"孙悟空",
age:18,
gender:"男",
address:"花果山"
}
sayHello(obj);立即执行函数:
例子
(function (a,b)
{
document.write("a ="+a+ "<br/>");
document.write("b ="+b);
})(123,346);函数也可以成为对象属性,
如果一个函数作为一个对象的属性保存,
那么我们称这个函数是这个对象的方法
调用函数就说明调用对象的方法,
例子:
var obj = {
name:"孙悟空"
}
obj.sayName = function (){
document.write(obj.name);
}
obj.sayName();调函数和调方法没有本质的区别
obj.sayName() //带有 · 则为调方法
fun() // 不带·则为调函数
调函数和调方法本质上是一样的
2022,1,16
为了实现枚举对象中的每一个属性
使用for...in 语句
语法:
for (var 变量 in 对象){
}
其中变量为对象中的属性名
循环执行的次数由对象中 属性名的属性决定
作用域(Scope)
作用域 作用域指一个变量作用的范围 在JS中一共有两种作用域” 1.全局作用域(在任何位置都可以访问到) 直接编写在script标签中 全局作用域在页面打开是创建，在页面关闭时销毁 在全局作用域中有一个全局对象window， 它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用 在全局作用域中： 创建的变量都会作为window对象的属性保存 创建的函数都会作为window对象的方法保存 在全局作用域无法访问到局部 2.局部作用域（也叫函数作用域）在函数作用域中可以访问到全局作用域的变量 每次调用一次函数就会创建一个新的函数作用域，他之间是互相独立的当在函数作用域中操作一个变量时,它会现在自身作用域中寻找,如果有则直接使用
如果没有再向上一级(不一定是全局)作用域中寻找 直到找到全局作用域
如果全局作用域中依然没有找到,则会报错ReferenceError
在函数中想要访问全局变量可以使用window对象
在函数作用域中也有声明提前的特性： 使用var 关键字声明的变量，会在函数中所有的的代码执行之前被声明 函数声明也会在函数中所有的代码执行之前执行在函数中没有var 声明的变量就是都会成为全局变量var c = 33; function fun5(){ // document.write("c = "+c); c = 10; } fun5(); document.write(c);
/*
定义形参就相当于在函数作用域中声明了变量(即var 了一个变量)
*/
function fun6(e){
var e;
alert(e);
}
形参和实参
形参: 形式参数
定义函数时,可以在()中定义一个或者多个形参,形参之间使用 逗号 隔开
定义形参就相当于在函数内声明了对应的变量但是并不赋值,
形参会在调用时才赋值
实参: 实际参数
调用函数时,可以在()传递实参,传递的实参会赋值给对应的形参,
如果实参的数量大于形参,多余实参将不会赋值
如果实参的数量小于形参,则没有对应实参的形参将会赋值undefined
下列这个代码 案例 就是undefined 或一些较不好理解的情况
/*var a = 100; function fun(){ document.write(a); var a = 200; } fun(); */ 上下这两段代码等价 function fun(){ var a; document.write(a); a = 200; } fun();function fun(a) { document.write(a); } fun(); 上面有形参但是却没有对应的实参 所有也为 undefinedfunction fun(a) { document.write(a); a = 456; } fun(123); 这段代码中的 a修改的是局部的 a
方法和对象
方法（method）是通过对象调用的javascript函数。也就是说，方法也是函数，只是比较特殊的函数。
函数（function）是一段代码，需要通过名字来进行调用。它能将一些数据（函数的参数）传递进去进行处理，然后返回一些数据（函数的返回值），也可以不返回数据。
当将函数和对象和写在一起时，函数（function）就变成了方法（method）
function fun(a, b){ document.write(this); } var obj = { name:"孙悟空"， sayName:fun }; obj.sayName(); 此时的调用 fun就称之为方法
this:
/* 解析器在调用函数每次都会向函数内部传递进一个隐含的参数， 这个隐含的参数就是this this是个参数（与a,b都是没有区别的 只不过是由浏览器创建的） this指向的是对象 这个对象我们称为函数执行的上下文对象 根据函数的调用方式的不同，this会指向不同的对象 1.以函数的形式调用时，this永远都是window 2.以方法的形式调用时, this就是调用方法的那个对象 this是浏览器传过来的 *function fun(){ console.log(this.name); } var obj = { name:"孙悟空", sayName:fun } var obj2 = { name:"沙和尚", sayName:fun }; obj2.sayName();
this 让程序更加灵活
/* this 让程序更加灵活 */ var name = "全局"; function fun(){ console.log(this.name); } var obj = { name:"孙悟空", sayName:fun } var obj2 = { name:"沙和尚", sayName:fun } obj2.sayName();
当创建一个对象的时候 注意注意注意 var obj = new Object 此处的O是大写
优雅的创建对象(使用工厂方法创建对象)
var obj = { name:"孙悟空", age:18, gender:"男", sayName:function(){ alert(this.name); } }; /* 使用工厂方法创造对象 通过该方法可以大批量的创建对象 */ function createPerson(name, age, gender){ var obj = new Object(); obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function() { alert(this.name); } return obj; } var obj2 = createPerson("猪八戒", 28, "男"); var obj3 = createPerson("蜘蛛精", 16, "女"); obj3.sayName();
2022,1,17
将函数定义在全局作用域,污染了全局作用域的命名空间
最好不要在全局作用域定义函数 在实践项目开发中 容易被覆盖
原型 prototype
我们所创建的每一个函数，解析器都会向函数中添加一个属性 prototype
这个属性对应着一个对象，这个对象就是我们所谓的原型对象
如果函数作为普通调用prototype时是没有任何作用的
当函数以构造函数调用时，它所创建的对象都会有一个隐含的属性，
指向该构造函数的原型对象，我们可以通__proto__来访问该属性
原型对象就相当于一个公共区域，所有同一类的实例都可以访问到这个原型对象
我们可以将对象中共有的内容，统一设置到原型对象中
当我们访问对象的一个属性或方法时，它会现在对象自身中寻找 如果有则直接使用
如果没有则去对象自身的原型对象中去找
我们创建函数时，可以将这些对象共有的属性和方法，统一添加到构造的原型对象中
这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
//可以使用对象的hasOwnProperty(）来检查对象自身是否含有该属性
hasOwnProperty()存在于原型的原型中
document.write(mc.hasOwnProperty("name"));
//使用对象in检查对象中是否含有某个属性时，如果对象中没有，原型中有也会返回true
//in验证对象中是否有某个属性
document.write("name" in mc);
toString()是一种将其他数据转换成数字的方法
栈内存和堆内存(这里的堆内存和数据结构中的堆不一样)
栈内存:存储基本类型的变量,对象的引用和方法的调用
堆内存:存储所有new出来的对象和数组
垃圾回收 （GC） 设置为 null 会自动回收垃圾 程序运行过程中产生垃圾 当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象 此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢 所有这种垃圾必须进行清理； 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁 我们不需要也不能进行垃圾回收的操作
对象分为 内建对象 宿主对象 自定义对象 (前两者也都是自定义来的 不过是浏览器自定义的)
数组(Array)
数组也是一个对象
它和我们普通对象功能类似,也是用来存储一些值的
不同的是普通对象是用字符串来做属性名的
而数组使用数字来作为索引操作元素(和属性本质一样)
/* 向数组中添加元素 语法： 数组【索引】 = 值 *//* 获取数组的长度 可以使用length属性来获取数组的长度 语法： 数组。length 尽量不要创建非连续的数组 对于连续的数组，使用length可以获取到数组的长度（元素的个数） 对于非连续的数组，使用length会获取到数组的最大的索引+1 *///向数组的最后一个位置添加元素 arr[arr.length] = 80;//使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数床传递 //元素之间使用 使用 逗号 隔开//字面量的形式来 创建一个数组数组中只有一个元素 arr = [10];//数组中的元素可以是任意的数据类型 arr = ["hello",1,true,null,undefined]; //也可以是对象 其实对象中已经包含函数了 var obj = {name: "孙悟空"}; arr[arr.length] = obj //也可以是一个函数 arr = [function (){}, function (){}]; //数组中也可以放一个数组 这种称为二维数组 arr = [[1,2,3],[3,4,5],[5,6,7]];
2022,1,19
/*
concat()可以连接两个或多个数组,秉将新的数组返回
该方法不会对原数组产生影响
*/
// var result = arr.concat(arr2);
/*
join()
该方法可以将数组转换为一个字符串
该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符
如果不指定连接符,则默认使用 逗号 作为连接符
*/
/*
reverse()
该方法用来反转数组(前面的去后边,后边的去前面)
该方法直接修改原数组
*/
/*
sort()
可以用来对数组中的元素进行排序
也会影响原数组 , 默认会按照Unicode编码进行排序
即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序
所以对数字进行排序时,可能会得到错误的结果.
我们可以自己来指定排序的规则
我们可以在sort()添加一个回调函数,来指定排序规则
回调函数需要定义两个形参
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定,但是肯定是在数组中a一定在b前边
浏览器会根据回调函数的返回值来决定元素的顺序,
如果返回一个大于0的值,则元素会交换位置
如果返回一个小于0的值,则元素位置不变
如果返回一个0,则认为两个元素相等,也不交换位置
如果需要升序排列,则返回a-b
如果需要降序排序,则返回b-a
*/
var arr = [5,4];
arr.sort(function (a,b){
if (a > b){
return 1;
}else if (a < b){
return -1;
}else {
return 0;
}
});
console.log(arr); /*
call()和apply()
这两个方法都是函数对象的方法,需要通过函数对象来调用
当对函数调用call()和apply()都会调用函数执行
在调用call和apply()可以将一个对象指定为第一个参数
此时这个对象将会成为函数执行时的this
区别
call()方法可以将实参在对象之后依次传递
apply()方法需要讲实参封装到一个数组中统一传递
fun.call(obj,2,3);
fun.apply(obj,[2,3]);this的情况
1.以函数形式调用时,this永远是window
2.以方法的形式调用时,this是调用方法的对象
3.以构造函数的形式调用时,this是新创建的那个对象
4.使用call和apply调用时,this是指定的那个对象
/*
在调用函数时,浏览器每次都会传递两个隐含的参数,
1.函数的上下文对象this
2.封装实参的对象arguments
arguments是一个类数组对象(不是数组)
arguments是一个类数组对象,也可以通过索引来操作数组,也可以获取长度
在调用函数时,我们所传递的实参都会封装在arguments中保存
arguments.length可以用来获取实参的长度
我们即使不定义形参,也可以通过arguments来使用实参,
只不过比较麻烦
arguments[0] 表示第一个实参
*/
function fun(){
document.write(arguments[0]);
}
fun("hello",true);
2022,1,20
/*
Date对象
在JS中使用Date对象来表示一个时间
*/
//创建一个Date对象
//如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
var d = new Date();
document.write(d);
/*
创建指定的时间对象
需要在构造函数中传递一个表示时间的字符串作为参数
日期的格式 月份/日/年 时:分:秒
年份要写完整避免出现歧义
*/
var d = new Date("12/03/2011 11:10:30");
document.write(d);
/*
getDate()
获取当前日期对象是几日
getDay()
获取当前日期对象是周几
会返回一个0-6的值
0表示周日
1表示周一
...
getMonth()
获取当前时间的月份
会返回一个0-11的值
0表示1月
1表示2月
...
getFullYear()
获取当前对象的年份
getTime()
获取当前日期对学校的时间戳
时间戳,指从格林威治时间1970年1月1日到目前所经过的毫秒数
1秒=1000毫秒
计算机底层在保存时间时都是时间戳
获取当前的时间戳
time = Date.nwe() //是本行代码执行的时间戳
*/
var d = new Date("12/03/2011 11:10:30");
var date = d.getDate();
document.write("date = "+date);
//document.write(d);
/*
Math
Math和其他的对象不同,他不是一个构造函数
它属于一个工具类不用创建对象,他里边封装了数学运算相关的属性和方法
说白了 可以直接使用
比如Math.PI 表示圆周率
*/数据类型分为 基本数据类型(String Number Bollean Null Undefined) 和 引用数据类型(Object)
在JS中为我们提供了三个包装类,通过这三个包装类可以讲基本数据类型转换为对象
String()
可以将基本数据类型字符串转换为String对象
Number ()
可以将基本数据类型转换为 Number
Boolean()
可以将基本数据类型的布尔值转换为Boolean对象
如果使用基本数据类型的对象,在进行比较时可能会带来不可预期的结果
/*
正则表达式用于定义一些字符串的规则
计算机可以根据正则表达式,来检查一个字符串是否符合规则
或者将字符串中符合规则的内容提取出来
*/
/*
创建正则表达式的对象
语法:
var 变量 = new RegExp("正则表达式", "匹配模式");
使用typeof检查正则表达式,会返回object
在构造函数中可以传递一个匹配模式作为第二个参数
可以是
i 忽略大小写
g 全局匹配模式
*/
var reg = new RegExp("a");
var str = "A";
/*
正则表达式的方法
test()
使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
严格区分大小写
如果符合则返回true,否则返回false
*/
var result = reg.test(str);
document.write(result); /*
使用字面量来创建正则表达式
语法: var 变量 = /正则表达式/ 匹配模式
*/
// var reg = new RegExp("a","i"); 等价于 reg = /a/i;
使用字面量的方式创建更加简单
使用构造函数创建更加灵活
//创建一个正则表达式,检查一个字符串中是否有a或者b
reg = /a|b/; //里面的竖线代表 或者 的含义
reg = /[ab]/ // 中括号也表示或者的意思
reg = /[a-z]/ //表示a到z [A-Z]任意大写字母 [A-z]表示任意字母
/*
[^ ] 含义是 除了
例子 var a = [^ a] //含义是除了a
*//*
split()
可以将一个字符串拆分为一个数组
方法中可以传递一个正则表达式作为参数,这样方法会根据正则表达式去拆分字符串(更加灵活)
这个方法即使不指定全局匹配,也会全部插分
*/
/*
根据任意字母来将字符串拆分
*/
var str = "1a2casdsad";
var result = str.split(/[A-z]/);
document.write(result);
/*
serch()
可以搜索字符串中是否含有指定内容
如果搜索到指定内容,则会返回第一次出现的索引,如果没有搜索到返回 -1
它可以接受一个正则表达式作为参数,然后根据正则表达式去检索字符串
*/ match()
可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
默认情况下我们的match只有找到第一个符合要求的内容,这样就会匹配到所有的内容
我们可以设置正则表达式为全局匹配模式,这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式,且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回,即使只查询到一个结果 /*
replace()
可以将字符串中指定内容替换为新的内容
参数
1.被替换的内容, 可以接受第一个正则表达式作为参数
2.新的内容
默认只会替换第一个
*/
str = "hello asd123213 hello abc";
result = str.replace(/[a-z]/gi,"");
document.write(result);
/*
量词
通过量词可以设置一个内容出现的次数
{n} 正好出现n次
量词支队它前边一个的内容起作用 如果需要多个 则需要用括号扩起来
*/
var reg = /a{3}/;
document.write(reg.test("aaaasdaaa")); /*
量词
通过量词可以设置一个内容出现的次数
{n} 正好出现n次
量词支队它前边一个的内容起作用 如果需要多个 则需要用括号扩起来
{m,n} 出现m到n次
{m, } 表示m次以上
+ 至少一个,相当于{1, }
* 表示0个或者多个,相当于{0,}
? 表示 0个或者1个,相当于{0,1}
*/
/*
检查一个字符串是否以a开头 /^a/
^ 表示开头
$ 表示结尾
/^a$/ 这个a 既是开头又是结尾
*/
/*
如果在正则表达式中同时使用^和$则要求字符串完全符合正则表达式
*/
2022,1,22
/*
检查一个字符串是否含有 .
然而 . 表示任意字符
在整则表示中使用\作为转义字符
\. 此时来表示 点
\\ 两个斜杠 表示一个斜杠
\W \D 等等都是特殊字符
*/
var reg = /\./;
document.write(reg.test("b"));
/*
加上 * 代表是可有可无的
/^ / 代表完整的检测
电子邮件
hello .nihao @ abc .com.cn
任意字母数组下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
\w{3,} (\.\w+)* @ [A-z0-9]+ (\.[a-Z]{2,5}){1,2}
*/DOM的作用直白来说 就是让我们可以通过Js来操作网页的
DOM : 全称 Document Object Model 文档对象模型
JS中通过DOM来对HTML文档进行操作,只要理解了DOM就可以随心所欲操作WEB页面文档--- 文档表示的就是整个HTML网页文档
一个网页就是一个文档对象--- 对象表示将网页中的每一部分都转换为一个对象
就是将网页的每一个节点都转换位对象 然后面向对像操作更简单模型---适合用模型来表示对象之间的关系,这样方便我们获取对象
节点
节点Node,时构成我们网页的最基本的组成部分,网页中的每一部分都可以称为一个节点
比如:HTML标签,属性,文本,注释,整个文档等都是一个节点虽然都是节点,但是实际上他们的具体类型是不同的
比如:标签我们称为元素节点,属性称为属性节点,文本称为文本节点,文档称为文档节点节点的类型不同,属性和方法也不尽相同
节点:Node---构成HTML文档最基本的单元 常用节点分四类: (说白了也就是四种对象) 文档节点:整个HTML文档 元素节点:HTML文档中的HTML标签 (元素即标签) 属性节点:元素的属性 文本节点:HTML标签中的文本内容常用两个节点
nodeName nodeType nodeValue 文档节点 #document 9 null 元素节点 标签名 1 null 文本节点 文本内容
/*
浏览器已经为我们提供 文档节点对象 这个对象是window属性(也是全局变量)
可以在页面中直接使用, 文档节点代表的是整个页面
*/
//获取button对象
var btn = document.getElementById("btn");
//修改按钮文字 (要么调方法 要么改属性) 借用 .innerHTML 方法
/*
*/
btn.innerHTML = "啦啦啦";事件 (所有在浏览器上的操作都属于事件)
事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间 JavaScript 与 HTML 之间的交互是通过事件实现的 对于Web应用来说,有以下具有代表性的事件: 点击某个元素, 将鼠标移动至某个元素上方,按下键盘上某个键等等作用
<!-- 处理事件 我们可以在对应的属性中设置一些Js代码, 这样当事件被触发时,这些代码将会执行 这种 --> <button id="btn" >我是一个按钮</button> <script type="text/javascript"> /* 事件,就是用户和浏览器之间的一些交互行为 比如,点击按钮,鼠标移动,关闭窗口... */ // 首先要先获取对象 var btn = document.getElementById("btn"); /* 可以为按钮的对应事件绑定处理函数的形式 这样当事件被触发时,其对应的函数将会被调用 */ btn.onmousemove = function (){ alert("...."); }两种绑定方式: 第一是直接在标签内 通过属性
第二种是 将事件绑定后处理函数的形式 通过回调
浏览器在加载一个页面时,是按照自上向下的顺序加载的
读取到一行就运行一行, 如果将script标签写到页面的上边
在代码执行时候,页面还没有加载
<!-- 让页面加载完成 再执行某事件 -->
<!--
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
该事件对用的响应函数将会在页面加载完成之后执行,
这样可以确保我们的代码执行时,所有的DOM对象已经加载完毕了,
-->
window.onload = function()页面先加载后执行 最优
获取元素节点
通过document对象调用 1.getElementBuId() 通过id属性获取一个元素节点对象 2.getElementsByTagName() 通过标签名获取一组元素节点对象 3.getElementsByName() 通过name属性获取一组元素节点对象
getElementsByTagName()可以根据标签名来获取一组元素节点对象
这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到数组中
即使查询到的元素只有一个仍然 也会封装到数组中返回
innnerHTML用于获取元素内部的HTML代码 要注意使用的对象是否有内容
如果需要读取属性节点,
直接使用 元素.属性名
例子:元素.id 元素.name 元素.value
注意:class属性不能采用这种方式 是Js中的保留字 要使用className
保留字一般是等同于关键字的。
2022,1,22
#out 就是 id = out
图片切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 440px;
margin: 600px auto;
padding: 10px;
background-color: blue;
/*
设置文本居中
*/
text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function (){
/*
点击按钮切换图片
*/
//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
/*
要切换图片就是要修改src的属性
*/
//首先获取img标签
var img = document.getElementsByTagName("img")[0];
//创建一个数组，用来保存图片的路径
var imgArr = ["../img/0d5291c74650d80aa5d1bc6a0423efb.jpg","../img/OIP-C.jpg","../img/R-C.jpg"];
var index = 0;
//获取id为info的p元素
var info = document.getElementById("info");
//设置提示文字
//分别为两个按钮绑定单击响应函数
prev.onclick = function (){
//alert("上一张");
index--;
//判断index是否小于0
if (index < 0){
index = imgArr.length-1;
}
img.src= imgArr[index];
var t =index+1;
info.innerHTML = "一共"+imgArr.length+"张图片，当前第" +t+"张";
}
next.onclick = function (){
//alert("下一张");
//要修改图片就是修改img的src的属性
//要修改一个元素的属性， 属性 = 属性值
index++;
if (index > imgArr.length-1){
index = 0;
}
img.src = imgArr[index];
//点击按钮以后，重新设置信息
var t =index+1;
info.innerHTML = "一共"+imgArr.length+"张图片，当前第" +t+"张";
}
}
</script>
</head>
<body>
<div id="outer">
<p id = "info">一共5张图片，当前第1张</p>
<img src="../img/R-C.jpg" height="660" width="440" alt="梦想"/>
<button id="prev">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
childNodes属性会获取包括文本节点在内的所有节点 根据DOM标签和标签之间的空白也会被当成文本节点与childNodes 属性相比之下 children属性可以获取当前元素的所有子元素 且没有计算空白节点
函数也是对象 是对象就可以作为参数
innerText
该属性可以获取到元素内部的文本内容
它和innerHTML类似,不同的是它会自动将标签也就是html去掉
2022,1,23
通过JS修改元素的样式:
语法:元素.style,样式名 = 样式值
注意:如果CSS的样式名中含有 -
这种名称在JS中是不合法的比如background-color
需要将这种样式名修改为驼峰命名法
去掉 - 然后将 - 后的字母大写
我们通过style属性设置的样式都是内联样式
而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示
但如果在样式中写了!important,则此时样式会有最高的优先级
即使通过JS也不能覆盖该样式,此时将会导致JS修改样式失效
所以尽量不要为样式添加!important
通过style属性设置和读取的都是内联样式
无法读取样式表中的样式
onmousemove
该事件将会在鼠标在元素中移动时被触发
事件的冒泡
所谓的冒泡指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素也会被触发
在开发中大部分情况冒泡是十分有用了
如果不希望发生事件冒泡可以通过事件对象来取消冒泡
BOM
浏览器对象模型
Bom可以通过Js来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
window
代表的是整个浏览器的窗口,同时window也是网页中的全局对象
Navigater
代表的当前浏览器的信息,通过该对象可以识别不同的浏览器
Location
代表的是浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
History
代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录
由于隐私原因,该对象不能获取具体的历史记录,只能操作浏览器向前或向后翻页
而且该操作只在当此访问时有效
Screen (这个在移动端会用)
代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关信息
以上这些BOM对象在浏览器中都是作为window对象的属性保存的
可以通用过window对象来使用,也可以直接使用
Navigator
代表的浏览器的信息,通过该对象可以来识别不同的浏览器
由于历史原因,Navigator对象中的大部分属性都以及不能帮助我们识别浏览器
一般我们只会使用userAgent(这个词汇等价于浏览器)来判断浏览器的信息
userAgent是一个字符串,这个字符串中包含有用来描述浏览器信息的内容
不同的浏览器会有不同的userAgent 但依旧不能识别是否为IE
所以我们一般根据一些浏览器中特有的对象,来判断浏览器的信息
JSON
JS中的对象只有JS自己认识,其他的语言都不认识]
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别,
并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
JSON
JavaScript Object Notation JS对象表示法
JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
其他的和JS语法一致
JSON分类:
1.对象 {}
2. 数组 []
JSON中允许的值
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
