0


小白基础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插件


本文转载自: https://blog.csdn.net/m0_71956038/article/details/125265688
版权归原作者 New 不出对象 所有, 如有侵权,请联系我们删除。

“小白基础JavaScript库”的评论:

还没有评论