如果你只需要针对现代浏览器，很多功能使用原生的 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

转载于:https://www.cnblogs.com/huanghongxia/p/4118046.html

使用原生JavaScript相关推荐

分享10个原生JavaScript技巧
首先在这里要非常感谢无私分享作品的网友们,这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利 ...
animate用法 js原生_用原生Javascript 创建带动画的固顶导航菜单
当我们在网页中加入一个导航菜单的时候,需要考虑很多因素.如何确定它的位置?如何定义样式?还需要保证它具有良好的响应性.又或者你想为它添加一些炫酷的动画.这时你可能会对 jQuery 感兴趣,因为它会帮 ...
mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
java文件异步上传_[Java教程]原生javascript实现文件异步上传
[Java教程]原生javascript实现文件异步上传 0 2017-10-25 19:00:06 效果图: 代码:(demo33.jsp) demo33.jsp名称文件确定本文网址:http:/ ...
[译] 原生 JavaScript 值得学习吗？答案是肯定的
原文地址:Is Vanilla JavaScript worth learning? Absolutely. 原文作者:David Kopal 译文出自:掘金翻译计划本文永久链接:github.co ...
React jsx转换成原生JavaScript的一个例子
jsx代码: var React = require('react'); var ReactDOM = require('react-dom'); var MyButtonController = r ...
原生希望原生JavaScript开篇
本篇文章个人在深圳游玩的时候突然想到的...最近就有想写几篇关于原生希望的文章,所以回家到之后就奋笔疾书的写出来发布了一直对前端技巧很有兴致,就心生了写一个专栏的动机,然后就申请了原生JavaScr ...
一些常用且实用的原生 JavaScript函数[转]
日常开始中常用到的一些原生JavaScript函数,比较实用, 今天特地整理一下,分享给大家,希望对大家有用,会常更新,同时也欢迎大家补充. css及html方面的技巧总结,点此前往: 前端开发中一些 ...
原生JavaScript轮播图效果实现
原生JavaScript实现轮播图切换效果的实现过程本文所用代码仅供个人学习.此部分代码系按原腾讯电脑管家首页的轮播图效果,采用原生JS技术予以实现(原网页采用jQurey等技术). 1. 文件准备 ...
非常不错的一款html5【404页面】,不含js脚本可以左右摆动,原生JavaScript实现日历功能代码实例(无引用Jq)...
这篇文章主要介绍了原生JavaScript实现日历功能代码实例(无引用Jq),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下成品显示,可左右切换月份 ...

使用原生JavaScript