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

最新推荐文章于 2020-02-15 21:36:46 发布

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

最新推荐文章于 2020-02-15 21:36:46 发布

阅读量242

点赞数

分类专栏： WEB前端文章标签： web前端

本文链接：https://blog.csdn.net/weixin_44075537/article/details/85036370

版权

WEB前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目录
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中第一个元素的jquery 对象
var $x = $o b j . l a s t () : 返回$ 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":"提示的内容"});

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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端 (16)Jquery 04 + Jquery插件

目录Jquery 文档查找函数熟悉工具函数了解本地存储 ***Jquery插件放大镜插件表单验证插件消息提示插件文档查找函数熟悉根据一个已经的得到的Jquery对象, 查找与其有关的元素的 jquery对象格式:- 查找匹配选择器的子元素$obj.children(“选择器”);- 查找匹配选择器的后代元素 ...
复制链接

扫一扫

专栏目录