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有什么不同点问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注亿速云行业资讯频道了解更多相关知识。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。