javaScript网页行为

Javascript简介：（是什么，做什么）

是基于对象和事件驱动的脚本语言，应用于客户端。

基于对象：已经提供了很多对象，不用我们创建，可以直接拿过来使用

事件驱动：事件的本质其实就是用户的操作（你每做一个动作，网页上就会产生相应的页面反应：比如拉动按钮换图片）：html做网页静态效果，javascript做动态效果。

客户端：专门指浏览器（通俗易懂的解释就是js是一种用户与网页互动的语言，可以在网页上添加一些交互操作）

Js的组成

Javascript由三部分组成：js基础，文档对象模型（DOM）,浏览器对象模型（BOM）

（ECMAScript,  document object model, browser object model）

1.ECMAScript：(js的核心)

我们可以理解为是一个标准，定义了js的一些基础（包括基本语法，数据类型，对象，变量，关键字等简单来说就是定义了js应该是什么样子），我们都知道计算器其实是很笨的，它只认识0和1，而这个ECMAScript就是我们写的js代码与计算机之间的桥梁，因为它定义了js代码的标准，而浏览器解析js代码的引擎标准就是根据ECMAScript来说实现，我们可以把它理解为嵌套在浏览器内核中的一个解释器，可以将js代码解析为0和1给让计算机能看懂。同时计算机返回的信息也是0和1，照样也要通过ECMAScript标准来解析成我们可以看的懂的东西给我们来看。这是js的核心，假如没有它，计算机会认为我们写的全是乱码，识别不了，自然也就没有互动效果了。但是它也仅仅只能做一些简单的功能（比如加减乘除，定义变量等，想要更复杂的交互，就需要下面两个东西）

2. 文档对象模型（document object model）

理解：赋予了我们操作文档的能力，可以使用js里面dom提供的对象，使用对象的属性和方法，对标记性文档（html和xml）进行操作，开始需要将文档解析成一棵DOM树

既然需要对标记性文档进行操作，那么就需要把标记性文档里的内容全部封装成对象，总共有四部分，如上图所示，有document文档,element元素（标签）,Attribute属性（id等一系列属性）和文本对象（指的是标签之间的内容）,这些统称为node（节点）,也就是在html中每一个标签在js中都有此标签对应的对象

其中关于属性操作的几个方法：

1. getAttribute（“属性名称”）：获取属性里面的值
2. setAttribute(“属性名称”,”属性值”):设置属性值
3. removeAttribute（“属性名称”）：删除的是属性值，而不是删除属性名

关于文档对象模型的几个对象的常用方法

Document对象：指向的是整个html文档

         getElementById（id值）

         getElementsByTagName（标签名称）

         getElementsByName（标签中的name属性）

         querySelector(选择器)：

                    例如获取id为content的选择器：document.querySelector('#content')，只能获取到第一个匹配的选择器

         querySelectorAll(选择器)：

                    获取到此选择器运用打的所有元素数组，可以用下标选择其中的第几个

element对象：指向文档中的所有标签

         1. element.appendChild():向元素添加新的子节点，作为最后一个子节点

         2. element.firstChild:返回元素的第一个子元素

         3. element.lastChild:返回元素的最后一个子元素

         4. element.innerHtml:设置或返回标签间的内容

         5. element.getAttribute（“属性名称”）：获取此属性名称对应的值

         6. element.setAttribute(“属性名称”,”属性值”):设置或更改属性值

         7. element.removeAttribute（“属性名称”）：删除的是属性值，而不是删除属性名

 

Attribute属性对象：指向标签中的所有属性

         1.attr.name:返回属性名称

         2.attr.value：返回属性值

         （这些操作对象都是层层嵌套的，比如操作元素的是文档，操作属性和文本内容的是元素（element））

3.浏览器对象模型（browser object model）

用途：用于操作浏览器

BOM Window  -----窗口对象（重点）顶层对象，所有的Bom对象都在window里面操作的

JS中的事件

Js的事件代表的是由用户动作来触发函数的一种机制，你可以选择点击事件，鼠标移入移出等事件

onclick:点击事件，当用户在某个元素上点击后触发的事件

onmouseover和onmouseout：鼠标移入和鼠标移出触发事件

onmousedown、onmouseup：鼠标按下和鼠标释放事件，任意按键均可触发

点击事件和鼠标按下事件的区别:

1. 点击事件只有鼠标左键点击即可触发，鼠标按下事件是鼠标任意键按下都可以触发
2. 点击事件鼠标左键按下并抬起才可以触发  鼠标按下事件是只要按下鼠标即可触发

onmousemove 鼠标移动事件，只要鼠标在该元素上移动即可触发

下面的前提是：我们的事件是绑定在父元素上面

onmouseleave 鼠标离开dom元素事件 移动到子元素上不算离开，不会触发onmouseleave事件

onmouseout 鼠标离开dom元素事件 移动到子元素上也算离开，会触发onmouseout事件

onmouseover 鼠标移入dom元素事件 从子元素移动到父元素上也算移上，会触发onmouseover事件

onmouseenter 鼠标移入dom元素事件 从子元素移动到父元素上不算移上，不触发onmouseenter事件

以上的鼠标事件 都有一个内置的参数 表示鼠标对象（event），我们可以通过console.log(event)打印看看，里面记录了关于此事件信息

给元素起id的用途，以及如何通过id获取元素（内含例子）

