代码编织梦想

jQuery基本概述请戳:jQuery概述及基本使用

一、jQuery常用API

1、jQuery选择器

$('选择器')

(1)基本选择器:
  • ID选择器:$("#id");
  • 全选:*
  • 类:.
  • 标签:div
  • 并集:div, span
  • 交集:li.current
(2)层级选择器:
  • 子代:$("ul>li");
  • 后代:$("ul li");
(3)隐式迭代(重要)

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代,简单理解就是,给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们自己进行循环,从而简化操作。

(4)筛选选择器(过滤器)

过滤器是一个字符串,用于筛选dom对象,过滤器是和选择器一起使用的。在选择了dom对象后,再对其进行过滤筛选。

使用dom对象在数组中的位置作为过滤条件。

  • 第一个元素:$('li:first');
  • 最后一个元素:li:last
  • 获取到的li中,索引号为2的元素(从0开始):li:eq(2)
  • 获取到的li中,索引号为奇数的元素:li:odd
  • 获取到的li中,索引号为偶数的元素:li:even
(5)筛选方法(重点)
语法用法说明
parent()$('li').parent();查找父级
children(selector)$('ul').children('li');相当于$('ul>li'); 最近一级(亲儿子)
find(selector)$('ul').find('li');相当于$('ul li'); 后代选择器
siblings(selector)$('.first').siblings('li');查找兄弟节点 不包括自身
nextAll([expr])$('.first').nextAll();查找当前元素之后所有的同辈元素
prevAll([expr])$('.last').prevAll();查找当前元素之前所有的同辈元素
hasClass(class)$('div').hasClass('protected');检查当前元素是否含有某个特定的类,如果有则返回true
eq(index)$('li').eq(2);相当于$('li:eq(2)'); index从0开始
(6)新浪下拉菜单
		$(function () {
            // 鼠标经过
            $('.nav>li').mouseover(function () {
                // $(this)表示选择当前元素 不要加引号
                // show() 显示元素
                $(this).children('ul').show();
            })
            // 鼠标离开
            $('.nav>li').mouseout(function () {
                $(this).children('ul').hide();
            })
        })
(7)排他思想

原生js中是"干掉所有人,留下我自己"的做法。

jQuery中设置当前元素样式,其余的兄弟元素清除样式。

		$(function () {
            // 1.隐式迭代:给所有按钮都绑定点击事件
            $("button").click(function () {
                // 2.当前元素变换背景颜色
                $(this).css("background", "pink");
                // 3.隐式迭代:其余兄弟去掉背景颜色
                $(this).siblings("button").css("background", "");
            })
        })
(8)淘宝服饰精品demo
  • 通过侧边栏left取出当前的index
  • 然后将当前index所对应的div显示出来
  • 再将该div的兄弟div都隐藏起来
		$(function () {
            $('#left li').mouseover(function () {
                var index = $(this).index();
                $('#content div').eq(index).show();
                $('#content div').eq(index).siblings('div').hide();
            })
        })
(9)链式编程

链式编程是为了节省代码量,看起来更优雅。

