DOM 是 Document Object Model 的縮寫,是一種用于表示和操作 HTML、XML 等文檔的標準,分為文檔節(jié)點、元素節(jié)點、屬性節(jié)點、文本節(jié)點等。jQuery 是一種基于 JavaScript 的框架,用于簡化 HTML 文檔的遍歷、操作、事件處理等操作。下面是一些 DOM 轉為 jQuery 的示例。
// 獲取元素節(jié)點 // DOM var elem = document.getElementById('demo'); // jQuery var elem = $('#demo'); // 獲取屬性節(jié)點 // DOM var attr = elem.getAttribute('title'); // jQuery var attr = elem.attr('title'); // 添加、刪除、修改樣式 // DOM elem.style.color = 'red'; elem.classList.add('active'); elem.classList.remove('inactive'); // jQuery elem.css('color', 'red'); elem.addClass('active'); elem.removeClass('inactive'); // 獲取、設置元素內容 // DOM var content = elem.innerHTML; elem.innerHTML = 'Hello world'; // jQuery var content = elem.html(); elem.html('Hello world'); // 獲取、設置表單值 // DOM var input = document.getElementById('input'); var value = input.value; input.value = 'John Doe'; // jQuery var input = $('#input'); var value = input.val(); input.val('John Doe');
使用 jQuery 可以簡化許多 DOM 操作,讓代碼更加易讀、簡潔。注意在使用 jQuery 時,要遵循它的語法規(guī)則,例如選擇器使用 $() 包裹,屬性方法使用 .attr()、.css()、.html() 等等。