元素中的id就相当于我们的身份证，是唯一的，不能重复，它除了能让我们配置id选择器之外，更大的用途在于能配合js选中元素进行网页互动操作，下面举个例子：

<input type="checkbox" id="checkbox" onmouseover="div.style.display='block'">

<div id="div" style="display: none">请注意信息保密</div>

上面两句代码实现了当鼠标移入多选框时，会出现下面div中的提醒，为什么会出现这种效果呢？

我们在多选框上添加了一个鼠标移入的事件，而这个事件的代码内容就是div.style.display='block'

剖析上面代码内容：

1. div:指的就是下面那个div的id值
2. 他们之中连接的点我们可以翻译为‘的’

总阐述：当鼠标移入到多选框时，将id为div的元素的样式中的属性赋值为block

但是上面的写法其实存在一定的问题:兼容性问题，假如在ie浏览器中执行这段代码，则会出现错误提示，div这个id是未定义的，所以想通过id获取元素更具兼容性，需要像下面这样写：

document.getElementById(“元素id”)

get:获取  Element：元素也就是标签  By：通过   Id：元素id值

整合起来的意思就是：通过id获取元素

使用js改变元素的样式

想在js中改变指定元素样式分两步：

1. 获取到指定元素
2. 修改样式

例子：

function toBlock() {

    var div = document.getElementById('div');  //获取元素

    div.style.display="block";  //修改样式

}

只要是修改单独的某个属性，我们都采用上面的写法改变样式

唯有一个例外，就是引入整个class选择器中的样式时，因为class是js的关键字，所以引入时不能写class（如div.style.class），那么我们只能用以下写法（引用名为box的class选择器写法）

function toBlock() {

    var div = document.getElementById('div');  //获取元素

    div.className ="box";  //为id为div的元素添加class为box的类选择器

}

以上两种修改样式的本质都是在元素内部加上了自己添加的内容，

第一种：display:block

第二种: class=box

假如使用了两种方式添加，第一种先添加，第二种后添加，而box中又有display属性，则此属性无效，因为优先级原因，此属性被先添加的覆盖，无法生效，所以建议使用Js修改样式时统一用一种，要么单属性添加，要么类选择器添加，比较不会乱

选择器优先级：

*<标签<class<id<元素内部样式

Js中的函数

函数产生的原因？

就像我们上面举得例子一样，我们所写的事件和事件的代码内容都可以写在元素内，但是这样做会有一个弊端，假如我们要改变一个元素的多个样式，那我们就要在元素内部不断的通过document.getElementById(“元素id”)获取元素，再去改变样式，显得代码相当的不简洁，不美观，这个跟我们写css样式表是一个道理，我们比较少把样式直接写在元素上，而是会采用内外部样式表的方式来采用样式，等需要这个样式的时候直接采用就行了，而函数就是来封装我们的js网页互动代码的，殊途同归，而函数中我们能声明一个变量来存储元素，例如let element=document.getElementById(“元素id”)

这样当我们js代码中用到此元素的时候我们就能用这个变量名去代替后面的document.getElementById(“元素id”)，而不用每次想获取元素都写这句，极大地简化了代码，简而言之，函数的产生是为了体现代码的美观和重用性

使用关键字function声明函数

 

(参数作用：用来接收数据，完成函数功能,建议调用时形参有几个，实参就写几个,不用定义类型)

函数的声明仅仅是一个声明，只是告诉我们有这么个东西，而它想要生效需要我们去调用，这就相当于我们国家的法律，只有触发了法律它才会生效，没犯法的话它就是个摆设

其实还有定义函数的另一种方式，但是不推荐，上面的写法等价于

let 方法名=function(参数列表){   //方法体;   //返回值可有可无（根据实际需要）; }

函数里的形参

什么时候我们需要在函数里设置形参呢？

当我们函数声明时，在执行体中有不确定的参数的时候，我们就可以设置形参，举个最简单的例子，我们想设置一个div的背景色，而这个背景色只有函数调用的时候根据具体的参数才能确定，这时候我们就可以设置一个color参数，具体调用函数时再传入具体red,green,black等颜色，如果不采用形参的话，那就得有多少种颜色就得写多少个函数，跟基础是学的多态是一样的，不简便，跟我现在在公司做的删除用户，传参设置用户id与用户名称功能类似

Js的变量类型以及变量的一些基础知识

Js的变量类型：

基本类型：number  string  Boolean  null(忽略)  undefined（未定义）

引用类型：Object  function

 

什么情况下变量类型会是undefined?

1. 这个变量从未定义过
2. 变量虽然定义了，但是没赋值，这时候也会是undefined类型

 

如何获取具体值的类型？

使用关键字typeof（连起来的，注意）：例如：typeof(“abc”)返回String

假如一个变量为null，则typeof求它的类型则是Object

innerHtml,value,innerText （获取标签后+点+此属性）

Value值得是标签内的值，并且是表单元素（标签）的特有属性，而innerHtml指得是开始标签和结束标签之间的值, 用于设置或返回指定标签之间的 HTML 内容,返回内容时原样输出，而innerText也是返回指定标签之间的内容，但是它会自动取出标签，只展示标签中的文本内容

这三个js函数所对应的jquery函数分别是val(),html(),text()

括号里面不跟参数是获取，跟参数是设置