小汤学编程之jQuery学习day03——事件、效果、插件

最新推荐文章于 2024-10-02 05:39:15 发布

SoupTC

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量203

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript js css

本文链接：https://blog.csdn.net/SoupTC/article/details/111639036

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述

一、事件

1.绑定事件 2.解绑事件

二、效果

1.基本效果 2.淡入淡出 3.自定义效果

三、插件

1.下载地址 2.语法 3.常用的校验 4.案例

一、事件

1.绑定事件

方式一

触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。一个对象可以绑定多个事件。
语法：.click( [ [data] ,fn ] )

data : 可传入data供函数fn处理。
fn : 在每一个匹配元素的click事件中绑定的处理函数。

$("p").click();// 无参数

$("p").click( function () { $(this).hide(); }); // 只有回调函数

$("h1").each(function(i){
					
    // 既有参数，也有回调函数，参数通过event.data访问
    $(this).click( {x:i} ,function(event){
        console.log(event.data.x);
    });
})
//一个对象可以绑定多个事件，触发后依次执行。

方式二

在选择元素上绑定一个或多个事件的事件处理函数。
语法：.on( eve , [sel] , [data] , fn)

events :一个或多个用空格分隔的事件类型和可选的命名空间，如"click" 。
selector :一个选择器字符串用于过滤器的触发事件的选择器元素的后代。通过后代过滤而不是自身。
data : 当一个事件被触发时要传递event.data给事件处理函数。用法同上。
fn: 该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

$("h1").on("click mouseover",function(){
    console.log(" h1 ");
});
$("form").on("submit", false)；

//上面的方法对于绑定事件之后追加的满足条件的对象不起作用。
//要解决这个问题只需再加入selector参数即可：
$("div").on("click", "h1",  function(){
    console.log(" h1 ");
});// 对后面追加的h1都生效

方式三

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
语法：.one(type,[data],fn)

$("p").one("click", function(){
  alert( $(this).text() );
});

2.解绑事件

语法：.off( eve , [sel] , [fn] )

$("p").off();// 移除p上面所有的事件

$("p").off("click");// 移除p上面所有的click事件

$("body").off("click", "p");//移除所有P上面的click事件。

注意：第三种方式解绑，需要当初绑定时也是用相同的selector，否则不生效。

二、效果

1.基本效果

显示隐藏的元素

语法：.show([speed,[easing],[fn]])

speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是swing，可用参数linear
fn:在动画完成时执行的函数，每个元素执行一次。

<p style="display: none">Hello</p>
...
$("p").show();

$("p").show("slow");

$("p").show(4000,function(){
   $(this).text("Animation Done...");
});

隐藏可见的匹配元素

语法：.hide([speed,[easing],[fn]])

<p >Hello</p>
...
$("p").hide();

$("p").hide("slow");

$("p").hide(4000,function(){
   alert("Animation Done.");
});

切换隐藏/显现的状态

语法：.toggle([speed,[easing],[fn]])

$("p").toggle("slow");

$("h1,img").toggle( 4000 , function(){
    console.log("Animation Done.");
});

2.淡入淡出

淡入/淡出

语法：
淡入：.fadeln([ speed , [easing] , [fn]])
淡出：.fadeOut([ speed , [easing] , [fn]])

$("p").fadeIn("slow");

$("p").fadeIn(3000,function(){
   alert("Animation Done.");
});

变化透明度到指定值

