使用原生JavaScript
如果你只需要针对现代浏览器,很多功能使用原生的 JavaScript 就可以实现。
DOM Selectors
//jQuery
var ele = $("#id .class");
//native javascript
var ele = document.querySelectorAll("#id .class");
//or native javascript
var ele1 = document.getElementById("id");
var ele = ele1.getElementsByClassName("ele1");
DOM 操作
Create elements
//jQuery
var newEl = $('<div />');
//native javascript
var newEl = document.createElement('div');
Append
//jQuery
#("#container").append("<span>content</span>");
//native javascript
var span = document.createElement("span");
span.appendChild(document.createTextNode("content"));
document.getElementById("container").appendChild(span);
//or native javascript, jQuery uses the native innerHTML method
document.getElementById("container").innerHTML += "<span>content</span>";
remove all child nodes
//jQuery
$("container").empty();
//The native equivalent using innerHTML
document.getElementById("container").innerHTML = null;
//or native javascript using removeChild
var c = document.getElementById("container");
while(c.lastChild) c.removeChild(c.lastChild);
remove the whole elemet from the DOM
//jQuery
$("#container").remove();
//native javascript
var c = document.getElementById("container");
c.parentNode.removeChild(c);
Clone the whole element from the DOM
//jQuey
var cloneEl = $("#container").clone();
//native javasript
var cloneEl = document.getElementById("container").cloneNode(true);
parent
//jQuery
$('#el').parent();
//ntive javascript
document.getElementById('el').parentNode;
prev/next element
//jQuery
$("#el").prev();
$("#el").next();
//native javascript
document.getElementById("el").previousElementSibling;
document.getElementById("el").nexElementSibling;
css manipulation
class manipulation
//jQuery
$("#ele").addClass("myclass");
$("#ele").removeClass("myclass");
$("#ele").toggleClass("myclass");
//native javascript
function addClasses(node, cla){
if(!node.length) node = [node];
for(var n=0,m=node.length;n<m;n++){
if((" "+node[n].className+" ").indexOf(" "+cla+" ") <0){
node[n].className += " "+cla;
}
}
} function removeClass(node, cla){
if(!node.length) node = [node];
for(var n=0,m=node.length;n<m;n++){
if((" "+node[n].className+" ").indexOf(" "+cla+" ") >= 0){
node[n].className = (" "+node[n].className+" ").replace(" "+cla+" ", " ").replace( /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "" );
}
} }
//remove myclass to all nodes
removeClass(document.querySelectorAll("p"), "myclass"); function toggleClass(node, cla){
if(!node.length) node = [node];
for(var n=0,m=node.length;n<m;n++){
if((" "+node[n].className+" ").indexOf(" "+cla+" ") >= 0){
node[n].className = (" "+node[n].className+" ").replace(" "+cla+" ", " ").replace( /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, "" );
}else{
node[n].className += " "+cla;
}
}
}
//toggle myclass to all nodes
toggleClass(document.querySelectorAll("p"), "myclass");
//or native javascript using classList
document.getElementById("ele").classList.add("myclass");
document.getElementById("ele").classList.remove("myclass");
document.getElementById("ele").classList.toggle("myclass");
style manipulation
//jQuery
$("#ele").css({
color: "#c00"
})
//native javascript
var ele = document.getElementById("ele");
ele.style.color = "#c00";
set/get attribute
//jQuery
$('#ele').attr('key', 'value');
$('#ele').attr('key');
//native javascript
document.getElementById("ele").setAttribute('key', 'value');
document.getElementById("ele").getAttribute("key");
event handling
document ready
//jQuery
$(start)
//native javascript
document.addEventListener("DOMContentLoaded", start);
forEach
//jQuery
$("p").each(function(i){
console.log("index " + i + ": " + this);
});
//native javascript
[].forEach.call(document.getElementsByTagName("p"),function(obj,i){consol.log("index "+i+": "+obj)})
Events
//jQuery
$('.el').on('event', functio(){ });
//Native javascript
[].forEach.call(document.querySelectorAll('.el'), function(el){
el.addEventListener('event', function(){
}, false);
});
Ajax
//jQuery
$.get('url', function(data){
});
$.post('url', {data: data}, function(data){ });
//native javascript
//get
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function(){ }
xhr.send();
//post
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onreadystatechange = function(){ }
xhr.send({data: data});
相关文章:
Native JavaScript Equivalents of jQuery Methods: the DOM and Forms
Native JavaScript Equivalents of jQuery Methods: Events, Ajax and Utilities
使用原生JavaScript的更多相关文章
- 原生javascript 实现 animate
原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.curr ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮(附带对addeventlistener的了解)
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...
- 原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)
11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sT ...
- 原生javascript加载运行
原生javascript加载运行 (function(){ //TODO sometings }()); 在要运行相应代码的位置加入script标签,创建函数并自执行; 关于window.onload ...
- 原生javascript模仿win8等待进度条。
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- javascript学习-原生javascript的小特效(原生javascript实现链式运动)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- javascript学习-原生javascript的小特效(多个运动效果整理)
以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...
- 原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...
随机推荐
- 硬件相关-JTAG接口
JTAG(Joint Test Action Group,联合测试行动小组)是一种国际标准测试协议,用于系统仿真.调试及芯片内部测试.它通过访问芯片内部封装好的测试电路TAP(Test Access ...
- VDN For PB Web实现消息推送
利用VesnData.Net(VDN)的互联网数据驱动功能我们实现了PB连接互联网数据库的功能.在互联网开发的过程中我们往往有些消息或者数据希望即时能够通知到各个客户端,现在比较流行的一种技术就是消息 ...
- 目前国内外主流的linux发行版本
1.linux其实是基于unix发展而来的,还有mac os也是类unix操作系统 2.目前主流的linux发行版本主要有:红帽系列(中国大陆,美洲地区,发源于美国),suse系列(欧洲地区流行,发源 ...
- Node.js 项目搭建
关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版. ...
- Netsharp快速入门(之3) 基础档案(之B 实体建模 新建项目)
作者:秋时 杨昶 时间:2014-02-15 转载须说明出处 3.3 创建业务模型 3.3.1 新建项目 1.打开业务模型 2.打开业务模型后,在工具栏上选择操作-新增项目分类,标识这 ...
- STL容器的适用情况
转自http://hsw625728.blog.163.com/blog/static/3957072820091116114655254/ ly; mso-default-props:yes; m ...
- 项目开发-->身份认证及用户登录模块
1.首先明确的两个问题 如何判断当前申请是由一个已登录用户发起的?如果Request.IsAuthenticated为true,则表示是一个已登录用户. 如何获取当前登录用户的登录名?如果是一个已登录 ...
- HDU 5593 ZYB's Tree 树形dp
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5593 题意: http://bestcoder.hdu.edu.cn/contests/contes ...
- spring framework项目源码github托管地址
方法一:直接下载,github托管地址:http://repo.spring.io/simple/libs-release-local/org/springframework/spring/ 方法二: ...
- [百度空间] [转]程序员趣味读物:谈谈Unicode编码
出处:CSDN [ 2005-05-13 10:05:53 ] 作者:fmddlmyy 这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG ...