浅谈JS、Ajax、JQuery之间的关系
在JS中，获取某一元素值，可通过如下方式：
var xx = obj._value;也可以通过jquery的方式
// 通过jquery方式获取元素值
var xx = $(obj).attr('_value'); 下面主要讲解下jquery方面的基础知识，在网站开发过程中，jquery的确是一把利器。
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是：它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。
举个小例子：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>下面讲解下原生JS和jQuery操作DOM对比总结
一、创建元素节点
1.1 原生JS创建元素节点
document.createElement("p");1.2 jQuery创建元素节点
$('<p></p>');二、创建并添加文本节点
2.1 原生JS创建文本节点
document.createTextNode("Text Content");通常创建文本节点和创建元素节点配合使用，比如：
var textEl = document.createTextNode("Hello World.");
var pEl = document.createElement("p");
pEl.appendChild(textEl);2.2 jQuery创建并添加文本节点：
var $p = $('<p>Hello World.</p>');三、复制节点
3.1 原生JS复制节点:
var newEl = pEl.cloneNode(true);true和false的区别：
true ：克隆整个'<p>Hello World.</p>'节点
false：只克隆'<p></p>' ，不克隆文本Hello World.'3.2 jQuery复制节点
$newEl = $('#pEl').clone(true);注意：克隆节点要避免ID重复
四、 插入节点
4.1 原生JS向子节点列表的末尾添加新的子节点
El.appendChild(newNode);原生JS在节点的已有子节点之前插入一个新的子节点：
El.insertBefore(newNode, targetNode);4.2 在jQuery中，插入节点的方法比原生JS多的多 在匹配元素子节点列表结尾添加内容
$('#El').append('<p>Hello World.</p>');把匹配元素添加到目标元素子节点列表结尾
$('<p>Hello World.</p>').appendTo('#El');在匹配元素子节点列表开头添加内容
$('#El').prepend('<p>Hello World.</p>');把匹配元素添加到目标元素子节点列表开头
$('<p>Hello World.</p>').prependTo('#El');在匹配元素之前添加目标内容
$('#El').before('<p>Hello World.</p>');把匹配元素添加到目标元素之前
$('<p>Hello World.</p>').insertBefore('#El');在匹配元素之后添加目标内容
$('#El').after('<p>Hello World.</p>');把匹配元素添加到目标元素之后
$('<p>Hello World.</p>').insertAfter('#El');五、删除节点
5.1 原生JS删除节点
El.parentNode.removeChild(El);5.2 jQuery删除节点
$('#El').remove();六、替换节点
6.1 原生JS替换节点
El.repalceChild(newNode, oldNode);注意：oldNode必须是parentEl真实存在的一个子节点 6.2 jQuery替换节点
$('p').replaceWith('<p>Hello World.</p>');七、设置属性/获取属性
7.1 原生JS设置属性/获取属性
imgEl.setAttribute("title", "logo");
imgEl.getAttribute("title");
checkboxEl.checked = true;
checkboxEl.checked;7.2 jQuery设置属性/获取属性:
$("#logo").attr({"title": "logo"});
$("#logo").attr("title");
$("#checkbox").prop({"checked": true});
$("#checkbox").prop("checked");下面接着讲下jquery获取元素值的方法(常见的表单元素)
获取元素值的方法有很多，接下来主要为大家详细介绍下使用jquery是如何做到的：jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关。 获取一组radio被选中项的值
var item = $('input[name=items][checked]').val(); 获取select被选中项的文本
var item = $("select[name=items] option[selected]").text();select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值
$('input[name=items]').get(1).checked = true;获取值： 文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();
控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容 多选框checkbox：$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾
单选组radio：$("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框select：
$("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option>
<option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框如有侵权，请联系删除。
作者：奔雷手
链接： https://juejin.cn/post/6916813111869571080
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
文章被以下专栏收录
