jQuery->JavaScript一览表

比较jQuery与JavaScript的不同功能实现

CSS选择器

元素选择

// jQuery
$("li").css("color", "red");
// JavaScript
document.querySelectorAll('li').forEach(el => {
  el.style.color = 'red';
});

ID选择

// jQuery
$('li#first').css('color', 'red');
// JavaScript
document.querySelector('li#first').style.color = 'red';

类选择

// jQuery
$('li.first').css('color', 'red');
// JavaScript
document.querySelectorAll('li.first').foreach(el => {
  el.style.color = 'red';
});

子元素选择

// jQuery
$('.first strong').css('color', 'red');
// JavaScript
document.querySelectorAll('.first strong').forEach(el => {
  el.style.color = 'red';
});

通配符选择

$('li *').css('color', 'red');
// JavaScript
document.querySelectorAll('li *').forEach(el => {
  el.style.color = 'red';
});

分组选择

// jQuery
$('#first, #third').css('color', 'red');
// JavaScript
document.querySelectorAll('#first, #third').forEach(el => {
  el.style.color = 'red';
});

伪类选择

// jQuery
$('li:first-child').css('color', 'red');
// JavaScript
document.querySelectorAll('li:first-child').forEach(el => {
  el.style.color = 'red';
});

匹配选择

// jQuery
$('#second ~ li').css('color', 'red');
// JavaScript
document.querySelectorAll('#second ~ li').forEach(el => {
  el.style.color = 'red';
});

属性选择

// jQuery
$('[id], [class="first"]').css('color', 'red');
// [attribute!="..."]                 -> 选择指定属性不等于这个值的元素
// [attribute^="..."]                 -> 选择指定属性是以给定字符串开始的元素
// [attribute$="..."]                 -> 选择指定属性是以给定字符串结尾的元素
// [attribute*="..."]                 -> 选择指定属性具有包含给定字符串的元素
// [attribute="..."][attribute="..."] -> 设置多个指定属性
// JavaScript
document.querySelectorAll('[id], [class="first"]').forEach(el => {
  el.style.color = 'red';
});

jQuery自带选择

// jQuery
$('li:first, li:last').css('color', 'red');
$('li:even, li:odd').css('color', 'red');
$('li:lt(2)').css('color', 'red');
$('li:eq(2)').css('color', 'red');
$('li:gt(2)').css('color', 'red');
$(':header').css('color', 'red');
$('li:contains("テキスト")').css('color', 'red');
$('li:has(strong)').css('color', 'red');
$('li:parent').css('color', 'red');

HTML/CSS操作

修改文本

<p id="first">修改前</p>

// jQuery
$('p#first').text('Hello Rizu');
// JavaScript
document.querySelector('#first').textContent = 'Hello Rizu'

获取文本

<p id="first">获取的字符串</p>
<p id="second">修改前</p>

$('p#second').text($('p#first').text());
// JavaScript
var text = document.querySelector('#first').textContent;
document.querySelector('#second').textContent = text ;

修改html

<p id="first">修改前</p>

// jQuery
$('p#first').html('<strong>Hello Rizu</strong>');
// JavaScript
document.querySelector('#first').innerHTML = '<strong>Hello Rizu</strong>';

获取html

<p id="first"><strong>获取的HTML</strong></p>
<p id="second">变更前</p>

// jQuery
$('p#second').html($('p#first').html());
// JavaScript
var html = document.querySelector('#first').innerHTML;
document.querySelector('#second').innerHTML = html;

向html元素中的头部、尾部插入

<p id="first">Hello Rizu</p>

// jQuery
$('p#first').prepend('<strong>在头部插入</strong>');
$('p#first').append('<strong>在尾部插入</strong>');
// JavaScript
var target    = document.querySelector('#first');
var a         = document.createElement('strong');
a.textContent = '在头部插入';
var b         = document.createElement('strong');
b.textContent = '在尾部插入';
target.insertBefore(a, target.firstChild);
target.appendChild(b);

在html元素的前、后插入

<p id="first">Hello Rizu</p>

// jQuery
$('p#first').before('<h1>前面插入</h1>');
$('p#first').after('<h1>后面插入</h1>');
// JavaScript
var before         = document.createElement('h1');
var after          = document.createElement('h1');
before.textContent = '前面插入';
after.textContent  = '后面插入';
var target         = document.querySelector('#first');
var parent         = target.parentNode;
parent.insertBefore(before, target);
parent.appendChild(after);

