一、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

Copyright Curiouser all right reserved,powered by Gitbook该文件最后修改时间: 2023-04-21 18:17:43

results matching ""

    No results matching ""