jQuery04

最新推荐文章于 2022-04-22 20:08:36 发布

Ordbiao

最新推荐文章于 2022-04-22 20:08:36 发布

阅读量190

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/tooHar/article/details/116996982

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

笔记目录

小概
1.链式编程
2. 多库共存
3. 插件
- 3.1 常用的几个插件
- 3.2 插件封装
总结

小概

本章学习三个jQuery的这三个部分：链式编程，多库共存，插件。

1.链式编程

链式编程

什么时候我们可以使用链式编程
我们调用一个方法，这个方法返回一个合适的jQuery对象，那就可以继续点出jQuery方法来继续进行操作。
有些时候调用jQuery方法返回jquery对象，但是这个jQuery对象不是我们想要的jQuery对象，则适合进行链式编程。
需要注意返回值，如果不是jQuery对象比如数字，这是不能使用jQuery方法的

            console.log($('#one').width(100).width()); //100
            $('#one').width(100).width().height(100).css('backgroundColor','red'); //会报错
            $('#one').width(100).width().end().height(100).css('backgroundColor','red');//会报错 数字100是不能点出end()方法的

end()方法：返回上一层选择器那里
之前提过prev()表示选择上一个兄弟，prevAll()则是选择之前的所有兄弟
next():选择下一个兄弟，nextAll()选择之后所有的兄弟

2. 多库共存

如何查看引入的jQuery的版本

log(jQuery.prototype.jquery)//查看原型里的jquery
log(jQuery.fn.jquery)
log($.prototype.jquery)
log($.fn.jquery)

如果一个文件引入多个jquery版本，$是属于后引人的jquery的（后引入的jquery会把之前的jquery在window定义的 $进行覆盖）；这个时候如果要使用之前的 $ 就需要用到jquery提供的多库共存机制，

  <script src="./jquery-3.0.0.js"></script>
  <script src="./jquery-1.12.4.js"></script>
  let _$ = $.noConflict();
  console.log($.fn.jquery);//3.0.0
  console.log(_$.fn.jquery);//1.12.4

原理：$没有调用.noConflict()之前，查看版本是后引入的版本1.12.4，let _ $ = $.noConflict()就是把当前 $的控制权给释放掉，把1.12.4的 $赋值给 _ $, $自然就变成3.0.0版本的了。你要用1.12.4里面的jquery方法就可以用 _ $这个语法糖。

3. 插件

jquery虽然封装了很多方法，但是也有一些不能实现的功能，比如：animate(),可以动画改变left top width height 但是却不能修改backgroundColor。
这个时候如果你需要的话就可以引入颜色插件实现效果。

      //去下面2个网站中查找你想要的jQuery插件: 
      http://www.htmleaf.com/ 
      https://www.jq22.com/

      //jQuery插件的使用: 
      //1.按照人家插件的使用说明来:
      //2.看人家的示例. 
      //人家引入什么你也引入什么,人家是什么结构你也写什么结构,人家调用什么方法你也调用什么方法

3.1 常用的几个插件

1.修改颜色插件（颜色动画-某东工具栏）
需求： //需求1:给每一个li设置鼠标移入事件:
// 上面是文字的span更改定位的left值为-76(宽)以及颜色,
// 下面的图标span更改颜色.
//需求2:给每一个li设置鼠标移出事件:还原

    <script src="jquery-1.12.4.js"></script>
    <!-- 引入颜色插件 -->
    <script src="./plugin/jquery.color.js"></script>
    <script>
        $(function () {
            //delay(延迟的时间); //延迟 
            $('.toolbar>li').on('mouseenter',function(){
                //上面是文字的span更改定位的left值为-76(宽)以及颜色,
                $(this).children('.text').stop(true,false).delay(200).animate({
                    left:-76,
                    backgroundColor:'#db192a'
                },500);
                //下面的图标span更改颜色.
                $(this).children('.icon').stop(true,false).delay(200).animate({
                    backgroundColor:'#db192a'
                },500);

            }).on('mouseleave',function(){
                //还原
                $(this).children('.text').stop(true,false).animate({
                    left:0,
                    backgroundColor:'#7a6e6e'
                },200);

                $(this).children('.icon').stop(true,false).animate({
                    backgroundColor:'#7a6e6e'
                },200);
            })
        });
    </script>

2.图片懒加载插件

不管img标签隐藏还是显示有src属性都会去加载这张图片
那么如果页面上有太多的图片而且有些图片不在可视窗口内如果加载了会影响页面的渲染页面时间
解决方案：自己控制图片的加载当进入可视区域内容才去加载
怎么控制呢？通过控制src属性来控制图片加载
思路怎么样？首先默认所有的图片都不使用src属性，自定义一个属性存要显示的图片路径，当进入可视区域追加到src属性
使用插件基于jquery的图片加载插件
jquery.lazyload.js 延时加载图片

   <script src="jquery-1.12.4.js"></script>
    <!-- 引入图片懒加载的插件 -->
    <script src="./plugin/jquery.lazyload.js"></script>
    <script>
        $(function () {

            $('ul img').lazyload({
                placeholder : "./111.png", //用小图片提前占位
                effect: "fadeIn", // 载入使用何种效果
            });

        })
    </script>

3.UI插件
不做过多掩饰，可以去网站上找类似的插件，跟着示例写

3.2 插件封装

给jQuery添加插件的两种方法

给$直接添加方法.(静态方法)
给jQuery的原型添加方法. （实例方法）

    <!-- 引入我们自己写的add插件 -->
    <script src="./jQuery-add.js"></script>
    <!-- 引入我们自己写的bgColor插件 -->
    <script src="./jQuery-bgColor.js"></script>
    
        //1.给$直接添加方法.  
        let res = $.fn.add(10,20);
        console.log(res);

        //2.给jQuery的原型添加方法. 
        $('div').bgColor('red').width(100).height(100);
        $('p').width(100).bgColor('green').height(100);

静态方法

//自执行函数
;(function ($) {
  //给$添加一个add方法.
  $.prototype.add = function (num1, num2) {
    return num1 + num2;
  };
})($);

加在原型上

;(function($){
    //给$的原型添加方法. 
    $.fn.bgColor = function(yanse){ //fn==prototype
        //console.log(this);//此时这里的this是调用该方法的jQuery对象. 
        this.css('backgroundColor',yanse);
        return this;
    }
}(jQuery));