前端学习第71天JQ高级

Posted 2021-01-30 ye-hui

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习第71天JQ高级相关的知识，希望对你有一定的参考价值。

一,jq选择器

- css3语法选择器

```js
$(‘css3选择器位‘)
```

- 索引匹配

```js
$(‘div:eq(0)‘)
$(‘div‘).eq(0)
```

- 内容

```js
$(‘div:contains(标签文本内容)‘)
// 注: 采用模糊匹配
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq选择器</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<ul class="ul1">
    <li class="li l1">ul1 l1</li>
    <li class="li l2">ul1 l2</li>
    <li class="li l3">ul1 l2</li>
</ul>
<ul class="ul2">
    <li class="li l1">ul2 l1</li>
    <li class="li l2">ul2 l2</li>
    <li class="li l3">ul2 l3</li>
</ul>
</body>
<script>
    // console.log($);

    // 1.采用css3语法
    // $(‘css3选择器‘)
    console.log($(‘.ul1 .l2‘).text());

    console.log($(‘.l1 ~ .l2‘).text());

    console.log($(‘.l1, .l2, .l3‘).text());

    // 2.css3之前jq已有的自身选择器
    // 偶数位
    // 注: 不加结构时, 将所有li作为考虑整体从上之下进行排序, 查找索引为偶数位的(0,2...)
    console.log($(‘.ul1 .li:even‘));
    // 奇数位
    console.log($(‘.ul2 .li:odd‘));
    // 匹配索引 *****
    console.log($("ul").eq(0));
    // $("ul")页面中的所有ul, 取第n个ul
    // --  $("ul")[n] => 得到第n索引位js对象, 本非jq对象
    // --  $("ul").eq(n)  => 得到第n索引位jq对象
    // --  $("ul:eq(n))" => 得到第n索引位jq对象

    // 3.通过内容进行匹配
    // 内容只有包含l1即可, ul1 l1 | ul1 l2 | ul1 l3 | ul2 l1
    console.log($(‘li:contains(l1)‘).text())

</script>
</html>

二, 属性操作

1. 文本

```js
// 赋值: 有参数
$(‘.box‘).html(‘<i>beat box</i>‘);
// 取值: 无参数
console.log($(‘.box‘).text());
// 表单内容
// $(‘.inp‘).val("input 内容 为 value");
console.log($(‘.inp‘).val());
```

2.属性

```js
// 取
console.log($(‘img‘).attr(‘alt‘));
// 设
$(‘img‘).attr(‘src‘, ‘https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg‘)
// 增
$(‘img‘).attr(‘abc‘, function () {
    return "ABC";
})
```

3.类名

```js
$(this).addClass(‘active‘); // 添加
$(this).removeClass(‘box‘);  // 删除
// 如果有active 删除, 反之添加
$(this).toggleClass(‘active‘);  // 切换
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        .active {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <input class="inp" type="text" value="12345">

    <img src="" alt="提示">
    <!--表单元素的布尔类型属性, 不写为false, 书写后,不管值为什么, 均为属性名-->
    <!--eg: checked="checked" | checked="" | checked-->
    <input class="ck" type="checkbox" checked="false">
</body>
<script>
    // 文本内容操作
    // html() | text() | val()

    // 赋值: 有参数
    $(‘.box‘).html(‘<i>beat box</i>‘);
    // 取值: 无参数
    console.log($(‘.box‘).text());
    // 表单内容
    // $(‘.inp‘).val("input 内容 为 value");
    console.log($(‘.inp‘).val());
</script>
<script>
    // 属性操作
    console.log($(‘img‘).attr(‘alt‘));
    $(‘img‘).attr(‘src‘, ‘https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1611571505,2177664062&fm=26&gp=0.jpg‘)
    $(‘img‘).attr(‘abc‘, function () {
        return "ABC";
    })

    // $(‘.ck‘).prop("checked", "true");  // 了解
    // $(‘.ck‘).attr("checked", "true");
</script>
<script>
    $(‘.box‘).click(function () {
        // $(this).addClass(‘active‘); // 添加
        // $(this).removeClass(‘box‘);  // 删除

        // 如果有active 删除, 反之添加
        $(this).toggleClass(‘active‘);  // 切换
    })
</script>
</html>

三.css样式设置

```js
// 取值
console.log($(‘.box‘).css(‘font-size‘));

// 设值
$(‘.box‘).css(‘color‘, ‘deeppink‘)  // 单一属性设值
    .css({  // 设置多个属性值
        // 1.就是给css()函数赋值一个js对象
        // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
        // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
        width: ‘300px‘,
        ‘height‘: 300,
        ‘background-color‘: ‘cyan‘,
        borderRadius: ‘30px‘
    })
    .css(‘width‘, function(index, oldWidth) {  // 逻辑单一属性设值
        if (index == 0) {
            // 延迟1s
            // var b_time = new Date().getTime();
            // while (new Date().getTime() - b_time < 1000){}
            return 1.5 * parseInt(oldWidth);
        }
        return oldWidth;
    })
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>样式操作</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style>
        .box {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
    <div class="box">67890</div>
</body>
<script>
    // 取值
    console.log($(‘.box‘).css(‘font-size‘));

    // 设值
    $(‘.box‘).css(‘color‘, ‘deeppink‘)
        .css({
            // 1.就是给css()函数赋值一个js对象
            // 2.key为字符串类型,可以省略"",前提要使用js语法,小驼峰命名法
            // 2.属性值为数值+单位方式,可以省略单位, 尽量全部用字符串数据赋值
            width: ‘300px‘,
            ‘height‘: 300,
            ‘background-color‘: ‘cyan‘,
            borderRadius: ‘30px‘
        })
        .css(‘width‘, function(index, oldWidth) {
            if (index == 0) {
                // 延迟1s
                // var b_time = new Date().getTime();
                // while (new Date().getTime() - b_time < 1000){}
                return 1.5 * parseInt(oldWidth);
            }
            return oldWidth;
        })

四.JQ事件

- 绑定方式

```js
// 第一种 on
// 四个参数: 事件名, 委派的子级, {key-value传入的数据}, 事件回调函数
$(‘.box‘).on(‘click‘, ‘span‘, {name: ‘hehe‘}, function(ev){})

// 第二种
// 两个参数: {key-value传入的数据}, 事件回调函数
$(‘.box‘).click({name: ‘hehe‘}, function(ev){})
```

- 事件对象

```js
// 为jq事件对象, 兼容js事件对象
// 坐标: ev.clientX | ev.clientY
// 按键: ev.keyCode
// 数据: ev.data.key名  =>  eg:ev.data.name
```

- 冒泡与默认动作

```js
// 冒泡: ev.stopPropagation();
// 默认动作: ev.preventDefault();
```

- 委派

```js
$(‘.box‘).on(‘click‘, ‘span‘, {name: ‘hehe‘}, function(ev){})
// 注: 通过父级box来绑定点击事件,其实将事件委派给其子级span标签
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq事件</title>
    <style>
        .box, .ele, .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        .sup {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="box">box</div>

    <a href="https://www.baidu.com">别动</a>

    <div class="ele">ele</div>

    <div class="sup">
        <div class="sub"></div>
        <span>123</span>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    /*
    // 1.事件的绑定语法
    $(‘.box‘).on(‘click‘, function () {
        console.log(‘你丫点我了!!!‘)
    });
    $(‘.box‘).click(function () {
        console.log(‘你丫又点我了!!!‘)
    });
    
    // 2.事件对象
    $(document).click(function (ev) {
        console.log("父级点击了");
        // jq事件对象, 兼容js事件对象
        console.log(ev);
        // 鼠标点
        console.log(ev.clientX, ev.clientY);
    });
    $(document).keydown(function (ev) {
        // jq事件对象, 兼容js事件对象
        console.log(ev);
        // 鼠标点
        console.log(ev.keyCode);
    });

    // 3.冒泡与默认动作
    $(‘a‘).click(function (ev) {
        console.log("默认动作取消了");
        // 取消默认动作1
        ev.preventDefault();
        // 取消默认动作2
        // return false;
    })
    $(‘.ele‘).click(function (ev) {
        // ev.cancelBubble = true;  // 未兼容
        // 阻止冒泡
        ev.stopPropagation();
        console.log("子级点击了");
    })
    */
</script>
<script>
    var name = "张三";

    /*
    $(‘.sub‘).click();
    $(‘.sub‘).on(‘click‘, {name: name, age: 8}, function (ev) {
        ev.stopPropagation();
        console.log(ev);
        console.log(">>>", ev.data.name)
    });
    */

    // 将sup的点击事件委派给自己的span子级
    $(‘.sup‘).on(‘click‘, ‘span‘, {}, function (ev) {
        // ev.stopPropagation();
        console.log("==================");
    });
    $(‘.sup‘).on(‘click‘, {}, function (ev) {
        // ev.stopPropagation();
        console.log("++++++++++++++++");
    })

五.JQ动画

- 系统预定义

```js
// time_num: 动画持续的时间
// finish_fn: 动画结束后的回调函数

// 1. hide(time_num, finish_fn) | show(time_num, finish_fn) | toggle(time_num, finish_fn)
// 2. slideUp() | slideDown() | slideToggle()  参数同上
// 3.fadeOut() | fadeIn() | fadeTo() | fadeToggle()    参数同上
```

- 自定义动画

```js
// 参数: 做动画的样式们 {}, 动画持续时间, 运动曲线, 动画结束后的回调函数
animate({
    width: 300,
    height: 500
}, 300, ‘linear‘, function() {
    // 动画结束后回调
})
// 动画本体采用的是css动画
```

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq动画</title>
    <style>
        .ele {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<button class="b1">消失</button>
<button class="b2">显示</button>
<button class="b3">切换</button>
<div class="ele e1"></div>
<hr>
<button class="b4">消失</button>
<button class="b5">显示</button>
<button class="b6">切换</button>
<div class="ele e2"></div>
<hr>
<button class="b7">消失</button>
<button class="b8">显示</button>
<button class="b9">切换</button>
<div class="ele e3"></div>
<div class="ele e4"></div>
<div class="ele e5"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(‘.b1‘).click(function () {
        $(‘.e1‘).hide(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    });
    $(‘.b2‘).click(function () {
        $(‘.e1‘).show(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    })
    $(‘.b3‘).click(function () {
        $(‘.e1‘).toggle(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    })
</script>
<script>
    $(‘.b4‘).click(function () {
        $(‘.e2‘).slideUp(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    });
    $(‘.b5‘).click(function () {
        $(‘.e2‘).slideDown(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    })
    $(‘.b6‘).click(function () {
        $(‘.e2‘).slideToggle(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    })
</script>

<script>
    $(‘.b7‘).click(function () {
        $(‘.e3, .e4, .e5‘).fadeOut(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    });
    $(‘.b8‘).click(function () {
        $(‘.e2 ~ .ele‘).fadeIn(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    })
    $(‘.b9‘).click(function () {
        $(‘.e3, .e4, .e5‘).fadeToggle(500, function () {
            console.log("动画结束了, 你可以再干一些事")
        });
    })

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>自定义动画</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <button class="btn">消失</button>
    <button class="btn">显示</button>
    <div class="box"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $(‘.btn‘).eq(0).on(‘click‘, function () {
        $(‘.box‘).animate({
            width: 0
        }, 1000, ‘linear‘, function () {
            console.log("动画结束了!!!")
        })
    });
    $(‘.btn‘).eq(1).on(‘click‘, function () {
        $(‘.box‘).animate({
            width: 300
        }, ‘slow‘, ‘swing‘, function () {
            console.log("动画结束了!!!")
        })
    })

</script>
</html>

六 JQ轮播图和JQ动画案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style >
        * {
            /*不允许选择文本, 网页文本不能负责*/
            user-select: none;
        }
        body, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .scroll {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            background-color: orange;
            position: relative;
            cursor: pointer;
        }
        .scroll_view {
            width: 100%;
            height: 100%;
            position: relative;
        }
        .scroll_view li {
            background: red;
            width: 100%;
            height: 100%;
            font: normal 100px/460px ‘STSong‘;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
        }
        .scroll_view li.active {
            opacity: 1;
            transition: .5s;
        }
        .left {
            position: absolute;
            top: 170px;
            left: 0;
            background-color: #eee;
            font-size: 100px;
        }
        .left:hover, .right:hover {
            cursor: pointer;
            background-color: #333;
        }
        .right {
            position: absolute;
            top: 170px;
            right: 0;
            background-color: #eee;
            font-size: 100px;
        }

        .scroll_tag {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .scroll_tag li {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #333;
            border: 3px solid #ddd;
            float: left;
            margin: 0 10px;
        }
        .scroll_tag li.active {
            background-color: #ccc;
            border: 3px solid #333;
        }
    </style>
</head>
<body>
<div class="scroll">
    <ul class="scroll_view">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul class="scroll_toggle">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>
    <ul class="scroll_tag">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
// 页面文档树加载完毕回调
$(function () {
    var page_index = 0;
    var length = $(‘.scroll_view li‘).length;
    var toggle_time = 1000;
    var timer = 0;

    // 无限轮播
    timer = setInterval(toggleRole, toggle_time, 1);

    // 悬浮停止,移走轮播
    $(‘.scroll‘).mouseenter(function () {  // 悬浮停止
        clearInterval(timer);
    }).mouseleave(function () {  // 移走轮播
        timer = setInterval(toggleRole, toggle_time, 1);
    });

    // 右轮播
    $(‘.right‘).click(function () {
        toggleRole(1);
    });
    // 左轮播
    $(‘.left‘).click(function () {
        toggleRole(-1);
    });
    // 切换依据
    function toggleRole(role_num) {
        page_index += role_num;
        // role_num:1向右切换, role_num:-1向左切换
        if (role_num > 0) {
            if (page_index >= length) { // 右切换临界点
                page_index = 0;
            }
        } else {
            if (page_index < 0) { // 左切换临界点
                page_index = length - 1;
            }
        }
        toggleState(page_index);
    }
    // 切换状态
    function toggleState(index) {
        $(‘.scroll_view li‘).removeClass(‘active‘).eq(index).addClass(‘active‘);
        $(‘.scroll_tag li‘).removeClass(‘active‘).eq(index).addClass(‘active‘);
    }
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jq动画案例</title>
    <style>
        .wrap {
            width: 600px;
            height: 200px;
            border: 5px solid black;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
            /*overflow: auto;*/
        }
        .btn {
            text-align: center;
            margin-top: 50px;
        }
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .scroll {
            width: 2000px;
            position: absolute;
        }
        .scroll li {
            width: 200px;
            height: 200px;
            font: 500 50px/200px ‘STSong‘;
            text-align: center;
            background-color: yellow;
            float: left;
        }
        .scroll li:nth-child(2n) {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="btn">
        <button class="btn1">&lt;</button>
        <button class="btn2">&gt;</button>
    </div>
    <div class="wrap">
        <ul class="scroll">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--
<script>
    // 滚动条滚动(overflow)产生的距离
    // console.log($(‘.wrap‘).scrollLeft());

    // 和绝对定位匹配使用
    // console.log($(‘.scroll‘).position().left);

    // 和固定定位匹配使用
    // console.log($(‘.scroll‘).offset());

    // 滚动scroll的总长度
    var scroll_total = $(‘.scroll‘).width();
    // 显示的总宽度,也就是一次性最大滚动的长度
    var wrap_width = $(‘.wrap‘).width();
    $(‘.btn1‘).click(function () {
        // 往左已滚动的长度, 是负值
        var scroll_left = $(‘.scroll‘).position().left;
        // 剩余的可滚动的长度: 总长抛出显示的一个平面长度,再减去已经滚动到左侧的长度
        // 注scroll_left是负值,使用用+运算
        var less_long = scroll_total - wrap_width + scroll_left;
        // 通过剩余的可滚动长度计算出下一次能滚动的长度
        var next_scroll = less_long > wrap_width ? wrap_width : less_long;
        // 动画: left为从当前已滚动的长度(scroll_left)再滚动(减去)下一次可滚动的长度
        $(‘.scroll‘).animate({
            left: scroll_left - next_scroll
        })
    });

    $(‘.btn2‘).click(function () {
        // 往左已滚动的长度, 是负值
        var scroll_left = $(‘.scroll‘).position().left;
        // 往右剩余的可滚动的长度
        var less_long = -scroll_left;
        // 通过剩余的可滚动长度计算出下一次能滚动的长度
        var next_scroll = less_long > wrap_width ? wrap_width : less_long;
        $(‘.scroll‘).animate({
            left: scroll_left + next_scroll
        })
    })
</script>
-->

<script>
    // 不能被点击
    var disable_click = false;

    $(‘.btn1‘).click(function () {
        if (!disable_click) { // 能被点击时
            disable_click = true; // 动画过程中, 应该不能再被点击
            $(‘.wrap‘).animate({
                scrollLeft: $(‘.wrap‘).scrollLeft() + 600
            }, 300, function () {
                disable_click = false;  // 动画结束后,可以重新被点击
            })
        }
    });
    $(‘.btn2‘).click(function () {
        if (!disable_click) {
            disable_click = true;
            $(‘.wrap‘).animate({
                scrollLeft: $(‘.wrap‘).scrollLeft() - 600
            }, 300, function () {
                disable_click = false;
            })
        }
    })
</script>

以上是关于前端学习第71天JQ高级的主要内容，如果未能解决你的问题，请参考以下文章

第71题JAVA高级技术-多线程5（线程插队）

[css] 第71天你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？

前端面试每日 3+1 —— 第715天

第33天pytho学习装饰器：高级函数部分演示

jQ选择器学习片段（JavaScript 部分对应）

前端技能树，面试复习第 54 天—— 手写代码：情景题