前言
Dreamweaver是一款非常实用,编辑HTML、CSS文件的工具,自己使用这款工具完成了jQuery知识的学习,下面小编来分享一下其中的一个实例,用户验证的一个例子,重点是CSS样式与HTML结合和jQuery方法的使用,Tomcat服务器的部分会在之后的AJAX的学习中安装使用。
认识Dreamweaver
一、背景
小编知道有这么一款工具是在学习ASP.NET视频中,当时便安装上了,但是没有用到,这不在这里派上了用场。
二、百度百科
1.简称“DW”,中文名称“梦想编织者”,2005年Adobe公司从美国MACROMEDIA公司收购;
2.作用
集网页制作和管理网站于一身的所见即所得网页代码的编辑器;
3.强大之处
能够利用对HTML、CSS、JavaScript等内容的支持,设计人员和开发人员可以在几乎任何地方快速制作和进行网站建设。
三、使用图
用户验证的例子实现
一、编写HTML代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery实战1-用户名校验</title>
<link href="css/userVerify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/userVerify.js"></script>
</head>
<body>
请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" />
<div id="result"></div>
</body>
</html>
二、设计CSS样式
.userText{
/*控制文本框 */
border:1px solid red;
background-image:url(../images/userVerify.gif);
background-repeat:repeat-x;
background-position:bottom;
}
三、JQuery实现网页行为
需要进行两件事情,如下:
1.点击button校验时,获取文本框的内容,发送给服务器端,最后接收服务器返回的数据,填充到预留的div中,以便用户看到结果;
//页面装载后执行的代码
$(document).ready(function(){
//button按钮,注册事件
$("#verifyButton").click(function(){
//获取文本框的值
var userName=$("#userName").val();
//将内容发送给服务端
if(userName==""){
alert("用户名不能为空!");
}else{
//接收服务端的数据,填充到div中
$("#result").html(userName);
}
});
//文本框,注册事件
$("#userName").keyup(function(){
var value=$(this).val();
if(value===""){
//如果文本框为空,保留红色边框和背景图
$(this).addClass("userText");
}else{
//如果不为空则去掉边框和背景图
$(this).removeClass("userText");
}
});
});
小结
通过这个小例子,我们可以学到一些知识点,HTML负责页面内容,CSS负责页面样式,JavaScript负责页面行为;可以通过$()方法来获得页面的指定节点,参数是某种css的选择器,如上面提到的“$("#verifyButton")”等,这些知识点在JavaScript中就学到了,是一种不断融合和联系的过程。
感谢您的访问!