$(this).css('color','red).sibling().css('color','');表示我变成红色,我的兄弟不变色。

与以下两行代码等效:

$(this).css('color','red');
$(this).sibling().css('color','');

使用链式编程一定注意是哪个对象执行样式。

2、jQuery样式操作
(1)操作CSS方法

可读可写;

  1. 参数只写属性名,则返回属性值

    $(this).css('color');

  2. 对属性进行修改,如果属性值是数字可以不用跟单位,也可以不加引号

    $(this).css('color', 'red');

  3. 参数可以是对象形式,方便设置多组样式

    $(this).css({'color':'white', 'backgroundColor':'pink'})

(2)设置类样式方法

1.作用等同于原生js中的classList,可以操作类样式,注意操作类里面的参数不要加点。

  • 添加类:addClass
  • 删除类:removeClass
  • 切换类:toggleClass
	$(function () {
            $('div').click(function () {
                // 1. 添加类
                // $(this).addClass('current');
                // 2. 删除类
                // $(this).removeClass('bor');
                // 3. 切换类
                $(this).toggleClass('current');
            })
        })

2.tab栏切换demo:

  • 点击li,让当前li添加current类,其余兄弟移除current类
  • 点击的同时,获取li的index
  • 让下方相应索引号的item显示,其余item隐藏
	$(function () {
            $('li').click(function () {
                $(this).addClass('current').siblings().removeClass('current');
                var index = $(this).index();
                $('.item').eq(index).show().siblings().hide();
            })
        })

3.jQuery类操作与className的区别

原生js中的className会覆盖掉元素原先的类名,而jQuery中的类操作只是对指定类进行操作,不影响原先的类名。

3、jQuery效果

jQuery给我们封装了很多的动画效果,最常见的如下:

(1)显示隐藏
  • show()

    show([speed, [easing], [fn]]) 参数都可省略,无动画直接显示

    speed:三种预定速度之一的字符串(slow, normal, fast)或表示动画时长的毫秒数值(如:1000)
    easing:(Optional)用于指定切换的效果,默认是swing,可用参数linear
    fn:回调函数

  • hide()

    hide([speed, [easing], [fn]])

  • toggle()

$(function () {
            $('button').eq(1).click(function () {
                $('div').hide(1000, function () {
                    alert(1);
                });
            })
            $('button').eq(0).click(function () {
                $('div').show('slow');
            })
            $('button').eq(2).click(function () {
                $('div').toggle();
            })
        })

不过一般情况下,都是不加参数的。因为效果比较丑。

(2)滑动:参数和显示隐藏的参数相同
  • slideDown()
  • slideUp()
  • slideToggle()
(3)事件切换

hover([over,]out)

over: 鼠标移动到元素上要触发的函数(相当于mouseenter)
out:鼠标移开时要触发的函数(相当于mouseleave)

	$(function () {
            // 里面的两个函数分别在鼠标经过和鼠标离开时被触发
            // $('button').hover(function () {
            //     $('div').slideDown();
            // }, function () {
            //     $('div').slideUp();
            // })

            // 如果只写一个函数,则鼠标经过和离开都会触发这个函数
            $(function () {
                $('button').hover(function () {
                    $('div').slideToggle();
                })
            })
        });

注意如果只写一个函数,则不论鼠标经过和离开都会触发这个函数

(4)淡入淡出
  • fadeIn()

  • fadeOut()

  • fadeToggle()

  • fadeTo() 修改透明度

    fadeTo([[speed], opacity, [easing], [fn]])

    opacity:透明度必须写,取值为0~1之间

		$(function () {
            $('button').eq(0).click(function () {
                $("div").fadeIn(1000);
            })
            $('button').eq(1).click(function () {
                $("div").fadeOut();
            })
            $('button').eq(2).click(function () {
                $("div").fadeToggle();
            })
            $('button').eq(3).click(function () {
                // 速度和透明度必须写
                $("div").fadeTo(1000, .5);
            })
        })
(5)自定义动画

1.animate()

animate(params, [speed], [easing], [fn])

params:想要更改的样式属性,以对象形式传递,必须写!属性名可以不带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数可以省略。

		$(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 400
                }, 500)
            })
        })
  • 注意params里面是以对象形式进行存放的
  • 数值不要跟单位

2.王者荣耀手风琴(折叠卡片)demo

  • 鼠标经过li时:
  • 当前li宽度变为224px,同时里面的小图片淡出,大图片淡入;
  • 其余兄弟li宽度变为69px,里面的大图片淡出,小图片淡入
	$(function () {
            // 鼠标经过li
            $(".king li").mouseenter(function () {
                // 1.宽度变为224px,同时里面的小图片淡出,大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟宽度变为69px,同时大图片淡出,小图片淡入
                $(this).siblings("li").stop().animate({
                    width: 69
                }).find(".big").stop().fadeOut().siblings(".small").stop().fadeIn();
            })
        })

注意点

  • 要将li里面的a里面的small和big改变宽度,需要用到后代选择器find方法,不能用children方法,因为这种方法只能选出最近一级的子代。
  • 链式编程可以更简化代码,这里small后面再去找big的时候,使用到兄弟选择器
  • 最后注意给动画加上stop方法,停止动画排队
(6)动画队列以及停止排队方法

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

stop方法停止动画排队 注意要写到动画前面,结束上一次的动画

$('button').hover(function () {
    // stop方法停止动画排队 注意要写到动画前面
    $('div').stop().slideToggle();
})

2.高亮显示demo

  • 鼠标经过,li的其他兄弟元素透明度修改为0.5;鼠标离开,修改为1
  • 使用hover,里面分别放鼠标经过时触发的事件和离开时触发的事件
  • 一定注意要在动画前面添加stop方法,停止动画排队
$(".wrap li").hover(function () {
    $(this).siblings().stop().fadeTo(400, 0.5);
    }, function () {
    $(this).siblings().stop().fadeTo(400, 1);
})
4、jQuery属性操作
(1)设置或获取元素固有属性值prop()

元素固有属性就是元素本身自带的属性,比如<a>元素中的href<input>里面的type

1.获取属性 e.prop("属性名") 得到属性值

2.设置属性 e.prop("属性", "属性值")

(2)设置或获取元素自定义属性attribute()

1.获取属性 e.attr("属性名") 还可以获取html5中的自定义属性data-

2.设置属性 e.attr("属性", "属性值")

(3)数据缓存 data()

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

1.附加属性 e.data("属性名", "属性值")

2.获取属性 e.data("属性名")

3.还可以获取h5中的自定义属性data-,但注意属性名中不需要带data-,而且获取到的属性值是数字型

