大前端基础【2-5笔记】jQuery

小球学前端

已于 2022-05-17 09:50:33 修改

阅读量144

点赞数

分类专栏：拉钩教育文章标签： js jquery

于 2021-03-10 09:38:45 首次发布

本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/114626173

版权

拉钩教育专栏收录该内容

47 篇文章 6 订阅

订阅专栏

内容输出：拉钩教育前端急训营

jQuery对象

1、jQuery对象

（1）通过$()方法获取到的对象是JQ对象。

（2）获取的是一组HTML元素，会进行批量操作。

（3）是一个类数组对象，内部包含所有的获取的原生js对象，以及大量的jQuery的方法和属性。

   let p = $("p");
   console.log(p.size()) //获取长度
   console.log(p.length) //获取长度

2、jQuery对象与原生js对象

（1）jQuery对象不能使用原生js对象的方法

（2）原生js对象也不能使用jQuery对象的方法

对象之间的转化

（1）原生对象转化为jQuery对象

let pList = document.getElementsByTagName("p");
$(pList[0]).css("color", "blue");

（2）jQuery对象转化为原生对象

let p = $("p");
p[0].innerHTML = "你好";

3、选择器

  $("p:first").css("background-color", "red"); // :first第一个
  $("p:last").css("background-color", "red");  // :last 最后一个
  $("p:eq(5)").css("background-color", "red"); // :eq:下标计算
  $("p:gt(4)").css("background-color", "red"); // :gt 大于下标为4的被选中
  $("p:lt(4)").css("background-color", "red"); // :lt 小于下标为4的被选中
  $("p:odd").css("background-color", "red"); //偶数
  $("p:even").css("background-color", "red"); //基数
  $("p:not(:even)").css("background-color", "red"); // not，不选择什么样的数据
  $("p").first().css("background-color", "red"); //删选方法

jQuery排序和动画

1、`eq()`方法

jQuery中获得的对象，内部包含被选择的一组原生js对象，在jQuery对象中会进行一个大的排序，这个排序和原来的HTML结构没有关系。
eq()方法在jQuery对象中通过下标获取某个对象，下标是jQuery对象中的大的排序的下标。

2、`index()`方法

index()方法获取下标时，排序跟新生成的jQuery对象无关。它依赖于自身元素在父级中同级元素之间的位置

3、排他思想

在一些事件中，希望自己是特殊的，而它的兄弟级是默认的

4、入口函数

原生的window.onload()在加载的过程时，页面中的资源【DOM树、音频、视频、图片】等加载完毕以后，才能触发window.onload()，并且一个页面只允许出现一次，多次出现，最后一次出现的会覆盖以前的;

jQuery的入口函数，则是加载完DOM树以后就开始触发，并且在一个页面中可以有多个jQuery的入口函数，执行顺序按照前后加载顺序进行，写法有以下两种：

//方式1
  $(document).ready(function(){
    console.log(1);
  })
  
//方式2
 $(function(){
    console.log(123);
  })

5、show( )、hide( )

不带参数证明是直接隐藏显示，带参数，如果是数字，则证明是整个动画时间（毫秒），过度时间内，伴随着宽度、高度和透明度的变化

