jQuery入門-DOM操作
阿新 • • 發佈：2018-12-12
切換
toggleClass() ，該方法既可以新增/刪除一個類名，這取決於與元素是否已經有了這個類名。
let featured;
featured = $('.featured');
featured.toggleClass('featured');
關於 .toggleClass() 的文件
關於 .next() 的文件
更改屬性
let navList, firstItem, link;
navList = $('.nav-list');
firstItem = navList.children().first(); 修改 CSS
let acticleItems;
articleItems = $('.article-item');
articleItems.css('font-size', '20px');
收集值
$('#input').on('change', function() {
const val, h1;
var = $('#input').val();
h1 = $('.articles') 移除 DOM 元素
const articleItems, ul;
articleItems = $('.article-item');
ul = articleItems.find('ul');
// ul.remove();
ul.children().remove('.bold');
新增 DOM 元素
.append()，將引數指定的內容插入匹配元素集中
每個元素的末尾。
<h2>Greetings</h2>
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
$( ".inner" ).append( "<p>Test</p>" );
<h2>Greetings</h2>
<div class="container">
<div class="inner">
Hello
<p>Test</p>
</div>
<div class="inner">
Goodbye
<p>Test</p>
</div>
</div>
.prepend()，將引數指定的內容插入到匹配元素集中的每個元素的開頭。
$( ".inner" ).prepend( "<p>Test</p>" );
<h2>Greetings</h2>
<div class="container">
<div class="inner">
<p>Test</p>
Hello
</div>
<div class="inner">
<p>Test</p>
Goodbye
</div>
</div>
.insertBefore()，在目標之前插入匹配元素集中的每個元素。
$( "<p>Test</p>" ).insertBefore( ".inner" );
<div class="container">
<h2>Greetings</h2>
<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
</div>
insertAfter()， 在目標之後插入匹配元素集中的每個元素。
$( "<p>Test</p>" ).insertAfter( ".inner" );
<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>
</div>
示例：
let family1, family2, bruce, madison, hunter;
family1 = $('#family1');
family2 = $('<div id='family2'><h1>Family 2</h1></div>');
bruce = $('<div id='#bruce' ><h2>Bruce</h2>></div>');
madison = $('<div id='#madison'><h3>Madison</h3></div>');
hunter = $('<div id='hunter'><h3>Hunter</h3></div>');
family2.insertAfter(family1);
family2.append(bruce);
bruce.append(madison);
bruce.append(hunter);
關於 .append() 的文件
關於 .prepend() 的文件
關於 .insertBefore() 的文件
關於 .insertAfter() 的文件
通過 each() 進行迭代
each()，迭代 jQuery 物件，為每個匹配的元素執行一個函式。
<ul>
<li>foo</li>
<li>bar</li>
</ul>
$( "li" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
});
// 0：foo
// 1：酒吧
$(function)
在 <body> 底部包括你的指令碼，但是那將意味著有可能推遲載入過程中的下載， 減緩初始的頁面渲染。
function someFunction() {
// 做有趣的事情
}
$(someFunction)
// 或者
$(function(){
// 做有趣的事情
})
現在，你可以將你的指令碼包括在 <head> 中， 並且直到構建完 DOM 且你想要操作的元素在頁面上時， 指令碼才會執行。
想要更快的頁面載入？使用 CDN！
如果你使用 CDN，則你的使用者的瀏覽器將識別出它們 在你的網站載入時已經從相同的 CDN 中快取了 jQuery 的副本， 這意味著它們無需重新下載。所以那些 jquery.min.js 中的 額外 KB 將不會進行下載，且你的網站 會載入得更快！