<div index="1" data-index="2">我是div</div>
<script>
    console.log($("div").data("index"));  //2
</script>
(4)购物车demo–全选模块

全选思路:

(1)里面三个小复选框(j-checkbox)的选中状态是跟着全选按钮(checkall)来的
(2)那么则利用prop()方法获取复选框的固有属性checked
(3)将获取到的全选按钮状态赋值给三个小复选框即可

// 1、全选、全不选按钮
    // 使用change事件
    $(".checkall").change(function () {
        var checked = $(this).prop("checked");
        // 有上下两个全选按钮,都需要进行改变;使用并集选择器选择
        $(".j-checkbox, .checkall").prop("checked", checked);
    })

小复选框如果全部选中,全选按钮也需要被自动选中:
(1)每次点击小复选框按钮,就判断小复选框被选中的总个数
(2)如果恰好等于3,则把全选按钮选中;否则不选

$(".j-checkbox").change(function () {
        // :checked选择器帮助我们选出被选中的复选框元素
        var nums = $(".j-checkbox:checked").length;
        // $(".j-checkbox").length统计所有小复选框的数量
        if (nums === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    })
5、jQuery内容文本值

主要针对元素的内容还有表单的值进行操作。

(1)普通元素内容html()

相当于原生js的innerHTML,可以获取标签和内容

获取元素内容 html()

设置元素内容 html("内容")

console.log($("div").html());
$("div").html("123");
(2)普通元素文本内容text()

相当于原生js的innerText,只获取文本

获取元素文本内容 text() 设置元素文本内容 text("内容")

// 2.text()
        console.log($("div").text());
        $("div").text("123");      
(3)表单值val()

相当于原生js中的value

// 3.表单值 val()
        console.log($("input").val());
        $("input").val("123");
(4)购物车demo–增减商品数量模块

比较值得注意的是:

  • 修改数量的时候,只修改当前点击的商品数量,所以要选择点击元素的兄弟节点
  • 减少商品数量的时候,需要判断数量是否等于1,如果等于1则不能再减少
// 2、增减商品数量
    $(".increment").click(function () {
        var nums = $(this).siblings("input").val();
        nums++;
        $(this).siblings(".itxt").val(nums);
    });
    $(".decrement").click(function () {
        var nums = $(this).siblings(".itxt").val();
        if (nums == 1) {
            alert("商品件数不能少于一件");
        } else {
            nums--;
            $(this).siblings("input").val(nums);
        };
    });
(5)返回指定祖先元素

e.parents("选择器")

	<div class="one">
        <div class="two">
            <div class="three">
                <div class="four">我是第四层</div>
            </div>
        </div>
    </div>

    <script>
        console.log($(".four").parent().parent().parent());
        console.log($(".four").parents());
        console.log($(".four").parents(".one"));
    </script>
(6)购物车demo–商品小计模块
  • 只能修改本商品的小计
  • 当前商品的单价需要去掉符号后再相乘,用到截取字符串 substr(1)
  • 可以通过parents()返回指定祖先元素
  • 最后的计算结果如果想保留两位小数,通过toFixed(2)方法
// 3、商品小计模块
    $(".increment, .decrement").click(function () {
        var nums = $(this).siblings("input").val();
        // var price = $(this).parent().parent().siblings(".p-price").text().substr(1);
        var price = $(this).parents(".p-num").siblings(".p-price").text().substr(1);
        var sum = (nums * price).toFixed(2);
        $(this).parent().parent().siblings(".p-sum").text('¥' + sum);
        $(this).parents(".p-sum").siblings(".p-sum").text('¥' + sum);
    })

如果用户直接修改表单里面的值,也需要计算小计,使用表单change事件

// 直接修改表单中的值
    $(".itxt").change(function () {
        var nums = $(this).val();
        if (nums <= 0) {
            alert("商品件数不能少于一件");
            $(this).val(1);
        } else {
            var price = $(this).parents(".p-num").siblings(".p-price").text().substr(1);
            var sum = (nums * price).toFixed(2);
            $(this).parents(".p-num").siblings(".p-sum").text('¥' + sum);
        }
    })
6、jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

(1)遍历

jQuery中隐式迭代是对同一类元素做相同操作,如果想给同一类元素做不同操作,则需要用到遍历。

语法1$("div").each(function(index, domEle) {xxx;}) 遍历DOM元素

回调函数中的两个参数分别代表元素的索引号每个DOM元素对象,不是jQuery对象,所以不能使用jquery方法,如果想要使用jquery方法,则需要先转换为jquery对象。并且两个参数都可以自己进行命名。

// 1、each()方法遍历元素
            var arr = ["red", "green", "blue"];
            var sum = 0;
            $("div").each(function (i, domEle) {
                // console.log(i);
                // console.log(domEle);  // 获取到的是dom元素,不能使用jquery方法
                // 如果想要使用jquery方法,则需要先转换为jquery对象
                $(domEle).css("color", arr[i]);
                sum += parseInt($(domEle).text());
            })
            console.log(sum);

语法2$.each(遍历对象, function(index, ele) {xxx;}) 主要用于遍历数据、处理数据,比如遍历数组、对象等

// 2、$.each()方法 主要用于遍历数据、处理数据
            $.each(arr, function (i, ele) {
                console.log(i);
                console.log(ele);
            })
            $.each({ name: "andy", age: 22 }, function (i, ele) {
                console.log(i);  // 返回属性名
                console.log(ele);  //返回属性值
            })
(2)购物车demo–计算商品件数总计和总额

封装一个函数,用于计算商品的总件数和总价钱。然后在增减商品数量、手动修改商品数量、小复选框选择改变以及全选框选择改变时进行调用。

// 4、商品总计模块
    function getSum() {
        var count = 0;  //总件数
        var money = 0;  //总价钱
        $(".j-checkbox").each(function (i, ele) {
            if ($(ele).prop("checked")) {
                count += parseInt($(ele).parents(".cart-item").find(".itxt").val());
                money += parseFloat($(ele).parents(".cart-item").children(".p-sum").text().substr(1));
            }
        })
        $(".amount-sum em").text(count);
        $(".price-sum em").text('¥' + money.toFixed(2));
    }
(3)创建、添加和删除

$("<li></li>") 会动态创建一个li标签
e.append(li) e.prepend(li) 内部添加元素
e.before(div) e.after(div) 外部添加元素
e.remove()移除自身 e.empty(), e.html("")移除子节点 删除元素

		// 1、创建元素
            var li = $("<li>我是新的li</li>");
            var div = $("<div>我是新的div</div>");

        // 2、添加元素
            // (1)内部添加  父子关系
            // $("ul").append(li);  //在结尾添加
            $("ul").prepend(li);  //在开头添加
            // (2)外部添加  兄弟关系
            // $("div").before(div);  //在前面添加
            $("div").after(div);  //在后面添加

        // 3、删除元素
            // $("div").remove();  //删除自身
            // $("ul").empty();  //删除匹配元素里面的子节点
            $("ul").html("");  //删除匹配元素里面的子节点
(4)购物车demo–删除购物车商品
  • 使用remove删除掉商品即可
  • 有三个地方需要删除:1.商品后的删除按钮 2.删除选中的商品 3.清理购物车
  • 删除选定商品的时候,会有一个隐式迭代的过程,不需要自己去写遍历
  • 注意删除商品后,要重新计算商品总件数和总额
// 5、删除商品
    // (1)商品后的删除按钮
    $(".p-action a").click(function () {
        $(this).parents(".cart-item").remove();
        getSum();
    })
    // (2)删除选中商品
    $(".remove-batch").click(function () {
        // 这里会有隐式迭代,将所有选中的小复选框的商品移除,不需要自己写遍历函数
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    })
    // (3)清理购物车
    $(".clear-all").click(function () {
        $(".cart-item-list").html("");
        getSum();
    })
(5)购物车demo–给选中商品添加背景颜色

在全选按钮和小复选框按钮的选择状态改变时,根据当前是否选中,来决定添加或者移除掉check-cart-item

// 1、全选、全不选按钮
    // 使用change事件
    $(".checkall").change(function () {
        var checked = $(this).prop("checked");
        // 有上下两个全选按钮,都需要进行改变;使用并集选择器选择
        $(".j-checkbox, .checkall").prop("checked", checked);
        if (checked) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
        getSum();
    });

    // 小复选框
    $(".j-checkbox").change(function () {
        // :checked选择器帮助我们选出被选中的复选框元素
        var nums = $(".j-checkbox:checked").length;
        // $(".j-checkbox").length统计所有小复选框的数量
        if (nums === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
        getSum();
    });
7、jQuery尺寸、位置操作
(1)尺寸
语法含义
width()/height()获取和设置元素宽/高 只计算width/height
innerWidth()/innerHeight()包含padding
outerWidth()/outerHeight()包含padding + border
outerWidth(true)/outerHeight(true)包含padding + border + margin
			// 1.width()/height()
            console.log($("div").width());
            // $("div").width(300);  //参数可以不必写单位

            // 2.innerWidth()/innerHeight()  width+padding
            console.log($("div").innerWidth());

            // 3.outerWidth()/outerHeight()  width+padding+border
            console.log($("div").outerWidth());

            // 4.outerWidth(true)/outerHeight(true)  width+padding+border+margin
            console.log($("div").outerWidth(true));

(2)位置
语法含义
offset()设置或者获取元素相对于文档的偏移坐标,与父级无关
position()获取元素相对于带有定位的父级的偏移坐标,如果父级都没有定位,则以文档为准
scrollTop()/scrollLeft()获取或者设置元素被卷去的头部(或左侧)
			// 1.获取或者设置距离文档的位置(偏移) offset()
            console.log($(".son").offset());  // 返回的是一个对象
            console.log($(".son").offset().top);

            $(".son").offset({
                left: 200,
                top: 200
            });

            // 2.相对于有定位的父级的偏移  position()
            // 注意这种方法只能获取,不能设置
            console.log($(".son").position());
  • 注意offset()返回的是一个对象,是元素相对于文档的偏移坐标;也可以用offset()方法进行设置
  • 因为offset()返回的对象中包含top和left属性,所以offset().top可以单独返回距离文档顶部的距离
  • position()返回的也是对象,是元素相对于带定位的父级的偏移坐标;这种方法只能获取,不能设置偏移
			// 可以设置被卷去的头部
            $(document).scrollTop(100);

            // 也可以获取被卷去的头部
            var boxTop = $(".container").offset().top;
            $(window).scroll(function () {
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").stop().fadeIn();
                } else {
                    $(".back").stop().fadeOut();
                }
            })

带有动画的返回顶部:注意这里必须是html和body元素做动画,而不能是document文档

// 返回顶部
            $(".back").click(function () {
                // $(document).scrollTop(0);
                // 带有动画的返回顶部
                $("body, html").stop().animate({
                    scrollTop: 0
                })
            })
(3)电梯导航demo
  • 首先滚动到"今日推荐"模块的时候,让电梯导航显示

    // 1.显示/隐藏电梯导航模块
        var boxTop = $(".recom-hd").offset().top;
        toggleTool();
        function toggleTool() {
            if ($(document).scrollTop() >= boxTop) {
                $(".fixedtool").stop().fadeIn();
            } else {
                $(".fixedtool").stop().fadeOut();
            }
        };
        $(window).scroll(function () {
            toggleTool();
        })
    

    这里将电梯导航滚动封装到一个函数中,页面一加载就滚动判断是否显示电梯导航。

  • 点击电梯导航页面可以滚动到相应内容区域

  • 电梯导航模块和内容区模块一一对应,点击电梯导航某个小模块的时候,拿到当前小模块的索引号

  • 就可以把animate要移动的距离求出来:当前索引号内容区模块的offset().top

    // 2.点击电梯导航页面可以滚动到相应内容区域
        $(".fixedtool li").click(function () {
            // 计算出页面要去往的位置
            var curr = $(".floor .w").eq($(this).index()).offset().top;
            // 页面动画滚动
            $("body, html").stop().animate({
                scrollTop: curr
            });
            // 让当前点击的li添加类名,兄弟节点移除类名
            $(this).addClass("current").siblings().removeClass("current");
        })
    
  • 页面滚动到某个内容区域,电梯导航li相应添加或者删除current类名

    $(window).scroll(function () {
            toggleTool();
            // 3.页面滚动到某个内容区域,左侧电梯导航li相应添加或删除current类名
            $(".floor .w").each(function (i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    // console.log(i);  //index
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
                }
            })
        })
    

    需要根据滚动事件去判断当前滚动到第几个内容区域了,所以要在滚动事件里面写。取到当前内容的索引,让对应电梯导航中的li添加current类名,其他兄弟移除类名。

  • 使用节流阀解决小bug

    1、当点击了li后,就不需要再执行页面滚动事件中li添加或删除current类名了
    2、声明一个节流阀(其实就是互斥锁),只有当flag=true的时候才执行页面滚动事件
    3、但点击了li后,就关闭节流阀(flag=false)
    4、在li执行完动画后,还要在animate函数的回调函数中,再将节流阀打开。否则点击完后,页面滚动将无法正常工作
    

