DayNote(JS3-jQuery)

Jean
305 阅读5分钟

知识点补充

trigger 自动触发事件

自动触发jq的点击事件jq.trigger('click')

    <button>按钮</button>
    <a href="javascript:;">链接</a>
    
    <script>
        $('button').on('click', function() {
            alert('点击了按钮');
        });

        $('a').on('click',function(){
          // 点击a，就会触发button的点击事件
          $('button').trigger('click');
        })
    </script>

1. jQuery基础

1.1 什么是jQuery

第三方的 JS 库（别人写好的 js代码文件，提供给大家使用）

  • 作用：
    • 去dom树 查找dom元素
    • 包装已存在的 dom/bom 对象
    • 入口函数
  • jquery 本质：
    • 是一个 js文件 内部 提供 的 【封装好的方法】
    • $ 就是 这个 jquery 函数的 别名！

image-20210611094756731.png

1.1.1 jq对象本质

  • 由 jq函数 创建并返回 ： $('div')
  • 本质是一个 伪数组，并提供众多 jq方法 image-20210611200216565.png

1.2 jQuery的入口函数

  1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
  2. 相当于原生 js 中的 DOMContentLoaded。
// 第一种: 简单易用。（推荐）
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

// 补充，相当于window.load
$(document).load(function(){
   ...  //  此处是页面DOM加载完成的入口
});

1.3 jQuery中的顶级对象$

  1. $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
  2. $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

1.4 jQuery 对象和 DOM 对象

  1. 用原生 JS 获取来的对象就是 DOM 对象
  2. jQuery 方法获取的元素就是 jQuery 对象。
  3. jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

1.4 jQuery 对象和 DOM 对象转换

截屏2021-06-11 上午10.53.32.png

<script>
    let div = document.querySelector('div');
    // 1. 将 dom对象 转为 jquery对象
    let jDiv = $(div);
    jDiv.animate({
        left: 800
    }, 3000)


    // 2. 将 jquery对象 转为 dom对象
    let domDiv = jDiv[0];
    console.log(domDiv.tagName);
</script>

1.5 通过 索引号 获取dom对象 和 jq对象

let $divs = $('#content>div');
console.log($divs);
console.log($divs[0]);// 返回的是 dom对象
console.log($divs.eq(1));// 返回的是 封装过的jq对象

截屏2021-06-11 下午4.24.06.png

2. jQuery 选择器

2.1 基础选择器

jq函数可以根据css选择器去dom中 查找don元素

  • 返回的是【jq对象(伪数组)】，里面包含了 根据选择器找到的 dom元素对象 和 各种jq方法
$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号

基础选择器.png

2.2 层级选择器

层级选择器最常用的两个分别为：后代选择器和子代选择器。 层级选择器.png

    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>

2.3 筛选选择器

筛选选择器.png

    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>

relation.png

2.3.1 parents()

能够 到当前的所有父级元素（爷爷等） 中去查找

<div class="p-num">
    <div class="quantity-form">
        <a href="javascript:;" class="decrement">-</a>
        <input type="text" class="itxt" value="1">
    <a href="javascript:;" class="increment">+</a>
</div>

$('.increment').parents('.p-num')

2.3.1 下拉菜单显示隐藏案例

    $(function() {
        let $li = $('.nav>li');
        // 为jq对象中 所有的li标签 添加鼠标移入事件
        $li.mouseenter(function() {
            // jq事件处理函数中的 this 也是 事件源 dom对象
            // 所以需要封装为 jq对象，以方便调用jq方法
            let $this = $(this);
            // 获取当前li 的子元素 ul
            $this.children('ul').show();
            // 获取当前li 的子元素 a
            $this.children('a').css('backgroundColor', '#eee');
        })

        $li.mouseleave(function() {
            let $this = $(this);
            $this.children('ul').hide();
            $this.children('a').css('backgroundColor', '');
        })

    })

2.4 隐式迭代

当我们调用jq对象的jq方法时，这些方法 内部 会自动地遍历jq对象 里找到的dom元素。 03jq隐式迭代.png

image-20210611113911234.png

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

index方法获取下标

image-20210611200648969.png

2.4.1 jQuery 设置样式

// 改变的行内样式
$('div').css('属性', '值')

2.4.2 排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

2.4.3 链式编程

