1. 原生JavaScript是一种基于ECMAScript规范的编程语言,而jQuery是基于JavaScript的一个库,它提供了一种更简洁、易用的语法来操作HTML文档、处理事件、执行动画等。
2. 原生JavaScript没有依赖任何外部库,而jQuery依赖于jQuery库。这意味着使用jQuery需要先引入jQuery库。
3. 原生JavaScript的代码通常比jQuery代码更冗长,因为它需要手动编写DOM操作、事件处理等功能。而jQuery代码则可以简化这些操作,使代码更简洁、易读。
4. 原生JavaScript的事件处理方式较为繁琐,需要为每个元素分别绑定事件处理函数。而jQuery提供了一种更简洁的方式来绑定事件处理函数,例如使用`.on()`方法。
5. jQuery提供了许多内置的动画效果,如淡入淡出、滑动等,而原生JavaScript则需要自己实现这些效果。
代码演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>02-jQuery的核心函数和核心对象.html</title><!-- 1.jQuery核心函数简称:jQuery函数($/jQuery)引入jQuery库以后,直接使用$/jQuery即可当函数用:$(params)当对象用的时候:$.each()2.jQuery核心对象简称:jQuery对象 $()得到jQuery对象:执行jQuery函数返回的就是jQuery对象使用jQuery对象:$obj.xxx()--><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="../../jquery-3.5.1/jquery-3.5.1.js"></script><script>$(function () {// jQuery核心函数console.log($, typeof $);// jQuery核心对象console.log($(), $() instanceof Object);})</script>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>03-比较原生js和jQuery.html</title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;border: 1px solid black;}</style><!-- 需求 通过原生js和jQuery来获取到三个div 并且修改他们的背景颜色 --><!-- 导入cdn --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="../../jquery-3.5.1/jquery-3.5.1.js"></script><script>// JS原生DOMwindow.onload = function () {// 1.利用原生JS来查找DOM元素var div1 = document.getElementsByTagName('div')[0]var div2 = document.getElementsByClassName('box1')[0]var div3 = document.getElementById('box2')// console.log(div1);// console.log(div2);// console.log(div3);// 2.利用原生JS修改背景颜色// div1.style.backgroundColor = 'red'// div2.style.backgroundColor = 'yellow'// div3.style.backgroundColor = 'blue'}// jQuery$(document).ready(function () {// 1.通过jQuery来查找元素var $div1 = $('div:first')var $div2 = $('.box1')var $div3 = $('#box2')// console.log($div1);// console.log($div2);// console.log($div3);// 2.利用jQuery来修改背景颜色$div1.css({backgroundColor: 'red'})$div2.css({backgroundColor: 'yellow',width: '200px',height: '200px'})$div3.css({backgroundColor: 'blue'})})</script>
</head>
<body><div></div><div class="box1"></div><div id="box2"></div>
</body>
</html>