写这篇回顾之前，搜集了一些 JavaScript 和 jQuery 的文章，我把链接放到下面，供大家查看。
1 JavaScript 标准参考教程（alpha） http://javascript.ruanyifeng.com/#
2 jQuery 教程 http://www.runoob.com/jquery/jquery-tutorial.html
目录
一、JavaScript
1、JavaScript 是什么
Java 与 javascript 有什么区别？ 它们没有关系，雷锋和雷峰塔的关系，估计是想蹭蹭热度。。。
2 JavaScript 作用
- HTML：它是整个网站的骨架。
- CSS：它是对整个网站骨架的内容进行美化(修饰) 。
- Javascript：它能够让整个页面具有动态效果。
3 JavaScript 的组成部分
- ECMAScript : 它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数 据类型、语句、函数等等)
- DOM（Document Object Model）：文档对象模型，包含(整个 html 页面的内容)、
- BOM（Browser Object Model）：浏览器对象模型,包含(整个浏览器相关内容)
4 JavaScript 语法
- 区分大小写
- 变量是弱类型的(String str=”aaa” ,var str=”123”;)
- 每行结尾的分号可有可无(建议大家写上)
- 注释与 java、php 等语言相同。
5 JavaScript 变量
变量可以不用声明，变量是弱类型。统一使用 var 来定义！
定义变量的时候不要使用关键字 和保留字。
6 JavaScript 数据类型
Javascript 数据类型分为原始数据类型和引用数据类型 原始数据类型：
string、number、boolean、null、undefined
引用数据类型：
7 JavaScript 运算符
其它运算符与 java 大体一致，需要注意其等性运算符。
== 它在做比较的时候会进行自动转换。
=== 它在做比较的时候不会进行自动转换。
8 JavaScript 的输出
- 警告框：alert();
- 向页面指定位置写入内容：innerHTML(属性)
- 向页面写入内容：document.write(“”);
9 JavaScript 事件
步骤分析
- 第一步：确定事件(onsubmit)并为其绑定一个函数
- 第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
- 第三步：对用户输入的数据进行判断 第四步：数据合法(让表单提交)
- 第五步：数据非法(给出错误提示信息，不让表单提交)
问题： 如何控制表单提交？
关于事件 onsubmit：
一般用于表单提交的位置，那么需要在定义函数的时候给出一个 返回值。
onsubmit = return checkForm()
代码实现
<script>
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
//alert(uValue); if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空!");
return false;
}
/*校验密码*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空!");
return false;
}
/**校验确认密码*/
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致!");
return false;
}
/*校验邮箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
</script>Html 部分：
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
用思维导图编写一下js的重点，当然里面有些东西是抄的┭┮﹏┭┮
上面的这个小例子，需要大家结合自己的实际来来写，另外JavaScript就先介绍到这里，毕竟不是主要主学JavaScript。上面的两个链接，阮一峰，还有 菜鸟教程 的都可以，写的比我好很多。
二、jQuery
先上一张图，总结一下我学jQuery的几个要点（不喜勿喷，学的不是很深入。。）
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
jQuery 很容易学习。
jQuery是很容易学习的，不过大概像很多经典游戏一样，都是易学难精一样，要想精通确实要花费不少功夫的，我只是学了点皮毛而已。
下面在举一个jQuery的实例，jQuery就跳了，到后面如果再接触到前端的东西，再进行总结。
1 使用jQuery完成表单校验
在学习JavaScript 时，我们手动的完成过表单数据的校验，此功能在开发中非常常见， 属于通用
功能范畴，实际开发一般使用都是第三方工具。使用jQuery 插件validation 进行表单的校验。
- 导入
- 使用前提
| 校验类型 | 取值 | 描述 |
| required | true Ifalse | 必填宇段 |
| | | 邮件地址 |
| url |
| 路径 |
| date | 数字 | 日期 |
| date ISO | 字符串 | 日期 （ YYYY-MM-dd ) |
| number |
| 数字 （ 负数，小数） |
| digits |
| 整数 |
| minlength | 数字 | 最小长度 |
| maxlength | 数字 | 最大长度 |
| rangelength | [minL,maxL] | 长度范围 |
| min |
| 最小值 |
| max |
| 最大值 |
| range | [min,max] | 值范围 |
| equalTo | jQuery 表达式 | 两个值相同 |
| remote | url 路径 | ajax 校验 |
- 检验方式： js 代码方式
- js 代码
<script>
$(function(){
$("#registForm").validate({
rules:{
user:{
required:true,
minlength:3
},
password:{
required:true,
digits:true,
minlength:6
},
repassword:{
required:true,
equalTo:"[name='password']"
},
email:{
required:true,
email:true
},
username:{
required:true,
maxlength:5
},
sex:{
required:true
}
},
messages:{
user:{
required:"用户名不能为空!",
minlength:"用户名不得少于3位!"
},
password:{
required:"密码不能为空!",
digits:"密码必须是整数!",
minlength:"密码不得少于6位!"
},
repassword:{
required:"确认密码不能为空!",
equalTo:"两次输入密码不一致!"
},
email:{
required:"邮箱不能为空!",
email:"邮箱格式不正确!"
},
username:{
required:"姓名不能为空!",
maxlength:"姓名不得多于5位!"
},
sex:{
required:"性别必须勾选!"
}
},
errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label
success: function(label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签label
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
});
</script>- html 代码
<div id="form2">
<table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td colspan="2" >
<font size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td width="180px">
<label for="user" >用户名</label>
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="user" size="35px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="password" size="35px" id="password" />
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<em style="color: red;">*</em> <input type="password" name="repassword" size="35px"/>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="email" size="35px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="username" size="35px"/>
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<span style="margin-right: 155px;">
<em style="color: red;">*</em> <input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女<em></em>
<label for="sex" class="error" style="display: none;"></label>
</span>
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="birthday" size="35px"/>
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<em style="color: red;">*</em> <input type="text" name="yanzhengma" />
<img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注 册" height="50px"/>
</td>
</tr>
</table>
</div>
三、Ajax
1 什么是Ajax？
2 同步现象，异步现象，Ajax运行原理
- 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待 卡死状态
- 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随 意做其他事情，不会被卡死
- Ajax 运行原理 ： 页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
3 Jquery的Ajax技术（重点）
jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操 作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中 经常使用的有三种
- $.get(url, [data], [callback], [type])
- $.post(url, [data], [callback], [type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
- $.ajax( { option1:value1,option2:value2... } ); ------后面学到了，再接着掌握
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
扫一扫
1360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
