jQuery DOM元素的操作總結一
阿新 • • 發佈：2018-12-02
DOM元素操作
建立HTML
- 建立一個div並顯示到頁面上
<script>
$(function() {
var div = $('<div>Hello</div>');
console.log(div);
div.appendTo('body'); //將div新增到body最後面
console. - 建立一個a標籤併為其新增屬性的兩種方法
<script>
var link = $('<a>', {
text: '百度',
href: 'https://www.baidu.com',
target: '_blank',
title: '去往百度首頁'
});
link.appendTo('body');
var link2 = $('<a>百度</a>' DOM元素選擇
<script>
$(function () {
var elements = $('li');
console.log(elements.length); //獲取li的數量
console.log 通過關係查詢jQuery物件的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>methods</title>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">通過關係查詢jQuery物件的方法</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($('#box3').children()); //獲取匹配元素集合中每個元素的所有子元素
console.log($('#box3').children('p')); //獲取匹配元素集合中每個元素的所有p元素
console.log($('#box3').contents()); //獲取匹配元素集合中每個元素的所有子元素，包括文字的註釋節點
console.log($('#box3').find('.item1')); //獲取當前匹配元素集合中每個元素的後代，有選擇器篩選
console.log($('ul, #box3').parent()); //獲取當前匹配元素集合中每個元素的父元素
console.log($('ul, #box3').parent('#box2')); //獲取當前匹配元素集合中父元素為box2的元素
console.log($('ul, #box3').parents()); //獲取當前匹配元素集合中每個元素的祖先元素(從父到祖先)
console.log($('ul, #box3').parents('#box2')); //獲取當前匹配元素集合中祖先元素為box2的元素
console.log($('.item1').parentsUntil('#box1')); //獲取當前匹配元素集合中每個元素的祖先元素，知道遇到匹配的元素為止
console.log($('.item1').closest('div')); //從元素本身開始，逐級向上級元素匹配，返回最先匹配的祖先元素
console.log($('.item4').next('li')); //獲取匹配元素集合中每個元素緊鄰的後一個同輩元素
console.log($('.item4').nextAll('li')); //獲取匹配元素集合中每個元素之後的所有同輩元素
console.log($('.item4').nextUntil('.item7')); //獲取匹配元素集合中每個元素之後的所有同輩元素，直到遇到匹配選擇器的元素為止
console.log($('.item4').prev('li')); //獲取匹配元素集合中每個元素緊鄰的前一個同輩元素
console.log($('.item4').prevAll('li')); //獲取匹配元素集合中每個元素之前的所有同輩元素
console.log($('.item4').prevUntil('.item1')); //獲取匹配元素集合中每個元素之前的所有同輩元素，直到遇到匹配選擇器的元素為止
console.log($('.item4').siblings()); //獲取匹配元素集合中所有元素的同輩元素
console.log($('.item4').siblings('.item2'));
});
</script>
</body>
</html>
篩選和遍歷jQuery物件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<p id="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, rem?</p>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8
<ul></ul>
</li>
<li class="item9">item9</li>
</ul>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
console.log($('.item1').add('.item2')); //將元素新增到匹配的元素集合中
console.log($('li').not('.item2, .item3')); //將匹配的元素集合中刪除元素
console.log($('li').filter('.item2, .item3')); //將匹配的元素集合縮減為匹配選擇器的新元素
console.log($('li').not(function (index) {
return $(this).hasClass('item1');
}));
console.log($('li').filter(function (index) {
return $(this).hasClass('item1');
}));
console.log($('li').has('ul')); //將匹配元素集合縮減為包含特定元素的後代的集合
console.log($('li').slice(0)); //將匹配的元素集合縮減為指定範圍的子集(左閉右開)
console.log($('li').slice(3, 5));
console.log($('li').slice(-2)); //從後向前查兩個
console.log($('div').map(function (index, domElement) { //把當前匹配集合中的每個元素傳遞給函式，產生包含返回值的新jQuery物件
return this.id;
}));
console.log($('li').each(function (index, domElement) { //對jQuery物件進行迭代，為每個匹配元素執行函式
this.title = this.innerText;
}));
console.log($('#box3').children().is('p')); //根據選擇器檢查當前匹配元素集合
console.log($('#box3').children().end()); //結束當前連結中最近一次刪選操作，並將匹配元素集合返回到前一次的狀態
console.log($('#box3').end());
console.log( //將item3也改變樣式
$('.item3').nextUntil('.item6').addBack().css('color', 'red')
);
});
</script>
</body>
</html>
操作元素的特性、屬性和資料
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<img id="logo" src="../logo1.jpg" alt="jQuery logo" title="jQuery logo" />
<img id="logo2" src="../logo1.jpg" alt="jQuery logo" class="img-jquery2" title="jQuery logo" />
<input type="checkbox" id="check" tabindex="1" style="width:50px; height: 50px;" title="Check this!" description="just a checkbox" />
<script src="../../../vendor/jquery-1.12.4.js"></script>
<script>
$(function() {
var img = $('img');
var checkbox = $('#check');
console.log(img.attr('id')); //返回匹配元素的值(特性)
console.log(checkbox.attr('TABINDEX')); //大小寫都可以
console.log(img.attr({ //設定元素的屬性和值
title: 'new title2',
alt: