JQuery的第三天

jQuery节点操作

创建节点
语法：$(‘要创建的元素’)

列子：
$("<span>这是一个span元素</span>");

添加节点
// append appendTo 都是添加到元素内部的最后面
// prepend prependTo 都是添加到元素内部的最前面
// before 添加到元素前面，做兄弟元素
// after 添加到元素后面，做兄弟元素

清空节点empty与删除节点remove
语法：$(元素名).empty()
empty：清空指定节点的所有元素，自身保留(清理门户)

$('div').empty();//清空div的所有内容

语法：$(元素名).remove()
remove：相比于empty，自身也删除（自杀）

$('div').remove();

克隆节点clone
语法：$(元素名).clone()
clone：复制匹配的元素

$(selector).clone();
// 复制$(selector)所匹配到的元素（深度复制）
// cloneNode(true)
// 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。

jQuery特殊属性操作

val方法
语法：val()
val方法用于设置和获取表单元素的值，例如input、textarea的值
注：val()方法的使用是有元素限制的，要求元素有默认的value属性
常见的有value属性的元素有：input、select、textarea
特点：如果有参数就是赋值，没有参数就是取值

//设置值
$("#name").val('张三');
//获取值
$("#name").val();

html方法与text方法
语法：html()
html方法相当于innerHTML

语法：text()
text方法相当于innerText

作用：为标签赋值，值是标签之间的值，只能用于双标签

//设置内容
$('div').html('<span>这是一段内容</span>');
//获取内容
$('div').html()

//设置内容
$('div').text('<span>这是一段内容</span>');
//获取内容
$('div').text()

区别：html方法会识别html标签，text方法会将内容直接当成字符串，并不会识别html标签。

清空标签的内容
empty() 和 html() 方法都可以清空内容,但推荐使用empty方法清空元素里的内容

$('div').empty();//清空div的所有内容（推荐使用，会清除子元素上绑定的事件）
$('div').html("");//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

width方法与height方法
设置或者获取高度(宽度)

//带参数表示设置高度
$(“img”).height(200);
//不带参数获取高度
$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();

$(function () {
    let $div = $('.box')
    // width:仅仅获取样式中的width值
    console.log("样式中的width宽度：" + $div.width()) // 200
    console.log("样式中的width+border宽度：" + $div.innerWidth()) // 200 + 10
    console.log("样式中的width+border+padding宽度：" + $div.outerWidth()) // 200 + 10 + 10
    console.log("样式中的width+border+padding+margin宽度：" + $div.outerWidth(true)) // 200 + 10 +10 + 10

})

scrollTop与scrollLeft
设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

offset方法与position方法
offset方法获取元素距离document的位置。
position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

jQuery事件机制

on注册事件(重点)
on注册事件的语法：

on('参数1'，'参数2'，'参数3'，'参数4')
$(selector).on(events[,selector][,data],handler);
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数

//on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

//on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click","span", function() {});

事件解绑off
off方式: 谁绑定了事件，就为谁解绑

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件(重点)
// click()可以触发指定元素的click事件，但是，它只能触发元素的click事件,如果其它元素是不同的事件类型，那么就需要调用指定的类型的方法

$(selector).click(); //触发 click事件
$(selector).trigger("click");

案例

案例1：城市选择

/* 
            要求：
                1、获取元素（#src-city、#tar-city）
                2、为按钮绑定事件
                    2.1、btn1：点击btn1，将全部选项移到#tar-city框中
                    2.2、btn2：点击btn2，将全部选项移到#src-city框中
                    2.3、btn3：点击btn3，将选中项移到#tar-city框中，用到option:selected
                    2.4、btn4：点击btn4，将选中项移到#src-city框中，用到option:selected
        */

js代码如下：

$(function () {
            let $srcCity = $('#src-city');
            let $tarCity = $('#tar-city');
            // console.log($srcCity, $tarCity);

            // 点击btn1，将全部选项移到#tar-city中
            $('#btn1').click(function () {
                // console.log('aa');
                $tarCity.append($srcCity.find('option'));
            })

            // 点击btn2，将全部选项移到#src-city中
            $('#btn2').click(function () {
                // console.log('aa');
                $srcCity.append($tarCity.find('option'));
            })

            // 点击btn3，将选中项移到#tar-city中
            // :selected  获取select列表中的选中元素
            $('#btn3').click(function () {
                // console.log('aa');
                $tarCity.append($srcCity.find('option:selected'));
            })

            // 点击btn4，将选中项移到#src-city中
            $('#btn4').click(function () {
                // console.log('aa');
                $srcCity.append($tarCity.find('option:selected'));
            })

        });

案例2：固定导航位置

