js的基础知识-白红宇

js的基础知识

阅读量：5266 次

发布时间：2019-06-14

本文共 4897 字，大约阅读时间需要 16 分钟。

一、js的语法

略

二、BOM对象

BOM是浏览器对象模型，可以对浏览器窗口进行访问和操作。BOM是js和浏览器对话的工具。

1、window对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。prompt()           显示可提示用户输入的对话框。open()             打开一个新的浏览器窗口或查找一个已命名的窗口。close()            关闭浏览器窗口。setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。clearInterval()    取消由 setInterval() 设置的 timeout。setTimeout()       在指定的毫秒数后调用函数或计算表达式。clearTimeout()     取消由 setTimeout() 方法设置的 timeout。scrollTo()         把内容滚动到指定的坐标。

2、History对象

History对象是window对象的一部分，可通过window.history属性来进行访问，它包含用户访问过的url

常用方法：

back()    加载 history 列表中的前一个 URL。forward()    加载 history 列表中的下一个 URL。go()    加载 history 列表中的某个具体页面。

3、Location对象

Location对象包含当前用户的url信息，是window对象的一部分，可通过window.location属性来访问

Location对象方法：

location.assign(URL)location.reload()location.replace(newURL)//注意与assign的区别

三、DOM对象

DOM 是 W3C（万维网联盟）的标准。DOM 定义了访问 HTML 和 XML 文档的标准：

"W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。"

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

什么是 XML DOM？－－－－>XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。

什么是 HTML DOM？－－－－>HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

1、DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点(NODE)：

整个文档是一个文档节点(document对象)

每个 HTML 元素是元素节点(element 对象)

HTML 元素内的文本是文本节点(text对象)

每个 HTML 属性是属性节点(attribute对象)

注释是注释节点(comment对象)

2、节点属性：

attributes 节点的属性节点

nodeType 节点类型

nodeValue 节点值

nodeName 节点名称

innerHTML 节点的文本值

3、导航属性：

parenteNode 节点的父节点（要记住的）

firstChild 节点下第一个子元素

lastChild 节点下最后一个子元素

childNodes 节点的子节点

推荐的导航属性：

parentElement              // 父节点标签元素children                        // 所有子标签firstElementChild          // 第一个子标签元素lastElementChild           // 最后一个子标签元素nextElementtSibling       // 下一个兄弟标签元素previousElementSibling  // 上一个兄弟标签元素

节点树中的节点彼此拥有层级关系。

父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）

每个节点都有父节点、除了根（它没有父节点）

一个节点可拥有任意数量的子

同胞是拥有相同父节点的节点

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素：

页面查找：

通过使用 getElementById() 方法

通过使用 getElementsByTagName() 方法

通过使用 getElementsByClassName() 方法

通过使用 getElementsByName() 方法

4、HTML DOM Event事件

onclick        当用户点击某个对象时调用的事件句柄。ondblclick     当用户双击某个对象时调用的事件句柄。onfocus        元素获得焦点。               //练习：输入框onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.onkeypress     某个键盘按键被按下并松开。onkeyup        某个键盘按键被松开。onload         一张页面或一幅图像完成加载。onmousedown    鼠标按钮被按下。onmousemove    鼠标被移动。onmouseout     鼠标从某元素移开。onmouseover    鼠标移到某元素之上。onmouseleave   鼠标从元素离开onselect      文本被选中。onsubmit      确认按钮被点击。

事件绑定的两种方式：

1 第一种绑定方法 2  3  4  5     
       6     Title 7  8  9     10 11 16

第一种绑定方式

1  2  3  4     
       5     Title 6  7  8      9 10 16

第二种绑定方式

onload:

onload 属性开发中只给body元素加。

这个属性的触发标志着页面内容呗加载完成。

应用场景：当我们希望页面加载完执行，那么我们可以使用该事件属性。

onsubmit：

是当表单在提交时触发，该属性也只能应用给form元素。

应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。

1  2  3  4     
       5     Title 6  7  8     
      
        9         
       10         
       11     
      
12 13 20

onsubmit例子

Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行。event对象在事件发生时系统已经创建好了，并且会在事件函数被调用时传给事件函数。我们获得仅仅需要接收一下即可。

1  2  3  4     
       5     Title 6     18 19 20     
      
       21         
       
        22 23         
       
24     
      
25 26 37

事件传播例子

node的增删改

增：

createElement(name)创建元素

appendChild();元素添加

删：

先获得父标签，然后通过方法

removeChild()来删除

改：

第一种方式:

使用上面增和删结合完成修改

第二中方式:

使用setAttribute();方法修改属性

使用innerHTML属性修改元素的内容

5、修改HTML DOM

改变 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML ，innerText。

改变 CSS 样式

　　　　document.getElementById("p2").style.color="blue"

改变 HTML 属性

elementNode.setAttribute(name,value)

elementNode.getAttribute(name)<-------------->elementNode.value(DHTML)

创建新的 HTML 元素

createElement(name)

删除已有的 HTML 元素

elementNode.removeChild(node)

关于class的操作

elementNode.className

elementNode.classList.add

elementNode.classList.remove

四、几个练习的例子

1、模态对话框

1  2  3  4     
       5     模态对话框练习 6     35 36 37     
      
       38         
       39     
      
40     
      
       41         
       
        42             
        43         
       
44 45     
      
46 47 48 57

模态对话框例子

2、全选反选

1  2  3  4     
       5     Title 6  7  8       9      10      11 12      
      
       13          
         14              
15              
16          
17          
         18              
19              
20          
21          
         22              
23              
24          
25          
         26              
27              
28          
29      
                                 111         
                          222         
                          333         
                          444         
       
      
30 31 50