jQuery阶段

jQuery第一天

下拉菜单

需求：鼠标移入显示下拉菜单，鼠标移出隐藏菜单

方法：引入jQuery

show和hide

$('.nav>li').mouseover(function () {
    // jQuery在此处获取的是一个伪数组，这涉及到jQuery的特点：隐式迭代
            $(this).find('ul').show();
	//此时，让li下的子元素ul出现
        });

$('.nav>li').mouseout(function () {
            $(this).find('ul').hide();

        });

子集选择器：.nav>li
隐式迭代
this

slideUp和slideDown

$('.nav>li').mouseover(function () {
            $(this).find('ul').slideDown();

        });
        $('.nav>li').mouseout(function () {
            $(this).find('ul').slideUp();

        });

动画排队：快速在微博上来回切换，发现鼠标停止后动画还在切换，所以需要停止动画

// 在滑入和滑出的前面加上停止动画
$(this).find('ul').stop().slideDown();
$(this).find('ul').stop().slideUp();

按钮练习

需求：点击按钮，按钮的颜色改变，其他的按钮颜色不变

$('div ul li').on('click', function () {
            $(this).siblings().removeClass('a');
            $(this).addClass('a');
        });

排他思想
隐式迭代

淘宝精品

需求：鼠标进入显示图片，移出没有变化

