jquery和javascript的常用方法比较

一.区别与联系。

1、JS是一门前端语言。

2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。

3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

下面我用一张导图来阐述这三者的关系：

解释：

javaScript是用于Web客户端开发的脚本语言，Ajax是基于JS语言，主要组合JS、CSS、XML三种技术的新技术，是用于创建交互式网页应用的网页开发技术。jQuery是JS的框架，基于JS语言，集合Ajax技术开发出来的JS库，封装JS和Ajax的功能，提供函数接口，大大简化了Ajax，JS的操作。

二.使用上的区别。

1、jquery与js最直观的区别

就是外观上jQuery对象比js对象多了"$()"。

2、jquery与js操作内容的区别

1、加载DOM区别
JavaScript：

window.onload

function first(){
alert('first');
}
function second(){
alert('second');
}
window.onload = first;
window.onload = second;
<!--windon.onload只能定义一次，如果定义多次，后边的会将前面的覆盖掉.
只会执行第二个window.onload；不过可以通过以下方法来进行改进：-->
window.onload = function(){
first();
second();
}

Jquery：

$(document).ready()

$(document).ready(){
function first(){
alert('first');
}
function second(){
alert('second');
}
$(document).ready(function(){
first();
}
$(document).ready(function(){
second();
}
<!--两条均会执行-->
}

2、定位元素
JS
document.getElementById(“abc”) //通过id定位
document.getElementsByClassName(“abc”) //通过Class定位获取的是数组
document.getElementsByTagName(“abc”) //通过标签名定位获取的是数组
document.getElementsByName(uid);//通过name属性定位获取的是数组

jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$(“div”) 通过标签定位
$("[name=‘abc’]");通过name定位

需要注意的是JS返回的结果是Element元素对象，jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。

3 、改变元素的内容
JS
abc.innerHTML = “test”; //现在的项目中有用到

jQuery
abc.html(“test”);

4、为表单赋值
JS
abc.value = “test”;

jQuery
abc.val(“test”);

5、属性操作
JS
abc.setAttribute("","");
abc.removeAttribute("");
abc.getAttribute();

jQuery
abc.attr("":"");
abc.removeAttr();
abc.attr(“test”);

6、显示隐藏元素
JS
abc.style.display = “none”; //现在的项目中有用到
abc.style.display = “block”;

jQuery
abc.hide();
abc.show();

abc.toggle(); //在显示和隐藏之间切换、

7、 获得焦点
JS和jQuery是一样的，都是abc.focus();

8、设置元素不可用
JS
abc.disabled = true;

jQuery
abc.attr(“disabled”, true);

9、 修改元素样式
JS（关键字style）
abc.style.fontSize=size;

jQuery（关键字css）
abc.css(‘font-size’, 20);

JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
jQuery操作样式的方法可以是内联的也可以是内嵌的

10、 判断复选框是否选中

jQuery
if(abc.attr(“checked”) == “checked”)
注意：网上说的.attr(“checked”) == true实际上不能用，上面这个测试过能用