完全沒有否定jQuery的意思，jQuery是一個神奇的、非常有用的工具，可以節省我們大量的時間。

但是，有些時候，我們只需要jQuery的一個小功能，來完成一個小任務，完全沒有必要加載整個jQuery程序庫。下面是一些用簡單JavaScript實現jQuery功能特征的代碼匯總。當然，這個匯總并不完全，你最好還是看一下《你不需要jQuery(一)》

查找搜索(選擇器)

按ID查找:

$('#foo') document.getElementById('foo')

獲取Html內容:

$(el).html(); el.innerHTML;

?

獲取屬性值:

$(el).attr('tabindex'); el.getAttribute('tabindex');

?

按class名搜索:

$('.bar') document.getElementsByClassName('bar')

?

按標記名搜索:

$('span') document.getElementsByTagName('span')

?

按子元素搜索:

$('#foo span') document.getElementById('foo').getElementsByTagName('span')

?

搜索特殊元素:

$('html') document.documentElement$('head') document.head$('body') document.body

?

元素屬性操作

獲取/設置HTML:

$('#foo').html() document.getElementById('foo').innerHTML$('#foo').html('Hello, world!') document.getElementById('foo').innerHTML = 'Hello, world!'

?

添加/刪除/搜索判斷class:

$('#foo').addClass('bar') document.getElementById('foo').className += ' bar '$('#foo').removeClass('bar') document.getElementById('foo').className = document.getElementById('foo').className.replace(/\bbar\b/gi, '')$('#foo').hasClass('bar') document.getElementById('foo').className.search(/\bbar\b/gi) !== -1

?

元素值:

$('#foo').val() document.getElementById('foo').value

?

特效

隱藏/顯示操作:

$('#foo').show() document.getElementById('foo').style.display = ''$('#foo').hide() document.getElementById('foo').style.display = 'none'

?

修改CSS樣式:

$('#foo').css('background-color', 'red') document.getElementById('foo').style.backgroundColor = 'red'

?

事件

頁面加載完成(ready)

在jQuery里，我們最常使用的是$(document).ready。對于它，下面是替換方法：

document.onreadystatechange = function() {if (document.readyState === 'complete') {// DOM is ready! } };

?

點擊事件

$('#foo').click(function() { ... }) document.getElementById('foo').onclick = function() { ... }

?

AJAX

這個技術我們以后有一篇文章會單獨介紹。這里只點一下，就是用fetch()方法。

工具類技術

分析JSON:

jQuery.parseJSON(json) JSON.parse(json)

總結

從上面的代碼，我們可以看出，jQuery里的很多功能都可以用很多簡單的JavaScript代碼實現。jQuery雖然很好用，但它有體積的負擔，如果遇到一個問題，你可以用簡單的代碼實現，而不用去加載jQuery，這豈不是更高效，更實用的方法嗎？

轉自：http://www.webhek.com/you-do-not-need-jquery2

轉載于:https://www.cnblogs.com/relax/p/5018288.html

總結

以上是生活随笔為你收集整理的[转]你不需要jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。