语法：.fadeTo([[speed],opacity,[easing ,[fn]])

opacity: 一个0至1之间表示透明度的数字。

$("p").fadeTo("slow",0.5);

$("p").fadeTo(3000, 0.5 , function(){
   alert("Animation Done.");
});

通过透明度切换隐藏/显现

语法：.fadeToggle([speed,[easing],[fn]])

$("p").fadeToggle("slow");

$("p").fadeToggle(3000,function(){
   alert("Animation Done.");
});

3.自定义效果

创建自定义动画

语法：.animate(params ,[ speed , [easing] , [fn] ])

params : 一组包含作为动画属性和终值的样式属性和及其值的集合。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left。

h1{
    border: 1px solid red;
} 
...
<h1 class="h">第1段标题</h1>
<h1 class="h">第2段标题</h1>
...
$("h1").animate({ 
    width: "50%", //width变为原来的50%
    height: "200px", // 高度变为200px
    fontSize: "3em", // 字体大小变为3em
    borderWidth: 10   // 边框宽度变为10，名字要使用驼峰
}, 2000 );

三、插件

实现了指定功能的代码片段。如果我们使用某个JQuery的插件的话，除了引用JQuery以外还需要引入这个插件。
我们以表单校验插件jquery-validation为例进行学习：

1.下载地址

官网： https://jqueryvalidation.org/
下载： https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.2

2.语法

$("form表单的选择器").validate({
    rules:{
        表单项name值:校验规则，
        表单项name值:校验规则... ...
    },
    messages:{
        表单项name值:错误提示信息，
        表单项name值:错误提示信息... ...
    }
});

参数说明：
	rules是对表单项校验的规则
    messages是对应的表单项校验失败后的错误提示信息
注意：
	当错误提示信息没有按照我们预想的位置显示时，我们可以设置自定义错误显示标签放在我们需要显示的位置。如果设置了错误lable标签就不必在messages中设置此表单项错误提示信息了
	
<lable for="html元素name值" class="error" style="display:none">错误信息</lable>

3.常用的校验

校验器名称	值	描述
required	true	必须填写
number	true	只能输入数字
min	数字	最小值
max	数字	最大值
range	[min,max]	取值范围
minlength	数字	最小长度
maxlength	数字	最大长度
rangelength	[minlength,maxlength]	长度范围
equalTo	"#id"指定元素	跟指定元素的值相等(重复密码)
email	“email”	校验邮箱
date	true	校验日期
dateISO	true	校验日期格式xxxx-xx-xx xxxx/xx/xx

4.案例

默认规则和提示

<script src="js/jquery-3.4.1.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/messages_cn.js"></script>
//引入对应国家的messages文件，可使提示默认为对应国家的语言
...
<form id="empForm"  >
	<table border="1" cellspacing="0"  width="800px" align="center"  >
		<tr>
			<td>真实姓名(不能为空)</td>
			<td><input type="text" name="realname" required="required" minlength="2" maxlength="6" /></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input type="submit"  value="保存"></td>
		</tr>
	</table>
</form>

<script type="text/javascript">
	$(function(){
		$("#empForm").validate();
	})
</script>

配置验证规则和提示

<form id="empForm"  >
	<table border="1" cellspacing="0"  width="800px" align="center">
		<tr>
			<td>真实姓名(不能为空)</td>
			<td><input type="text" name="realname" />
			<label for="realname" class="error" style="display:none;">用户名不能为空</label></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 colspan="2" align="center"><input type="submit"  value="保存"></td>
		</tr>
		</table>
</form>

<script type="text/javascript">
	$(function(){
		$("#empForm").validate();
		$("#empForm").validate({			
			rules:{
				realname:{
				required:true
			},
			psw:{
				required:true,
				number:true ,
				rangelength:[6,12]
			},
			psw2:{
				required:true,
				equalTo:"#psw",
				rangelength:[6,12]
			}						
		},
		messages:{
		// 用户名的提示采用label的方式显示
		// 				realname:{
		// 					required:"用户名不能为空" 
		// 			    },
			psw:{
			required:"密码不能为空",
			number:"密码必须为数字",
			rangelength:"至少输入6个字符,但是不超过12个字符"
			},
			psw2:{
				required:"重复密码不能为空",
				equalTo:"2次密码输入不一致",
				rangelength:"至少输入6个字符,但是不超过12个字符"
			}
		} 
	});
</script>

自定义校验器

语法：$.validator.addMethod('name',function(value,element,params){},'message');

name:校验规则名称
fn:校验规则
value：用户输入的值
element：当前元素对象
params：校验规则传递的参数
message:不满足规则提示的信息

<form id="empForm"  >
	<table border="1" cellspacing="0"  width="800px" align="center"  >
		<tr>
			<td>身份证号：</td>
			<td><input type="text" name="cardId" /></td>
		</tr>
		<tr>
			<td colspan="2" align="center"><input type="submit"  value="保存"></td>
		</tr>
	</table>
</form>
<script type="text/javascript">
	$(function(){
		$.validator.addMethod('checkCardId',function(value,element,params){
            //身份证号的正则
			var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
			return reg.test(value);
		},'输入不符合身份证格式');
	$("#empForm").validate({
		rules:{
			cardId:{
				required:true,
				checkCardId:true
			}
		}
		});
	})
</script>