jquery和js之间有什么区别?

js是一种脚本语言,常用于网页客户端编程,使网页在客户端浏览器中,实现更多地动态功能,表现出更加丰富的视觉效果。

jQuery 是一个简洁而快速的 JavaScript 库,可用于简化事件处理,HTML 文档遍历,Ajax 交互和动画,以便快速开发网站。

js和jquery的区别

1、入口函数不同

js:

window.onload = function(){内部放js} 

实质就是一个事件,拥有事件的三要素,事件源,事件,事件处理程序。等到所有内容,以及我们的外部图片之类的文件加载完了之后,才会去执行。只能写一个入口函数。

jQuery:

$(function(){})或者$(document).ready(function(){})

是在 html所有标签都加载之后,就回去执行。可以写多个。

window.onload=function(){
//js代码 
}

等同于

$(window).load(function(){
//jquery代码
});

2、创建DOM元素的方式不同

利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。

而jQuery使用$就可以直接创建DOM元素

var oNewP = $("<p>使用jQuery创建的内容</p>");

以上代码等同于javascript

var oNewP2 = document.createElement("p");
var oText = document.createTextNode("这是使用javascript方法创建的内容");
oNewP2.appendChild(oText);

例:使用jQuery创建DOM

<script type="text/javascript">
$(function(){
var oNewP = $("<p>使用jQuery创建的内容</p>");
oNewP.insertAfter("#display"); //insertAfter方法
})
</script>
<div id="display"></div>

3、获取元素的方式不同

jquery:

通过id获取,jquery的语法更为简练$("#id").event;

通过class获取,$(.“css”).event()

通过属性html标签获取,$(“p”).event()是选中所有的p标签元素

通过属性值获取,$(“div[csdn]”).event()是选中div的属性为csdn的元素

event是对选中的元素的操作。

$(“div.p1”)和 $(“div .p1”)的区别:

  • $(“div.p1”)是对所有div进行筛选,选出class="p1"的div。

  • $(“div .p1”)是选中div下面的class="p1"的元素,不是这个div

js:

  • document.getElementById("elementId");//返回一个元素,按元素的ID名称来访问

  • document.getElementsByName("elementName");返回一组元素,按元素的name名称来访问

  • document.getElementsByTagName("tagName");返回一组元素,按标签来访问

  • document.getElementsByClassName("classname");返回一组元素,按class来访问

4、操作属性节点的方式不同

JavaScript使用

  • object.getAttribute(attribute)获取元素属性

  • object.setAttrbute(attribute,value)设置元素属性

<body>
<ul>
<li id="first">哈哈</li>
</ul>
</body>
<script>
document.getElementById("first").getAttribute("id");
document.getElementById("first").setAttribute("name","nafirst");
document.getElementById("first").removeAttribute("name");
</script>

b、JQuery使用

  • .attr()传入一个参数获取,传入两个参数设置

  • .prop()

prop和attr一样都可以对文本的属性进行读取和设置;

两者的不同 在读取checked,disabled,等属性名=属性值的属性时

attr返回属性值或者undefined,当读取的checked属性时不会根据是否选中而改变

prop返回true和false 当读取的checked属性时会根据是否选中而改变

也就是说attr要取到的属性必须是在标签上写明的属性,否则不能取到

<body>
<ul>
<li id="first">哈哈</li>
</ul>
</body>
<script src="js/jquery.js"></script>
<script>
$("#first").attr("id");
$("#first").attr("name","nafirst");
$("#first").removeAttr("name");
$("#first").prop("id"); 
$("#first").prop("name","nafirst"); 
$("#first").removeProp("name");
</script>

5、操作文本节点的方式不同

a、JavaScript使用

  • innerHTML:取到或设置一个节点的HTML代码,可以取到css,以文本的形式返回

  • innerText:取到或设置一个节点的HTML代码,不能取到css

  • value:取到input[type='text']输入的文本

