写点什么

网站开发进阶(五十三)浅谈 JS、Ajax、JQuery 之间的关系

  • 2022 年 5 月 10 日
  • 本文字数:2416 字

    阅读完需:约 8 分钟

网站开发进阶(五十三)浅谈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 documentsevents、实现动画效果,并且方便地为网站提供AJAX交互。


jQuery还有一个比较大的优势是:它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的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>
复制代码


下面讲解下原生JSjQuery操作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();//清空下拉框
复制代码


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

八、附 学习参考资料

发布于: 刚刚阅读数: 2
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系_JavaScript_No Silver Bullet_InfoQ写作社区