二、jQuery事件

1、jQuery事件注册
(1)单个事件注册

element.事件(function() { ... })

事件类型和原生基本一致:如mouseover mouseout blur focus change keydown keyup resize scroll

			$("div").click(function () {
                $(this).css("backgroundColor", "skyblue");
            });
            $("div").mouseenter(function () {
                $(this).css("backgroundColor", "purple");
            });
2、jQuery事件处理
(1)事件处理on()绑定事件

element.on(events, [selector], fn)

  • events:一个或多个事件,使用空格分隔
  • selector:元素的子元素选择器
  • fn:回调函数

1.on()方法在匹配元素上绑定一个或多个事件的事件处理函数

// 2.事件处理on
            // (1)事件处理程序不一致
            $("div").on({
                mouseenter: function () {
                    $(this).css("backgroundColor", "purple");
                },
                click: function () {
                    $(this).css("backgroundColor", "skyblue");
                }
            });
            // (2)事件处理程序一致
            $("div").on("mouseenter mouseleave", function () {
                $(this).toggleClass("current");
            })

如果事件处理函数不一致,则写成对象的形式,每个事件对应一个处理函数。

2.可以进行事件委派操作。事件委派就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给父元素

// on()实现事件委派(委托) 
            // 事件绑定在ul上,但是触发对象是li,事件冒泡到父元素上,执行事件
            $("ul").on("click", "li", function () {
                alert(11);
            })

