jq的使用(学习&&总结二)

最新推荐文章于 2024-08-03 23:54:51 发布

轻风拂平平

最新推荐文章于 2024-08-03 23:54:51 发布

阅读量846

点赞数 20

文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/q2728137172/article/details/140616183

版权

新的一天开始了，快起来学习！！！天不生我牛马，代码万古如长夜

jq的特性--隐式迭代

遍历内部dom元素的过程叫做隐式迭代,简单来说就是给匹配到的所有元素进行循环遍历，执行相应的方法，不需要我们再进行循环，这就是jq的隐式迭代，简化我们的操作，方便我们进行调用。

例：插入5个按钮,通过jq以伪数组的形式进行接收,这是我们分别对每个按钮执行点击事件,都会执行相应编辑的方法。

链式编程

jq在书写代码时,通过 . 的方式，可以把多行代码链接在一起书写，来简化我们代码的书写量;

这个图片代码，意思是通过 . 来对li以及li的兄弟节点执行相应的方法

样式操作

jq可以使用css方法来修改简单的元素样式.

操作css方法

参数，只写属性名，是 获取和返回属性值，属性必须加引号

$('p').css('color')

参数要是属性名和属性值的情况,是用来设置以及修改样式。

参数可以是对象的形式，方便我们设置多组样式.属性名和属性值用冒号隔开.

设置类样式方法

作用相当于js中classList,操作类样式,在这里执行的操作不同加 .

注:jq里类操作不会影响其他类名

添加类

$(this).addClass('box')

删除类

 $(this).removeClass('box')

切换类

 $('.box1').toggleClass('box')

例题1

新的知识进入大脑，趁没有被僵尸吃掉之前，我们赶紧来做个小例题,吸收一下知识。

脑子.................

新手关卡1：通过点击上方tab栏按钮，来改变上方的样式，并且切换我们相应的下方文字.

基础css,html配置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
    <script src="./jq.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>

</body>

</html>

1.首先来获取li添加点击事件

2.通过点击相应的li，来添加类，让li的兄弟节点删除类（排他思想）

3.定义一个变量,来接收我们点击li的索引

4.让我的文字节点，接收到li索引,让相应的文字显示，其余文字隐藏

小提示：show()显示 hide()隐藏

代码奉上

    <script>

        //首先来获取、li添加点击事件
        $('ul li').click(function(){

            //通过点击相应的li，来添加类，让li的兄弟节点删除类（排他思想）
            $(this).addClass('current').siblings().removeClass('current');

            //定义一个变量,来接收我们点击li的索引
            var index=$(this).index();


            //让我的文字节点，接收到li索引,让相应的文字显示，其余文字隐藏
            // show()显示      hide()隐藏
            $('.item').eq(index).show().siblings().hide();

        })
    </script>

好，接下来又到了我们枯燥的知识汲取时间。

jq效果

显示隐藏效果

显示show() show(speed,|easing|,fn)

参数可以不写

speed代表速度 slow缓慢地 normal正常的 fast快速的也可以直接写毫秒值比如3000

easing用来指定切换效果: swing摆动 linear直线

fn 回调函数，在动画执行完成后执行

隐藏hide()

切换toggle()

切换显示，隐藏效果

上下滑动效果

用法和上面差不多，这里就不放代码图片了,绝对不是我懒，绝对不是！！！（狗头）

滑出slideUp()

$('.hidebtn').click(function(){
            $('div').slideUp(2000)
        })

划入slideDown()

  $('.showbtn').click(function(){
            $('div').slideDown(2000)
        })

切换划入滑出slideToggle()

  $('.togglebtn').hover(function(){
            $('div').slideToggle(1000)
        })

淡入淡出效果

淡出fadeOut()

 $('.hidebtn').click(function(){
            $('div').fadeOut(2000)
        })

淡入fadeIn()

 $('.showbtn').click(function(){
     $('div').fadeIn(2000)
})

切换淡入淡出fadeToggle()

$('.togglebtn').click(function(){
  $('div').fadeToggle(1000)
})

透明度fadeTo(毫秒，透明度) 两个参数都得写

 $('.togglebtn').click(function(){
            $('div').fadeTo(1000,0.5)
        })

事件切换

hover(over,out)鼠标经过和移开

over:经过时要触发的函数

out:移开时要触发的函数

如果只写一个函数，那么鼠标经过和移开都会触发它

动画队列及其停止排队方法

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

停止排队stop() 注：stop()要写到动画或者效果的前面，相当于结束上一次的动画.

例题2

现在让我们来通过又一个练习，来更加了解新的芝士(知识) 。

。。。。。。。。。。。脑子

关卡2：鼠标移入时，让鼠标移入的图片显示高亮，其他图片暗下去,鼠标移出时让所有照片高亮.

基础配置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .con {
            /* border: 1px solid black; */
            width: 605px;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
            margin: 100px auto;
            background-color: black;
        }

        .con-item {
            /* float: left; */
            width: 200px;
            height: 200px;
            border: 1px solid white;
            background-color: yellowgreen;
            cursor: pointer;
        }
        img {
            height: 200px;
            width: 200px;
        }
    </style>
    <script src="./jq.min.js"></script>
</head>

<body>

    <div class="con">
        <div class="con-item"><img src="./京剧/1.jpg"></div>
        <div class="con-item"><img src="./京剧/2.jpg"></div>
        <div class="con-item"><img src="./京剧/3.jpg"></div>
        <div class="con-item"><img src="./京剧/4.jpg"></div>
        <div class="con-item"><img src="./京剧/5.jpg"></div>
        <div class="con-item"><img src="./京剧/6.jpg"></div>
        <div class="con-item"><img src="./京剧/7.jpg"></div>
        <div class="con-item"><img src="./京剧/8.jpg"></div>
        <div class="con-item"><img src="./京剧/9.jpg"></div>

    </div>


</body>

</html>

1.使用hover函数来执行鼠标移入移出操作

2.鼠标移入时,让目标图片显示高亮，让它的兄弟元素，暗沉下去，使用fadeTo（）来执行操作,在透明度动画前，添加停止动画stop()

3.鼠标移出时，让所有图片高亮

源码奉上(小弟膜拜膜拜你)

 <script>

        // 使用hover函数来执行鼠标移入移出操作
        $('.con-item').hover(function(){
            // 鼠标移入时,让目标图片显示高亮，让它的兄弟元素，暗沉下去，使用fadeTo（）来执行操作
            // 在透明度动画前，添加停止动画stop()
            $(this).stop().fadeTo(100,1).siblings().stop().fadeTo(1000,0.5)
        },function(){
            //鼠标移出时，让所有图片高亮
            $('.con-item').stop().fadeTo(10,1);
        })
    </script>

自定义动画animate()

animate(a1,speed,easing,fn)

a1:想要改变的样式属性，以对象形式传递，必须写

speed:动画执行速度

easing:切换效果

fn:回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.min.js"></script>
    <script src="./color.js"></script>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div></div>
    <button>按钮</button>
    <script>
        $('button').click(function(){
            $('div').animate({
                width:'300px',
                backgroundColor:'red'
            })
        })
    </script>
</body>
</html>

点击按钮时，块缓慢变宽，并改变颜色