核心原理：大部分jq对象的方法，都会返回一个jq对象，所以可以接着继续去调用jq对象的方法

image-20210611163300300.png

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

06链式编程.png

3. jq对象 不同方法的返回值

  1. 返回字符串
// 返回 图片的src属性值
jq.attr('src')
  1. 返回boolean值
// 返回 元素是否包含类名 red（true/flase）
jq.hasClass('red')
  1. 返回 当前jq 对象
// 返回前面的 jq对象
jq.css('color','red')
  1. 返回 新的jq 对象
// 返回 包含兄弟元素的 新jq对象
jq.siblings()

$divs.eq(1)// 返回的是 封装过的 新的jq对象    
$divs[0]// 返回的是 dom对象

3. jQuery 样式操作

3.1 操作 css 方法

注意：通过css方法，获取和修改的都是行内样式。

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

// 3.  参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
//
$(this).css({ 
    "color":"white",
    "font-size":"20px"
});
// 3.1 如果是复合属性要 要采取驼峰命名法; 如果不是数字，就必须加引号； 数字可以不用带单位，默认为px
$(this).css({ 
    backgroundColor:"white",
    font-size:20,
    width:100,
    height:200
});

3.2 设置类样式方法

注意操作类里面的参数不要加点

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

注意： 2. 原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名，相当于追加/移除/切换指定类名。

4. jQuery 效果

  • 显示隐藏：show() / hide() / toggle() ;

  • 划入画出：slideDown() / slideUp() / slideToggle() ;

  • 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

  • 自定义动画：animate() ;

4.1 显示隐藏

4.1.1 show()

show.png

4.1.2 hide()

hide.png

4.1.3 toggle()

toggle.png

4.2 滑入滑出

注意：

  • 一般来说是，slideDown()--显示，slideUp()--隐藏

  • 如果定位是 bottom的话，slideDown()就是隐藏，slideUp()就是显示

4.2.1 slideDown()

slideDown.png

4.2.2 slideUp()

slideUp.png

4.2.3 slideToggle()

slideToggle.png

4.3 淡入淡出

4.3.1 fadeIn()

fadeIn.png

4.3.2 fadeOut()

fadeOut.png

4.3.3 fadeToggle()

fadeToggle.png

4.3.4 fadeTo() 修改透明度

fadeTo.png

4.4 自定义动画

4.4.1 animate()

animate.png

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

4.5 动画队列 和 停止排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

停止动画排队的方法为：stop() ;

  • stop() 方法用于停止动画或效果。
  • stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

总结: 每次使用动画之前，先调用 stop() ,在调用动画。

$(".nav>li").hover(function() {
    // stop 方法必须写到动画的前面
    $(this).children("ul").stop().slideToggle();
});

4.6 手风琴案例

<script>
    $(function() {
        $('.king li').mouseenter(function() {
            // 当前小li的宽度为 224，小图片淡出，大图片淡入
            $(this).animate({
                width: 224
            }).find('.small').stop().fadeOut().siblings().stop().fadeIn();

            // 其兄弟为宽度 69，小图片淡入，大图片淡出
            $(this).siblings().animate({
                width: 69
            }).find('.small').stop().fadeIn().siblings().stop().fadeOut()
        })
    })
</script>

5. jQuery 属性操作

5.1 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 a 元素里面的 href ，比如 input 元素里面的 type。 注意操作元素标准属性，建议用prop属性！

// 1.获取属性 element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
// 2. 设置属性
$("input").prop("checked", true);

console.log($("input").prop("checked"));// 选中-true；未选中-false
console.log($("input").attr("checked"));// 选中-checked；未选中-undefined

5.1.1 复选框选中的数量

// $('.j-checkbox:checked') 筛选出 选中的小复选框 是个伪数组
    $('.j-checkbox').change(function() {
        // 如果 小复选框为选中状态的数量 == 小复选框的数量，则为全选
        if ($('.j-checkbox:checked').length == $('.j-checkbox').length) {
            $('.checkall').prop('checked', true);
        } else {
            $('.checkall').prop('checked', false);
        }
    })

5.2 元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

注意： attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

// 1. 获取 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index"));
// 2. 设置 元素的自定义属性 
$("div").attr("index", 4);

5.3 数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
console.log($("div").data("index"));

