<body>
    <div class="parent">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
    </div>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    console.log($('.parent'));
    console.log($('.son1').next());
    console.log($('.son1').siblings());
    console.log($('.son1').index());
    console.log($('.son1').parent());
    console.log($('.parent>div').eq(1));
</script>

3.改变选取元素的样式：$('css选择器').css('属性', '属性值')

<body>
    <div>

    </div>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    $('div').css('width', '100px')
    $('div').css('height', '100px')
    $('div').css('border', '2px solid red')
</script>

3.class类名的改变：

1. 添加类名：addClass（"类名"）

2. 删除类名：removeClass（）

3. 切换类名：toggleClass（）存在该类名就删除，不存在就添加

4. 判断该元素是否有该类名： hasClass（'类名'）

4.事件绑定

1. 绑定点击事件：$('css选择器').click(function(){})


<body>
    <div>
    </div>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    $('div').css('width', '100px')
    $('div').css('height', '100px')
    $('div').css('border', '2px solid red')
    $('div').click(function () {
        console.log(111);
    })
</script>

5.元素的显示与隐藏：

1. 显示：show（）

2. 隐藏：hide（）

3. 切换：toggle（）

<body>
    <button>切换</button>
    <div></div>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    $('div').css('width', '100px')
    $('div').css('height', '100px')
    $('div').css('border', '2px solid red')
    $('div').click(function () {
        console.log(111);
    })
    $('button').click(function () {
        $('div').toggle()
    })
</script>

6.滑动效果的显示与隐藏

1. 滑动显示：slideDown（）

2. 滑动隐藏：slideUp（）

3. 滑动切换：slideToggle（）

 $('button').click(function () {
        $('div').slideToggle()
    })

7.$()的重载

1. 参数是css选择器：获取标签元素

2. 参数是某元素：给该元素封装让其能够使用jquery中的方法

3.参数是个函数：监听DOMContentLoaded事件，所有DOM元素加载完成后执行

8.链式语法

1. 对一个主语的操作可以写成一串，符合语言规则

2.例：高亮选择唯一性

<style>
    ul {
        user-select: none;
        list-style: none;
        display: flex;
    }

    ul li {
        width: 100px;
        line-height: 40px;
        margin: 0 10px;
        border-radius: 10px;
        background-color: #ccc;
        text-align: center;
    }

    ul li.active {
        background-color: orange;
        color: white;
    }
</style>

<body>
    <ul>
        <li class="active">A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    // 会自动给获取所有的li绑定一个点击事件
    $('li').click(function () {
        // 让this可以使用jquery中的方法
        $(this).addClass('active').siblings().removeClass('active')
    })
</script>

9.动画animate（）

1. 首先目标元素得设置定位属性

2. 第一个参数：是个对象形式里面填写动画完成时的样式

3.第二个参数：动画持续时间（毫秒）

4. 可以写多个动画，形成动画队列

5. 暂停动画stop（）

1. 暂停中第一个参数：是否清空动画队列，默认false 不清空只暂停当前动画后续动画队列继续执行

2. 第二个参数：是否跳转到最终样式默认false

<style>
    div {
        width: 100px;
        height: 40px;
        background-color: lightgreen;
        position: relative;
    }
</style>

<body>
    <button>start</button>
    <button>end</button>
    <div></div>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    // start
    $('button').eq(0).click(function () {
        $('div').animate({
            left: 300,
            width: 50,
            height: 50,
            borderRadius: 10,
            backgroundColor: "lightcoral"
        }, 2000).animate({ top: 100 }, 2000).animate({ left: 0, top: 0 }, 1000)
    })
    // end
    $('button').eq(1).click(function () {
        $('div').stop()
    })
</script>

10.读写标签属性

1. 读写系统属性：prop（'属性名'，'属性值'）。有第二个参数为修改

2. 只读data自定义属性：data（）. 属性名

3. 读写所有属性：attr（'属性名'，'属性值'）

<body>
    <a href="#" title="超链接" suibian="随便写的自定义属性" data-Aname="data自定义属性"></a>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>

    console.log($('a').prop('title'));
    console.log($('a').attr('data-Aname'));
    console.log($('a').data().aname);
</script>

11. 封装的Ajax

$.get(接口，data=>{})

12.事件委托： on（）

1. 参数一：事件类型

2. 参数二：委托元素

3.参数三：回调函数

<style>
    ul {
        list-style: none;
        user-select: none;
    }

    ul li {
        width: 100px;
        line-height: 40px;
        background-color: lightblue;
    }
</style>

<body>
    <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
</body>
<script src="./jquery-3.6.3.min.js"></script>
<script>
    $('ul').on('click', 'li', function () {
        $(this).css('backgroundColor', 'red')
    })
</script>

13.加载页面：$('css选择器').load('路径')

14.生成标签内容

1. text（）

2.html（）

3.append（）追加子元素

 $('ul').append('<li>3</li>')

一：由来

二：下载

三：使用

1.引入：使用jQuery首先要引入脚本

2.元素选取：$("css选择器")