Jquery和Javascript的区别与用法

作者：秋了秋发表时间：2015年04月09日

在网站功能开发的时候，如果不清楚Jquery和Javascript的区别，就很容易出现张冠李戴的现象，因为这两种语言是同性质的，但如果你把js当作Jquery语法来用就会经常出现“xxx is not defined”报错现象。

简单来说，JQuery是一种JavaScript框架，Javascript是一种脚本语言；JQuery是把JS里面的常用函数及自定义函数打包到一个文件，是对Javascript的一种封装，方便大家用更少的代码，漂亮的完成更多的功能。相比大家做网站时都会专门有一个js文件，存放这个网站所调用的JS函数，那这个JQuery只是做的更专业，更强大，更方便而已，你原来可能要几行代码来实现的功能，用JQuery可能只用一行就搞定了。Jquery和Javascript的对比就好比电脑的操作系统与软件关系，但又有所不同，jQuery基于JavaScript开发而来，JavaScript是原生态的。

好介绍到此为止，我们来看看它们的用法区别：

Javascript与jquery用法对比

Javascript用法	Jquery用法
查找元素：1.document.getElementById("abc");2.document.getElementsByClassName("abc");3.document.getElementsByTagName("div");	查找元素：1.$("#abc") 查找id定位2.$(".abc") 查找class定位3.$("div") 查找标签定位
插入内容：abc.innerHTML = "test";	插入内容：abc.html("test");
显示隐藏：abc.style.display = "none";abc.style.display = "block";修改样式：1.abc.style.fontSize=size;2.abc.className="test";	显示隐藏：abc.hide();abc.show();修改样式：1.abc.css('font-size', 20);2.abc.removeClass(); abc.addClass("test");
获得焦点：abc.focus();	获得焦点：abc.focus();
表单赋值：abc.value = "test";	表单赋值：abc.val("test");
表单赋值：abc.value = "test";获取表单值：abc.value	表单赋值：abc.val("test");获取表单值：abc.val()
设置元素不可用：abc.disabled = true;	设置元素不可用：abc.attr("disabled", true);
点击事件：function test(){ //处理… } document.getElementById("but1").onclick=test;	点击事件：$(“button”).click(function(){//处理…});
绑定事件：document.getElementById("but1").attachEvent("onclick",test);事件解除：document.getElementById("but1").detachEvent("onclick",test);	绑定事件：$(document).ready(function(){ $("button").bind("click",function(){//处理… }); });事件解除：$(document).ready(function(){$("button").unbind("click",function(){//处理… });$("button").unbind("click"); });
创建元素：document.createElement("span")	创建元素：$("<span/>") 或 $("<span></span>")