$(function () {

            $('#left li').mouseover(function () {
                // 获取索引
                var index = $(this).index();
                $('#content div').eq(index).show().siblings().hide();
            });

入口函数，相当于原生JS的window.onload = function(){}
此处入口函数的作用是等待所有图片加载完之后再执行代码
索引的用法

tab栏

需求：鼠标移入选项，显示相应的内容

$('.tab_list li').mouseover(function () {
        var index = $(this).index();
        $(this).addClass('current').siblings().removeClass('current');

        $('.tab_con div').eq(index).show().siblings().hide();
    });

索引获取和使用

王者荣耀

需求：鼠标移入选项，显示大图片；移出选项，显示小图片

        $(function () {

            $('ul>li').mouseover(function () {

                $(this).stop().animate({ width: 224 }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();

                $(this).siblings().stop().animate({ width: 69 }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();

            });

        });

排他思想
案例中有动画效果：从窄到宽的变化过程，所以要加入animate();
停止动画排队，用到stop();

高亮背景

需求：鼠标移入图片，图片高亮，其他图片变暗

      $(function () {
        // 鼠标进入，当前元素的兄弟们透明度变成0.5
        $('.wrap li').mouseover(function () {

            $(this).siblings().stop().fadeTo(400, 0.5);

        });

        // 鼠标离开，当前元素的兄弟们透明度变成1
        $('.wrap li').mouseout(function () {

            $(this).siblings().stop().fadeTo(400, 1);

        });

      })

fadeTo(400,1) 第一个参数是设置的动画时间为400ms
停止动画排队

jQuery第二天

购物车案例

全选与全不选

方法

需求：点击复选框，全选时，所有的子项被选中，取消全选时，所有的子项都取消选中。

$(function () {
	$('.checkall').change(function () {
        // 判断是否被选中
        var flag = $(this).prop('checked');
        // 当前一个全选选项被选中，所有的全选选项也都被选中
        $('.checkall').prop('checked', flag);
        if (flag) {
            $('.j-checkbox').prop('checked', true);
        }
        else {
            $('.j-checkbox').prop('checked', false);
        }

    })
    })

change事件：点击后复选框的状态发生了改变
选中和未选中，是复选框的属性，所以用prop操作
本题的页面中有两个全选选项，所以在一个被选中时，所有的全选选项也要被选中

代码优化

检查代码，发现判断中的语句是一样的，而又定义了一个flag变量，而flag变量的值就是布尔值，所以可以优化代码

$(function () {

    $('.checkall').change(function () {
        // 判断是否被选中
        var flag = $(this).prop('checked');
        // 当前一个全选选项被选中，所有的全选选项也都被选中
        $('.checkall,.j-checkbox').prop('checked', flag);

    })

})

`判断是否全选`

需求：点击子选项，如果子选项都被选中，则全选选项被选中

// 被选中的复选框的数量与子复选框的数量相等时，全选复选框被选中
$('.j-checkbox').change(function () {

        var len1 = $('.j-checkbox').length;
    // 获取的选项是一个伪数组，它是有长度的

        var len2 = $('.j-checkbox:checked').length;
    // 此处也是一样，被选中的也是一个伪数组

        $('.checkall').prop('checked', len1 == len2);
    })

可以用循环遍历的方法，判断是否可以全选。此处的方法更加方便
CSS3伪类选择器: :checked
用.length来计算被选中的复选框的个数，此处，长度就是个数
代码简化

计算数量

点击+

需求：点击按钮+，数量增加，并计算小计和总价

    $('.increment').on('click', function () {

        // 获取文本框的内容
        var val = $(this).siblings('.itxt').val();

        val++;
        // 设置回文本框中
        $(this).siblings('.itxt').val(val);

        // 求和
        var danjia = $(this).parents('.p-num').siblings('.p-price').html();

        // 获取的是带有￥的字符串
        // 切割字符串
        // danjia = danjia.substring(1);
        // danjia = danjia.slice(1);
        danjia = danjia.substr(1);

        var xiaoji = danjia * val;

        // 转换成字符串,并且保留2位小数
        xiaoji = '￥' + xiaoji.toFixed(2);

        $(this).parents('.p-num').siblings('.p-sum').html(xiaoji);

        getSum();
    })
    // 计算件数和小计和，有很多地方用到计算和，所以将该函数封装

    function getSum() {
        var jianshu = 0;
        $('.itxt').each(function (i, ele) {

            jianshu += parseInt($(ele).val());
        });

        var sum = 0;
        $('.p-sum').each(function (i, elm) {
            var n = $(elm).html();
            n = n.substring(1);
            // 规则：+遇见字符串
            sum += parseFloat(n);
        });

        $('.amount-sum em').html(jianshu);
        $('.price-sum em').html(sum.toFixed(2));

    }

隐式迭代
点击事件的遍历与原生写法的区别
toFixed(2);表示保留两位小数
封装求和函数

点击-

需求：点击按钮-，数量增加，并计算小计和总价

    $('.decrement').on('click', function () {

        // 获取文本框的内容
        var val = $(this).siblings('.itxt').val();

        val--;
        if (val < 1) {
            val = 0;
        }
        // 设置回文本框中
        $(this).siblings('.itxt').val(val);

        // 求和
        var danjia = $(this).parents('.p-num').siblings('.p-price').html();

        // 获取的是带有￥的字符串
        // 切割字符串
        // danjia = danjia.substring(1);
        // danjia = danjia.slice(1);
        danjia = danjia.substr(1);

        var xiaoji = danjia * val;

        // 转换成字符串,并且保留2位小数
        xiaoji = '￥' + xiaoji.toFixed(2);

        $(this).parents('.p-num').siblings('.p-sum').html(xiaoji);

        getSum();
    })

手动输入数量

需求：当需要购买的数量较多的时候, 需要手动输入数量

    $('.itxt').change(function () {
        var n = $(this).val();
        var zhi = $(this).parents('.p-num').siblings('.p-price').html();

        zhi = zhi.substring(1);
        var p = n * zhi;
        $(this).parents('.p-num').siblings('.p-sum').html('￥' + p.toFixed(2));

        getSum();
    });

删除

    // 需求六: 删除其中的一条商品
    $('.p-action').click(function () {
        $(this).parents('.cart-item').remove();

        getSum();
    });

    // 删除选中的商品
    $('.remove-batch').click(function () {
        $('.j-checkbox:checked').parents('.cart-item').remove();
        getSum();
    });

    // 清空购物车
    $('.clear-all').click(function () {
        $('.cart-item').remove();

        getSum();
    });

删除选中的商品，用到了:checked伪类选择器

细节优化

需求：选中哪个商品，添加背景色，取消选中，没有背景色

    $('.checkall').change(function () {
        // 判断大按钮是否被选中
        var flag = $(this).prop('checked');
        $('.checkall,.j-checkbox').prop('checked', flag);
        if (flag) {
            $('.cart-item').addClass('check-cart-item');
        }
        else {
            $('.cart-item').removeClass('check-cart-item');
        }
    });
    $('.j-checkbox').change(function () {

        if ($(this).prop('checked')) {
            $(this).parents('.cart-item').addClass('check-cart-item');
        }
        else {
            $(this).parents('.cart-item').removeClass('check-cart-item');
        }

获取类名要加. 添加类名不加.

jQuery第三天

电梯导航

功能分析:

1.页面滚动到某一个位置,电梯导航出现,回到之前的位置时候电梯导航消失
2.点击电梯导航, 页面到达指定位置
3.页面滚动的时候, 电梯导航上的项也会改变

显示与消失

	fixedTool();
	function fixedTool () {
		if ( $(document).scrollTop() >= $('.recommend').offset().top ) {
			// 显示
			$('.fixedtool').fadeIn();
		} else {
			$('.fixedtool').fadeOut();
		}
	}

	// 代码
	// 1、滚动的时候有可能要显示电梯导航有可能不显示
	// scroll事件
	$(window).scroll(function () {
		// 显示电梯导航
		// 如果卷起距离到达多少，就显示，否则就不显示
		fixedTool();

		// 3、页面滚动的时候也能加样式
		// 首先要知道卷起的距离，接着我们要知道楼层盒子到文档顶部的距离，比较
		$('.floor>div').each(function (i, elm) {
			// 用卷起的距离和elm到顶部的距离比较
			if ( $(document).scrollTop() >= $(elm).offset().top ) {
				// 让对应的li加类名
				$('.fixedtool li').eq(i).addClass('current').siblings().removeClass('current');
			}

		});


	});

滚动的时候是页面在滚动,所以要给window加事件
判断文档卷起的距离与盒子顶部的距离大小,大于一定距离的时候, 让电梯导航显示
offset().top
在不同的浏览器测试：刷新页面之后, 电梯导航消失
- 因为代码是在滚动事件出来之后才执行的, 刷新之后没有, 所以需要在外面调用

到达指定位置

	// 2、点击电梯导航到达指定位置
	$('.fixedtool li').click(function () {
		// 1、要知道点击的li的索引值
		var index = $(this).index();
		// 2、用这个索引值找到对应的div，并且找到这个div近距离文档顶部的位置
		var top = $('.floor>div').eq(index).offset().top;
		// 3、让文档卷出去计算出来的距离就可以
		// $(document).scrollTop(top);
		// 动画：给元素加的
		$('html,body').animate({
			scrollTop : top
		});


	});

此方法主要用到了以下知识点：
- 1、如何使li和div一一对应？获取索引
- 2、index() 和 eq(index)
- 3、添加动画事件的用法

todolist

功能：输入框内输入目标，点击添加，渲染到页面中；如果已经添加过，那么打开页面时就会显示出来；勾选已经完成的任务，移动到已完成的列表里，永久展示

需要将内容存储到本地，并进行数据的修改

渲染

        // 需求一：把本地的数据渲染到页面上
        // 读取数据
        var str = localStorage.getItem('toDoList');
        arr = JSON.parse(str);
        // 判断读取的数据是否为空，如果为空，会报错，所以先定义一个空数组
        if (arr == null) {
            arr = [];
        }
        // 遍历arr，如果isOk是true，则渲染到ul中，否则渲染到ol中
        $(arr).each(function (i, elm) {
            // 判断isOk状态
            if (elm.isOk) {
                // jQuery如何创建DOM节点
                var li = $('<li></li>');
                // 自定义属性
                li.attr('isOk', elm.isOk);
                // -----------绑定id--
                li.attr('id', i);
                // -------------------
                // 填入内容
                li.html('<span>' + elm.name + '</span>');
                // 插入到节点中
                $('ul').append(li);
            }
            else {
                var li = $('<li></li>');
                li.attr('isOk', elm.isOk);
                // -----------绑定id--
                li.attr('id', i);
                // -------------------
                li.html('<input type="checkbox"><span>' + elm.name + '</span>');

                $('ol').append(li);
            }
        })

添加计划

        // 需求二：输入内容，添加到页面中
        $('.add').on('click', function () {

            // 判断输入是否为空
            if ($('.txt').val() == '') {
                alert('请输入计划');
            }

            // 把输入的内容渲染到界面中，同时存储到本地
            var plans = $('.txt').val();
            // console.log(plans);
            var li = $('<li></li>');
            // 新增的li
            // <li><input type="checkbox"><span>吃饭</span></li>
            li.attr('isOk', false);
            // -----------绑定id--------------
            li.attr('id', arr.length);
            // -------------------------------
            li.html('<input type="checkbox"><span>' + plans + '</span>');

            // 添加到页面中
            $('ol').append(li);

            // 清空数据
            $('.txt').val('');

            // 保存到本地
            var one = {
                name: plans,
                isOk: false
            };
            arr.push(one);

            // console.log(str);
            var arr1 = JSON.stringify(arr);
            localStorage.setItem('toDoList', arr1);

        })

完成计划

        // 需求三：点击复选框，选择完成的任务，移动到已完成列表
        // 事件委托
        $('ol').on('click', 'input', function () {

            var li = $(this).parent();
            // 移动li
            $('ul').append(li);
            // 隐藏复选框
            $(this).hide();

            // 保存数据
            // 修改属性

            var j = li.attr('id');

            // 这样写会报错：因为这是原生JS写法，要转换成jQuery写法
            // arr[j].attr('isOk', true);

            $(arr[j]).attr('isOk', true);

            // // 保存到本地
            arr2 = JSON.stringify(arr);
            localStorage.setItem('toDoList', arr2);

        })

注意jQuery与原生JS写法的区别

shane_young

发布了6 篇原创文章 · 获赞 2 · 访问量 78

私信关注

jQuery案例小结