jQuery 和原生JS写法 区别
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jQuery 和原生JS写法 区别，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9733字，纯文字阅读大概需要14分钟。
内容图文
jQuery代码具体的写法和原生的Javascript写法在执行常见操作时的区别如下：
1 定位元素
JS
document.getElementById("abc")
jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位
需要注意的是JS返回的结果是这个元素，jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。
2 改变元素的内容
JS
abc.innerHTML = "test"; //现在的项目中有用到
jQuery
abc.html("test");
3 显示隐藏元素
JS
abc.style.display = "none"; //现在的项目中有用到
abc.style.display = "block";
jQuery
abc.hide();
abc.show();
abc.toggle(); //在显示和隐藏之间切换、
4 获得焦点
JS和jQuery是一样的，都是abc.focus();
5 为表单赋值
JS
abc.value = "test";
jQuery
abc.val("test");
6 获得表单的值
JS
alert(abc.value);
jQuery
alert(abc.val());
7 设置元素不可用
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);
8 修改元素样式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);
JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");
9 判断复选框是否选中
jQuery
if(abc.attr("checked") == "checked")
注意：网上说的.attr("checked") == true实际上不能用，上面这个测试过能用
①.根据ID取元素
{
JS:取到的是一个DOM对象。
例：var div = document.getElementByID("one");
JQUERY:取到的是一个JQUERY对象。
例：var div = $("#one");——括号里面是根据某个东西来找，相当于一个选择，如果我们要根据ID来找，在样式表里的ID是用#来表示的，所以在这里我们直接带入井号，整句的意思就是根据ID为one的来查找。
}
②.根据class取元素，在数组里面如果要取DOM对象使用索引的方式，如果要取JQUERY对象使用eq()
{
JS:取到的是一个数组
例：var div = document.ElementsByClassName("test");
JQUERY:
例：var div = $(".test");
}
③.根据name取元素
{
JS：返回的是一个数组
例：var bd = document.getElementsByName(uid);
JQUERY：的方式是用 方括号，属性=一个值，不限制非要根据name来取值，JQUERY是根据属性来取元素
例：$("[name='uid']");
}
④.根据标签名取元素
{
JS：返回的也是一个数组
例：var div = document.getElementsByTagName("div");
JQUERY：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名
例：$("div");
}
附：JQUERY的其他取值方式
组合选取：var div = $("div span");——有很多组合方式
*******************************************************************
操作内容
①.非表单元素（如果是文本就用text方法，如果是html代码就用html方法）
{
例：div.text();——无参数的情况下是取值
div.text("aaaa");——有参数的情况下是赋值
div.html();——无参数的情况下是取值
div.html("aaaa");——有参数的情况下是赋值
}
②.表单元素
{
JS：div.value;——取值；div.value = xxx;——赋值
JUQERY：div.val();——无参数是取值，有参数是赋值。
}
*******************************************************************
操作属性
JS里面用来操作属性的方法是
div.setAttribute("","");——设置属性、修改属性
div.removeAttribute("");——移除属性，引号里面写一个属性名
div.getAttribute();——获取属性
JQUERY里面用来操作属性的方法
添加属性：div.attr("test","aa");——给这个attr方法加入参数，属性名叫做test，属性的值是aa
移除属性：div.removeAttr("test");——移除test这条属性
获取属性：div.attr("test");——在attr方法里面直接写入一个属性的名就可以了
*******************************************************************
操作样式
JS里面操作样式的关键字是style
例：div.style.backgroundColor = "red";——把这个div的背景色设置成为了红色
JQUERY里面操作样式的关键字是css
例：div.css("background-color","yellow");——把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
JQUERY操作样式的方法可以是内联的也可以是内嵌的
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.操作属性节点
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的方法了。
内容总结
以上是互联网集市为您收集整理的jQuery 和原生JS写法 区别全部内容，希望文章能够帮你解决jQuery 和原生JS写法 区别所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。