<body>
<ul>
<li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
<li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名:<input type="text" id="input">
</body>
<script>
document.getElementById("serven_times").innerHTML;
document.getElementById("serven_times").innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
document.getElementById("eight_times").innerText;
document.getElementById("eight_times").innerText = "啦啦";
document.getElementById("input").value;
</script>

b、JQuery使用

  • .html()取到或设置节点中的html代码

  • .text()取到或设置节点中的文本

  • .val()取到或设置input的value属性值

<body>
<ul>
<li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
<li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名:<input type="text" id="input">
</body>
<script src="/js/jquery.min.js"></script>
<script>
$("#serven_times").html();
$("#serven_times").html("<span style='color: #ff3a29'>呵呵</span>");
$("#eight_times").text();
$("#eight_times").text("啦啦");
$("#input").val();
$("#input").val("哈哈");
</script>

6、操作css样式的时候

JavaScript:

1)、使用setAttribute设置class和style

document.getElementById("first").setAttribute("style","color:red");

2)、使用.className添加一个class选择器

document.getElementById("third").className = "san";

3)、使用.style.样式直接修改单个样式。注意样式名必须使用驼峰命名法

document.getElementById("four_times").style.fontWeight = "900";

4)、使用.style或.style.cssText添加一串行级样式:

document.getElementById("five_times").style = "color: blue;";//IE不兼容
document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";

JQuery:

$("#div2").css("color","yellow");
$("#div2").css({
"color" : "white",
"font-weight" : "bold",
"font-size" : "50px",
});

7、操作层次节点

JavaScript:

1)、childNodes:获取当前节点的所有子节点(包括元素节点和文本节点)

children:获取当前节点的所有元素子节点(不包括文本节点)

2)、parentNode:获取当前节点的父节点

3)、firstChild:获取第一个元素节点,包括回车等文本节点

firstElementChild:获取第一个元素节点,不包括回车节点

lastChild、lastElementChild 同理

4)、previousSibling:获取当前元素的前一个兄弟节点

previousElementSibling::获取当前元素的前一个兄弟节点

nextSibling、nextElementSibling

8、js和jquery转换

两种转换方式将一个jQuery对象转换成js对象:[index]和.get(index);

1)、jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的js对象。

如:

var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //js对象 
alert(v.checked) //检测这个checkbox是否被选中

2)、jQuery本身提供,通过.get(index)方法,得到相应的js对象

如:

var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //js对象 
alert(v.checked) //检测这个checkbox是否被选中

js对象转成jQuery对象:

对于已经是一个js对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(js对象)

如:

var v=document.getElementById("v"); //js对象 
var $v=$(v); //jQuery对象

转换后,就可以任意使用jQuery的方法了。

Image placeholder
前端答疑
未设置
  38人点赞

没有讨论,发表一下自己的看法吧

推荐文章
vue和jquery之间有什么区别?

首先我们来了解一下jquery和vue是什么?Vue是什么?Vue.js是一个前端JavaScript框架,用于构建用户界面。它是开源的。当使用其他JavaScript库时,它还可以用作集成工具。它本

jquery和jquery ui的区别?

jquery和jqueryui的区别?区别有:1、jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。 2、jQueryUI则是在jQuery的基础上,利用jQuery的扩展性,

jquery中prop()和attr()之间有什么区别?

1、操作对象不同很明显,attr和prop分别是单词attribute和property的缩写,并且它们均表示"属性"的意思。不过,在jQuery中,attribute和property却是两个不同的

jquery中$和$()之间有什么区别?

$就是jQuery的别称而jQuery就是jQuery库提供的一个函数。这个函数的作用是根据()里的参数进行查找和选择html文档中的元素,函数作用之一就是GetElementByID的代替,但()内

jquery on()与click()之间有什么区别?

jqueryon()与click()的区别click()属于静态加载,当页面加载完,就不在为新增加的元素添加点击事件。on()属于动态加载,当页面加载完,可以为新增加的元素添加事件。但是必须选定负级元