3.动态创建的元素,click()没有办法绑定事件,on()可以给动态生成的元素绑定事件

// on()可以给动态创建的元素绑定事件
            // $("ol li").click(function () {  //传统的点击事件不能给未来动态创建的元素绑定
            //     alert(1);
            // });
            $("ol").on("click", "li", function () {
                alert(11);
            })
            var li = $("<li>我是后来创建的li</li>");
            $("ol").append(li);
(2)微博发布效果demo
  • 点击发布按钮,动态创建一个li,放入文本框的内容和一个删除按钮,并将li添加到ul中
  • 点击删除按钮,可以删除当前的微博留言:on为动态创建的元素绑定事件,并使用了事件委托
		$(function () {
            // 1.点击发布按钮,动态创建li,里面放文本内容和删除按钮,并将li追加到ul中
            $(".btn").on("click", function () {
                var li = $("<li></li>");
                li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                $("ul").prepend(li);
                li.slideDown();
                $(".txt").val("");

            })
            // 2.点击删除按钮,可以删除当前的微博留言li
            // 使用on给动态创建的元素绑定事件,且使用事件委托
            $("ul").on("click", "a", function () {
                $(this).parent().slideUp(function () {
                    $(this).remove();
                });
            })
        })
(3)off()解绑事件
  • 可以解除所有事件 无参
  • 也可以解除指定单个事件 有参
  • 还可以解除事件委托 element.off("event", "child")
		$(function () {
            $("div").on({
                click: function () {
                    $(this).css("backgroundColor", "skyblue");
                },
                mouseover: function () {
                    $(this).css("backgroundColor", "purple");
                }
            })

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

            // 如果没有参数,则表示解除div上所有事件
            // $("div").off();
            // 只解除div的点击事件
            $("div").off("click");

            // 解除事件委托
            $("ul").off("click", "li");
        })