6. jQuery 文本属性值

6.1 jQuery内容文本值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

<script>
  // 1. 获取设置元素内容 html() ---相当于 innerHTML
  console.log($("div").html());
  // $("div").html("123");
  
  // 2. 获取设置元素文本内容 text()---相当于 innerText
  console.log($("div").text());
  $("div").text("123");

  // 3. 获取设置表单值 val()---相当于 value
  // 也可以用prop("value")
  console.log($("input").val());
  $("input").val("123");
</script>

7. jQuery 元素操作

7.1 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。 注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

7.1.1 .each()

遍历jq对象内部的dom元素

// 1. each() 方法遍历元素 
let sum=0;
let arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
     // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
     // console.log(i);
     // 回调函数第二个参数一定是 dom元素对象 也是自己命名
     // console.log(domEle);
     // domEle.css("color"); dom对象没有css方法
     $(domEle).css("color", arr[i]);
     sum += parseInt($(domEle).text());
})

7.1.2 $.each()

用来 代替for 循环/for等的替代语法

// $.each() 方法遍历元素 主要用于遍历数据，处理数据
// 1. 遍历jq对象
$.each($("div"), function(i, ele) {
    console.log(i);
    console.log(ele);
});
// 2. 遍历数组
$.each(arr, function(i, ele) {
     console.log(i);
     console.log(ele);
})

// 3. 遍历对象
$.each({
            name: "andy",
            age: 18
}, function(i, ele) {
    console.log(i); // 输出的是 name age 属性名
    console.log(ele); // 输出的是 andy  18 属性值


})

7.2 创建、添加、删除

7.2.1 创建元素

    // 1. 创建元素
    var li = $("<li>我是后来创建的li</li>");

7.2.2 添加元素

    // (1) 内部添加
    $("ul").append(li);  // 内部添加并且放到内容的最后面 
    $("ul").prepend(li); // 内部添加并且放到内容的最前面
    
    // (2) 外部添加
    var div = $("<div>我是后妈生的</div>");
    // $(".test").after(div);
    $(".test").before(div);

7.2.3 删除元素

    // 3. 删除元素
    // $("ul").remove(); //可以删除匹配的元素 自杀
    // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
    $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

8. jQuery 尺寸、位置操作

8.1 jQuery 尺寸操作

size.png

8.2 jQuery 位置操作

注意

  • offset可以获取偏移，也可以设置（记住要先清除所有的内外边距）
  • position只能获取偏移，不能设置
  • scroll用于做返回顶部效果时，是给html和body元素做动画，不能给文档做$("body, html").stop().animate({scrollTop: 0});

offset.png

position.png

scroll.png

$(function() {
  // 1. 获取设置距离文档的位置（偏移） offset
  console.log($(".son").offset());
  console.log($(".son").offset().top);
  $(".son").offset({
      top: 200,
      left: 200
  });
  // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
  // 这个方法只能获取不能设置偏移
  console.log($(".son").position());
  $(".son").position({
      top: 200,
      left: 200
  });// 设置不了
})

// 3. scroll
$(function() {
    $(document).scrollTop(100);
    // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
    // 页面滚动事件
    var boxTop = $(".container").offset().top;
    $(window).scroll(function() {
        if ($(document).scrollTop() >= boxTop) {
            $(".back").fadeIn();
        } else {
            $(".back").fadeOut();
        }
    });
    // 返回顶部
    $(".back").click(function() {
        // $(document).scrollTop(0);
        $("body, html").stop().animate({
            scrollTop: 0
        });
        
    // $(document).stop().animate({
    //     scrollTop: 0
    // }); 不能是文档而是 html和body元素做动画
    })
})

9. jQuery 事件处理

9.1 on() 绑定事件

on1.png

on2.png

on3.png

