實用程式JavaScript 和jQuery DOM 選擇元素
阿新 • • 發佈:2020-07-24
jQuery vs JavaScript
jQuery 由 John Resig 於 2006 年建立。它旨在處理瀏覽器不相容性並簡化 HTML DOM 操作、事件處理、動畫和 Ajax。
十多年來,jQuery 一直是世界上最受歡迎的 JavaScript 庫。
但是,在 JavaScript Version 5(2009)之後,大多數 jQuery 實用程式都可以通過幾行標準 JavaScript 來解決:
通過 id 來查詢 HTML 元素
返回 id="intro" 的元素:
jQuery
var myElement = $("#id01");
JavaScript
var myElement = document.getElementById("id01");
通過標籤名來查詢 HTML 元素
返回所有 <p> 元素:
jQuery
var myElements = $("p");
例項
var myElements = document.getElementsByTagName("p");
通過類名來查詢 HTML 元素
返回 class="intro" 的所有元素。
jQuery
var myElements = $(".intro");
JavaScript
var myElements = document.getElementsByClassName("intro");
按類名查詢元素在 Internet Explorer 8 和早期版本中不起作用。
通過 CSS 選擇器查詢 HTML 元素
返回包含 class="intro" 的所有 <p> 元素的列表。
jQuery
var myElements = $("p.intro");
JavaScript
var myElements = document.querySelectorAll("p.intro");
querySelectorAll()方法在 Internet Explorer 8 和早期版本中不起作用。