原生java_使用原生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 = $('

//native javascript

var newEl = document.createElement('div');

Append

//jQuery

#("#container").append("content");

//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 += "content";

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

functionaddClasses(node, cla){if(!node.length) node =[node];for(var n=0,m=node.length;n

node[n].className+= " "+cla;

}

}

}functionremoveClass(node, cla){if(!node.length) node =[node];for(var n=0,m=node.length;n= 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");functiontoggleClass(node, cla){if(!node.length) node =[node];for(var n=0,m=node.length;n= 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 = newXMLHttpRequest();

xhr.open('GET', url, true);

xhr.onreadystatechange= function(){

}

xhr.send();//post

var xhr = newXMLHttpRequest();

xhr.open('POST', url, true);

xhr.onreadystatechange= function(){

}

xhr.send({data: data});

相关文章：