首页 > web前端 > js教程 > 一起来聊聊jQuery、JavaScript与JS三者间的区别

一起来聊聊jQuery、JavaScript与JS三者间的区别

烟雨青岚
发布: 2020-06-30 13:08:46
转载
2810 人浏览过

一起来聊聊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操作样式的方法可以是内联的也可以是内嵌的

感谢大家的阅读,希望大家收益多多

本文转自:https://blog.csdn.net/dalei9243/article/details/79804789

推荐教程:《JS教程

以上是一起来聊聊jQuery、JavaScript与JS三者间的区别的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:csdn.net
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板