web前端 (16)Jquery 04 + Jquery插件

目录
Jquery
    文档查找函数 熟悉
    工具函数 了解
    本地存储 ***
Jquery插件
    放大镜插件
    表单验证插件
    消息提示插件

文档查找函数 熟悉

根据一个已经的得到的Jquery对象, 查找与其有关的元素的 jquery对象

格式:
- 查找匹配选择器的子元素
$obj.children(“选择器”);

-   查找匹配选择器的后代元素 ***
    $obj.find("选择器");

-   获取下一个兄弟元素 ***
    $obj.next();

-   获取上一个兄弟元素
    $obj.prev();

-   获取父元素 ***
    $obj.parent();

-   查找匹配选择器的祖先元素
    $obj.parents("选择器");

案例:

<script type="text/javascript">
    $(function(){
        $("input").blur(function(){
            var text = $(this).val();
            var $span = $(this).parent().find("span");
            if(text.length>=6){
                //匹配
                $span.html("恭喜你,输入可用 !");
                $span.css({"font-size":"14px","color":"#0a0"});
            }else{
                //不匹配
                $span.html("恭喜你,输入不可用 !");
                $span.css({"font-size":"14px","color":"#a00"});
            }
        });

    });
</script>
</head>
<body>
    <p><input>&nbsp;&nbsp;<span></span></p>

文档筛选查找函数 了解

从一个Jquery对象中, 筛选出需要的部分:

  • var $x = $obj.eq(下标) : 获取指定下标处的Jquery对象
  • var dom = $obj.get(下标) : 获取指定下标处的dom对象
  • var $x = o b j . f i r s t ( ) : 返 回 obj.first() : 返回 obj.first():obj中第一个元素的jquery 对象
  • var $x = o b j . l a s t ( ) : 返 回 obj.last() : 返回 obj.last():obj中最后一个元素的jquery对象
  • $obj.is(选择器) : 是否满足选择器条件
  • var $x = $obj.not(选择器): 筛选出不满足选择器条件的jquery对象

案例:

<div>白日依山尽</div>
<div>锄禾日当午</div>
<div>清明上河图</div>
<div>复方草珊瑚</div>
<div>黄河入海流</div>
<div>弯弓射大雕</div>
<div>平方差公式</div>
<div>完全搞不懂</div>
<div>高射炮平射</div>
<div>长河落日圆</div>
<div>一日复一日</div>
<div>明日何其多</div>
<div>想煎何太急</div>
<div>菊花爆满山</div>
<div>造血干细胞</div>

工具函数 了解
$.each 遍历函数

  • 遍历Jquery对象
    格式:
    $obj.each(function(){
    //this 指的是 每一次遍历的元素的dom对象
    });
    案例:

    白日依山尽

    锄禾日当午

    清明上河图

    复方草珊瑚

    黄河入海流

    弯弓射大雕

    平方差公式

    完全搞不懂

    高射炮平射

    长河落日圆

    一日复一日

    明日何其多

    想煎何太急

    菊花爆满山

    造血干细胞

    弊厩奸老马

    <script>
        $(function(){
            var $div = $("div");
            var i = 1;
            $div.each(function(){
                this.innerHTML = i+".&nbsp;"+this.innerHTML;
                i++;
            });
        });
    </script>
    
  • 遍历数组
    格式:
    $.each(数组,function(i,value){
    //i : 表示循环遍历的下标
    //value: 表示循环遍历时数组每个下标的数据
    });

    案例:
    var arr=[“小泽马老师”,“加藤马老师”,“天海马老师”,“波多马老师”,“吉泽马老师”,“仓井马老师”,“麻生马老师”,“麻仓马老师”,“井上马老师”,“武藤马老师”,“短小经干马老师”];
    $.each(arr,function(i,value){
    console.info(i+":"+value);
    });

数组去重 了解

格式:
$.unique(数组);

注意: 去重操作是直接作用到原数组的 ,没有返回值 !

案例:
var arr=[“小泽马老师”,“加藤马老师”,“天海马老师”,“天海马老师”,“波多马老师”,“吉泽马老师”,“仓井马老师”,“天海马老师”,“麻生马老师”,“麻仓马老师”,“井上马老师”,“武藤马老师”,“短小经干马老师”,“小泽马老师”];

$.unique(arr);
console.info(arr);

数组合并 了解

格式:
$.merge(数组1,数组2);

作用: 将数组2的内容, 追加到数组1中! 此操作不影响数组2中的数据 !

var arr1=["小泽马老师","加藤马老师","天海马老师"];
var arr2=["旋转跳跃孙宽塑胶版","震动带声小马达*2版"];

$.merge(arr1,arr2);

console.info(arr1);

去除字符串的前后空格 了解

格式:
var 新字符串 = $.trim(原字符串);

此操作 没有对原字符串进行改变 .   返回值为新的去除空格的字符串 !

案例:
    var text1 = "    床前明月光    ";
    var text2 = $.trim(text1);

    console.info(text1);
    console.info(text2);

HTML5 中JS的常用操作
本地存储 ***

共有两种存储数据的方式 :

方式1.    通过localStorage 对象, 存储数据 !
        存储数据时, 理论上数据是永久存储的 !

方式2.    通过sessionStorage 对象, 存储数据 !
        当会话结束时, 数据自动清除 !(浏览器关闭时)

注意: 上述两个对象, 操作的方式完全一致. 存储键值对, 键与值都是字符串 !

常用函数:

存储数据:
    格式1.    对象.setItem(key,value);
    格式2.    对象.key=值;

取出数据:
    格式1.    var value = 对象.getItem(key);
    格式2.    var value = 对象.key;

删除单个数据:
    对象.removeItem(key);

