两分钟了解jQuery与JavaScript、JS 三者间的区别

互联网 20-6-22

两分钟了解jQuery与JavaScript、JS 三者间的区别

JavaScript、jQuery、JS这三者经常出现在我们的生活中，大家知道它们有什么相同和什么不同吗？下面我们就用两分钟来了解以下它们吧。

JavaScript：是浏览器中一种常见的脚本语言,以此来实现网页的动态以及和后端（数据库）的交互。jQuery：是JavaScript整合后的类库，通过操作jQuery可以减少原生JavaScript语句的使用，从而提高效率。JS：则是JavaScript的一种简称。区别概要： 1.JQuery极大的简化了JavaScript，最大程度上做到了以最少代码完成更多功能的艰巨任务。 2.JavaScript对DOM的加载只加载一次，JQuery会加载多次。 3.JQuery对DOM的操作更加方便。如节点的获取。Eg：$()说明：提升对原生JavaScript和封装后的JQuery两者理解最直接的方式就是在页面中不引入JQuery来实现前后端的基础交互。

以下内容是为了区别理解jQuery与JS所整理的纪要：jQuery-和原生Javascript写法：1 定位元素 JS：

document.getElementById("abc")

$("#abc") 通过id定位  $(".abc") 通过class定位  $("p") 通过标签定位

注意：JS返回的结果是这个元素，jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 2 改变元素的内容 JS：

abc.innerHTML = "test";                //现在的项目中有用到

abc.html("test");

3 显示隐藏元素 JS：

abc.style.display = "none";              //现在的项目中有用到 abc.style.display = "block";

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

4 获得焦点 JS和jQuery是一样的，都是abc.focus(); 5 为表单赋值 JS：

abc.value = "test";

abc.val("test");

JS：

alert(abc.value);

alert(abc.val());

7 设置元素不可用 JS：

abc.disabled = true;

abc.attr("disabled", true);

8 修改元素样式 JS：

abc.style.fontSize=size;

abc.css('font-size', 20);

abc.className="test";

abc.removeClass();  abc.addClass("test");

9 判断复选框是否选中 jQuery

if(abc.attr("checked") == "checked")

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

JS和JQUERY的区别

1. 根据ID取元素 JS:取到的是一个DOM对象。例：

var p = document.getElementByID("one");

var p = $("#one");

2. 根据class取元素[在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()] JS:取到的是一个数组例：

var p = document.ElementsByClassName("test");

var p = $(".test");

3. 根据name取元素 JS：返回的是一个数组例：

var bd = document.getElementsByName(uid);

$("[name='uid']");

4. 根据标签名取元素 JS：返回的也是一个数组例：

var p = document.getElementsByTagName("p");

$("p");

Eg:指定子目录元素对象获取：var p = $("p span");——有很多组合方式

操作内容

1. 非表单元素（如果是文本就用text方法，如果是html代码就用html方法）

例： 1.1. 无参数的情况下是取值 p.text(); p.html(); 1.2. 有参数的情况下是赋值 p.text("aaaa"); p.html("aaaa");2. 表单元素 JS： 2.1. 取值 p.value; 2.2. 赋值 p.value = 'xxx'; JUQERY： 2.3. 取值 p.val(); 3.4. 赋值 p.val('xxx');

操作属性

设置|修改属性：