Jquery是JS的一个类库。接下来总结一下它们的异同点

1.入口函数的不同

JS:

window.onload=function(){内部放js}　　　　　　//实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数。

　　

jQuery:

$(function(){})　　或者　　$(document).ready(function(){})　　　　//是在 html所有标签都加载之后，就回去执行。可以写多个。

　　

2.获取元素的方式不同

JS：常用的以下几个，除了id，其他的结果都是伪数组

 

document.getElementsByTagName("a") document.getElementById("demo") document.getElementsByClassName("class")　　//有兼容性问题 document.getElementsByTagName("*")　　获得所有的标签，用来遍历

 html5新增选择器　

 document.querySelector(selector) //可以通过CSS选择器的语法找到DOM元素，返回第一个满足选择器条件的元素 一个dom对象

 document.querySelectorAll('.item');//返回所有满足该条件的元素 一个元素类型是dom类型的数组

 

jQuery：

$(" ")　　//通过和css雷同的选择器方式来获取元素。

　　

3.DOM对象和jquery对象的相互转换　

//<1>JQUERY对象$(“p”)转化DOM对象可以这样写：
 
$(“p”)[0]或者$(“p”).get(0)
$("#j_ShowDom")[0].innerHTML // 使用jquery获取对象，使用js获取值
 
//<2> DOM对象转化为Jquery对象
 
比如document.getElementsByTagName(“p”)只需要将其包裹在$()里就可以了：
$(document.getElementsByTagName(“p”))

　　

 

4、事件处理程序不同　

js：

　　

document.getElementById(“id”).onclick = function(){　// 语句　}

 

jquery:

　　

$(“#id”).click(function(){ 　　　　// 语句 　　});

　　

5、设置内容，html和text

JS：

document.getElementById(“btn”).innerHTML = "内容不能为空"　　　　//可以是文本，可以是<p>内容不能为空</p>。

　

jQuery：

$("#btn").html();