网站开发进阶(五十三)浅谈 JS、Ajax、JQuery 之间的关系
在项目开发过程中,遇到了一个奇怪的问题,详参《网站开发进阶(五十二)jsp诡异问题:从不同链接点进去进入同一jsp页面,获取的值确不同!》。由此,而催生出此篇博文。 在 JS 中,获取某一元素值,可通过如下方式:
也可以通过jquery
的方式获取:
下面主要讲解下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 创建元素节点
1.2 jQuery
创建元素节点
二、创建并添加文本节点
2.1 原生 JS 创建文本节点
通常创建文本节点和创建元素节点配合使用,比如:
2.2 jQuery 创建并添加文本节点:
三、复制节点
3.1 原生 JS 复制节点:
true 和 false 的区别:
3.2 jQuery 复制节点
注意⚠️:克隆节点要避免 ID 重复!
四、 插入节点
4.1 原生 JS 向子节点列表的末尾添加新的子节点
原生 JS 在节点的已有子节点之前插入一个新的子节点:
4.2 在 jQuery 中,插入节点的方法比原生 JS 多的多在匹配元素子节点列表结尾添加内容
把匹配元素添加到目标元素子节点列表结尾
在匹配元素子节点列表开头添加内容
把匹配元素添加到目标元素子节点列表开头
在匹配元素之前添加目标内容
把匹配元素添加到目标元素之前
在匹配元素之后添加目标内容
把匹配元素添加到目标元素之后
五、删除节点
5.1 原生 JS 删除节点
5.2 jQuery 删除节点
六、替换节点
6.1 原生 JS 替换节点
注意⚠️:oldNode 必须是 parentEl 真实存在的一个子节点!6.2 jQuery 替换节点
七、设置属性/获取属性
7.1 原生 JS 设置属性/获取属性
7.2 jQuery 设置属性/获取属性:
下面接着讲下 jquery 获取元素值的方法(常见的表单元素)。
获取元素值的方法有很多,接下来主要为大家详细介绍下使用jquery
是如何做到的:jquery radio 取值,checkbox 取值,select 取值,radio 选中,checkbox 选中,select 选中,及其相关。获取一组 radio 被选中项的值
获取 select 被选中项的文本
select 下拉框的第二个元素为当前选中值
radio 单选组的第二个元素为当前选中值
获取值:
文本框,文本区域:
$("#txt").attr("value");
多选框 checkbox:
$("#checkbox_id").attr("value");
单选组 radio:
$("input[@type=radio][@checked]").val();
下拉框 select:
$('#sel').val();
控制表单元素:文本框,文本区域:$("#txt").attr("value",'');//清空内容
多选框 checkbox: $("#chk1").attr("checked",'');//不打勾
单选组 radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框 select:
欲获取更多关于JQuery
的技能,详参W3CSchool
。
八、附 学习参考资料
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/d9f6e76248b774ba236596455】。文章转载请联系作者。
评论