jquery-dom

元信息

目标：用 jquery 复习 DOM 操作——$() 选择器、节点读写、jquery object 与 DOM 节点的互转；顺带掌握 ready() 与 on() 解决"时机"与"动态元素"两大经典问题
关键概念：$()选择器、jquery object、魔术方法、get()转换、执行顺序、$(document).ready()、$(document).on()、动态节点
关联阶段：cp3
常见误区：把 $ 当特殊魔法符号（它只是个函数名，jQuery 的别名）；拿 jquery object 直接调 DOM API（两者需 get(0)/$() 互转）；给运行时动态生成的元素直接绑事件失效还以为是绑定写错（应委托给已存在的父级/document）

Jquery DOM

标准的DOM API由于要保持通用性（兼容多文档类型、跨语言实现等），接口通常较为冗长和复杂
各浏览器对DOM API的实现有差异（尤其早期），存在兼容性问题

基于上述问题，jquery作为第三方库，提供了一系列利于程序员访问DOM的魔术方法

$() 选择器

可以实现类似css 选择器的元素选择方式，譬如：

javascript

#  选择所有 <h1>、<div> 和 <p> 元素
$("h1,div,p")

$并不是一个有特殊魔力的符号，它仅仅是一个简短显目的函数名(js支持函数名采用特殊字符),或者说是jQuery()的别名。在源代码中，它类似于以下定义：

javascript

function $(selector){
  ...
  document.querySelector || document.querySelectorAll
  ...
}

节点编辑

javascript

var o1 = $('#greetings')
o1.text() 
o1.css('background-color')

// $()总是返回一组节点，且会读取所有节点的值或进行设置
var o2 = $('.some_class_name')
o2.text('hello')
o2.css('background-color','red')

var o3 =  $('div')
o3.html('<h2>hello</h2>')

jquery object

$()返回的是jquery object对象，即经过jquery特殊封装的对象，所以具有魔法方法。但是，该对象不是DOM节点，因此不支持dom api
因此，如果你需一个普通dom对象，请使用jquery提供的get()或[]等方法进行转换，即类似$('div').get(0) 来返回一个dom 节点对象，从而可以使用dom api
反之，也可以将一个dom对象转换为jquery object，如$(yourdom) 则可

javascipt 的执行顺序

按网页源代码中的顺序，依次执行
js需要操纵dom（对应于一组html元素），因此js的执行代码必须置于相应的html元素之后
从语义上讲，应当将js代码集中置放于<head>中。为了兼顾上述情况，可以使用dom提供的window.load 事件，譬如以下代码，虽然设计时位于<head>中，但运行时将会等待整个页面被载入后，方才调用。

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

tips: 如果前面的js代码出现语法错误，将导致后面的js代码中断，无法被执行。因此，应确保载入网页后，在devtools的console面板中无任何错误提示

$(document).ready() 监听文档载入事件

使用window.onload事件，可以在文档载入时执行定制代码。但该事件只能声明和定义一次，即仅被一个js函数所使用
使用jquery 提供的ready方法，相当于将事件声明转换为方法定义
- 可以在多个脚本中被多次定义，相互不会覆盖
- 不受文档和脚本的代码顺序，下面的代码可以位于网页源代码的任意之处，均会确定在button元素被载入、读取和解析后，方能执行相关的js代码

javascript

$(document).ready(function(){
    $("button").click(function(){
       alert("段落被点击了。");
    });
});

如果不使用ready方法，则我们必须要把下面的代码放到网页源代码的最底部,否则浏览器会因读取不到button元素而报错或忽略相关的js代码。

$(document).on() 监听元素事件

在网页中可能存在三类html节点

从服务端接收到的html节点
在页面初次渲染时，执行各类脚本后，动态生成的html节点
在与用户的交互时，如点击按钮，动态生成的html节点

对于第三类节点，上述$(document).ready()中的代码将会失效。
jquery提供了一种简便的方法，可以使得运行时动态生成的节点，同样获得事件监听处理函数

javascript

  $("button").on("click",function(){
    alert("段落被点击了。");
  });

jquery-dom

元信息

Jquery DOM

$() 选择器

节点编辑

jquery object

javascipt 的执行顺序

$(document).ready() 监听文档载入事件

$(document).on() 监听元素事件

扩展阅读

参考手册

jquery-dom ​

元信息 ​

Jquery DOM ​

$() 选择器 ​

节点编辑 ​

jquery object ​

javascipt 的执行顺序 ​

$(document).ready() 监听文档载入事件 ​

$(document).on() 监听元素事件 ​

扩展阅读 ​

参考手册 ​

jquery-dom

元信息

Jquery DOM

$() 选择器

节点编辑

jquery object

javascipt 的执行顺序

$(document).ready() 监听文档载入事件

$(document).on() 监听元素事件

扩展阅读

参考手册