jQuery的一些基本的函数和用jQuery做一些动画操作

时间：2021-12-10 15:33:14

jQuery是对js的封装，因为js有一些不方便的地方。所以，jQuery才会去对js进行封装。

jQuery对于标签元素的获取

$('div')或$('li')

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>隔行换色</title>

</head>

<body>

<ul>

    <li>a</li>

    <li>b</li>

    <li>c</li>

    <li>d</li>

    <li>e</li>

</ul>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        var $lis = $('li');

        for(var i = 0; i < $lis.length; i++){

            if(i % 2 == 0){

                $lis.eq(i).css('color', 'red');

            }else{

                $lis.eq(i).css('color', 'green');

            }

        }

    })

</script>

</html>

隔行换色

对于这段代码，我们获取的li标签是一个数组，通过取的是奇数还是偶数，用.css函数来显示字体的颜色。

筛选器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>筛选器示例</title>

</head>

<body>

<ul>

    <li id="l0">1</li>

    <li>2</li>

    <li>3</li>

    <li id="l3">4</li>

    <li>5</li>

</ul>

<div>div-1</div>

<div>div-2</div>

<div id="fir">div-3

    <a href="#">a标签</a>

    <div>div-son</div>

</div>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    // 查找id="l3"

    console.log($('#l3'));

//    查找id="l3"的前一个

    console.log($('#l3').prev());

//    查找id="l3"的后一个

    console.log($('#l3').next());

//    查找id="l3"的前面的所有标签  取得时候是倒着取

    console.log($('#l3').prevAll());

//    查找后面所有的

    console.log($('#l3').nextAll());

//    从某个元素开始找，直到某个元素终止 取到的是之间的元素

    console.log($('#l0').nextUntil('#l3'));

//    查找a标签

    console.log($('a'));

//    查找a标签的父标签

    console.log($('a').parent());

//    查找儿子和兄弟标签

    console.log($('#fir').children());

    console.log($('#fir').siblings());

</script>

</html>

通过筛选器，我们就可以选到的我们想要操作的标签。

jQuery的一些动画操作

通过jQuery，一些简单的像逐渐显示，逐渐隐藏等动画，可以通过函数来实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery动画</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            background-color: green;

            display: none;

        }

    </style>

</head>

<body>

<button id="show">显示</button>

<button id="hide">隐藏</button>

<button id="change">切换</button>

<div class="box"></div>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        $('#show').click(function () {

            // $('.box').css('display', 'block');

            $('.box').show('1000');

        });

    });

    $(function () {

        $('#hide').click(function () {

            $('.box').hide(1000);

        });

    });

    var isShow = true;

    $('#change').click(function () {

        if(isShow){

            $('.box').hide(1000);

            isShow = false;

        }else{

            $('.box').show(1000);

            isShow = true;

        }

    });

    $('.box').toggle(1000);

</script>

</html>

渐隐渐显

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>滑入滑出</title>

    <style type="text/css">

        .box{

            width: 200px;

            height: 200px;

            background-color: green;

            display: none;

        }

    </style>

</head>

<body>

<button id="appear">滑入</button>

<button id="dis">滑出</button>

<button id="change">切换</button>

<div class="box"></div>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

       $('#appear').click(function () {

           $('.box').slideDown(2000);

       });

       $('#dis').click(function () {

           $('.box').slideUp(2000);

       });

       $('#change').mouseup(function () {

          $('.box').slideToggle(2000);

       });

    });

</script>

</html>

滑入滑出动画

.click事件，是当点击事件发生时，才会起作用的事件，出来click事件，还有鼠标移入移出的事件。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>淡入淡出</title>

</head>

<style type="text/css">

    .box{

        width: 200px;

        height: 200px;

        background-color: red;

        display: none;

    }

</style>

<body>

<button id="appear">淡入</button>

<button id="dis">淡出</button>

<button id="change">切换</button>

<button id="point">指定</button>

