一、JavaScript

DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

DOM节点是指Element，但是DOM节点实际上是Node，在HTML中，Node包括Element、Comment、CDATA_SECTION等很多种，以及根节点Document类型，但是，绝大多数时候我们只关心Element，也就是实际控制页面结构的Node，其他类型的Node忽略即可。根节点Document已经自动绑定为全局变量document。

document对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点。

最常用的方法是

• document.getElementById()
• document.getElementsByTagName()
• CSS选择器document.getElementsByClassName()。

document.getElementsByTagName()和document.getElementsByClassName()总是返回一组DOM节点。要精确地选择DOM，可以先定位父节点，再从父节点开始选择，以缩小范围。

ES6标准新增了一种新的函数：Arrow Function（箭头函数）。

​ x => x * x

​ 上面的箭头函数相当于：

​ function (x) {

      **return** x * x;

​ }

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

二、jQuery

jQuery能做哪些事情

• 消除浏览器差异：你不需要自己写冗长的代码来针对不同的浏览器来绑定事件，编写AJAX等代码；
• 简洁的操作DOM的方法：写$('#test')肯定比document.getElementById('test')来得简洁；
• 轻松实现动画、修改CSS等各种操作。

$是著名的jQuery符号。实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名：

$本质上就是一个函数，但是函数也是对象，于是$除了可以直接调用外，也可以有很多其他属性。

注意，你看到的$函数名可能不是jQuery(selector, context)，因为很多JavaScript压缩工具可以对函数名和参数改名，所以压缩过的jQuery源码$函数可能变成a(b, c)

jQuery的选择器

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

如果查询的节点不存在，jQuery返回的对象是 [] ，不会返回undefined或者null，这样的好处是不必在下一行判断 if (div === undefined)。

• 按ID查找：$('#abc')

• 按tag查找：$('table')

• 按class查找：$('.button')

• 组合查找

  • tag组合ID：$('table#test_table1')查找页面两个 Tables 中的一个

• 多项选择器

  多项选择器就是把多个选择器用,组合起来一块选。选出来的元素是按照它们在HTML中出现的顺序排列的，而且不会有重复元素。

  • $('table#projects_mr_table,input')查找页面两个 Tables 中的一个和页面中的 input 元素

• 层级选择器（Descendant Selector）：$('ancestor descendant')

  如果两个DOM元素具有层级关系，就可以用$('ancestor descendant')来选择，层级之间用空格隔开。

  层级选择器相比单个的选择器好处在于，它缩小了选择范围，因为首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素。

  • $('table#test_table1 tr td')查找页面两个 Table 中的一个的数据行所有单元格对象

• 子选择器（Child Selector）

  子选择器$('parent>child')类似层级选择器，但是限定了层级关系必须是父子关系，就是<child>节点必须是<parent>节点的直属子节点

  • $('table#test_table1>tbody>tr')查找页面两个 Tables 中的一个的所有行

• 过滤器（Filter）

  过滤器一般不单独使用，它通常附加在选择器上，帮助我们更精确地定位元素。

  • $('table#test_table1>tbody>tr td:first-child') 查找页面两个 Tables 中的一个的所有数据行的第一个单元格
    $('table#test_table1>tbody>tr td:last-child') 查找页面两个 Tables 中的一个的所有数据行的最后一个单元格
    $('table#test_table1>tbody>tr td:nth-child(3)') 查找页面两个 Tables 中的一个的所有数据行的第三个单元格
    $('table#test_table1>tbody>tr td:nth-child(even)') 查找页面两个Tables中的一个的所有数据行中序号为偶数的单元格
    $('table#test_table1>tbody>tr td:nth-child(odd)') 查找页面两个Tables中的一个的所有数据行中序号为奇数的单元格
    

• 特殊的选择器

  针对表单元素，jQuery还有一组特殊的选择器：

  • :input：可以选择<input>，<textarea>，<select>和<button>；
  • :file：可以选择<input type="file">，和input[type=file]一样；
  • :checkbox：可以选择复选框，和input[type=checkbox]一样；
  • :radio：可以选择单选框，和input[type=radio]一样；
  • :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；
  • :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；
    • :enabled：可以选择可以正常输入的<input>、<select> 等，也就是没有灰掉的输入；
    • :disabled：和:enabled正好相反，选择那些不能输入的。

• 其他选择器

  • 选出可见的或隐藏的元素：

    $('div:visible'); // 所有可见的div $('div:hidden'); // 所有隐藏的div

jQuery对象和DOM对象互相转化

var div = $('#abc'); *// jQuery*对象
var divDom = div.get(0); *//* 假设存在*div*，获取第*1*个*DOM*元素
var another = $(divDom); *//* 重新把*DOM*包装为*jQuery*对象

​ 通常情况下你不需要获取DOM对象，直接使用jQuery对象更加方便。如果你拿到了一个DOM对象，那可以简单地调用$(aDomObject)把它变成jQuery对象，这样就可以方便地使用jQuery的API了。

操作DOM