jQuery入門-DOM操作

moduzhang發表於2018-09-23
jQuery

jQuery API 文件

切換

toggleClass() ，該方法既可以新增/刪除一個類名，這取決於與元素是否已經有了這個類名。

let featured;
featured = $('.featured');
featured.toggleClass('featured');

關於 .toggleClass() 的文件
關於 .next() 的文件

更改屬性

let navList, firstItem, link;

navList = $('.nav-list');
firstItem = navList.children().first();
link = firstItem.find('a');
link.attr('href', '#1');

關於 .attr() 的文件

修改 CSS

let acticleItems;
articleItems = $('.article-item');
articleItems.css('font-size', '20px');

關於 .css() 的文件

收集值

$('#input').on('change', function() {
	const val, h1;
	var = $('#input').val();
	h1 = $('.articles').children('h1');
	h1.text(val);
});

關於 .val() 的文件

關於 .html() 的文件

關於 .text() 的文件

關於事件的文件

移除 DOM 元素

const articleItems, ul;
articleItems = $('.article-item');
ul = articleItems.find('ul');
// ul.remove();
 ul.children().remove('.bold');

關於 .remove() 的文件

新增 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：酒吧

關於 .each() 的文件

$(function)

在 <body> 底部包括你的指令碼，但是那將意味著有可能推遲載入過程中的下載， 減緩初始的頁面渲染。

function someFunction() {
    // 做有趣的事情
}
$(someFunction)
// 或者
$(function(){
    // 做有趣的事情
})

現在，你可以將你的指令碼包括在 <head> 中， 並且直到構建完 DOM 且你想要操作的元素在頁面上時， 指令碼才會執行。

將函式（回撥）傳遞至 jQuery 物件

想要更快的頁面載入？使用 CDN！

如果你使用 CDN，則你的使用者的瀏覽器將識別出它們 在你的網站載入時已經從相同的 CDN 中快取了 jQuery 的副本， 這意味著它們無需重新下載。所以那些 jquery.min.js 中的 額外 KB 將不會進行下載，且你的網站 會載入得更快！

相關文章