/* 
            // 思路：
            //  1. 获取元素（navBar、topPart、mainPart）
            //  2. 给window注册滚动事件 scroll
            //  3. 页面滚动的时候，获取页面的垂直方向的滚动距离 scrollTop
            //  4. 将获取的滚动距离scrollTop 和 topPart的高度做比较
            //  4.1 scrollTop >= topPart的高度 ==> navBar固定定位 
            // 问题：navBar固定定位后不占位置，底下的mainPart会跑到上面去。
            // 解决：mainPart添加外边距样式：marginTop = 10 + navBar的高度
            //   4.2 否则 ==> 让navBar取消固定定位 占位置，
            //    mainPart设置marginTop = 10
        */

js代码如下：

$(function () {
            // 1、获取元素（navBar、topPart、mainPart）   
            let $topPart = $('#topPart');
            let $navBar = $('#navBar');
            let $mainPart = $('#mainPart');

            // 2、给window注册滚动事件 scroll
            $(window).scroll(function () {
                // 3. 页面滚动的时候，获取页面的垂直方向的滚动距离 scrollTop
                let offsetTop = $('html').scrollTop();
                // console.log(offsetTop);
                // 4. 将获取的滚动距离scrollTop 和 topPart的高度做比较
                if (offsetTop >= $topPart.height()) {
                    // console.log('aa');
                    // 为$navBar添加固定定位样式
                    $navBar.addClass('fixed');
                    // 为$mainPart添加上外边距： $navBar的高度 + 10px
                    $mainPart.css({
                        marginTop: $navBar.height() + 10
                    })
                } else {
                    // 去除固定定位样式和上外边距的$navBar的高度
                    $navBar.removeClass('fixed');
                    $mainPart.css({
                        marginTop: 10
                    })
                }
            })

        });

案例3：固定导航位置

/* 
            要求：
            	回到顶部
        */

js代码如下：

$(function () {
           let $actGotop = $('.actGotop');

      // 为window添加滚动事件
      $(window).scroll(function () {
        // console.log($('html').scrollTop(), $('html').scrollLeft());
        // 获取偏移高度
        let offsetTop = $('html').scrollTop();
        // console.log(offsetTop);
        // 判断偏移高度是否大于1000，大于则显示小火箭，否则就隐藏
        if (offsetTop > 1000) {
          // $actGotop.css({ display: 'block' });
          $actGotop.fadeIn('actGotop')
        } else {
          // $actGotop.css({ display: 'none' });
          $actGotop.fadeOut('actGotop')
        }
      })

      $actGotop.click(function () {
        // console.log('aaa');
        // animate:是元素动画，只能对dom元素添加动画
        // $('html,body'):目的是为了兼容
        // $('html').animate({
        $('html,body').animate({
          scrollTop: 0
        }, 300)
      })

        });

案例4：弹幕效果

/* 
            // 思路：
        //  1. 找对象（text、btn）
        //  2. 给btn注册click
        //  3. 获取text的内容
        //  4. 创建span元素，设置span的内容为 text的内容 ==> 内存中，页面中看不到
        //  5. 把span添加到boxDom中
        //  6. 随机span的文字颜色
        //  7. 随机span的top取值 范围 [0, 可视区的高度的一半]
        //  8. 设置span的left为可视区的宽度
        */

js代码如下：

$(function () {
        let $txt = $('#text');
        let $btn = $('#btn');

        $btn.click(function () {
            let $value = $txt.val();
            let $span = $(`<span>${$value}</span>`);
            $span.css({
                left: $(window).width(),
                top: Math.random() * $(window).height() / 2,
                color: `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`
            })

            // 将创建好的span元素插入到#boxDom中
            $('#boxDom').prepend($span);

            $span.animate({
                left: -$span.width()
            }, 3000, 'linear', function () {
                $span.remove();
            })


        })

        });

案例5：京东轮播图

/* 
        要求:
                1、获取元素，绑定事件
                1.1、鼠标移入，显示箭头
                1.2、鼠标移出，隐藏箭头

                2、为箭头按钮绑定事件，动画效果：fadeIn() 淡入、fadeOut() 淡出
                2.1、点击左箭头，显示上一张图片
                2.2、点击右箭头，显示下一张图片

                3、实现自动轮播效果
                3.1、设置定时器，每2秒执行一次向右点击事件
                3.2、鼠标移出，清除定时器
                3.3、鼠标移入，再次添加定时器

        */

js代码如下：

