浅谈JS、Ajax、JQuery之间的关系

在项目开发过程中，遇到了一个奇怪的问题，详参《网站开发进阶（五十二）jsp诡异问题：从不同链接点进去进入同一jsp页面，获取的值确不同！》。由此，而催生出此篇博文。

在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里面插入一堆js来调用命令了，只需定义id即可。

jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。微软公司甚至把jQuery作为他们的官方库。对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

举个小例子：

下面讲解下原生JS和jQuery操作DOM对比总结

一、创建元素节点

1.1 原生JS创建元素节点

document.createElement("p");

1.2 jQuery创建元素节点

$('');

二、创建并添加文本节点

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 = $('

Hello World.

');

三、复制节点

3.1 原生JS复制节点:

var newEl = pEl.cloneNode(true);

true和false的区别：

true ：克隆整个'

Hello World.

'节点 false：只克隆'' ，不克隆文本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('

Hello World.

');

把匹配元素添加到目标元素子节点列表结尾

$('

Hello World.

').appendTo('#El');

在匹配元素子节点列表开头添加内容

$('#El').prepend('

Hello World.

');

把匹配元素添加到目标元素子节点列表开头

$('

Hello World.

').prependTo('#El');

在匹配元素之前添加目标内容

$('#El').before('

Hello World.

');

把匹配元素添加到目标元素之前

$('

Hello World.

').insertBefore('#El');

在匹配元素之后添加目标内容

$('#El').after('

Hello World.

');

把匹配元素添加到目标元素之后

$('

Hello World.

').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('

Hello World.

');

七、设置属性/获取属性

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的项目为当前选中项 $("1111 2222").appendTo("#sel")//添加下拉框的option $("#sel").empty()；//清空下拉框

欲获取更多关于JQuery的技能，详参W3CSchool。

附 学习参考资料

Jquery学习手册

Ajax jQuery

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。