您当前的位置: 首页 > 技术文章 > 前端开发

小白基础JavaScript库

作者: 时间:2022-11-26阅读数:人阅读

JQuery

JavaScript库

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

JQuery

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

学习jquery的本质:学习调用这些函数(方法)

JQuery的使用

  • 引入jq文件

  • 下方使用script标签

<script src="https://blog.csdn.net/m0_71956038/article/details/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插件

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:licqi@yunshuaiweb.com

加载中~
如果您对我们的成果表示认同并且觉得对你有所帮助可以给我们捐赠。您的帮助是对我们最大的支持和动力!
捐赠我们
扫码支持 扫码支持
扫码捐赠,你说多少就多少
2
5
10
20
50
自定义
您当前余额:元
支付宝
微信
余额

打开支付宝扫一扫,即可进行扫码捐赠哦

打开微信扫一扫,即可进行扫码捐赠哦

打开QQ钱包扫一扫,即可进行扫码捐赠哦