jQuery、JavaScript与JS三者间的区别

朱雀 2020-07-01 21:31 876阅读 0赞

# jQuery、JavaScript与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")
```

jQuery ：

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

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

**2 改变元素的内容**

JS：

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

jQuery：

```
abc.html("test");
```

**3 显示隐藏元素**

JS：

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

jQuery：

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

**4 获得焦点**

JS和jQuery是一样的，都是abc.focus();

**5 为表单赋值**

JS：

```
abc.value = "test";
```

jQuery：

```
abc.val("test");
```

**6 获得表单的值**

JS：

```
alert(abc.value);

```

jQuery：

```
alert(abc.val());

```

**7 设置元素不可用**

JS：

```
abc.disabled = true;

```

jQuery：

```
abc.attr("disabled", true);

```

**8 修改元素样式**

JS：

```
abc.style.fontSize=size;

```

jQuery：

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

```

JS：

```
abc.className="test";

```

JQuery：

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

```

**9 判断复选框是否选中**

jQuery

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

```

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

**JS和JQUERY的区别**

\1. 根据ID取元素

JS:取到的是一个DOM对象。

例：

```
var div = document.getElementByID("one");

```

JQUERY:取到的是一个JQUERY对象。

例：

```
var div = $("#one");

```

\2. 根据class取元素[在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()]

JS:取到的是一个数组

例：

```
var div = document.ElementsByClassName("test");

```

JQUERY:

例：

```
var div = $(".test");

```

\3. 根据name取元素

JS：返回的是一个数组

例：

```
var bd = document.getElementsByName(uid);

```

JQUERY：的方式是用 方括号，属性=一个值，不限制非要根据name来取值，JQUERY是根据属性来取元素

例：

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

```

\4. 根据标签名取元素

JS：返回的也是一个数组

例：

```
var div = document.getElementsByTagName("div");

```

JQUERY：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名

例：

```
$("div");

```

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

**操作内容**

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

例：

1.1. 无参数的情况下是取值

```
div.text();
div.html();

```

1.2. 有参数的情况下是赋值

```
div.text("aaaa");
div.html("aaaa");

```

2. 表单元素

JS：

2.1. 取值

```
div.value;

```

2.2. 赋值

```
div.value = 'xxx';
JUQERY：

```

2.3. 取值

```
div.val();

```

3.4. 赋值

```
div.val('xxx');

```

**操作属性**

**JS操作属性**

设置|修改属性：

```
div.setAttribute("","");

```

删除属性

```
div.removeAttribute("");

```

获取属性

```
div.getAttribute();

```

**JQUERY里面用来操作属性的方法**

添加属性：

```
div.attr("width","20%");

```

移除属性：

```
div.removeAttr("width");

```

获取属性：

```
div.attr("width");
```

**操作样式**

JS操作样式-关键字是[style]

例：

```
div.style.backgroundColor = "red";
```

JQUERY里面操作样式的关键字是css

例：

```
div.css("background-color","yellow");
```

——把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化

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

JQUERY操作样式的方法可以是内联的也可以是内嵌的

jQuery、JavaScript与JS三者间的区别

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 js中let，const以及var三者的区别

相关 String与StringBuffer与StringBuilder三者介绍和三者的区别

相关 JDK、JRE、JVM三者间的关系

相关 js test match exec三者区别

相关 JDK，JRE，JVM三者间的关系

相关 JDK、JRE、JVM三者间的关系

相关 JVM、JRE与JDK三者的区别

相关 String、StringBuffer与StringBuilder三者的区别

相关 jQuery、JavaScript与JS三者间的区别

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