jquery的效果方法–显示和隐藏标签（掌握）
show()---显示
hide()---隐藏
toggle()---切换显示/隐藏
让标签隐藏：
让标签显示：
让标签切换：
slideDown()---滑动显示
slideUp()---滑动隐藏
slideToggle()---切换显示/隐藏
fadeIn()---淡入显示
fadeOut()---淡出隐藏
fadeToggle()---切换显示/隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 400px;
height: 200px;
background-color: red;
}
</style>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
$("#bt1").click(function(){
// 让标签隐藏
//$("#d1").hide(6000,demo);
$("#d1").slideUp(3000,demo);
//$("#d1").fadeOut(3000,demo);
})
$("#bt2").click(function(){
// 让标签显示
//$("#d1").show(6000);
//$("#d1").slideDown(3000,demo);
$("#d1").fadeIn(3000,demo);
})
$("#bt3").click(function(){
// 让标签切换显示/隐藏
//$("#d1").toggle(6000);
//$("#d1").slideToggle(3000);
$("#d1").fadeToggle(3000);
})
})
// 动画执行完毕要调用一次指定的方法
function demo() {
alert("ok~~");
}
</script>
</head>
<body>
<div id="d1">abcd/1234</div>
<hr/>
<input id="bt1" type="button" value="隐藏" />
<input id="bt2" type="button" value="显示" />
<input id="bt3" type="button" value="切换" />
</body>
</html>
案例
广告窗的定时显示和隐藏
技术：
1 定时器 SetTimeOut(...)
2 显示和隐藏标签方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
//设置一个定时器3秒钟之后显示图片
setTimeout(showAd,3000);
})
function showAd(){
$("#d1").slideDown();
//设置一个定时器3秒钟之后隐藏图片
setTimeout(hideAd,3000);
}
function hideAd(){
$("#d1").slideUp();
}
</script>
</head>
<body>
<div id="d1" style="display: none">
<img src="img/tupian2.jpg" width="100%" id="imgs"/>
</div>
</body>
</html>
jquery的遍历循环方法（掌握）
1普通遍历
$(function () {
var arr=$("元素");
for(var i=0;i<arr.length;i++)
{
alert($(arr[i]).text());
}
})
2 jq对象方式遍历
$(function () {
// a：元素的角标 b:元素角标对应的元素
$("元素").each(function(a,b){
alert(a+":"+$(b).text());
})
})
3 全局方式遍历
$(function () {
var arr=$("元素");
$.each(arr,function (a,b) {
alert(a+":"+$(b).text());
})
})
4 jq3.0的新特性 --遍历方式
$(function () {
var arr=$("元素");
for(aaa of arr){
alert($(aaa).text())
}})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<!--jquery的循环遍历（普通方式）-->
<!--<script>
$(function(){
var arr=$("ul li");
for(var i=0;i<arr.length;i++){
alert($(arr[i]).text());
}
})
</script>-->
<!--jquery的循环遍历（jquery对象的方法）-->
<!-- <script>
$(function(){
$("ul>li").each(function(a,b){
alert($(b).text());
})
})
</script>-->
<!--jquery的循环遍历（jquery全局方法）-->
<!-- <script>
$(function(){
var arr=$("ul>li");
$.each(arr,function(a,b){
alert($(b).text());
})
})
</script>-->
<!--jquery的循环遍历（3.x的版本能用）-->
<script>
$(function(){
var arr=$("ul>li");
for(aaa of arr){
alert($(aaa).text());
}
})
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>
jq的解绑事件方式以及第二种事件绑定方式
On() jquery的事件绑定方法
$("按钮元素").on("click",function () {
alert("abcd");
})
off() jquery的事件解绑方法
$("按钮元素").click(function () {
//指定解绑
$("#bt1").off("事件名");
//全部解绑
$("#bt1").off();
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script>
$(function(){
// 第一种事件的绑定方式 $("#i1").事件名(function(){})
$("#i1").click(function(){
alert(123);
})
// 第二种事件的绑定方式 $("#i1").on("事件名",function(){})
$("#i1").on("mouseover",function(){
alert("abc");
})
// 事件的解绑 off(..)
$("#i2").click(function(){
// 指定解绑鼠标移入事件
//$("#i1").off("mouseover");
// 指定解绑点击事件
//$("#i1").off("click");
//全部解绑
$("#i1").off();
})
})
</script>
</head>
<body>
<input id="i1" type="button" value="绑定事件" />
<input id="i2" type="button" value="解绑事件" />
</body>
</html>
jq的事件切换
1 普通方式
2 事件切换hover()方式--鼠标移入和移出 （重要）
3 链式方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<!--<script>
$(function(){
$("#imgs").on("mouseover",function(){
alert(1111);
})
$("#imgs").on("mouseout",function(){
alert(2222);
})
$("#imgs").on("click",function(){
alert(333);
})
})
</script>-->
<!--<script>
$(function(){
$("#imgs").mouseover(function(){alert(1111)}).mouseout(function(){alert(2222)}).click(function(){alert(333)})
})
</script>-->
<script>
$(function(){
$("#imgs").hover(function(){
alert(1111);
},function(){
alert(2222);
})
})
</script>
</head>
<body>
<img id="imgs" src="img/666.bmp" />
</body>
</html>
案例：抽奖案例
需求：当用户点击开始按钮时，小像框中的像片快速切换。当用户点击停止按钮时，小像框中的像片停止切换，大像框中也会显示与小像框相同的像片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<!--
该案例有三个状态：
页面加载的状态：页面一加载要做什么事情？
1 设置定时器让小相框的图片轮播
2 开始按钮不可用，停止按钮可用
点击停止的状态：要做什么事情？
1 要给点击停止的按钮做点击事件
2 清除小相框的定时器
3 让大相框的图片地址和小相框的图片src一致
4 停止按钮不可用 开始按钮可用
点击开始的状态：要做什么事情？
1 给点击开始按钮设置点击事件
2 重新设置一个定时器，调用图片轮播的方法
3 开始按钮不可用，停止按钮可用
-->
<script>
var time;
$(function(){
//1 让小相框的图片轮播
time=setInterval(changeImg,100);
//2 开始按钮不可用，停止按钮可用
$("#startID").prop("disabled",true);
//3 要给点击停止的按钮做点击事件
$("#stopID").on("click",function(){
//4 清除小相框的定时器
clearInterval(time);
//5 让大相框的图片地址和小相框的图片src一致
var srcvalue=$("#img1ID").prop("src");
$("#img2ID").hide();
$("#img2ID").prop("src",srcvalue);
$("#img2ID").slideDown(3000);
//6 停止按钮不可用 开始按钮可用
$("#stopID").prop("disabled",true);
$("#startID").prop("disabled",false);
})
//7 给点击开始按钮设置点击事件
$("#startID").on("click",function(){
//8 重新设置一个定时器，调用图片轮播的方法
time=setInterval(changeImg,100);
//9 开始按钮不可用，停止按钮可用
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
})
})
//实现图片轮播的功能
var index=1;
function changeImg(){
$("#img1ID").prop("src","img/man0"+index+".jpg");
index++;
if(index>9){
index=0;
}
}
</script>
</head>
<body>
<!-- 小相框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="img/man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大相框 -->
<div style="border-style:double;width:700px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="img/man00.jpg" width="700px" height="500px"/>
</div>
<!-- 开始按钮 -->
<input id="startID" type="button" value="点击开始" style="width:150px;height:150px;font-size:22px">
<!-- 停止按钮 -->
<input id="stopID" type="button" value="点击停止" style="width:150px;height:150px;font-size:22px" >
</body>
</html>
1 第一状态
2 第二状态
3 第三状态
JQuery插件机制
jquery对外提供了插件机制，可以用来扩展jQuery的功能
如果对jquery的方法不满意，可以使用该提供的机制进行该方法的二次封装或自己扩展方法
二次封装或扩展对象的方法： $("元素").方法()
$.fn.extend()
二次封装或扩展全局的方法： $.each()
$.extend()
复选框的全选全不选
通过插件机制扩展jquery对象的方法
扩展jquery全局方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<!-- <script>
$(function(){
// 复选框的全选
$("#i1").click(function(){
$("input[type=checkbox]").prop("checked",true);
})
// 复选框的全不选
$("#i2").click(function(){
$("input[type=checkbox]").prop("checked",false);
})
})
</script>-->
<script>
/*
* 为jquery对象扩展2个方法：checked() unchecked()
* checked():让复选框全选
* unchecked()：让复选框全不选
*
* */
// 通过插件机制扩展jquery对象的方法 jQuery.fn.extend({要扩展的方法名:function(){},要扩展的方法名:function(){}})
/* $.fn.extend({
checked:function(){
$("input[type=checkbox]").prop("checked",true);
},
unchecked:function(){
$("input[type=checkbox]").prop("checked",false);
}
})*/
// 过插件机制扩展jquery全局方法($.方法名()) Query.extend(object)
/*$.extend({
max:function(a,b){
return a>b?a:b;
},
min:function(a,b){
return a<b?a:b;
}
})
*/
$(function(){
// 复选框的全选
$("#i1").click(function(){
$("input[type=checkbox]").checked();
})
// 复选框的全不选
$("#i2").click(function(){
$("input[type=checkbox]").unchecked();
})
})
var max=$.max(10,20);
alert(max);
var min=$.min(10,20);
alert(min);
</script>
</head>
<body>
<form>
<input type="checkbox" />抽烟
<input type="checkbox" />喝酒
<input type="checkbox" />烫头
</form>
<hr/>
<input id="i1" type="button" value="全选" />
<input id="i2" type="button" value="全不选" />
</body>
</html>
案例：使用JQuery的提供插件validate完成表单校验
需求：
在学习JavaScript时，我们手动的完成过表单数据的校验，
而表单数据的校验在开发中非常常见，属于通用功能范畴，
实际在开发中我们一般使用都是第三方工具。
在这里我们将使用jQuery的扩展的一个validate插件进行表单的校验。
validate插件的操作步骤：
1 导入jquery.js文件 (js库)
2 导入validate.js文件
3 获取整个表单 $("#ID名")
4 对表单做校验 $("#ID名").validate()
$("#ID名").validate
(
{
rules:{name的属性名:{校验器1:值1...}},
messages:{name的属性名:{校验器1:提示信息1...}}
}
)
08-validate使用.html 页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--1 导入js库-->
<script src="js/jquery-3.3.1.js"></script>
<!--2 导入validate文件-->
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<!--3 获取表单做校验-->
<!--<script>
$(function(){
/*
校验格式：$("#formId").validate({key:{key:{}}});
$("#formId").validate({
rules:
{
要校验的文本框的name属性:{校验器:校验器的值},
要校验的文本框的name属性:{校验器:校验器的值},
要校验的文本框的name属性:{校验器:校验器的值}
}
,
messages:
{
要校验的文本框的name属性:{校验器:"错误之后的友情提示"},
要校验的文本框的name属性:{校验器:"错误之后的友情提示"},
要校验的文本框的name属性:{校验器:"错误之后的友情提示"}
}
});*/
})
</script>-->
<script>
$(function(){
$("#formId").validate({
rules:
{
username:{required:true},
password:{required:true,digits:true},
repassword:{required:true,equalTo:"#password"},
zuixiaozhi:{required:true,min:9},
shuzhiqujian:{required:true,range:[100,200]}
}
/*,
messages:
{
username:{required:"<font color='red'>不能为空</font>"},
password:{required:"<font color='red'>不能为空</font>",digits:"必须输入数字"},
repassword:{required:"<font color='red'>不能为空</font>",equalTo:"两次输入不一致"},
zuixiaozhi:{required:"<font color='red'>不能为空</font>",min:"不能小于{0}"},
shuzhiqujian:{required:"不能为空",range:"取值要在{0}~{1}"}
}
*/
})
})
</script>
<body>
<form id="formId" action="06-抽奖.html">
必填：<input type="text" name="username"/> <br/>
必填数字：<input type="text" name="password" id="password"/> <br />
必填重复：<input type="text" name="repassword"/> <br />
最小值：<input type="text" name="zuixiaozhi"/> <br />
区间：<input type="text" name="shuzhiqujian"/> <br />
<input type="submit" value="提交"/>
</form>
</body>
</html>
表单校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_zh.js"></script>
<script>
$(function(){
//表单数据的校验
$("#empForm").validate({
rules:
{
realname:{required:true},
username:{required:true,rangelength:[5,8]},
psw:{required:true,rangelength:[6,12]},
psw2:{required:true,equalTo:"#psw"},
gender:{required:true},
age:{required:true,range:[26,50]},
edu:{required:true},
birthday:{required:true,dateISO:true},
email:{required:true,email:true},
card:{required:true,
cardlength:true,
cardformat:true}
}
});
// 自定义校验器的格式
/*$.validator.addMethod(name,function(value,element,params){
/!*
* 参数介绍：
* name:自定义校验器的名称(cardlength)
* value:要校验的这个文本框的value属性值 $("#card").val();
* element:要校验的这个文本框元素 $("#card")
* params:自定义校验器传递的值（true）
*
* *!/
//实现功能
})*/
// 要校验身份证的长度 返回true：代表校验通过 返回false:代表不通过，要去做友情提示
$.validator.addMethod("cardlength",function(value,element,params){
if(params){
// 校验
if(value.length==15 || value.length==18){
return true;
}
return false;
}
})
// 要校验身份证的格式
$.validator.addMethod("cardformat",function(value,element,params){
if(params){
if(value.length==15){
// 正则表达式
var reg15=/^[0-9]{15}$/;
return reg15.test(value);
}
if(value.length==18){
var reg18=/^[0-9]{18}|[0-9]{17}[X|x]$/;
return reg18.test(value);
}
}
})
})
</script>
<body>
<p>员工信息录入</p>
<form name="empForm" id="empForm" method="post" action="06-抽奖.html">
<table border=1>
<tr>
<td>真实姓名(不能为空 ,没有其他要求)</td>
<td><input type="text" id="realname" name="realname" />
</td>
</tr>
<tr>
<td>登录名(登录名不能为空,长度应该在5‐8之间
</td>
<td><input type="text" id="username" name="username" /></td>
</tr>
<tr>
<td>密码(不能为空,长度6‐12字符或数字):</td>
<td><input type="password" id="psw" name="psw" /></td>
</tr>
<tr>
<td>重复密码密码(不能为空,长度6‐12字符或数字):</td>
<td><input type="password" id="psw2" name="psw2" /></td>
</tr>
<tr>
<td>性别(必选其一)</td>
<td>
<input type="radio" id="gender_male" value="m" name="gender"/> 男
<input type="radio" id="gender_female" value="f" name="gender"/> 女
<label class="error" for="gender" style="display: none;">必须选择一个性别
</label>
</td>
</tr>
<tr>
<td>年龄(必填26‐50):</td>
<td><input type="text" id="age" name="age" /></td>
</tr>
<tr>
<td>你的学历:</td>
<td> <select name="edu" id="edu">
<option value="">－请选择你的学历－</option>
<option value="a">专科</option>
<option value="b">本科</option>
<option value="c">研究生</option>
<option value="e">硕士</option>
<option value="d">博士</option>
</select>
</td>
</tr>
<tr>
<td>出生日期(1982/09/21):</td>
<td><input type="text" id="birthday" name="birthday" value="" /></td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td colspan="2">
<input type="checkbox" name="checkbox1" id="qq1"/> 乒乓球
<input type="checkbox" name="checkbox1" id="qq2" value="1" /> 羽毛球
<input type="checkbox" name="checkbox1" id="qq3" value="2" /> 上网
<input type="checkbox" name="checkbox1" id="qq4" value="3" /> 旅游
<input type="checkbox" name="checkbox1" id="qq5" value="4" /> 购物
<label class="error" for="checkbox1" style="display: none;">必须选一个</label>
</td>
</tr>
<tr>
<td align="left">电子邮箱:</td>
<td><input type="text" id="email" name="email" /></td>
</tr>
<tr>
<td align="left">身份证(15‐18):</td>
<td><input type="text" id="card" name="card" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="firstname" id="firstname" value="保存"></td>
</tr>
</table>
</form>
</body>
</html>
jquery的方法整理：
1 jQuery操作标签的文本和value值方法
html([值]) 获取的标签体 <div><a href=#>文本</a></div>
text([值]) 获取的标签文本内容 <div>文本</div>
val([值]) 获取的是标签的value值 <input type="text" value="abcd/1234" /> abcd/1234
2 jquery操作标签样式
css(name,[value]) 获取/设置指定的CSS样式
addClass(value) 给指定的标签添加样式
removeClass(value) 删除指定的样式
toggleClass(value) 切换样式，如果没有样式，则添加，如果有样式，则删除
3 juqery操作标签的各种属性
attr(属性名,[值])方法或prop(属性名,[值])方法
ps：建议1.6以前可以用attr来操作属性 1.6以后可以用prop来操作属性
4 jquery指定插入标签的方法
append(element) 添加成最后一个子元素，两者之间是父子关系
prepend(element) 添加成第一个子元素，两者之间是父子关系
before(element) 添加到当前元素的前面，两者之间是兄弟关系
after(element) 添加到当前元素的后面，两者之间是兄弟关系
remove() 删除元素
empty() 清空元素的所有子元素
5 jquery操作标签的显示和隐藏方法
show() --显示
hide() --隐藏
toggle() --切换
slideDown()---滑动显示
slideUp()---滑动隐藏
slideToggle()---切换显示/隐藏
fadeIn()---淡入显示
fadeOut()---淡出隐藏
fadeToggle()---切换显示/隐藏
6 jquery的循环遍历方法（4种）
1 for(var i=0;i<数组.length;i++){}
2 $("数组").each(function(a,b){}) a:代表循环的索引号 b:索引号的内容
3 $.each(数组,function(a,b){}) a:代表循环的索引号 b:索引号的内容 $.方法--全局方法
4 jquery3.x以上版本的循环新功能：for(变量 of 数组){}
7 jquery绑定事件的方式
1 $(元素).事件名(function(){})
2 $(元素).on("事件名",function(){}) $(元素).bind("事件名",function(){})
8 jquery的事件解绑
$(元素).off("事件名") --指定解绑指定的事件
$(元素).off() --全部解绑事件
9 jquery的事件切换方式
1 普通方式
2 链式方式
3 jquery的hover方式--只能切换移入和移出
87
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
