1 概念
1.1 js概念
JavaScript是用于Web客户端开发的脚本语言。
1.2 jQuery概念
jQuery是一个快速、简洁的JavaScript库，极大的简化了javascript编程。
jQuery是js的框架,基于js语言。
功能：集合Ajax技术开发出来的js库，封装js和Ajax的功能，提供函数接口，简化js的操作。（注：在大多数的项目中，jQuery 用的比较多）。
本质区别：
所以，最本质的区别就是js是一种语言，而jQuery是基于该语言的一种框架。除却最本质的区别还有一些用法上的差别。
2 jQuery和js用法上的区别
2.1 获取元素
2.1.1 根据ID取元素
js：取到的是一个DOM对象；
var element = document.getElementByID("one");
jQuery：取到的是一个jQuery对象;
var element = $("#one");
括号里面是根据某个东西来找，相当于一个选择，如果我们要根据ID来找，在样式表里的ID是用#来表示的，所以在这里我们直接带入井号，整句的意思就是根据ID为one的来查找。
2.1.2 根据class取元素
在数组里面如果要取DOM对象使用索引的方式，如果要取jQuery对象使用eq()
js：取到的是一个数组;
var elements = document.ElementsByClassName("test");
jQuery：
var elements = $(".test");
2.1.3 根据name取元素
js：返回的是一个数组；
var bd = document.getElementsByName(uid);
jQuery：jQuery中使用的是方括号，属性=一个值，不限制非要根据name来取值，jQuery是根据属性来取元素；
$("[name='uid']");
2.1.4 根据标签名取元素
js：返回的也是一个数组；
var divElements = document.getElementsByTagName("div");
jQuery：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名；
$("div");
2.2 操作内容
2.2.1 非表单元素
js：js获取文本的方法是innerHTML和innerText方法；
jQuery：如果是文本就用text方法，如果是html代码就用html方法；
// 无参数的情况下是取值
element.text();
// 有参数的情况下是赋值
element.text("aaaa");
// 无参数的情况下是取值
element.html();
// 有参数的情况下是赋值
element.html("aaaa");
2.2.2 表单元素
js:
// 取值 element.value; // 赋值 element.value = xxx;
jQuery:
// 无参数是取值，有参数是赋值 element.val();
2.3 操作属性
js里面用来操作属性的方法是：
// 设置属性、修改属性
element.setAttribute("","");
// 移除属性，引号里面写一个属性名
element.removeAttribute("");
// 获取属性
element.getAttribute();
jQuery里面用来操作属性的方法是：
//添加属性
//给这个attr方法加入参数，属性名叫做test，属性的值是aa
element.attr("test","aa");
//移除属性
//移除test这条属性
element.removeAttr("test");
//获取属性
//在attr方法里面直接写入一个属性的名就可以了
element.attr("test");
2.4 操作样式
js里面操作样式的关键字是style：
//把这个div的背景色设置成为了红色 element.style.backgroundColor = "red";
jQuery里面操作样式的关键字是css：
element.css("background-color","yellow");
注：
1、js只能获取到内联样式，内嵌和外部的css样式获取不到。
2、jQuery既可以是内联的也可以是内嵌。
行内样式（内联）：就是代码写在具体网页中的一个元素内；比如：<div style="color:#f00"></div>
内嵌式：就是在</head>前面写；比如：<style type="text/css">.div{color:#F00}</style>
外部式：就是引用外部css文件；比如：<link href="css.css" type="text/css" rel="stylesheet"/>
3 常见操作总结
jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下：
3.1 定位元素
js：
document.getElementById("abc")
jQuery：
$("#abc") //通过id定位
$(".abc") //通过class定位
$("div") //通过标签定位
3.2 改变元素的内容
js：
element.innerHTML = "test";
jQuery：
element.html("test");
3.3 显示隐藏元素
js：
element.style.display = "none"; element.style.display = "block";
jQuery：
element.hide(); element.show(); //在显示和隐藏之间切换 element.toggle();
3.4 获取焦点
js和jQuery是一样的，都是element.focus();
3.5 为表单赋值
js：
element.value = "test";
jQuery：
element.val("test");
3.6 获得表单的值
js：
alert(element.value);
jQuery：
alert(element.val());
3.7 设置元素不可用
js：
element.disabled = true;
jQuery：
element.attr("disabled", true);
3.8 修改元素样式
js：
element.style.fontSize = size;
element.className="test";
jQuery：
element.css('font-size', 20);
element.removeClass();
element.addClass("test");
3.9 判断复选框是否选中
jQuery：
if(element.attr("checked") == "checked")
注意：网上说的.attr("checked") == true实际上不能用，上面这个测试过能用。
原文：JS和JQUERY的区别_xueshuai0922的博客-CSDN博客_js和jquery的区别
标签：jQuery,超级,元素,element,test,js,属性 From： https://www.cnblogs.com/daytoy105/p/16718497.html