jQuery和JavaScript有什么不同点

jQuery和JavaScript有什么不同点?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

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有什么不同点问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注本站行业资讯频道了解更多相关知识。

相关推荐:

sql中truncate和delete的区别 全面对比truncate和delete的7个不同点

truncate和delete的核心区别在于删除方式、性能、日志记录及影响。1.delete逐行删除,可配合where条件,生成事务日志,可回滚,不重置自增列,触发触发器,权限要求低;2.truncate直接释放数据页,清空整表,速度快,不可回滚,重置自增列,不触发触发器,需drop权限,立即释放空...

如何通过JavaScript实现组件化和模块化

今天小编给大家分享的是如何通过JavaScript实现组件化和模块化,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。组件化和模块化为什么会有组件化和模块化?当我们的项目复杂度不断上升,项目维护成本逐渐提高之后,对于旧项目的维护就变得格外困难。前...

JavaScript中的parseInt()的用法

本篇内容介绍了“JavaScript中的parseInt()的用法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!起因写这篇博客的起因是今天在刷leetcode的每日一题,是一道字符串转换整数(atoi...

JavaScript中的parseInt()函数怎么用

这篇文章主要讲解了“JavaScript中的parseInt()函数怎么用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的parseInt()函数怎么用”吧!JavaScriptparseInt()函数JavaScript全局对...

JavaScript中如何使用parseInt()函数

这篇文章主要介绍“JavaScript中如何使用parseInt()函数”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JavaScript中如何使用parseInt()函数”文章能帮助大家解决问题。JavaScriptparseInt()函数JavaScri...

JavaScript数组去重的方法是什么

本篇内容介绍了“JavaScript数组去重的方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!目录一、Set去重二、双重for循环去重三、利用indexOf去重四、利用icludes去重五、f...

JavaScript实现数字前补“0”的五种方法示例

本文实例讲述了JavaScript实现数字前补“0”的五种方法。分享给大家供大家参考,具体如下: 众所周知JavaScript中的数字是没有前置0的,因此需要我们自己进行操作来添加前置0,而且还得转换成字符串。 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Tr...

JavaScript数组去重的五种方法是什么

本篇内容介绍了“JavaScript数组去重的五种方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!最简单的方法,ES6的Set去重(最推荐)这个方法是我日常开发中最喜欢用的方法,因为,他的使用...