JQuery DOM 操作是網頁開發中最常使用的技術之一,可以實現許多頁面上的交互效果。接下來我們將對 JQuery DOM 操作進行總結。
首先,我們需要先加載 JQuery 庫文件:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
然后我們可以使用 $ 或 jQuery 函數選擇 DOM 元素:
var ele = $('#myId'); //通過ID選擇元素 var eles = $('.myClass'); //通過class選擇元素 var elep = $('p'); //通過標簽名選擇元素
選擇DOM元素之后,我們可以對它進行各種操作,例如獲取和修改元素的屬性:
ele.attr('name'); //獲取name屬性值 ele.attr('name', 'newName'); //修改name屬性值
還可以對元素的樣式進行操作:
ele.css('color', 'red'); //修改元素的顏色為紅色 ele.addClass('newClass'); //添加一個新的 class ele.removeClass('oldClass'); //移除一個已存在的 class
除了對單個 DOM 元素進行操作外,JQuery 還提供了操作多個元素的方法,例如遍歷所有段落:
$('p').each(function(index){ console.log(index + ': ' + $(this).text()); });
最后,我們可以通過 JQuery 創建新的 DOM 元素,并將其添加到頁面中:
var newEle = $('<p></p>'); newEle.text('Hello, world!'); $('body').append(newEle);
這就是 JQuery DOM 操作的一些常用方法,可以讓我們更輕松地操作頁面元素和實現更多的交互效果。