Jquery和js常用语法对比

选择器

	JQuery	javascript
id	$(’#nav’)	document.getElementById(“nav”)
类	$(’.test’)	document.getElementsByClassName(“test”)
元素	$(‘div’)	document.getElementsByTagName(“div”)
属性	$("[name=‘uid’]")	document.getElementsByName(“uid”)
CSS 选择器	$(’.demo’)[0]	document.querySelector(".demo")
CSS 选择器	$(’.demo’)	document.querySelectorAll(".demo")

操作属性

	JQuery	javascript
获取	a.attr("")	a.getAttribute("")
移除	a.removeAttr("","")	a.remove("")
设置	a.attr("","")	a.setAttribute("","")

操作内容

JQuery	javascript
a.text(’’)	a.innerText=’’
a.html(’’)	a.innerHTML=’’
a.val(’’)	a.value=’’

操作样式

	JQuery	javascript
获取	a.css(“color”)	a.style.color
设置	a.css(“background-color”,“yellow”);	a.style.backgroundColor = red

操作元素

JS

1. 第一种 innerHTML

    var html = "<input type='button' value='"+i+"' class='bbb' οnclick='doselect(this)'>"

    var element = document.getElementById("test");

    element.innerHTML += html;

2. 第二种 createElement

    var input = document.createElement("input");

    input.setAttribute("type","button");
    input.setAttribute("value",i);
    input.setAttribute("class","bbb");
    input.setAttribute("onclick","doselect(this)");
    
     var element = document.getElementById("test");

     element.appendChild(input);


//删除元素           
    var element = document.getElementById("test");            
    element.remove;

3. 第三种 insertAdjacentHTML

// 原为 <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

// 此时，新结构变成：
// <div id="one">one</div><div id="two">two</div>

JQuery

var str = "<div id='a'></div>";         

div.append(str);

$("#a").remove();       //删除元素