如果有的事件只想触发一次,可以使用one()来绑定事件

// one() 只触发一次
            $("p").one("click", function () {
                alert(111);
            })
(4)自动触发事件

有些事件希望自动触发,比如轮播图自动播放功能更点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。

  • element.event()

  • element.trigger("event")

  • element.triggerHandler("event") 该事件不会触发元素默认行为

    比如input得到焦点时,光标闪烁。

		$(function () {
            $("div").on("click", function () {
                alert(11);
            });
            // 自动触发事件
            // 1. element.event();
            $("div").click();
            // 2.element.trigger("event")
            $("div").trigger("click");
            // 3.element.triggerHandler("event")
            $("div").triggerHandler("click");
            
            // triggerHandler 不会触发元素的默认行为
            $("input").on("focus", function () {
                $(this).val("你好吗");
            })
            $("input").triggerHandler("focus");
        })
3、jQuery事件对象

事件被触发,就会有事件对象的产生。与原生js使用方法一致。

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

三、jQuery其他方法

1、jQuery拷贝对象

如果想要把某个对象拷贝(合并)给另外一个对象使用,可以使用extend()方法

$.extend([deep], target, object1, [objectN])

  • deep:如果设置为true表示深拷贝,默认为false浅拷贝
  • target:要拷贝的目标对象
  • object1:待拷贝的对象

浅拷贝就是把被拷贝对象中复杂数据类型的地址拷贝给了目标对象,也就是说被拷贝对象和目标对象指向同一地址,所以修改目标对象会同时修改原被拷贝对象。

深拷贝会把里面的数据完全复制一份给目标对象,如果里面有不冲突的属性,会合并到一起。复杂数据类型的拷贝不是直接拷贝地址,而是重新开辟新的空间。

2、多库共存

jQuery使用$作为标示符,随着jQuery的流行,其他js库也会用到这个$作为标示符,这样做会引起冲突。

比如在以下代码中,我们封装了$函数作为元素选择器,当我们再使用$做遍历的时候,就会报错。

		$(function () {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            $.each();  //error
        })

因此我们需要一个解决方案,让jQuery和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。

jQuery的解决方案:
  • jQuery替代$,比如jQuery("div")
  • 使用jQuery.noConflict()方法,让jQuery释放对$的控制,用户自定义变量
$(function () {
            function $(ele) {
                return document.querySelector(ele);
            }
            console.log($("div"));
            // $.each();  //error
            // 1.$如果报错 则使用jQuery
            jQuery.each();
            // 2.用户自定义 jquery释放对$的控制权
            var my = jQuery.noConflict();
            console.log(my("span"));
        })
3、jQuery插件

jquery功能比较有限,想要更复杂的特效效果,可以借助于jquery插件完成。由于这些插件是依赖于jQuery完成的,所以必须要先引入jQuery文件,因此称为jQuery插件。

jQuery插件的常用网站

  • jQuery插件库:http://www.jq22.com/
  • jQuery之家:http://www.htmleaf.com/

