[转]你不需要jQuery
2015-12-04 08:48
483 查看
完全没有否定jQuery的意思,jQuery是一个神奇的、非常有用的工具,可以节省我们大量的时间。
但是,有些时候,我们只需要jQuery的一个小功能,来完成一个小任务,完全没有必要加载整个jQuery程序库。下面是一些用简单JavaScript实现jQuery功能特征的代码汇总。当然,这个汇总并不完全,你最好还是看一下《你不需要jQuery(一)》
获取Html内容:
获取属性值:
按class名搜索:
按标记名搜索:
按子元素搜索:
搜索特殊元素:
添加/删除/搜索判断class:
元素值:
修改CSS样式:
转自:http://www.webhek.com/you-do-not-need-jquery2
但是,有些时候,我们只需要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
相关文章推荐
- 利用jQuery及AJAX技术定时更新GridView的某一列数据
- jQuery中cookie插件用法实例分析
- jQuery旋转木马式幻灯片轮播特效
- jQuery实现ajax调用WCF服务的方法(附带demo下载)
- Jquery1.9.1源码分析系列(十五)动画处理之外篇
- jQuery使用$.ajax进行异步刷新的方法(附demo下载)
- jQuery1.9.1源码分析系列(十六)ajax之ajax框架
- 简要了解jQuery移动web开发的响应式布局设计
- jQuery移动web开发之页面跳转和加载外部页面的实现
- 使用jQuery mobile库检测url绝对地址和相对地址的方法
- JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
- jQuery mobile转换url地址及获取url中目录部分的方法
- jQuery mobile类库使用时加载导航历史的方法简介
- 使用jQuery在移动页面上添加按钮和给按钮添加图标
- jquery easyui datagrid 双击编辑某一个单元格
- 简单选择器的使用
- jqueryHTML相关方法
- jquery 生成表格,拆分,合并
- $.extend()和(function($){….})(jQuery)
- jQuery scrollTo