JavaScript基础库

JQuery

JavaScript库

一个封装好的特定的集合（方法和函数）。在这个库里面，封装了很多定义好的函数，支持js的常规操作以及拓展

 

JQuery

是一个快速、简介的js库，设计的宗旨"write less，do more"

学习jquery的本质：学习调用这些函数（方法）

JQuery的使用

• 引入jq文件

• 下方使用script标签

<script src="./jquery-3.6.0.js"></script>
<script>
        var box1 = document.querySelector(".box1")
        console.log(box1);
        var box1Jq = $('.box1')
        console.log(box1Jq);
    </script>

JQuery的入口函数

• 等待文档加载完成（图片不需要加载完成），执行代码

          $(document).ready(function () {
              console.log(1, $(".box1"));
          })

• 等待文档加载完成（图片不需要加载完成），执行代码，是上一个的缩写

          $(function () {
              console.log(2, $(".box1"));
          })

• 等待文档加载完成（图片需要加载完成），执行代码

          $(window).on("load", function () {
              console.log(3, $(".box1"));
          })
          $(window).on("load", function () {
              console.log(33, $(".box1"));
          })

• 原生写法，（图片需要加载完成）

          window.onload = function () {
              console.log(4, $(".box1"));
          }
          // 原生的写法是会被覆盖的
          window.onload = function () {
              console.log(44, $(".box1"));
          }

JQuery的顶级对象$

$是jQuery的别称，可以使用jQuery代替的，但是为了方便，一般直接使用$

JQuery常用API

JQuery的选择器

原生的js获取DOM的方法很多，但是有一些有兼容性的问题，所以jq封装选择方法，使我们获取元素有一个统一的标准

$(选择器) 返回的是Jq对象，是一个数组，不是dom数组 ，要使用jq的方法，就必须使用jq的对象来调用

    <div class="box1"></div>
    <div id="box1">
        <div class="box2"></div>
    </div>
    <script>
        // 返回的不论是id还是类全部都是一个jq的对象数组
        // 选择器的使用和CSS的选择器是一样
        console.log($(".box1"));
        console.log($("#box1"));
        console.log($("div"));
        console.log($(".box2"));
        console.log($("#box1 .box2"));
    </script>

隐式迭代

遍历内部的DOM元素的过程叫做隐式迭代

jq会自动给匹配的元素进行循环遍历，执行相应的方法，我们不需要自己来写循环遍历的操作，简化代码

        // 为五个li添加点击事件
        // 原生的写法
        var lis = document.querySelectorAll("li")
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.color = 'red'
        }
        // jq的写法
        var liss = $('li')
        liss.css("color", "blue")

获取指定下标的元素

            // 获取指定下标的元素，使用eq方法获取对应下标的元素
            console.log(liss.eq(i));
            liss.eq(i).css("color", colors[i])

获取当前元素的下标

        liss.click(function () {
            // console.log(this);
            // 使用$将this转换成jq对象
            console.log($(this).index());
        })

排他思想

当前元素设置样式，其他的兄弟元素清楚样式

siblings()：返回被选子元素的同级元素

        lis.click(function () {
            // console.log(this);
            // lis.css("color", 'black')
            // 将当前的这个元素的字体颜色设置成红色
            $(this).css("color", "red")
            // 获取到当前元素的兄弟元素，
            // 可以传入一个选择器，表示只查找兄弟元素并且符合选择器规则的元素
            console.log($(this).siblings('.item'));
            $(this).siblings('.item').css("color", "black")
        })

链式编程

JQ的对象是可以一直调用jq函数的，可以把所有代码写在一行

        lis.click(function () {
            $(this).css("color", "red").siblings('.item').css("color", "black")
        })

样式操作

• $(选择器).css(属性)：获取属性的值

  console.log($('.box1').css("background-color"));

• $(选择器).css(属性,值)：设置属性的值

  $('.box1').css("background-color", 'blue')

• 如果要设置的属性很多，可以使用对象来设置

          // 设置属性的值
          $('.box1').css({
              width: '200px',
              height: "200px",
              color: 'white',
              // 参数为对象的时候，要使用驼峰命名的方式
              fontSize: '50px',
              // 或者使用keb-base的字符串写法
              'background-color': 'blue'
          })

• 控制元素的类名，设置类名

  • 添加类：$(选择器).addClass("类名")

            $('.add').click(function () {
                $('.box1').addClass("box4")
            })

  • 删除类：$(选择器).removeClass("类名")

            $('.del').click(function () {
                $('.box2').removeClass("box2")
            })

  • 切换类：$(选择器).toggleClass("类名")

            $('.toggle').click(function () {
                $('.box3').toggleClass("box4")
            })