jQuery插件使用步骤

  • 引入相关文件(jQuery文件和插件文件)
  • 复制相关html、css、js(调用插件)
(1)瀑布流插件
(2)图片懒加载

图片使用延迟加载可以提高网页下载速度,能够减轻服务器负载。当页面滑动到可视区后,再显示图片。

使用jquery插件帮助我们实现图片懒加载。

(3)全屏滚动插件(fullpage.js)
  • gitHub:https://github.com/alvarotrigo/fullPage.js
  • 中文翻译网站:http://www.dowebok.com/demo/2014/77/
(4)bootstrap js插件

bootstrap框架也是依赖于jQuery开发的,因此如果想要使用里面的js插件,也必须引入jQuery文件。

4、toDoList demo
1、文本框里面输入内容,按下回车,生成待办事项
2、点击待办事项复选框,可以把当前数据添加到已完成事项里面
3、点击已完成事项复选框,可以把当前数据添加到待办事项中
4**本页面内容刷新页面不会丢失**

官网:http://www.todolist.cn/

使用localStorage进行存储,无论是按下回车还是点击复选框,都是把本地存储的数据加载到页面中,这样保证刷新关闭页面也不会丢失数据。存储的数据格式:``

(1)本地存储的数据格式

var todolist = [{title: 'xxx', done: false}]

注意本地存储中只能存储字符串类型的数据格式:

  • 所以需要先将数据转换为字符串之后再存储到本地存储中 JSON.stringify()
  • 取出数据时,要先将本地存储中的数据转换为对象格式,再取值 JSON.parse()
		var todolist = [{
            title: '学习',
            done: false
        }, {
            title: '上课',
            done: true
        }];
        // 本地存储里面只能存储字符串类型的数据格式
        // localStorage.setItem("todo", todolist);
        // 1.先把数据转换为字符串格式 JSON.stringify()
        localStorage.setItem("todo", JSON.stringify(todolist));
        var data = localStorage.getItem("todo");
        console.log(typeof data);
        // 2.获取本地存储的数据 把字符串转换为JSON对象格式 JSON.parse()
        data = JSON.parse(data);
        console.log(data);
        console.log(data[0]["title"]);
(2)按下回车将新数据添加到本地存储中

之前的数据是存储在内存中,刷新页面会导致数据丢失;而该demo使用本地存储,这样刷新页面才不会丢失数据。

// 1. 按下回车 把数据存储到本地存储中
    $("#title").on("keydown", function (event) {
        // 回车键的ASCII码 13
        if (event.keyCode === 13) {
            // 先读取本地存储中原来的数据
            var local = getData();
            console.log(local);
            // 2.将新数据追加给local数组,更新到本地存储中
            local.push({ title: $(this).val(), done: false });
            saveData(local);
        }
    });

    // 读取本地存储的数据
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            // 将获取的字符串格式 转换为 对象格式
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    // 将数据保存到本地存储中
    function saveData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
(3)将本地存储的数据渲染加载到页面

注意每次渲染之前,需要把原来ol中的内容清空,然后再渲染加载最新的数据。在按下回车和页面刚刚加载好之后,都要进行调用。

// 渲染加载数据
    function load() {
        // 读取本地数据
        var data = getData();
        // console.log(data);
        // 遍历之前需要先清空ol里面的元素内容,否则原来的元素会渲染两次
        $("ol").empty();
        // 遍历数据
        $.each(data, function (i, n) {
            // console.log(n);
            $("ol").prepend("<li><input type='checkbox'> <p>" + n.title + "</p> <a href='javascript:;></a></li>")
        })
    }
(4)删除操作

不能删除li,而是删除本地存储对应的数据。先获取本地存储数据,删除对应的数据,保存给本地存储,重新渲染列表li。

给每个删除链接一个自定义索引,点击删除按钮时,删除掉对应的li。

// 4.删除操作
    $("ol").on("click", "a", function () {
        // 先获取本地存储
        var data = getData();
        // 修改数据
        var index = $(this).attr("id");  //找到需要删除的索引
        data.splice(index, 1);  //删除数组元素 splice(index, n)  索引 删除的元素数量
        // 保存到本地存储
        saveData(data);
        // 重新渲染页面
        load();
    })
(5)正在进行和已经完成选择

点击复选框修改相应数据的done属性(本地存储中),之后重新渲染数据列表。

1、点击之后,获取本地存储数据
2、修改对应数据属性done,并赋值给复选框的checked状态
3、保存数据到本地存储
4、重新渲染加载数据列表,load函数中新增一个条件,如果当前数据done为true,就把列表渲染加载到ul里面(已完成);否则放在ol中
// 5.正在进行和已经完成选项
    $("ol, ul").on("click", "input", function () {
        // 获取本地存储的数据
        var data = getData();
        // 修改数据
        var index = $(this).siblings("a").attr("id");
        data[index].done = $(this).prop("checked");
        // 保存到本地存储
        saveData(data);
        // 重新渲染页面
        load();
    })
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45375510/article/details/120707155