jquery中on和bind之间有什么区别?

bind方法与on方法都是事件绑定,但是两者却又有着一个大区别:事件冒泡(事件代理);jquery文档中bind和on函数绑定事件的用法:.bind(events[,eventData],handle

jsp和html之间有什么区别?

HTML(HypertextMarkupLanguage)文本标记语言,它是静态页面,和JavaScript一样解释性语言,为什么说是解释性语言呢?因为,只要你有一个浏览器那么它就可以正常显示出来,而

angular和vue之间有什么区别?

相同:1.数据绑定:vue和angular绑定都可以用{{}}2.都支持内置指令和自定义指令3.都支持内置过滤器和自定义过滤器。区别:1.学习成本和API设计:vue相比于angular来说更加的简单

jquery和js的区别是什么?

jquery和js的区别是什么?一、首先来看一下jQuery和js的概念jquery是一个快速、简洁的JavaScript库,极大的简化了javascript编程。js是一种脚本语言,常用于网页客户端

jquery和javascript有关系吗?

jquery和javascript有关系吗?有关系,具体的关系是:jquery是基于JavaScript编写的,jquery全部都是JavaScript代码组成。jquery和javascript的关

vuejs和jquery的区别是什么?

vuejs和jquery的区别1、jQuery首先要获取到dom对象,然后对dom对象进行进行值的修改等操作2、Vue是首先把值和js对象进行绑定,然后修改js对象的值,Vue框架就会自动把dom的值

js和jquery的区别是什么?

JavaScript和jQuery的区别:一、本质上的区别:js是网页脚本语言,而jQuery是基于js语言封装出来的一个前端框架。也就是说js是一种语言,而jQuery是基于该语言的一种框架。二、用

jquery和vue的区别是什么?

jquery和vue的区别是什么?●jquery是直接操作DOM;使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作;和原生的js区别只在于可以更方便的选取和操作DOM对象;数据和界面

jquery和zepto的区别是什么?

jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了Web2.0应用程序

jquery和ajax的区别是什么?

jquery和ajax的区别Ajax是一门技术,它提供了异步更新的机制,使用客户端与服务器间交换数据而非整个页面文档,实现页面的局部更新。jQuery是一个库,它对JS进行了封装,使其更方便使用。jQ

react和jquery的区别是什么?

首先我们要注意的是,虽然我们这里把React和JQuery拿到一个台面上来说,但是这两者是有本质区别的。React是一个UI库,但是JQuery更多的知识一个工具库或者说是插件库,我们之所以把这两者谈

Java和C语言有什么区别?学哪个语言好就业?

Java和C语言都是现阶段IT行业,说起它们之间的区别还是相当大的。许多编程语言的初学者在学习初期,都会遇到这样的问题,Java和C语言学哪个语言好就业?其实只要你学好其中随意一门,就业就都不会有太大

云原生存储和云存储有什么区别?

作者| 李鹏(壮怀)阿里云智能事业群高级技术专家导读:新的企业负载/智能工作负载容器化、迁云、存储方面遇到的性能、弹性、高可用、加密、隔离、可观测性以及生命周期等方面的问题,不但需要存储产品层次的改进

jquery text() val() html()之间的区别是什么?

jquerytext()val()html()之间的区别是什么?●text()获取元素内的文本,相当于js中的innerText●val()获取表单元素的值,相当于js中的input.value●ht

jquery和ajax是什么?

jquery是什么?jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了

jQuery和Zepto是什么?

jQuery是什么?jQuery是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了

innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

jquery变量加$和不加$的区别?

jquery变量加$和不加$的区别?加$和不加$没有区别,因为它们都是jquery变量。一般在给jquery对象取名的时候在前面加$。一看就知道是jquery对象。变量命名规则中起始字符可以是:●字母

jQuery中attr()和prop()的区别?

attr():attr()方法设置或返回被选元素的属性和值。当该方法用于返回属性值,则返回第一个匹配元素的值。当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。prop():prop()方