js,jquery的差别

1. 读取和改变元素的html内容

js读取和设置元素的html内容

document.getElementById(id).innerHTML=new HTML

jquery读取和设置元素的html内容

$("#id").html();          //读取
$("#id").html("设置内容"); //设置内容

注意：html()方法可以用于XHTML文档，但不能用于XML文档。

2. 读取和改变元素的文本内容

js读取和设置元素的文本内容

document.getElementById(id).innerText=new TEXT

jquery读取和设置元素的html内容文本内容

$("#id").text();          //读取
$("#id").text("设置内容"); //设置内容

要注意下面两点：
JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器．
text()方法对HTML文档和XML文档都有效。

3.读取和改变html元素的属性和样式 

js

document.getElementById(id).attribute=new value

document.getElementById("image").src="landscape.jpg";

document.getElementById(id).style.property=new style

document.getElementById("p2").style.color="blue";

jquery

$("#id").attr("src");          //读取
$("#id").attr("src","a.jpg"); //设置内容

$("#id").css("background-color");          //读取
$("#id").css("background-color","blue"); //设置内容

4.显示和影藏

document.getElementById('id').style.visibility='hidden'
document.getElementById('p1').style.visibility='visible'

$("#id").hide();
$("#id").show();

5.事件

document.getElementById("myBtn").οnclick=function(){displayDate()};

$("#myBtn").click(function(){displayDate()});