• 第80天:jQuery插件使用


    jQuery其他补充
    + 4.1 链式编程: end()补充
    * 补充五角星 评论案例
    * 第一步:鼠标移入,当前五角星和前面的五角星变实体。后面的变空心五角星
    * 第二步:鼠标点击的时候,为当前元素添加clicked类,其他的移除clicked类
    * 第三步:当鼠标移开整个评分控件的时候,把clicked的之前的五角星显示实心

    + 4.2 隐式迭代
    * 默认情况下,会自动迭代执行jQuery选择出来所有dom元素的操作。
    * 如果获取的是多元素的值,默认返回的是第一个元素的值。

    + 4.3 map函数
    * $.map(arry,function(object,index){}) *返回一个新的数组*
    *
    * var arry = $("li").map(function(index, element){}) *注意参数的顺序是反的*

    ```
    var newArr = $.map($("li"), function(i, e) {
    return $(e).text() + i;//每一项返回的结果组成新数组
    });

    var newArr = $("li").map(function(elem, index){
    console.log("elem:" + elem);
    console.log("index:" + index);
    retrun index;
    });
    ```
    + 4.4 each函数
    * 全局的
    * $.each(array, function(index, object){})
    *
    * $("li").each(function(index, element){} )
    * 参数的顺序是一致的。
    ```
    例如:
    $( "li" ).each(function() {
    $( this ).addClass( "foo" );
    });

    $( "li" ).each(function( index ) {
    console.log( index + ": " + $( this ).text() );
    });

    $( "div" ).each(function( index, element ) {});
    ```


    + 4.5 noConflict 全局对象污染冲突
    $ jQuery

    var $ = { name : "itecast" };

    <script src="jQueryDemos/jquery-1.11.3.min.js"></script>
    <!-- $ === jQuery -->

    var laoma_jQ = $.noConflict();//让jQuery释放 $, 让$ 回归到jQuery之前的对象定义上去。
    $.name

    jQuery

    + 4.6 jQuery.data() jQuery对象的数据缓存。(了解)

    * $(".nav").data("name", 123);//设置值。
    var t = $(".nav").data("name"); //获取值
    t.name = "18";//对象的更改,会直接同步到 元素的jQuery对象上去。

    + 4.7 会做jQuery插件

    * 全局jQuery函数扩展方法
    ```
    $.log = function() {

    }

    //$("li")
    ```

    * jQuery对象扩展方法
    ```
    $.fn.log = function() {

    }
    ```

    + 4.8 引入第三方插件
    * 背景色动画插件
    * lazyload 插件
    * jQuery UI 插件

    + 4.9 sublime 装插件
    * sublime 3
    * 第一步: 装上sublime的包管理器package control
    * ctrl+ ~
    * 上网把 按照package control的那段代码,粘贴一下,然后回车。
    *
    * 第二步:使用Ctrl + shift + p

  • 相关阅读:
    自动化测试之读取配置文件 | 踩坑指南
    文未有福利 | BAT 名企大厂做接口自动化如何高效使用 Requests ?
    高效能 Tester 必会的 Python 测试框架技巧
    移动自动化测试从入门到高级实战
    1 天,1000+ 测试工程师分享了这个课程 | 年度福利
    H5性能分析实战来啦~
    接口测试实战 | Android 高版本无法抓取 HTTPS,怎么办?
    实战 | 接口自动化测试框架开发(Pytest+Allure+AIOHTTP+用例自动生成)
    第一期线上沙龙PPT领取方式
    Java日志第48天 2020.8.24
  • 原文地址:https://www.cnblogs.com/le220/p/7811725.html
Copyright © 2020-2023  润新知