区分这三兄弟之前,我们先来看一下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的另一个框架,是一门技术,用于发送异步请求,实现页面的局部更新。