jQuery操作指南-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./jquery-3.7.1.js"></script>
<body>
    <div class="target">
        <p><span>span1</span><span>span2</span></p>
        <p><span>span3</span><span>span4</span></p>
        <p><span>span5</span><span>span6</span></p>
    </div>
    <script>
        let spans = $('span')
        console.log(spans);
        $('spans').mouseenter(function(e){
            console.log('鼠标划入');
        })



        $('.target').on('click',function(){
            console.log('鼠标点击了');
        })

        $('.target').on('click',function(){
            console.log('鼠标点击完了');
        })

        $('.target').off('click');

        

    </script>
</body>
</html>

修改与获取

内容：test()，识别标签，如果没有实参就是获取，又是实参就是修改

属性：

普通属性：attr('属性名')-获取 attr('属性名'，'属性值')-设置

类名属性：

hasClass()

addClass()

removeClass()

toggleClass()

样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script src="./jquery-3.7.1.js"></script>
<style>
    .target{
        position: relative;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border-radius: 50%;
        background-color: aquamarine;
   
    }
    span{
        width: inherit;
        height: inherit;
    }
    botton{
        border: 1 solid lightcoral;
        background-color: aqua;

    }
</style>

    <div class="target">
        <span>哈</span>
    </div>
    <botton>隐藏</botton>
    <botton>显示</botton>
    <botton>转变</botton>
    <botton>移动</botton>
    <script>
        $('botton:nth-of-type(1)').click(function(){
            $('.target').animate({
                width:0,
                height:0
            })
        })

        $('botton:nth-of-type(2)').click(function(){
            $('.target').animate({
                width:100,
                height:100
            })
        })

        $('botton:nth-of-type(3)').click(function(){
            $('.target').toggle
        })
    </script>
    
</body>
</html>