JQuery 插件6_('btu'). click(function(){-CSDN博客

本文链接：https://blog.csdn.net/qq_39279061/article/details/77751446

6.1 validate

(1)required:必填字段
这里写图片描述
(2)email:验证邮箱格式，支持很多格式的邮箱

<input type="email" id="email" required>

(3)url:验证网址，形如http://www.baidu.com
这里写图片描述

<input type="url" id="url" required>

(4)maxlength:输入字符的最大长度

<input type="text" id="maxlength" maxlength="5" required>

(5)rangelength[]:表示输入字符的范围

<input type="text" id="rangelength" rangelength="[5,10]" required>

这里写图片描述

<body>
<form id="formdata" action="">
    <label for="text1">用户名</label>
    <input type="text" id="text1" required>
    <br/>
    <label for="email">邮箱</label>
    <input type="email" id="email" required>
    <br>
    <label for="url">网址</label>
    <input type="url" id="url" required>
    <br>
    <label for="maxlength">输入不多于五个字符</label>
    <input type="text" id="maxlength" maxlength="5">
    <br>
    <label for="rangelength">输入五到十个数间的字符</label>
    <input type="text" id="rangelength" rangelength="[5,10]">
    <br>
    <input type="submit" value="验证">
</form>
</body>
<script>
    $.validator.setDefaults({
        submitHandler: function () {
            alert("验证成功");
        }
    });
    $("#formdata").validate();
</script>

6.2accordion

accordion：依据标题和内容来自动选择折叠
event:定义折叠的事件，例如mouseover
animate:定义是否有动画，默认true有动画效果
disable:禁用折叠
destroy：销毁折叠

$("#div1").accordion({
    event: "mouseover",
    animate:false,
    header:"h3",
});

这里写图片描述

$("#div1").accordion("destroy");清除
$("#div1").accordion("disable");禁用

6.3autocomplete

预选框：

$(function () {
    var content = [
        "华",
        "华点",
        "欢迎来到华点"
    ];
    $("#text1").autocomplete({
        source: content
    })
})

这里写图片描述

6.4 growl

提示框：定义的是不点击取消时会在几秒钟后消失，
（1）title,消息提示的标题
message,提示的内容
growl后面不写关键字的话，使用默认样式

$.growl({title:"消息提示",message:"提示内容"});

这里写图片描述

（2）notice:提醒框

$.growl.notice({title:"消息提醒",message:"提醒内容"});

这里写图片描述

（3）warning：警告框

$.growl.warning({title:"消息警告",message:"警告内容"});

这里写图片描述

（4）error：错误提示框

$.growl.error({title:"消息错误",message:"错误内容"});

这里写图片描述

   <script src="../jquery-3.2.1.min.js"></script>
    <script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
    <link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" /></head>
<style>
</style>
<body>
<button id="btu1">点击1</button>
<button id="btu2">点击2</button>
<button id="btu3">点击3</button>
<button id="btu4">点击4</button>
</body>
<script>
        $("#btu1").click(function () {
            $.growl({title:"消息提示",message:"提示内容"})
        });
        $("#btu2").click(function () {
            $.growl.notice({title:"消息提醒",message:"请注意代码！"})
        });
        $("#btu3").click(function () {
            $.growl.warning({title:"消息警告",message:"我要警告你了！"})
        });
        $("#btu4").click(function () {
            $.growl.error({title:"消息错误",message:"你输错了！！"})
        });
</script>

这里写图片描述