jQuery->JavaScript一览表

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

CSS选择器

元素选择

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

ID选择

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

类选择

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

子元素选择

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

通配符选择

1
2
3
4
5
6
// jQuery
$('li *').css('color', 'red');
// JavaScript
document.querySelectorAll('li *').forEach(el => {
el.style.color = 'red';
});

分组选择

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

伪类选择

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

匹配选择

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

属性选择

1
2
3
4
5
6
7
8
9
10
11
// 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自带选择

1
2
3
4
5
6
7
8
9
10
// 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操作

修改文本

1
<p id="first">修改前</p>
1
2
3
4
// jQuery
$('p#first').text('Hello Rizu');
// JavaScript
document.querySelector('#first').textContent = 'Hello Rizu'

获取文本

1
2
<p id="first">获取的字符串</p>
<p id="second">修改前</p>
1
2
3
4
5
// jQuery
$('p#second').text($('p#first').text());
// JavaScript
var text = document.querySelector('#first').textContent;
document.querySelector('#second').textContent = text ;

修改html

1
<p id="first">修改前</p>
1
2
3
4
// jQuery
$('p#first').html('<strong>Hello Rizu</strong>');
// JavaScript
document.querySelector('#first').innerHTML = '<strong>Hello Rizu</strong>';

获取html

1
2
<p id="first"><strong>获取的HTML</strong></p>
<p id="second">变更前</p>
1
2
3
4
5
// jQuery
$('p#second').html($('p#first').html());
// JavaScript
var html = document.querySelector('#first').innerHTML;
document.querySelector('#second').innerHTML = html;

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

1
<p id="first">Hello Rizu</p>
1
2
3
4
5
6
7
8
9
10
11
// 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元素的前、后插入

1
<p id="first">Hello Rizu</p>
1
2
3
4
5
6
7
8
9
10
11
12
// 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元素内的头部、尾部移动

1
2
3
<p id="first">Hello Rizu</p>
<strong id="prepend">向头部移动</strong>
<strong id="append">向尾部移动</strong>
1
2
3
4
5
6
7
8
9
// 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元素的前、后移动

1
2
3
<strong id="after">向后移动</strong>
<p id="first">Hello Rizu</p>
<strong id="before">向前移动</strong>
1
2
3
4
5
6
7
8
9
10
// 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);

使用指定元素包裹各元素

1
2
<p id="first">Hello Rizu</p>
<p id="second">Hello yrq</p>
1
2
3
4
5
6
7
8
9
10
11
// 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);
});

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

1
2
3
4
<div>
<p id="first">Hello Rizu</p>
<p id="second">Hello yrq</p>
</div>
1
2
3
4
5
6
7
8
9
// 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;

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

1
2
3
4
<div>
<p id="first">Hello Rizu</p>
<p id="second">Hello yrq</p>
</div>
1
2
3
4
5
6
7
8
9
10
// 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;
});

去除父元素

1
<strong><p id="first">Hello Rizu</p></strong>
1
2
3
4
5
6
7
// jQuery
$('p').unwrap();
// JavaScript
var target = document.querySelector('#first');
var parent = target.parentNode;
var grand = parent.parentNode;
grand.innerHTML = target.outerHTML;

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

1
<p id="first">Hello Rizu</p>
1
2
3
4
// jQuery
$('p').replaceWith('<h1>替换后</h1>');
// JavaScript
document.querySelector('#first').outerHTML = '<h1>替换后</h1>';

删除元素

1
<p id="first"><strong>删除的元素</strong>Hello Rizu</p>
1
2
3
4
5
6
// jQuery
$('p strong').remove();
// JavaScript
var target = document.querySelector('#first');
var nest = document.querySelector('#first strong');
target.removeChild(nest);

获取与修改属性值

1
<a href="http://yrq110.me/">blog</a>
1
2
3
4
5
6
7
// 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');

删除属性值

1
<a href="http://yrq110.me/" target="_blank">blog</a>
1
2
3
4
// jQuery
$('a').removeAttr('target');
// JavaScript
document.querySelector('a').removeAttribute('target');

class值的添加与删除

1
<p>Hello Rizu</p>
1
2
3
4
5
6
7
// 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)

1
<p>Hello Rizu</p>
1
2
3
4
5
6
7
8
// jQuery
$('p').css({
'color': 'red',
'border': '1px solid black'
});
// JavaScript
document.querySelector('p').style.color = 'red';
document.querySelector('p').style.border = '1px solid black';

点击事件

1
<p>Hello Rizu</p>
1
2
3
4
5
6
7
8
// jQuery
$('p').click(function() {
$(this).css('color', 'red');
});
// JavaScript
document.addEventListener('click', () => {
document.querySelector('p').style.color = 'red';
}, false);

参考

文章目录
  1. 1. CSS选择器
    1. 1.1. 元素选择
    2. 1.2. ID选择
    3. 1.3. 类选择
    4. 1.4. 子元素选择
    5. 1.5. 通配符选择
    6. 1.6. 分组选择
    7. 1.7. 伪类选择
    8. 1.8. 匹配选择
    9. 1.9. 属性选择
    10. 1.10. jQuery自带选择
  2. 2. HTML/CSS操作
    1. 2.1. 修改文本
    2. 2.2. 获取文本
    3. 2.3. 修改html
    4. 2.4. 获取html
    5. 2.5. 向html元素中的头部、尾部插入
    6. 2.6. 在html元素的前、后插入
    7. 2.7. 向html元素内的头部、尾部移动
    8. 2.8. 在html元素的前、后移动
    9. 2.9. 使用指定元素包裹各元素
    10. 2.10. 将所有元素包裹在一个元素中
    11. 2.11. 使用指定元素包裹各元素的子元素
    12. 2.12. 去除父元素
    13. 2.13. 使用其他元素替换指定元素
    14. 2.14. 删除元素
    15. 2.15. 获取与修改属性值
    16. 2.16. 删除属性值
    17. 2.17. class值的添加与删除
    18. 2.18. 设置多个CSS属性值(CSS in JS)
    19. 2.19. 点击事件
  3. 3. 参考
|