总结一下jquery的常用api-爱代码爱编程

jQuery基本语法:$(selector).action() $:相当于jQuery对相关 (selector):选择符(选择/查询)元素 action:对元素的操作 基本选择器: 标签选择器 $("div")阻止冒泡 event.prevenDefault() event.st

jquery常用api及其例子_iokay.cn的博客-爱代码爱编程

$(window).resize(); window窗口改变检测函数; var _width = document.documentElement.clientWidth; var _height = document.documentElement.clientHeight;  jq得到窗口大小 不是屏幕大小 hover

jquery的常用api汇总_xiaxiaoxian的博客-爱代码爱编程_jquery api

1.$.contains()方法 定义与用法:$.contains() 方法用于判断指定元素内是否包含另一个元素。即判断另一个DOM元素是否是指定DOM元素的后代。 语法: $.contains( container, contained ); container: Element类型 指定可能包含其他元素的祖辈容器元素 c

jquery常用api_`wangsh`的博客-爱代码爱编程_jquery常用api

说明 “【】”里面放的是返回值 核心 1.【$】$([selector,[context]]):这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素。 $("div > p"); 2.【

jquery常用api_weixin_34034261的博客-爱代码爱编程

本文列举一些常用的jQuery的api。 $('selector').on() <ul> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> <li id="4"&g

jquery 中常用的api_curry 3o的博客-爱代码爱编程_prevobject

1.val() val([value])用来读取或修改【表单元素】value属性的值. 参数: 无参,获取value值 参数 :value,设置value的值 参数:function(index,oldVal) 回调函数,

jquery的初步了解和常用api的使用_veranew的博客-爱代码爱编程

本篇笔记目标 能说出jQuery是什么能够说出jQuery的优点能说出JQuery对象和DOM对象的区别能够使用jQuery常用API,如jQuery选择器、筛选选择器、jQuery筛选方法理解并能够使用链式编程理解并能运

jquery选择器-爱代码爱编程

1. jQuery 基础选择器 原生 JS 获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。 $(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号 名称用法描述ID选择器$("#id")获取指定ID的元素全选选择器$("*")匹配所以元素类选择器$(".class

jQuery常用API-爱代码爱编程

jQuery的特点 优质的选择器和筛选器方便的隐士迭代强大的链式编程引入方法 必须下载导入jQuery包 也就是:jquery.js 或者 jquer.min.js jQuery的选择器 选择器——用来获取DOM元素的方法 匹配id属性的属性值匹配clss属性的属性值,也就是类名匹配标签名称匹配标签结构匹配属性属性值选择器匹配组合选择器匹配结构伪

jQuery常用API——包括:jQuery选择器、样式操作、效果、属性操作、内容文本值、元素操作、尺寸及位置操作等-爱代码爱编程

文章目录 jQuery选择器 1.jQuery基础选择器 2.jQuery层级选择器 3.jQuery隐式迭代 4.jQuery筛选选择器 5.jQuery筛选方法 6.jQuery里面的排他思想 7

45 jQuery中的常用API-爱代码爱编程

技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery基础选择器 原生JS获取元素的方式很多、很杂,而且兼容性情况不一致。因此,jQuery给我们做了封装,使获取元素统一标准。语法格式:$('选择器') // 里面选择器直接写CSS选择器即可,但是要加引用 2.jQue

02【jQuery】 常用API(上) jQuery 选择器, 样式操作,效果, 属性操作, 文本属性值,  元素操作, 尺寸、位置操作-爱代码爱编程

02【jQuery】 常用API 学习内容: jQuery 选择器, jQuery 样式操作, jQuery 效果, jQuery 属性操作, jQuery 文本属性值,  jQuery 元素操作, jQuery 尺寸、位置操作   1. jQuery 选择器 1.1 jQuery 基础选择器 原生 JS 获取元素方式很多,很杂,而且兼容性情况不

jQuery 常用API-爱代码爱编程

jQuery基础选择器 原生JS获取元素方式很多,很杂,而且兼容性情况不一样,因此jQuery给我们做了封装,使获取元素有统一的标准 $("选择器") // 里面选择器直接写CSS选择器即可,但是要加引号 名称用法描述ID选择器$("#id")获取指定ID的元素全选择器$("*")匹配所有元素类选择器$(".class")获取同一类class的元素

jQuery的基本使用-爱代码爱编程

jQuery的顶级对象$ 1.$是jQuery的别称,在代码中用jQuery代替$,但一般为了方便,通常直接使用$。 以下示例两段代码运行效果相同: $(function(){ alert('jQuery') }); jQuery(function(){ alert('jQuery') }); 2.$是jQuery的顶级对象,可以理