$(function() {
    // 1. 单个事件注册
    $("div").click(function() {
        $(this).css("background", "purple");
    });
    $("div").mouseenter(function() {
        $(this).css("background", "skyblue");
    });

    // 2. 事件处理on
    // (1) on可以绑定1个或者多个事件处理程序
    $("div").on({
        mouseenter: function() {
            $(this).css("background", "skyblue");
        },
        click: function() {
            $(this).css("background", "purple");
        },
        mouseleave: function() {
            $(this).css("background", "blue");
        }
    });
    $("div").on("mouseenter mouseleave", function() {
        $(this).toggleClass("current");
    });
    
    // (2) on可以实现事件委托（委派）
    // $("ul li").click(); 给每一个li都绑定的点击事件
    $("ul").on("click", "li", function() {
        alert(11);
    });
    // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
    
    // (3) on可以给未来动态创建的元素绑定事件
    // $("ol li").click(function() {
    //     alert(11);
    // }) 是没办法给 未来创建的元素 直接绑定的
    
    $("ol").on("click", "li", function() {
        alert(11);
    })
    var li = $("<li>我是后来创建的</li>");
    $("ol").append(li);
})

9.2 off() 解绑事件

off.png

$("div").on({
    click: function() {
        console.log("我点击了");
    },
    mouseover: function() {
        console.log('我鼠标经过了');
    }
});
$("ul").on("click", "li", function() {
    alert(11);
});
// 1. 事件解绑 off 
$("div").off();  // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
    alert(11);
})

9.3 trigger() 自动触发事件

t1.png

t2.png

$("div").on("click", function() {
    alert(11);
});

// 自动触发事件
// 1. 元素.事件()
$("div").click(); // 会触发元素的默认行为

// 2. 元素.trigger("事件")
$("input").trigger("focus"); // 会触发元素的默认行为  即光标会闪烁

// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
    $(this).val("你好吗");
});
$("input").triggerHandler("focus"); // 光标不会闪烁

10. jQuery 对象

10.1 jQuery 事件对象

event.png

$(document).on("click", function() {
    console.log("点击了document");

})
$("div").on("click", function(event) {
    console.log("点击了div");
    event.stopPropagation(); // 阻止向上冒泡
})

10.2 jQuery 拷贝对象

10.2.1 jq.clone()

深拷贝

10.2.2 $.extend

extend.png

// $.extend(target, obj);
// obj里的内容复制到target里
var targetObj = {};
var obj = {
    id: 1,
    name: "andy"
};
$.extend(targetObj, obj); // obj = {id: 1;name: "andy"}

var targetObj = {
    id: 0,
    msg: {
        sex: '男'
    }
};
var obj = {
    id: 1,
    name: "andy",
    msg: {
        age: 18
    }
};
$.extend(targetObj, obj); // 会覆盖targetObj 里面原来的数据
// 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象，会影响obj对象
console.log(targetObj.msg.sex);// 没有这个属性了

// 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起，且不会影响obj对象
$.extend(true, targetObj, obj);
targetObj.msg.age = 20;
console.log(targetObj);// msg :{sex: "男", age: 20}
console.log(obj);// msg :{age: 18}

10. jQuery 插件

jQuery 插件常用的网站：

  1. jQuery 插件库 www.jq22.com/

  2. jQuery 之家 www.htmleaf.com/

    jQuery 插件使用步骤：

  3. 引入相关文件。（jQuery 文件 和 插件文件）

  4. 复制相关html、css、js (调用插件)。

10.1 瀑布流插件（重点）

插件的使用三点：

  1. 引入css.
  2. 引入JS
  3. 引入html。 （有的简单插件只需引入html和js，甚至有的只需引入js）

10.2 图片懒加载插件

当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。

  1. 引入js
// 必须写在body的底部
<script src="js/EasyLazyload.min.js"></script>
<script>
   	lazyLoadInit({
   		showTime: 1100,
   		onLoadBackEnd: function(i, e) {
     		console.log("onLoadBackEnd:" + i);
   		},
   		onLoadBackStart: function(i, e) {
     		console.log("onLoadBackStart:" + i);
   		}
 	});
</script>
  1. 引入html
// 将所有的 <img src 替换为 <img data-lazy-src
 <img data-lazy-src="upload/floor-1-3.png" alt="">

11. todolist

注意：这里必须判断是否!=null

// 读取本地存储的数据
    function getData() {
        // 拿到数据
        let todoStr = localStorage.getItem('todo');
        // 如果有数据，则转换为数组并返回 
        // 注意：这里必须判断是否!=null 不能写为'',因为''是字符串，而null是什么都没获取到
        if (todoStr != null) return JSON.parse(todoStr);
        // 否则，返回空
        else return [];
    }
avatar
文章
阅读
粉丝