版权声明：如有转载请注明出处 http://blog.csdn.net/modurookie ,谢谢 https://blog.csdn.net/MoDuRooKie/article/details/82775633
切换
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');
修改 CSS
let acticleItems;
articleItems = $('.article-item');
articleItems.css('font-size', '20px');
收集值
$('#input').on('change', function() {
const val, h1;
var = $('#input').val();
h1 = $('.articles').children('h1');
h1.text(val);
});
移除 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 将不会进行下载，且你的网站 会加载得更快！