<div class="box"></div>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        $('#appear').click(function () {

            $('.box').fadeIn('slow', function () {

            });

        });

        $('#dis').click(function () {

            $('.box').fadeOut('slow', function () {

            });

        });

        $('#change').click(function () {

            $('.box').fadeToggle('slow', function () {

            })

        });

        $('button').eq(3).click(function () {

            $('.box').fadeTo(2000, 5);

        });

    });

</script>

</html>

淡入淡出

jQuery标签属性操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>标签属性操作</title>

    <style type="text/css">

        .app{

            width: 200px;

            height: 200px;

            background-color: red;

        }

    </style>

</head>

<body>

<button>隐藏</button>

<div id="box" class="app">

</div>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        // 里面attr的参数是'id'，不是'#box';

        // 返回值是jQuery的box类

        // 获取属性

        var idValue = $('div').attr('id');

        console.log(idValue);

    //    设置值

    //     $('div').attr('class','apps');

    //    移除属性

        $('button').click(function () {

            $('div').removeAttr('class');

        });

    })

</script>

</html>

标签属性操作 attr函数用法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>prop用法</title>

</head>

<body>

    <div>

        <p class="item">1</p>

        <p class="item2">2</p>

        <p class="item3">3</p>

        <p>4</p>

        男<input type="radio" id="text1" name="sex" checked="add"/>

        女<input type="radio" id="text2" name="sex" />

        <button>提交</button>

    </div>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        // console.log($('p').prop('.item2'));

        $('p:eq(3)').prop('class', 'item4');

        $('input:eq(0)').attr('checked');

        // prop 返回值为true

        console.log($('input:eq(0)').prop('checked'));

        $('button').click(function () {

            alert($('input:eq(0)').prop("checked")?"男":"女");

        });

    })

</script>

</html>

prop函数的用法

prop返回的值为Boolean值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>选项卡</title>

    <style type="text/css">

        ul li.active{

            color: yellow;

        }

    </style>

</head>

<body>

<ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

</ul>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        $('ul li').click(function () {

        //    修改css来修改表单的颜色

            // $(this).css('color', 'green').siblings('li').css('color', 'black');

        //    修改类名来修改表单颜色

            $(this).addClass('active').siblings('li').removeClass('active');

        });

    })

</script>

</html>

制作选项卡

jQuery类属性操作

addClass函数

示例：用了两种方法，一是用之前学的.css函数来做，

二是先定义addClass函数，之后通过addClass 函数来调用函数

jQuery的一些基本的函数和用jQuery做一些动画操作

val函数

表单操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>form表单value值</title>

</head>

<body>

<form action="">

    <input type="radio" name="sex" value="112" />男

    <!-- 设置checked属性表示选中当前选项-->

    <input type="radio" name="sex" value="11" checked="">女

    <input type="radio" name="sex" value="11">其他

    <input type="checkbox" value="a" checked="">吃饭

    <input type="checkbox" value="b">睡觉

    <input type="checkbox" value="c" checked="">打豆豆

    <!--下拉表单 option表单 option标签内设置selected属性 表示选中当前-->

    <select name="timespan" id="timespan" class="Wdate">

        <option value="1">8:00-8:30</option>

        <option value="2" selected="">8:30-9:00</option>

        <option value="3">9:00-9:30</option>

    </select>

    <input type="text" name="" id="" value="111" />

</form>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

    //     选择type是radio的默认被打钩的value值

        console.log($('input[type="radio"]:checked').val());

    //     复选框被选中的value，获取的是第一个被选中的值

        console.log($('input[type="checkbox"]:checked').val());

    //     下拉列表被选中的值

        var $obj = $('#timespan option:selected');

    //     获取被选中的值

        var $time = $obj.val();

        console.log($time);

    //      获取文本

        var $time_text = $obj.text();

        console.log(`val:${$time},text:${$time_text}`)

    //    设置值 value值一定要是一个数组，用[]来括起来

        $("input[type='radio']").val(['112']);

        $("input[type='checkbox']").val(['a', 'b']);

    });

