1. 程式人生 > >jQuery入門-DOM操作

jQuery入門-DOM操作

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 將不會進行下載,且你的網站 會載入得更快!