转载

你不需要jQuery(二)

完全没有否定jQuery的意思，jQuery是一个神奇的、非常有用的工具，可以节省我们大量的时间。

但是，有些时候，我们只需要jQuery的一个小功能，来完成一个小任务，完全没有必要加载整个jQuery程序库。下面是一些用简单JavaScript实现jQuery功能特征的代码汇总。当然，这个汇总并不完全，你最好还是看一下《你不需要jQuery(一)》

查找搜索(选择器)

按ID查找:

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

按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，这岂不是更高效，更实用的方法吗？

正文到此结束

所属分类：编程技术

本文标签： 代码总结 CSS value IDE json jquery DOM Document 文章 js parse ACE ip HTML 删除 java 时间 Ajax
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

你不需要jQuery(二)

查找搜索(选择器)

元素属性操作

特效

事件

页面加载完成(ready)

点击事件

AJAX

工具类技术

总结

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流