JavaScript知识点整理

文档对象模型

1.DOM树是Web页面的模型

2.使用DOM树

一、访问元素：1）选择单个元素节点 2）选择多个元素 3）在元素节点之间遍历

二、操作这些元素：1）访问和更新文本节点 2）操作HTML内容 3）访问或更新属性值

3.缓存DOM查询

当多次查找同一个元素时，应该把该元素放在一个变量中来保存，该元素的属性和方法可以用该变量来调用。

var itemOne=getElementById('one');

4.访问元素

1）返回单一节点

2）返回多元素节点  NodeList

5.从NodeList中选择元素

使用item()方法或者[ ]索引编号

6.使用class属性/标签名/CSS选择器选择元素

7.循环遍历NodeList

8.遍历DOM

寻找父节点、兄弟节点、子节点的第一个和最后一个元素

9.空白节点

方法1）去掉空白，但会使代码难以阅读

方法2）避免使用DOM属性，而是用jQuery

10.如何获取/更新元素内容

1）使用nodeValue属性获取和更新文本节点  document.getElementById('one').firstChild.nextSibling.nodeValue;

2)  访问和修改文本节点   .replace(' A ',' B ')

3)   使用textContent(和innerText)获取和更新文本

var firstItem=document.getElementById('one').textContent/innerText

（innerText不包含子元素）

4)   添加或者移除HTML内容

一、innerHTML属性

var firstItem=document.getElementById('one').innerHTML

二、DOM操作

A：DOM操作添加元素

①创建元素节点createElement() ②设置内容createTextNode() ③把其添加到DOM中.appendChild()

B: DOM操作移除元素 

removeChild()  该函数是在父元素的立场上移除子元素

11.属性节点

先得到一个元素节点   document.getElementById('one')

1）检查一个属性并获取其值

2）创建属性并更改其值

① firstItem.className='complete';

② firstItem.setAttribute('class' ,'cool')

3）移除属性

 

 

事件

1.不同的事件类型

2.事件如何触发JS代码：选择元素，指定事件，调用代码

3.将事件绑定到元素的三种方法：html（不推荐）、DOM事件处理、DOM监听器（处理多个响应）

DOM监听器：el.οnblur=checkUsername;//调用checkUsername函数

4.事件监听器：addEventListener（元素绑定监听器，那么在什么情况下document绑定监听器？）

可以使用function()来当匿名函数，防止事件未触发时函数调用，用removeEventListener()移除监听器。

5.在事件监听器中处理参数

6.用备用方法设置监听器

7.事件流：事件冒泡，事件捕获

8.事件对象   个人感觉是区分于getElementById()的另一种获取目标的方法

9.在事件监听器中使用事件对象

10.事件对象改变默认行为：preventDefault()   stopPropagation()

11.使用事件委托：把事件处理程序放在一个容器元素上，使用事件对象的target查找其后代是哪个元素发生了事件。

12.事件发生在哪个元素上？1.target属性 2.this关键字（target可以被传递，但是this?)

13.不同的事件类型：

1）W3C DOM 事件发生在哪个元素上，用户按下了什么键

2）HTML5  表单提交或者表单元素变动

3）BOM

14.用户界面事件 window.addEventListener('load',setup,false);

15.元素事件（如focus,blur.......)  el.addEventListener

16.鼠标事件 el.addEventListener

17.键盘事件 el.addEventListener

18.表单事件 el.addEventListener

19.变动事件和变动观察者 el.addEventListener

20.HEML5事件 window.addEventListener

 

 

jQuery

 

---

对于每个元素的方法操作 

1.查找元素

2.在选中元素上执行操作

3.匹配结果集，获取和设置数据的jQuery方法

4.将jQuery选取结果缓存在变量中，为表区分，变量前面用$

5.循环

在jQuery中，具有更新所有元素的能力。若是要从一组元素中获取信息，可以使用euch()方法

6.链式操作

7.检查页面是否可以使用

$(document).ready(function(){})

简写：$(function(){})

让脚本紧跟在之前，以便于DOM加载好让jQuery能获取元素

8.获取元素内容

.html();返回第一个匹配元素内部HTML包括其后代所有节点

.text();返回选取结果中每一个元素（包括后代）的文本

9.更新元素

1）.html();

2).text();

3).replaceWith();

4).remove();

