JS 与 jQuery 的区别是什么? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
JS 和 jQuery 的区别
1, 入口函数不同
JS:Windows.onload = function(){内部放 JS}
实质就是一个事件, 拥有事件的三要素, 事件源, 事件, 事件处理程序. 等到所有内容, 以及我们的外部图片之类的文件加载完了之后, 才会去执行. 只能写一个入口函数.
jQuery:$(function(){})或者 $(document).ready(function(){})
是在 html 所有标签都加载之后, 就回去执行. 可以写多个.
- Windows.onload=function(){
- //JS 代码
- }
等同于
- $(Windows).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, 操作属性节点
a.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 的方法了.
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17873.html