向html元素内的头部、尾部移动

<p id="first">Hello Rizu</p>
<strong id="prepend">向头部移动</strong>
<strong id="append">向尾部移动</strong>

// jQuery
$('strong#prepend').prependTo('p');
$('strong#append').appendTo('p');
// JavaScript
var prepend = document.querySelector('#prepend');
var append  = document.querySelector('#append');
var target  = document.querySelector('#first');
target.insertBefore(prepend, target.firstChild);
target.appendChild(append);

在html元素的前、后移动

<strong id="after">向后移动</strong>
<p id="first">Hello Rizu</p>
<strong id="before">向前移动</strong>

// jQuery
$('strong#before').insertBefore('p');
$('strong#after').insertAfter('p');
// JavaScript
var before = document.querySelector('#before');
var after  = document.querySelector('#after');
var target = document.querySelector('#first');
var parent = target.parentNode;
parent.insertBefore(before, target);
parent.appendChild(after);

使用指定元素包裹各元素

<p id="first">Hello Rizu</p>
<p id="second">Hello yrq</p>

// jQuery
$('p').wrap('<h1></h1>');
// JavaScript
var target = document.querySelector('#first');
var parent = target.parentNode;
document.querySelectorAll('p').forEach((value, index) => {
  var wrap       = document.createElement('h1');
  wrap.innerHTML = value.outerHTML;
  if (index === 0) { parent.innerHTML = '';}
  parent.appendChild(wrap);
});

将所有元素包裹在一个元素中

<div>
  <p id="first">Hello Rizu</p>
  <p id="second">Hello yrq</p>
</div>

// jQuery
$('p').wrapAll('<h1></h1>');
// JavaScript
var target       = document.querySelector('div');
var p            = target.innerHTML;
var h1           = document.createElement('h1');
h1.innerHTML     = p;
target.innerHTML = '';
target.innerHTML = h1.outerHTML;

使用指定元素包裹各元素的子元素

<div>
  <p id="first">Hello Rizu</p>
  <p id="second">Hello yrq</p>
</div>

// jQuery
$('p').wrapInner('<strong></strong');
// JavaScript
var p = document.querySelectorAll('p');
p.forEach((value, index) => {
  var target         = value.textContent;
  var strong         = document.createElement('strong');
  strong.textContent = target;
  p[index].innerHTML = strong.outerHTML;
});

去除父元素

<strong><p id="first">Hello Rizu</p></strong>

// jQuery
$('p').unwrap();
// JavaScript
var target      = document.querySelector('#first');
var parent      = target.parentNode;
var grand       = parent.parentNode;
grand.innerHTML = target.outerHTML;

使用其他元素替换指定元素

<p id="first">Hello Rizu</p>

// jQuery
$('p').replaceWith('<h1>替换后</h1>');
// JavaScript
document.querySelector('#first').outerHTML = '<h1>替换后</h1>';

删除元素

<p id="first"><strong>删除的元素</strong>Hello Rizu</p>

// jQuery
$('p strong').remove();
// JavaScript
var target = document.querySelector('#first');
var nest   = document.querySelector('#first strong');
target.removeChild(nest);

获取与修改属性值

<a href="http://yrq110.me/">blog</a>

// jQuery
$('a').attr('href', "http://developer.mozilla.org ");
$('a').text($('a').attr('href'));
// JavaScript
document.querySelector('a').setAttribute('href', "http://developer.mozilla.org ");
var target         = document.querySelector('a');
target.textContent = target.getAttribute('href');

删除属性值

<a href="http://yrq110.me/" target="_blank">blog</a>

// jQuery
$('a').removeAttr('target');
// JavaScript
document.querySelector('a').removeAttribute('target');

class值的添加与删除

<p>Hello Rizu</p>

// jQuery
$('p').addClass('red');
$('p').removeClass('red');
// JavaScript
var target = document.querySelector('p');
target.classList.add('red');
target.classList.remove('red');

设置多个CSS属性值(CSS in JS)

<p>Hello Rizu</p>

// jQuery
$('p').css({
  'color': 'red',
  'border': '1px solid black'
});
// JavaScript
document.querySelector('p').style.color  = 'red';
document.querySelector('p').style.border = '1px solid black';

点击事件

<p>Hello Rizu</p>

// jQuery
$('p').click(function() {
  $(this).css('color', 'red');
});
// JavaScript
document.addEventListener('click', () => {
  document.querySelector('p').style.color = 'red';
}, false);