括号中可包含方法.html(function(){  return '+$(this).text()+''});

10.插入元素

1）将新元素创建为jQ元素，也可以直接插入

2）像页面中添加元素

.before()   .after()   .prepand()  .append()

11.获取和设置属性值

读取或者设置，更改指定的属性.attr()

添加属性.addClass()

移除指定属性.removeAttr()

从class属性中移除一个属性值ad

dClass()    //与上一个的区别是

12.获取和设置css()属性

13.操作选取结果中的每一个元素.each()

 

23.剪切和复制元素

---

对于元素触发的事件的操作

14.事件方法

$('li').on('click',function(){}):

15.事件对象e，该事件对象中包含和此事件相关的方法和属性

16.事件处理程序中的其他参数

.on('需要响应的事件'  [,selector(选择器)]  [,data(传递的额外信息)]  ,function)

---

17.特效（过渡效果和移动）

18.CSS属性动画

.animate()用来创建自己的动画特效，通过改变CSS属性

19.遍历DOM的方法

20.在选取结果中添加或者筛选元素

与10.（2）的区别是，10.(2)是在页面中添加

而本方法是在元素商添加:$('li:not(.hot)')   ($this.is('.hot'))  $('li:contains("honey")')

21.按序号查找元素

除了可以通过元素的属性找到元素之外还可以通过索引找到元素

22.选取表单元素

表单元素选择其，方法和事件

 

24.HTML框模型的尺寸

获取，设置和修改

25.窗口和页面尺寸   元素在页面中的位置

26.在页面中引用jQ的1方法

27.脚本放置的位置前面

28.jQ文档，使用插件，防止和其他的库起冲突

 

 

Ajax和JSON

Ajax是一种无需刷新整个页面就能为页面中的某部分加载数据的技术，数据通常会以JS对象表示法的JSON格式来发送

1.什么是Ajax

2.为什么使用Ajax？

Ajax使用异步处理模型。

A.在页面正在加载时使用Ajax，可以异步处理

B.在页面加载之后使用Ajax,可以响应请求触发脚本刷新页面中的某部分

3.Ajax是如何工作的？

浏览器请求信息——服务器响应并返回数据（XML\HTML\JSON）——浏览器处理内容

4.处理Ajax请求及响应

A.请求：

var xhr=new HttpRequest();

xhr.open('GET','dataa/test.json',true);

xhr.send('search=arduino‘）;

B 响应 ：

xhr.οnlοad=function()

{ if(xhr.status===200){}}

5.数据格式

6.XML：可标记语言

7.JSON:JS对象表示法

{

    ”location":"San Francisco, CA"

}

8.使用JSON数据

JSON.stringify():JS->JSON

JSON.parse():JSON->JS

9.使用Ajax加载HTML

无论服务器返回的是XML\HTML\JSON，创建请求和检查文件是否可用是一样的，不同是如何处理返回的数据。

当服务器响应了请求，会发回一条状态信息status

function(){

        if(xhr.status===200){ document.getElementById('content').innerHTML=xhr.responseText';}                                                  

10.使用Ajax加载XML

XML必须被转换成HTML才能显示在页面上，XML和HTML处理响应的语句不一样

var response=xhr.responseXML;

var events=response.getElementByTagName('event');

然后添加文本节点和元素。

11.使用Ajax加载JSON With Ajax

responseObject=JSON.parse(xhr.responseText)  先转换成JS对象再操作

12.使用其他服务器返回的数据

13.JSONP的工作原理

14.jQuery与Ajax:请求

15.jQuery与Ajax:响应

16.使用jQuery将HTML加载到页面中

17.jQuery的Ajax简写方法

18.请求数据

19.向Ajax发送表单 post(),收集表单数据，在服务器端（查看是否来自Ajax的请求以便能异步处理）

19.提交表单

20.加载JSON与处理Ajax错误

.done()

当请求失败时也提供了方法来响应：.fail()\always()

21.Ajax请求的细粒度控制

 

API

1.HTML5 JavaScript API

2.特性检测

先检测是否支持这些功能，再使用 navigator.geolocation 

3.Modernizr   Modernizr.geolocation

4.地理位置API：找到用户的位置

5.Web存储API：在浏览器中存储数据

//

区别
为某元素设定事件触发函数时，可能会觉得addEventListener和on事件的功能差不多，但是，addEventListener除了可以设置元素触发顺序外，还能多次绑定事件，因为 on 事件多次绑定的话会出现覆盖。
具体举例：https://blog.csdn.net/KNIGH_YUN/article/details/80539193