在学习 JS 的时候我们肯定能够接触到 jQuery, 那么, JS 与 jQuery 之间有什么区别呢? 本篇文章将给大家来分享关于 jQuery 与 JS 之间的区别比较. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
JS 是一种脚本语言, 常用于网页客户端编程, 使网页在客户端浏览器中, 实现更多地动态功能, 表现出更加丰富的视觉效果.
jQuery 是一个简洁而快速的 JavaScript 库, 可用于简化事件处理, html 文档遍历, Ajax 交互和动画, 以便快速开发网站. jQuery 简化了 HTML 的客户端脚本, 从而简化了 web 2.0 应用程序的开发.
JS 和 jQuery 的区别
本质上的区别
JavaScript 是通过标签插入到 HTML 页面, 可由所有的现代浏览器执行的一种轻量级的编程语言.
jQuery 是一个 JavaScript 函数库. 或者说是 JavaScript.
使用 jQuery 首先要在 HTML 代码最前面加上对 jQuery 库的引用, 比如:
库文件既可以放在本地, 也可以直接使用知名公司的 CDN, 好处是这些大公司的 CDN 比较流行, 用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了, 所以能加快网站的打开速度. 另外一个好处是显而易见的, 节省了网站的流量带宽.
例如:
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
- </script>
- //Google //G 或者:
- <script src="http://code.jquery.com/jquery-1.6.min.js">
- </script>
- //jQuery 官方
JavaScript 是网页编程语言, 而 jQuery 是一个基于 JS 编写的框架;
jQuery 就是基于 JavaScript 语言写出来的一个框架, 实质上还是 JS 而已
So:
jQuery 是一个 JavaScript 库;
jQuery 极大地简化了 JavaScript 编程;
jQuery 使 JavaScript 更好用;
jQuery 就是要用更少的代码, 漂亮的完成更多的功能;
最直观的区别就是: 外观上 jQuery 对象比 JS 对象多了 "$()".
操作属性
JavaScript 里面用来操作属性的方法:
div.setAttribute("","");-- 设置属性, 修改属性
div.removeAttribute("");-- 移除属性, 引号里面写一个属性名
div.getAttribute();-- 获取属性
jQuery 里面用来操作属性的方法:
添加属性: div.attr("test","aa"); -- 给这个 attr 方法加入参数, 属性名叫做 test, 属性的值是 aa
移除属性: div.removeAttr("test"); -- 移除 test 这条属性
获取属性: div.attr("test"); -- 在 attr 方法里面直接写入一个属性的名就可以了
操作样式
JavaScript 里面操作样式的关键字是 style
例: div.style.backgroundColor = "red";-- 把这个 div 的背景色设置成为了红色
jQuery 里面操作样式的关键字是 CSS
例: div.CSS("background-color","yellow");-- 把这个 div 的背景色变为黄色, 在这里 CSS 里面所有的样式和 CSS 样式表里面的样式是一模一样的没有任何变化.
JavaScript 操作样式的方法只能获取内联样式, 不能取内嵌的和外部的.
jQuery 操作样式的方法可以是内联的也可以是内嵌的.
一些方法对比:
1使用 JavaScript 和 jQuery 分别加载 DOM
JavaScript 只会执行一次, 而 jQuery 会执行多次
2使用 JavaScript 和 jQuery 获取 ID
- JavaScript:
- document.getElementById('idName')
jQuery:
$('#idName')
3使用 JavaScript 和 jQuery 获取 class
JavaScript 没有默认的获取 class 的方法
jQuery:
$('.className')
使用 jQuery 最大的好处是少量的代码做更多的事情, 与 JavaScript 相比, jQuery 的语法更加简单.
更多网站前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/javascript/15874.html