动画

显示隐藏

show(speed,callback)

speed：规定动画的速度，值可以是slow，fast，也可是毫秒数

callback：回调函数，动画结束后才会执行的函数

show hide toggle

        $('.btn1').click(function () {
            $('.container').show(1000, function () {
                console.log("动画结束了");
            })
        })
        $('.btn2').click(function () {
            // console.log(this);
            // 获取container容器
            // hide隐藏元素
            $('.container').hide(1000, function () {
                console.log("动画结束了");
            })
        })
        $('.btn3').click(function () {
            $('.container').toggle(1000, function () {
                console.log("动画结束了");
            })
        })

滑动

slideDown slideUp slideToggle

        $('.btn1').click(function () {
            $('.container').slideDown(1000, function () {
                console.log("动画结束了");
            })
        })
        $('.btn2').click(function () {
            $('.container').slideUp(1000, function () {
                console.log("动画结束了");
            })
        })
        $('.btn3').click(function () {
            $('.container').slideToggle(1000, function () {
                console.log("动画结束了");
            })
        })

淡入淡出

fadeIn fadeOut fadeToggle

fadeTo(speed,opacity,callback)

opacity：切换透明度到指定值

        $('.btn1').click(function () {
            $('.container').fadeIn(1000, function () {
                console.log("动画结束了");
            })
        })
        $('.btn2').click(function () {
            $('.container').fadeOut(1000, function () {
                console.log("动画结束了");
            })
        })
        $('.btn3').click(function () {
            $('.container').fadeToggle(1000, function () {
                console.log("动画结束了");
            })
        })
        $('.btn4').click(function () {
            $('.container').fadeTo(1000, 0.5, function () {
                console.log("动画结束了");
            })
        })

自定义动画

animate(params,speed,callback)

params：终止的时候的样式属性

speed：速度，和上面一样

callback：回调函数，和上面一样

        $('.btn1').click(function () {
            $('.container').animate({
                width: '200px',
                height: '200px',
                backgroundColor: '#00f',
                fontSize: '80px',
                color:'white'
            }, 1000, function () {
                console.log("动画结束了");
            })
        })

停止动画

停止正在执行的动画

        $('.btn2').click(function () {
            $('.container').stop()
        })

属性操作

1、固有属性

prop("属性名") 获取属性值

prop("属性名","属性值") 设置属性值

元素本身自带的属性

1、如果元素有对应的属性，则返回指定的属性值

2、如果元素没有对应的属性值，则返回空字符串，如果这个属性不是元素自带的则返回undefined

$("img").prop("src", imgUrl)

2、自定义属性

attr("属性名") 获取自定义属性值

attr("属性名","属性值") 设置自定义属性值

1、如果元素有对应的属性，则返回指定的属性值

2、如果元素没有对应的属性值，则返回undefined

$("img").attr("src", imgUrl)

3、数据缓存

data，可以在指定的元素上存取数据，不会改变dom结构，页面刷新，存放的数据就消失了

data("属性名") 获取自定义属性值

data("属性名","属性值") 设置自定义属性值

<!-- 在标签上写数据需要使用data-属性值 -->
console.log($("img").data("src"));
$("img").data("src", imgUrl)
console.log($("img").data("title"));
console.log($("img").data("href"));

区别

prop和attr只能存字符串，data可存任意类型

prop>attr prop>data data和attr的效率不一定

内容文本

html() 获取或者设置元素的内容 相当于 innerHTML

text() 获取或者设置元素的文本内容 相当于 innerText

val() 获取或者设置表单元素的值 相当于value

        console.log($('.box1').text());
        console.log($('.box1').html());
        $('.box1').text("<button>这是一个按钮</button>")
        $('.box1').html("<button>这是一个按钮</button>")
        console.log($('input').val());
        $('input').val("修改后的值")

遍历操作

jq的隐式迭代会对同一类元素做一样的操作，如果要想对不同元素做不同操作，需要用到遍历

遍历DOM元素

jqDom.each(function (index,domEl) {})

index：索引号

domEl：DOM元素对象，不是jq对象，要用jq的方法要先转换成jq对象

        // 只能循环jq的dom数组
        $("li").each(function (index, domEl) {
            console.log(index, domEl);
            // domEl.style.color = colors[index]
            $(domEl).css('color', colors[index])
        })

遍历所有对象

$. each(obj,function (index,item) {})

obj：被遍历的对象，任何对象都可以，主要用于数据处理