$(function () {
            // 1、获取元素，绑定事件
            let $slider = $('.slider');
            let $arrow = $('.arrow');
            let $lis = $('li');
            let $arrow_left = $('.arrow-left');
            let $arrow_right = $('.arrow-right');

            // 1.1、鼠标移入，显示箭头
            $slider.mouseenter(function () {
                $arrow.show();
            });

            // 1.2、鼠标移出，隐藏箭头
            $slider.mouseleave(function () {
                $arrow.hide();
            })

            // 2、为箭头按钮绑定事件，动画效果：fadeIn()、fadeOut()
            let index = 0;    // 获取索引，默认为0

            // 2.2、点击右箭头，显示下一张图片
            $arrow_right.click(function () {
                index++;
                if (index > $lis.length - 1) {
                    index = 0;
                }
                $lis.eq(index).fadeIn().siblings().fadeOut();
            })

            // 2.1、点击左箭头，显示上一张图片
            $arrow_left.click(function () {
                index--;
                if (index < 0) {
                    index = $lis.length - 1;
                }
                $lis.eq(index).fadeIn().siblings().fadeOut();
            })

            // 3、实现自动轮播效果
            // 3.1、设置定时器，每2秒执行一次向右点击事件
            let timeId = setInterval(function () {
                $arrow_right.click();
            }, 2000)

            // 3.2、鼠标移出，清除定时器
            $slider.on('mouseenter', function () {
                clearInterval(timeId);
            })

            // 3.3、鼠标移入，再次添加定时器
            $slider.on('mouseleave', function () {
                timeId = setInterval(function () {
                    $arrow_right.click();
                }, 2000)
            })

        })

案例6：音乐导航

/* 
         要求1：
                    1、获取元素
                    2、为li元素绑定事件
                    2.1、鼠标移入：背景变黄（span标签上移到li标签上）
                    2.2、鼠标移出：背景恢复（span标签移出li标签）
                    3、鼠标移到对应的li上，播放相应的音乐
                    3.1 获取当前li元素的索引
                    3.2 让对应索引位置的音乐播放
		 要求2：
                    1、添加键盘按键事件
                    2、通过按键盘的某一按键来对应着具体的导航项，通过事件源事件的keyCode可以获取当前按键的键码
                    3、按键1-7所对应的键码为49-55，而导航项的所有为0-6，所有可以通过 键码 - 49 来获取对应的索引
                    （按键操作的本质：就是鼠标上移到某个li元素（导航项）的操作）
        */

js代码如下：

$(function () {
            // 1、获取元素
            let $lis = $('.nav li');
            let $span = $('.nav li span');
            let $audios = $('.mp3 audio');

            // 2、为li元素绑定事件
            // 2.1、鼠标移入：背景变黄（span标签上移到li标签上）
            $lis.mouseenter(function () {
                // console.log('sss');
                $(this).find('span').stop().animate({
                    'top': 0
                })

                // 3、鼠标移到对应的li上，播放相应的音乐
                // 3.1 获取当前li元素的索引
                let index = $(this).index();
                // 3.2 让对应索引位置的音乐播放
                // $audios.eq(index).play();    //报错： jq中没有封装play()这个函数

                // jq并没有封装原生的所的功能，例如多媒体，意味着音乐播放需要使用原生方式来调用
                // 播放音乐：play(),play只有本次播放结束之后，才会播放下一首
                // load():重新加载，会中止当前的播放
                $audios[index].load();
                $audios[index].play();
            })

            // 2.2、鼠标移出：背景恢复（span标签移出li标签）,即让对应的黄色区域隐藏，它是位移动画，所以使用animate
            $lis.mouseleave(function () {
                // console.log('sss');
                $(this).find('span').stop().animate({
                    'top': 60
                })
            })

            /* 
                要求2：
                    1、添加键盘按键事件
                    2、通过按键盘的某一按键来对应着具体的导航项，通过事件源事件的keyCode可以获取当前按键的键码
                    3、按键1-7所对应的键码为49-55，而导航项的所有为0-6，所有可以通过 键码 - 49 来获取对应的索引
                    （按键操作的本质：就是鼠标上移到某个li元素（导航项）的操作）
             */
            //  定义一个变量，通过判断，让按键按下事件在按下一次时只执行一次
            let flag = true;
            // 键盘按下事件
            $(document).on('keydown', function (e) {
                if (flag == true) {
                    flag = false;
                    // 通过 键码 - 49 来获取对应的索引
                    let index = e.keyCode - 49;
                    // console.log(index);
                    // 让对应的li（导航项）执行鼠标移入事件
                    $lis.eq(index).mouseenter();
                }

            })

            // 键盘抬起事件
            $(document).on('keyup', function (e) {
                flag = true;
                let index = e.keyCode - 49;
                // console.log(index);
                //  让对应的li（导航项）执行鼠标移出事件
                $lis.eq(index).mouseleave();
            })

        })