【Web篇06】JavaScript、JQuery、Ajax的区分

区分这三兄弟之前，我们先来看一下Web前端和Web后端的简要结构和区别：
Web前端的三要素：
HTML（内容），
CSS（排版），
JS（行为，包含JavaScript和JQuery，实现网页动态效果）；
Web后端：负责与数据库交互，实现功能，数据存储等；一般要求会写java代码，会写SQL语句，spring和iBatis等。

● 下面我们来区分JS部分的这三兄弟：
一、JavaScript
直译为java脚本语言，以下简写为JS；用来实现网页的动态效果，例如弹窗、文本显示、图片轮换、超链接等；
何为java脚本？
脚本，在文学作品中可以理解为“剧本”，负责一场戏的结构框架和剧情大纲；
java脚本，即JS，就是在</head>上面的<script> </script>之间写的一段代码，这段代码用于和用户的操作进行交互；实现网页动态效果。

eg：用户鼠标发生经过网页上某些图片、文本框、拖拽某张图片等事件时，在JavaScript中用代码实现选取目标，然后绑定单击事件，通过：
（1）function(res){ $("#id").text(res);}响应res对应语句（事先在对应servlet中写好的response响应语句）；
（2）alert弹窗等；来实现网页的动态效果。
★ 这里插一下text( )的用法
text()方法：用来获取或设置成对出现的标签中的文本值
对象.text()：获取文本值
对象.text(“new value”)：设置文本值

二、JQuery

是JS的一个框架，写在jsp页面的<script 标签中，表达式是 $( )，一般代替JS用于选择器的作用；
JQuery是当前比较主流的 JavaScript 库，封装了很多预定义的对象和实现函数；
相比JS，它可以大大简化JavaScript脚本语言的编写，获取对象，加单击事件，实现动态效果（弹窗、显示文本等）；

★ JQuery：$( )，写在jsp页面的</head标签上的<script中；
EL表达式：${ }，写在jsp页面的<body标签中
★ 使用JQuery之前，需要在WebContent下的script目录中先加入下面这个两个源码文件
在这里插入图片描述
然后在</head标签上面，引入JQuery源码，写两段<script标签如下，：

<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
	写入JQuery语句内容，可以接受任何类型的语句
	</script>

JQuery表达式的主要用法：$(“选择器”)、$(“对象”)（当前对象用this）
（1）定位元素：
$(“#id”)，根据id选择
$(“标签”)，根据标签名选择
$(“.class”)，依据类名选择
（2）改变元素内容：
$("#id").text("new value")
（3）获取元素内容：
$("#id").text( )
（4）绑定函数，文档全部执行完后才执行function函数中的内容
$( function( ){ } )

★ JS和JQuery对dom文档更改方式的区别：
JS是通过document.getElementById(“id值” )找到特定id值的dom并进行更改；
JQuery是用$("#id ")来找到特定id值的对象；

两者都是定位元素，只是写法不一样，JQuery更简洁，所以我们一般用JQuery代替了JS表达式。

三、Ajax
Ajax是JavaScript的另一个框架，是一门技术，用于发送异步请求，实现页面的局部更新。

【Web篇06】JavaScript、JQuery、Ajax的区分

猜你喜欢