</script>

</html>

val函数

我们知道如果想获取class，需要用.class_name，获取id，用#id_name。

而对于input获取可以通过input[type="type_name"]来获取

而获去value值，更多的是为了提交表单做准备。

文档操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文档操作</title>

</head>

<body>

    <!--<ul></ul>-->

    <ol>

        <li class="li1">first</li>

        <li></li>

        <li></li>

        <li></li>

    </ol>

<ul>

    <li>first</li>

    <li>second</li>

    <li>third</li>

    <li>forth</li>

</ul>

<button>点击</button>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

    //     添加字符串

        $('ul').append('<li class="item1">哈哈</li>');

        var oLi = document.createElement('li');

        oLi.innerHTML = 'hh';

    //     添加js对象

        $('ul').append(oLi);

    //     添加jQuery对象 之前的元素会被移除

        $('ul').append($('.li1'));

    //     $('ul li').click(function () {

    //         $('ul').append($(this));

    //     });

    //    添加到第一个

        $('ul').prepend('<li>到第一个</li>');

    //    clone(ture)会复制$(this)的属性，而默认的false不会复制属性

        $('button').click(function () {

            $(this).clone().insertAfter(this);

        });

    //    删除操作

    //     $('button').remove();

    //     detach同样是删除操作，但可以保留之前设置的属性

        var $btn = $('button').detach();

        $('ul').append($btn);

    });

</script>

</html>

文档的增删操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>修改操作</title>

</head>

<body>

<h5>h5标签</h5>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    // 修改操作

    $(function () {

        $('h5').replaceWith('<a href="#">hello world</a>');

    }

</script>

</html>

文档的修改操作

这里需要记住几个函数

append函数：在队尾添加操作

prepend函数：添加在第一个

replaceWith函数：修改标签

remove函数：删除操作

detach函数：删除操作，但可以保留之前设置的属性

jQuery的位置信息

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery的位置信息</title>

    <style>

        *{

            padding: 0;

            margin: 0;

        }

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            /*这里看到是行内距离在哪些函数会计算进去*/

            padding: 50px;

            border: 1px solid green;

            margin-left: 50px;

            margin-top: 100px;

            position: absolute;

        }

        .father{

            width: 400px;

            height: 400px;

            background-color: yellow;

            position: relative;

        }

        .box2{

            width: 100px;

            height: 100px;

            background-color: pink;

            bottom: 0;

            right: 30px;

            position: absolute;

        }

    </style>

</head>

<body>

<button>变大</button>

<div class="father">

    <div class="box">

    </div>

    <div class="box2">

        返回顶部

    </div>

</div>

</body>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function () {

        // 如果width不写，表示获取.box的width的值 这里的值是数值

        console.log($('.box').width());

    //    这里获取的值为字符串

        console.log($('.box').css('width'));

    // 使div变大

        $('button').eq(0).click(function () {

            // 通过next获取下一个同辈元素

            $(this).next().width(300);

        });

        // 获取内部宽的函数 会获取padding值

        console.log($('.box').innerWidth());

        // 获取外部宽  会把边框和margin值都计算

        console.log($('.box').outerWidth());

        // 偏移坐标

        console.log($('.box').offset().top);

        console.log($('.box').offset().left);

        // animate是用来设置动画的

        // $('.box').css({

        //     width: 200,

        //     height: 200

        // }).offset({top: 100, left: 100}).animate({

        //     width: 0,

        //     height: 0

        // }, 1000);

    //    position函数

        console.log($('.box').offset());

        console.log($('.box').position());

    //    返回的是数值类型

        $(document).scroll(function () {

            console.log($(document).scrollTop());

        })

    //

        $('.box2').click(function () {

            $('html').animate({

                'scrollTop': 0

            }, 1000);

        });

    });

</script>

</html>

jQuery的位置信息

通过获取位置信息，可以做一些滚动操作。

相关文章