jQuery 和 JavaScript 之间有什么区别? 下面本篇文章就来给大家介绍一下 jQuery 和 JavaScript 的区别, 希望对大家有所帮助.
JavaScript 和 jQuery 的区别
1, 本质上的区别
JavaScript 是一门编程语言, 我们用它来编写客户端浏览器脚本. jQuery 是基于 JavaScript 的一个库, 包含多个可重用的函数, 用来辅助我们简化 JavaScript 开发.
jQuery 能做的 javascipt 都能做到, 而 JavaScript 能做的事情, jQuery 不一定能做到
2, 兼容性的区别
JavaScript 有各种浏览器兼容问题, 代码复杂冗余, 而 jQuery 中完全没有兼容性问题.
3, 语法上的差异
1), 操作元素节点
JavaScript 使用: getElement 系列, query 系列
- <body>
- <ul>
- <li id="first">哈哈</li>
- <li class="cls" name ="na">啦啦</li>
- <li class="cls">呵呵</li>
- <li name ="na">嘿嘿</li>
- </ul>
- <div id="div">
- <ul>
- <li class="cls">呵呵</li>
- <li > 嘿嘿</li>
- </ul>
- </div>
- </body>
- <script>
- document.getElementById("first"); // 是一个元素
- document.getElementsByClassName("cls"); // 是一个数组, 即使只有一个元素, 使用时需要用 [0] 取到第一个再使用
- document.getElementsByName("na"); // 是一个数组, 即使只有一个元素, 使用时需要用 [0] 取到第一个再使用
- document.getElementsByTagName("li"); // 是一个数组, 即使只有一个元素, 使用时需要用 [0] 取到第一个再使用
- document.querySelector("#div"); // 是一个元素
- document.querySelectorAll("#div li"); // 是一个数组, 即使只有一个元素, 使用时需要用 [0] 取到第一个再使用
- </script>
jQuery 使用: 大量的选择器同时使用 $()包裹选择器
- <body>
- <ul>
- <li id="first">哈哈</li>
- <li class="cls" name ="na">啦啦</li>
- <li class="cls">呵呵</li>
- <li name ="na">嘿嘿</li>
- </ul>
- <div id="div">
- <ul>
- <li class="cls">呵呵</li>
- <li > 嘿嘿</li>
- </ul>
- </div>
- </body>
- <script src="http://code.jquery.com/jquery-1.6.min.js"></script>
- <script> // 使用 jQuery 取到的是 jQuery 对象都是一个数组, 即使只有一个元素被选中,
- // 但是在使用时候不一定需要使用: eq(0)来拿到这一个在使用可以直接使用
- $("#first");
- $(".cls");
- $("li type[name='na']");
- $("li");
- $("#div");
- $("#div li");
- </script>
2), 操作属性节点
JavaScript 使用: getAttribute("属性名") , setAttribute("属性名","属性值")
- <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>
jQuery 使用
.attr()传入一个参数获取, 传入两个参数设置;.prop()
prop 和 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>
来源: http://www.css88.com/qa/javascript/11614.html