JQuery学习笔记(一)——验证用户名_H5之家 - 中国HTML5教程资源分享第一站

JQuery写尽量少的代码，完成更多的工作，避免浏览器之间的差异。

1、HTML负责页面内容，CSS负责页面样式，JavaScript负责页面行为

2、HTML中应该有DOCTYPE来告知浏览器的渲染方式

3、可以先定义div或span节点用于以后显示服务器返回数据

4、background-***可以控制背景图，以及图的位置、重复显示的方式

5、可以通过#idName或.className的方式来制定HTML节点样式

6、可以通过$(document).ready(function(){})的方式来定义页面装载完成时，需要执行的方法

7、可以通过$()方法来获得页面的指定节点，参数是某种css的选择器

8、可以在$()方法返回的jquery对象上执行各种jquery的方法来获取数据，定义事件，执行操作

9、val()方法可以获得节点的value属性值

10、html()方法可以设定某个节点中的HTML内容

11、click()方法可以响应鼠标点击事件

12、keyup()方法可以响应键盘弹起的事件

13、$.get()方法可以和服务器端进行get方式的交互，callback方法会在有数据返回的时候被调用，这个方法会接收到代表服务器端返回数据的一个纯文本的参数

14、addClass() removeClass()方法可以给某个节点添加或删除一个class

15、发送给服务器端的数据在JavaScript中做两次encodeURI，然后在服务器端的代码中按UTF-8的方式做一次URLDecode，可以解决中文乱码问题

例：通过ajax来验证用户名是否可用

userInput.html

<html> <head> <title>JQuery实战1-用户名校验</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/userVerify.css" /> <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="username" /><input id="verifyButton" type="button" value="校验" /> <div id="result"></div> </body> </html>

userVerify.css

.username { /*控制文本框的边框是红色的实线*/ border:1px solid red; /*文本框底部加图片*/ background-image:url(../images/userVerify.gif); background-repeat:repeat-x; background-position:bottom; } userVerify.js /* *需要通过JavaScript代码来做两件事情 1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到我们预留的div中，这样用就可以看到结果 2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图片就应该取消，否则保留 */ /* 需要在页面装载完成时执行这些工作 */ $(document).ready(function(){ //页面装载完成后需要执行的代码 //需要找到button按钮，注册事件 $("#verifyButton").click(function(){ //1、获取文本框的内容 var userName = $("#username").val(); //2、将这个内容发送到服务器端 if(userName == ""){ alert("用户名不能为空"); } else { $.get("?username="+userName,null,function(response){ //3、接收服务器端返回的数据，填充到div中 $("#result").html(response); });//$.get();与服务器交互 } }); //需要找到文本框，注册事件 $("#username").keyup(function(){ //获取当前文本框中的内容 var value = $(this).val(); if(value == ""){ //让边框变成红色，并且带背景图 $(this).addClass("username"); } else { //去掉边框和背景图 $(this).removeClass("username"); } }); });11.php <?php if(isset($_GET['username']) && $_GET['username']=="zhao"){ echo "可以使用用户名".$_GET['username']."注册"; } else { echo $_GET['username']."已被占用"; } ?>

运行结果：