jQueryday08(each map函数 全局jQuery扩展函数 jQuery扩展插件)

来源:互联网 发布:家里有网络怎么看电视 编辑:程序博客网 时间:2024/06/11 02:00
    <script>        //全局 $.each(array,function(index,object){}) 参数的顺序是一致的        $(document).ready(function ($) {            /*$("li").each(function (index,el) {                var originTxt = $(el).text();                $(el).text(originTxt+index);            });*/           /*$.each($("li"),function (i,e) {               var originTxt = $(e).text();               $(e).text(originTxt+i+1);//字符串的相加           });*/            //map函数 会把所有的 返回一个新的数组 全局参数顺序是反的 和jquery对象的参数是反的            var temp = $.map($("li"), function (el, index) {                return index;            });            var temp2 = $("li").map(function (i,e) {                console.log(i);                return i;            });            //$.noConflict() 让jQuery 释放$ 让$ 回归到jQuery之前的对象定义 下面就无法使用$            /*                var myjQuery = $.noConflict() 用myjQuery 代替$                var $={ee:22};                <scritp src=>                $.noConflict();                $.ee;             */            /*                jQuery.data()                $(".nav").data("ee",11);设置值                var t = $(".nav").data("ee");获取值                t.ee="18"; 对象的更改 会直接同步到元素jQuery对象上             */            //把数据放到对象上 可以当作标记 增加额外的属性            $("li").click(function () {                $(this).data("clicked",true);               console.log($(this).data("clicked"));            });        });        //全局jQuery函数扩展方法        $.log= function () {            console.log(new Date());        };        $.log();        /*            全局jQuery函数扩展方法            $.log = function(){}         */        //扩展一个普通的jQuery对象的方法        $.fn.log = function () {          console.log($(this).text());          return "aa";        };        //文档加载完成 不包括图片的        $(function () {           var a = $("li").log();            console.log(a);        })    </script></head><body><ul>    <li>e</li>    <li>e</li>    <li>e</li>    <li>e</li></ul></body>
    <script src="jquery-1.11.1.min.js"></script>    <script src="jquery.color.js"></script>    <script src="jquery.lazyload.js"></script>    <script src="jquery-ui.js"></script>    <!--需要引入jQueryUI的css样式 否则是基础样式-->    <link rel="stylesheet" href="jquery-ui.css"/>    <!--        1、引入jQuery        2、引入第三方插件        3、用第三方插件实现效果        懒加载 设置图片宽高 防止跳    -->    <style>        .box{            background: mediumvioletred;            width: 300px;            height:980px;        }    </style>    <script>        $(function () {            $(".box").animate(                {backgroundColor:"#caaaaa"},2000            );        });        $(function () {           $(".e").lazyload()        });        $(function () {            $(".wrap").tabs();            $(".dialog").dialog();        });    </script>    <style>        .wrap div{            height: 300px;            background-color: #245487;        }    </style></head><body>    <div class="box">    </div><img class="e" data-original="tile.png" height="400" width="558"/><img class="e" data-original="tile.png" height="400" width="558"/><div class="wrap">    <ul>        <li><a href="#tab1">也签1</a></li>        <li><a href="#tab2">也签2</a></li>        <li><a href="#tab3">也签3</a></li>    </ul>    <div id="tab1">1</div>    <div id="tab2">2</div>    <div id="tab3">3</div></div>    <!-- 使用属性 js和css 弱耦合 便于后期开发--><div class="dialog" title="标题">    eee</div></body>
/*            jQuery 其实就是一堆js函数 应用广泛 然后形成了行业标准            参考 w3cschool            官网 http://jquery.com/            入口函数            jQuery(document).ready(function(){});            $(function(){});            $===jQuery $是jQuery全局函数的别名            网页加载遇到js或css或图片并行往下加载            document ready是html文档准备就绪 也就是dom树创建完成了 可以进行dom操作            window.onload 整个页面所有的资源都加载完成         */
原创粉丝点击