fast、slow、normal

  $(function(){ 
    let img = $("#img");
    let hide = $("#hide");
    let show = $("#show");
    let toggle = $("#toggle");

    //带参数证明有动画效果
    hide.click(function(){
      // img.hide();
      // img.hide(1000);
      img.hide("fast");
    })

    show.click(function(){
      img.show("slow");
    })

    toggle.click(function(){
      img.toggle("normal");
    })

6、slideDown()、slideUp()滑动隐藏

不带参数证明是直接隐藏显示（默认400ms），带参数，如果是数字，则证明是整个动画时间（毫秒），过度时间内，伴随着高度的变化，fast、slow、normal

动画效果：高度属性在0和设置值之间进行变化，没有透明度动画

不设置宽高则没有滑动效果

   hide.click(function(){
      // img.hide();
      // img.hide(1000);
      img.slideUp(1000);//时间、毫秒
      img.slideUp("fast");
    })

    show.click(function(){
      img.slideDown("slow");
    })

    toggle.click(function(){
      img.slideToggle("normal");
    })

7、fadeIn()、fadeOut()

透明度的转化，与宽高没有关系，不带参数证明是直接隐藏显示（默认400ms），带参数，如果是数字，则证明是整个动画时间（毫秒），过度时间内，伴随着透明度的变化，fast、slow、normal

fadeTo(500,0.5);透明度变为0.5

8、animate()

执行CSS属性集的自定义动画

第一个参数：对象格式，运动的最终css属性集
第二个参数：运动时间，单词格式（normal，slow，fast），数字格式（毫秒）
第三个参数：运动速度，两个值可选swing、linear
第四个参数：回调函数，在运动结束后立即执行的函数

  let $ps = $("p");
  $ps.click(function(){


   // 默认400ms到达目的地
    $(this).animate({"margin-left": "200px"});

    //添加时间，默认1000ms运动时间到达目的地
    $(this).animate({"margin-left": "200px"}, 1000);

    //添加运动速度
    $(this).animate({"margin-left": "200px"}, 1000, "swing");

    //添加回调函数
    $(this).animate({"margin-left": "200px"}, 1000, "swing", function(){
      console.log("动画执行结束。。。")
    });

9、动画排队

1、一个元素身上，如果定义了多个动画，动画会排队等待执行。

2、如果是不同的元素对象都有动画，不会出现排队机制。

3、如果是其他非运行的代码，也不回等待运动完成后执行，会直接执行。

4、动画的显示隐藏效果，如果设置给同一个元素，也会出现动画排队的效果。

动画可以链式调用。

10、动画延迟delay()

将delay()设置在某个运动方法之前，标识后面的运动要在规定的时间之后执行，有延迟运动的效果，参数是时间，单位是毫秒。

运动方法都有延时效果

$(this).delay(3000).animate({"margin-left": "200px"}, 1000, "swing", function(){
   console.log("动画执行结束。。。")
});

11、stop()停止动画

stop(boolean1, boolean2)

boolean1：默认false，是否清空后面的动画，true：清空后边动画，false：继续执行后边的动画。

boolean2：默认false，当前运行是否立即走到结尾，true：立即走到结尾；false：停在当前。

实际工作中，一般要求清空后边的动画，当前动画停止到当前为位置。 stop(true);

12、清空动画排队

方法1：使用stop方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div1{
      width: 200px;
      height: 200px;
      border: 20px solid gray;
      background-image: url("https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2853553659,1775735885&fm=26&gp=0.jpg");
    }
    .div2{
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
    }
    img{
      display: block;
      width: 200px;
      height: 200px;
    }
  </style>
</head>
<body>
  <div class="div1">
    <div class="div2">
    </div>
  </div>
</body>
<script src="./js/jquery-1.12.4.js"></script>
<script>
  let div = $(".div2");

  //方法1
  div.mouseenter(function(){
    $(this).children().stop().slideUp(1000);
  });
  div.mouseleave(function(){
    $(this).children().stop().slideDown(1000);
  });

  //方法2
 //使用函数节流
   div.mouseenter(function(){
     //
     if($(this).children().is(":animated")){
        return;
     }
     $(this).children().slideUp(1000);
   });
  div.mouseleave(function(){
    if($(this).children().is(":animated")){
        return;
     }
     $(this).children().slideDown(1000);
  });
</script>
</html>

jQuery节点操作和元素尺寸

1、操作元素尺寸

操作和获取的大小仅仅是内容部分，

  let div =  $("div");
  //获取宽度
  console.log(div.width()); // 200 数字类型

  //设置宽度
  div.width(500);

操作和获取的大小是内容部分+padding:：inerHeight,innerWidth

  console.log(div.innerWidth()); // 300 数字类型 包含padding
  //设置宽度，多出的部分直接给宽width
  div.innerWidth(400);

操作和获取的大小是内容部分+padding+border：outerHeight,outerWidth

设置的时候，添加或减少的部分直接设置给width

2、删除、清空元素

1、删除元素：jQuery对象.remove( )

2、清空元素

jQuery对象.empty( )：推荐使用，清空内部所有元素及元素相关的事件

jQuery对象.html( ’ ’ )：仅仅清空内部元素

3、克隆元素

语法：jQuery对象.clone(布尔值)；返回克隆好的元素。

参数：默认是false，表示仅仅克隆内容，true，克隆内容和事件。

4、操作元素的尺寸和位置

获取内容区域的宽度:jQuery对象.width( )

获取内容区域+padding区域的大小: jQuery对象.innerWidth( )

获取border以及区域的大小:jQuery对象.outerWidth( )

注意: 我们增加或减少的区域都会设置给:width,不会改变border和padding的值

offset()：获取距离文档的位置，与定位和父级没有关系。top\left

position()：获得的是元素距离上级定位参考元素的位置 top\left

5、操作卷去的页面间距

获取：jQuery对象.scrollTop( ) ，返回数字

设置：jQuery对象.scrollTop( )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 2000px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <button>返回顶部</button>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    //获取滑动距离
    $(document).scroll(function(){
      console.log($(this).scrollTop());
    })
    
    //一键返回顶部
    $("button").click(function(){
        $("html,body").animate({"scrollTop":0},500)
    })
</script>
</html>

jQuery中的事件操作

1、on方法注册事件

注册简单事件语法：jQuery对象.on(‘事件名’，事件处理程序)。

on()方法封装的底层实际是addEventListener()

事件名相同的时候不会进行覆盖操作，而是依次执行。

2、on方法实现事件委托

原生方法实现事件委托

let div = document.getElementsByTagName('div')[0]
div.onclick = function (e) {
	e.target.style.background = 'pink'
}

使用jQuery对象实现事件委托：

jQuery对象.on(事件名, '选择器', 事件处理程序名称)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
    let ul = $("ul");
    ul.on("click", 'li', function() {
        alert($(this).text())
    })
</script>

</html>

3、off方法移除事件

1、解绑简单事件

jQuery对象.off(事件名, 事件处理程序名称)

2、解绑事件委托注册的事件

jQuery对象.off(事件名, '选择器', 事件处理程序名称)

4、trigger触发事件

jQuery对象.trigger('事件名')

5、事件对象

事件处理程序的第一个形参e

事件对象.keyCode 返回键码数字

事件对象.altKey/shiftKey/ctrlKey 返回的是布尔值。检测是否按下(true)

事件对象.target 最初触发事件的DOM元素

事件对象.currentTarget 在事件冒泡阶段中的当前的DOM元素

事件对象.preventDefault() 阻止默认行为（return false）

事件对象.stopPropagation() 阻止事件冒泡

6、多库共存

同时引入多个库，其他库中也存在$标识符

解决办法1：使用jQuery标识符进行调用

解决办法2：释放 $标识符， ‘ l e t m y$ = jQuery.noConflict( )`

7、推荐jQuery插件库

http://www.htmleaf.com/

小球学前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
大前端基础【2-5笔记】jQuery

内容输出：拉钩教育前端急训营jQuery对象1、jQuery对象（1）通过$()方法获取到的对象是JQ对象。（2）获取的是一组HTML元素，会进行批量操作。（3）是一个类数组对象，内部包含所有的获取的原生js对象，以及大量的jQuery的方法和属性。 let p = $("p"); console.log(p.size()) //获取长度 console.log(p.length) //获取长度2、jQuery对象与原生js对象（1）jQuery对象不能使用原生js对象.
复制链接

扫一扫