index：索引号

item：遍历的元素

        // 可以遍历任何对象
        $.each($('li'), function (index, item) {
            console.log(index, item);
        })

元素操作

1、创建元素

var li = $(`<li>4</li>`)

2、添加元素

• 内部

  append(el) // 添加到内部元素的末尾

  prepend(el) // 添加到内部元素前面

• 外部

  before(el) // 添加到元素外部前面

  after(el) // 添加到元素外部后面

        $('ul').append(li)
        $('ul').prepend(li)
        $('ul').after(li)
        $('ul').before(li)
        // 同时操作同一个元素，最终的结果会是最后调用的那一个操作

3、删除元素

remove() 删除匹配的元素，包括本身

empty() 删除匹配的元素的子元素，不包括本身

html('') 情况匹配的元素内容

尺寸操作、位置操作

1、尺寸

      console.log($(".box1").width()); // 获取匹配元素的宽度，只计算width
      console.log($(".box1").height());// 获取匹配元素的高度，只计算height
      console.log($(".box1").innerWidth());// 获取匹配元素的宽度，包含padding
      console.log($(".box1").innerHeight());// 获取匹配元素的高度，包含padding
      console.log($(".box1").outerWidth());// 获取匹配元素的宽度，包含padding、border
      console.log($(".box1").outerHeight());// 获取匹配元素的高度，包含padding、border
      console.log($(".box1").outerWidth(true));// 获取匹配元素的宽度，包含padding、border、margin
      console.log($(".box1").outerHeight(true));// 获取匹配元素的高度，包含padding、border、margin

2、位置

• offset

  用来设置或者放回被选择元素相对于文档的偏移，和父级没有关系

        // 可以直接获取两个属性：top、left   相对于文档左侧和顶部的距离
        console.log($(".box1").offset());
        //  也可以设置位置
        $(".box1").offset({
          left: 0,
          top: 60,
        });

• position

  用来返回整个元素相对于父元素的位置（父元素必须有position属性），没有则往上级找，直到body，会把margin一起算到位置中，只能获取不能设置

        // 可以直接获取两个属性：top、left   相对于父元素左侧和顶部的距离
        console.log($(".box1").position());

3、滚动事件

      $(document).scroll(function () {
        // scrollTop()/scrollLeft 用来获取滚动的长度
        if ($(document).scrollTop() > 400) {
          $(".top").fadeIn(1000);
        } else {
          $(".top").fadeOut(1000);
        }
      });
      $(".top").click(function () {
        // 设置滚动的高度为0，实现回到顶部的效果
        $(document).scrollTop(0);
      });

事件

1、单个事件注册

el.事件类型(function(){

    // 事件处理程序

})

• hover事件 模仿鼠标悬停

       $(".box1").hover(
          function () {
            $(".box1").css({
              width: "200px",
              height: 200,
            });
          },
          function () {
            $(".box1").css({
              width: "100px",
              height: 100,
            });
          }
        );

2、事件处理 on绑定事件

el.on('events',fn)
// events 一个或者多个用空格分隔的事件类型
// fn 要执行的函数

优点

• 可以绑定多个函数

        // 绑定多个函数，如果多个事件都是同一个操作
        // 可以多个写在一起
        $(".box1").on("mouseenter mouseleave click", function () {
          console.log(1);
        });
        // 绑定多个函数，如果多个事件做的是不同操作
        // 使用对象的形式
        $(".box1").on({
          click: function () {
            console.log(1);
          },
          mouseenter: function () {
            console.log(2);
          },
          mouseleave: function () {
            console.log(3);
          },
        });

• 给子元素动态绑定事件

        // 把事件委托给父元素
        // 可以给动态生成的元素绑定事件
        $("ul").on("click", "li", function () {
          console.log(this);
        });

off解绑事件

        // 解除事件绑定
        // 解除所有事件
        $("button").off();
        // 解除单个事件
        $("button").off("click");有事件

one事件 只触发一次

$("button").one("click", function () {
    sendMsg();
});

自动触发事件

$("button").click();

jq的事件处理对象

      // 冒泡事件
      // 点击子元素的时候如果父元素上有一样事件类型，则父元素也会被触发
      $(".box1").click(function (e) {
        console.log("box1");
      }); 
      $(".box2").click(function (e) {
        e.stopPropagation();
        console.log("box2");
      });

      // 默认事件
      $("a").click(function (e) {
        e.preventDefault();
        console.log("a");
      });

JQ插件库

jQuery插件库-收集最全最新最好的jQuery插件