清空所有数据:
    对象.clear();

根据存储的顺序, 取出数据的key   
    //函数名称为key  ,得到的是键值对的键
    var k = 对象.key(下标);

案例:
localStorage.setItem(“s1”,“床前明月光”);
localStorage.setItem(“s2”,“玻璃好上霜”);
localStorage.setItem(“s3”,“要不及时擦”);
localStorage.setItem(“s4”,“地上鞋两双”);

var s1 = localStorage.getItem("s1");
var s2 = localStorage.s2;
var s3key = localStorage.key(2);
var s3 = localStorage.getItem(s3key);
console.info(s1);
console.info(s2);
console.info(s3);

插件

我们学习的不是如何使用某一个插件 , 重点是: 如何使用所有的插件 !

放大镜插件

步骤:

1.  引入Jquery.js文件
    <script src="js/jquery.js"></script>
2.  引入插件的js文件
    <script src="js/jquery.mlens-1.0.min.js"></script>
3.  在网页中 编写一个img标签 , img的src属性指向小图片
    <img id="x" src="images/a.jpg">
4.  在script块中, 通过JSON  描述放大镜规格:
    var json = {
        imgSrc:"大图片路径",
        lensShape:"放大镜形状",//圆形circle 方形square
        lensSize:数值,//放大镜大小, 值为数字表示px
        borderColor:"十六进制颜色值",//表示放大镜边框颜色
        borderRadius:数值//值为数字,表示边框的圆角,是px ,不能使用百分比 
        //如果形状为方形 圆角等于放大镜大小的一半,则效果也是圆形的!
    }
5.  在网页加载完毕后, 通过上述img标签的jquery对象 , 绑定放大镜插件 并指定放大镜的规格JSON对象
    $(function(){
        $("#x").mlens(json);
    });

表单验证插件

校验规则:

序号  规则                          描述
1   required:true                   必须输入的字段。
2   remote:"check.php"              使用 ajax 方法调用 check.php 验证输入值。
3   email:true                      必须输入正确格式的电子邮件。
4   url:true                        必须输入正确格式的网址。
5   date:true                       必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6   dateISO:true                    必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7   number:true                     必须输入合法的数字(负数,小数)。
8   digits:true                     必须输入整数。
9   creditcard:                     必须输入合法的信用卡号。
10  equalTo:"#field"                输入值必须和 #field 相同。
11  accept:                         输入拥有合法后缀名的字符串(上传文件的后缀)。
12  maxlength:5                     输入长度最多是 5 的字符串(汉字算一个字符)。
13  minlength:10                    输入长度最小是 10 的字符串(汉字算一个字符)。
14  rangelength:[5,10]              输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15  range:[5,10]                    输入值必须介于 5 和 10 之间。
16  max:5                           输入值不能大于 5。
17  min:10                          输入值不能小于 10。

使用步骤(格式1):

1.  引入Jquery 文件
        <script src="js/jquery.js"></script>
2.  引入插件的JS文件
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/messages_zh.js"></script>
3.  在网页加载完毕时, 通过form标签的jquery对象 初始化表单验证组件
        $(function(){
            $("form").validate();
        });
4.  在form标签的input标签中, 加入验证的规则
    <form action="haha">
        <input name="username" minlength="8" maxlength="16"><br>
        <input name="password" minlength="6" maxlength="12"><br>
        <input type="submit" value="登录">
    </form>

使用步骤(格式2):

1.  引入Jquery 文件
        <script src="js/jquery.js"></script>
2.  引入插件的JS文件
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/messages_zh.js"></script>

3.  在网页加载完毕时, 通过form标签的jquery对象 初始化表单验证组件
        $(function(){
            $("form").validate(验证规则JSON对象);
        });

4.  编写验证规则的JSON对象
    var json = {
        rules:{
            "输入框的name":{
                通过规则属性键值对, 描述规则
            }
        },
        messages:{
            "输入框的name":{
                通过规则属性键,与提示的文本值, 来描述提示信息
            }
        }
    }

案例

<!-- 1. 引入Jquery 文件 -->
        <script src="js/jquery.js"></script>
<!-- 2. 引入插件的JS文件 -->
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/messages_zh.js"></script>
<!-- 3. 在网页加载完毕时, 通过form标签的jquery对象 初始化表单验证组件 -->
<script type="text/javascript">
        var json = {
                rules:{
                    "username":{
                        "required":true,
                        "minlength":8,
                        "maxlength":16
                    },
                    "password":{
                        "required":true,
                        "minlength":6,
                        "maxlength":12
                    }
                },
                messages:{
                    "username":{
                        "required":"嘿,这个必须输入, 锤子",
                        "minlength":"你太短了",
                        "maxlength":"太长了, 脑子有坑吧"
                    },
                    "password":{
                        "required":"嘿,密码必须输入, 锤子",
                        "minlength":"你还是太短了",
                        "maxlength":"太长了, 坑子有脑吧"
                    }
                }
        };
        $(function(){
            $("form").validate(json);
        });
</script>
    <form action="haha">
        <input name="username"><br>
        <input name="password"><br>
        <input type="submit" value="登录">
    </form>

消息提示插件 growl

步骤:

    <script src="js/jquery.js"></script>
    <script src="js/jquery.growl.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.growl.css">
-   普通消息提示
        $.growl({"title":"提示的标题","message":"提示的内容"});
-   提醒消息提示
        $.growl.notice({"title":"提示的标题","message":"提示的内容"});
-   警告消息提示
        $.growl.warning({"title":"提示的标题","message":"提示的内容"});
-   错误消息提示
        $.growl.error({"title":"提示的标题","message":"提示的内容"});
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

士不可以不弘毅,任重而道远

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值