Jquery Dom API

Jquery DOM

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

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

$() 选择器

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

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

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

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

节点编辑

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>中，但运行时将会等待整个页面被载入后，方才调用。
    window.onload = function(){
do something...
}

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

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

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

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

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

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

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

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

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

扩展阅读

参考手册

results matching ""

    No results matching ""