1.回顾练习
简单的表格校验,实现以下目标:
①创建一个表单,包含用户名和邮箱两个表单元素;
②点击提交按钮或光标离开文本框时触发校验;
③用户名不能为空,长度必须是4-10。
④邮箱不能为空,长度6-50,必须有@和.且.在@后面。
<body>
<form action="" method="get" id="frm" >
<p>
用户名:<br />
<input type="text" id="username" name="username" onblur="checkName()">
</p>
<div class="err"></div>
<p>
邮箱:<br />
<input type="text" id="email" name="email" onblur="checkEmail()">
</p>
<div class="err"></div>
</form>
<div onclick="checkAll()" id="send">
发送
</div>
<script>
var err = document.querySelectorAll(".err");
function checkName(){
var name = username.value.length;
if(username.value.trim()==0){
err[0].innerText="用户名为空";
return false;
}
if(name<4||name>10){
err[0].innerText="长度不是4-10";
return false;
}
err[0].innerText=""
return true;
}
function checkEmail(){
var em = email.value.length;
var at = email.value.indexOf("@");
var dot = email.value.indexOf(".");
if(em==0){
err[1].innerText="邮箱为空";
return false;
}
if(em<6||em>50){
err[1].innerText="长度不是6-50";
return false;
}
if(at==-1){
err[1].innerText="没有@";
return false;
}
if(dot == -1){
err[1].innerText="没有.";
return false;
}
if(dot<at){
err[1].innerText="@在.后面";
return false;
}
err[1].innerText="";
return true;
}
function checkAll(){
//checkName();
//checkEmail();
if(checkName() & checkEmail()){
frm.submit();
}
}
</script>
</body>
2.正则表达式
2.1 什么是正则表达式
2.2 为什么要用正则表达式
有一些比较复杂的校验使用字符串提供的方法不能很好的校验,那么此时就使用正则进行一些复杂校验,如:身份证号,手机号,只能输入汉字校验...
2.3 正则表达式的使用
创建正则表达式:
var 变量名 = new RegExp("表达式","附加参数");
var reg = /表达式/附加参数
附加参数:g(global):全局匹配 i(ignoreCase):不区分大小写
使用正则表达式:
test() | 检索字符串中是否存在指定的值。存在返回true,不存在返回false。 |
exec() | 检索字符串中的正则表达式的匹配。如果存在返回该字符串,不存在返回null |
2.4 正则表达式常用的字符含义
符号 | 含义 |
. | 匹配任意字符 |
\ | 转义字符:在正则中有许多符号都有特殊含义,当我们不想使用特殊含义,只需要使用符号身时,可以使用\转义符。 |
[] | 表示范围 |
{} | 限定位数 {n}代表匹配n位;{n,}代表至少匹配n位;{n,m}匹配n-m位 |
* | 匹配前边子表达式任意次 |
+ | 匹配前边子表达式1次或者多次(>=1) |
? | 匹配前边子表达式0次或者1次 |
^ | 匹配行首 开头 |
$ | 匹配末尾 结尾 |
| | 表示或者 |
() | 表示一个整体 |
[^...] | 不在括号范围内的任意字符 |
\w | 任意单字字符,等价于[a-zA-Z0-9] |
\W | 任何非单字字符,等价于[^a-zA-Z0-9] |
\s | 任何空字符,等价于[\t \n \r \f \v] |
\S | 任何非空白符,等价于[^\t\n\r\f\v] |
\d | 任何数字,等价于[0-9] |
\D | 除了数字之外的任何字符,等价于[^0-9] |
<body>
<p>
手机号:
<input type="text" id="phone" />
<input type="button" id="btn" value="校验">
</p>
<script>
btn.onclick=function (){
var r1 = /\d/;
if(r1.test(phone.value)){
console.log("有一个数字");
}else{
console.log("没有一个数字 1");
}
var r2 =/\d{11}/
if(r2.test(phone.value)){
console.log("有11位数字")
}else{
console.log("没有2");
}
var r3 = /^\d{11}$/
if(r3.test(phone.value)){
console.log("只有11位数字")
}else{
console.log("不是3");
}
var r4 = /^13[357]\d{8}$/
if(r4.test(phone.value)){
console.log("手机号正确")
}else{
console.log("不对 4");
}
var r5 = /^\w+@\w+\.com$/
if(r5.test(phone.value)){
console.log("正确的邮箱")
}else{
console.log("邮箱不争取 5");
}
}
</script>
</body>
2.5 小结
①一般来说在需要使用的时候可以直接拷贝使用;
②能够看懂正则表达式;
③可以写一些简单的正则表达式。
3. jQuery入门
3.1 什么是jQuery
框架:半成品软件
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的 JavaScript代码库(或JavaScript框架)。 JQuery:封装好的代码库。有一些大牛(官方)嫌弃js用着不好,很多具有特殊功能的代 码的集合。就把这些代码写在一个js文件中,名字就叫 jquery.js。 jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。 它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery优点:
①强大的选择器
js获取对象 | jq获取对象 |
document.getElementById();
<br/>docoment.getElementsByTagName()
<br/>document.getElementsByClassName()
<br>document.getElementsByName()
<br>document.querySelector()
<br>document.querySelectorAll()<br>
|
$("选择器")或者jQuery("选择器")
|
②优秀的DOM操作
js操作DOM麻烦,用jq操作简化。(jq过时)
③完善的事件处理机制
跟js差不多
④动画效果
js使用定时器写动画,运动框架,现在因为css3的出现,导致了jq动画过时了。
Ajax 异步编程
⑤链式编程
链式操作是指对发生在同一jQuery对象上的一组动作,可以直接连写而无需重复获得对象,这是jQuery的特色,使得jQuery编码无比优雅。
jQuery.js 框架已经过时了,因为有了vue.js框架,jQuery就是封装好的js,本质上还是js。
3. jQuery使用
3.1 搭建jQuery环境
去jQuery官网下载jQuery.js文件,然后引入到项目中。
//引入jQuery
<script src="../jquery-各种版本/3.2.1/jquery-3.2.1.min.js"></script>
3.2 jQuery语法
jQuery语法是通过选取HTML元素,并对选取的元素执行某些操作。
基础语法:$(selector).action()
jQuery(selector).action()
美元符号定义jQuery
选择符(selector) "查询"和"查找" HTML元素
jQuery的action()执行对元素的操作
3.3 jQuery选择器
用于获取元素对象。
$("选择器")或者jQuery("选择器")
3.4 jQuery属性操作
属性操作函数 | 说明 |
html() | 设置或获取innerHTML属性的值 |
text() | 设置或获取innerText属性的值 |
val() | 设置或获取value属性的值 |
attr() | 设置或获取某属性的值 |
removeAttr() | 删除某属性 |
prop() | 跟attr()作用一样,但是主要针对可简写的属性 |
removeProp() | 删除某属性 |
addClass() | 设置元素class属性的值 |
removeClass() | 删除元素class属性的值 |
上述方法中,如果括号中带有参数那么就表示 设置/修改属性;如果括号中不写参数:就表示获取数据。
<style>
.txt{
width: 70px;
}
</style>
<body>
<input type="text" id="num1" placeholder="数字1">
<input type="button" value="+" id="and">
<input type="text" id="num2" placeholder="数字2">
=
<span id="res">结果在此</span>
<script src="../jquery-各种版本/3.2.1/jquery-3.2.1.min.js"></script>
<script>
//alert($);
$(function(){
$("#num1,#num2").css("border","1px solid red");
$("#num1,#num2").css("height","30px");
$("#num1,#num2").addClass("txt");
})
$("#and").click(function(){
var n=$("#num1").val();
console.log(n);
var m = $("#num2").val();
console.log(m);
var h = Number(n)+Number(m);
console.log(h);
$("#res").html(h);
})
</script>
</body>
3.5 Jquery操作CSS样式
js | jq |
对象.style.属性 = “属性值” | css({"属性值":"属性","属性":"属性值"})//多属性 |
css("属性名","属性值");//单个属性
|
3.6 jQuery事件绑定
页面对不同访问者的响应叫做事件;事件处理程序指的是当HTML中发生某些事件时所调用的方法。
事件绑定的三种方法:
$("选择器").click(function(){ });常用$("选择器").bind("click",function(){});$("选择器").on("click",function(){});常用
<script type="text/javascript">
$("<div></div>").css({
border:"1px solid red",
width:"200px",
height:"200px",
position:"absolute",
top:"50px",
left:"100px"
}).click(function(){
$(this).animate({left:"+=200"},1000)
.delay(200)
.animate({width:"+=100",height:"+=100"},1000)
.delay(200)
.animate({width:"-=50",height:"-=50"},1000)
.delay(200)
.slideUp();
})
.appendTo("body");
</script>