1.概念

JQuery：一个JavaScript框架，简化JS的开发，优化文档操作、事件处理、动画设计和Ajax交互
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

2.快速入门

1.下载JQuery文件

网址：http://www.jq22.com/jquery-info122
版本信息说明：
jquery-XXX.js与jquery-XXX.min.js的区别

jquery-XXX.js：开发版本，给开发人员看的，有两个的缩进和注释

jquery-XXX.min.js：生产版本，程序中使用，没有缩进和换行，文件小些更快加载

2.导入JQuery的js文件（导入min.js）
将包复制，粘贴到自己建的js目录中，然后在使用时导入一下就好了，如下：
在这里插入图片描述
3.使用

3.JQuery对象和JS对象区别与转换

1.区别

JQuery对象操作时更加方便
JQuery对象和JS对象方法是不通用的

2.两者的相互转换

JQuery——>JS：JQuery对象[索引]或者JQuery对象.get(索引)，如 $divs[0]或者$ divs.get(0)
JS——>JQuery：$(JS对象)，比如$(divs[i])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery和JS对象的相互转换</title>
    <script src = "js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id = "div1">div1</div>
    <div id = "div2">div2</div>

    <script type="text/javascript">
        //1.通过JS方式获取所有名称叫div的HTML元素对象
        var divs = document.getElementsByTagName("div");
        alert(divs.length);//可以将其当做数组来使用
        //对divs中所有的div，让其标签内容变成aaa
        for (var i = 0; i < divs.length; i++) {
            divs[i].innerText = "aaa";
        }

        //2.通过JQuery方式来获取名称叫div的所有HTML元素对象
        var $divs = $("div");
        alert($divs.length);//也可以当做数组使用
        //对divs中所有的div，让其标签内容变成bbb
        $divs.html("bbb");


        /*
            JQuery对象操作时更加方便
            JQuery对象和JS对象方法是不通用的
            两者相互转换
                JQuery——>JS：JQuery对象[索引]或者JQuery对象.get(索引)，如$divs[0]或者$divs.get(0)
                JS——>JQuery：$(JS对象)，比如$(divs[i])
        */


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

4.选择器

选择器：用于筛选可以相似特征的元素（标签）

4.1.基本语法学习

1.事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src = "js/jquery-3.3.1.min.js"></script>
</head>
<body>

    <div id = "div1">div1</div>
    <div id = "div2">div2</div>
    <input type="button" value="点我" id="b1">

    <script type="text/javascript">
        //给b1按钮添加单击事件

        //1.获取b1按钮
        $("#b1").click(function () {
            alert("abc");
        })
    </script>
</body>
</html>

在这里插入图片描述
2.入口函数
Window.onload和$(function)的区别：

Window.onload只能定义一次，如果定义多次，后面的定义会将前面的覆盖掉
$(function)可以定义多次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入口函数</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        //给b1按钮添加单击事件
        /* window.onload = function (ev) {
            //1.获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            })
        } */

        //DOM文档加载完成后执行该函数中的代码（JQuery的入口函数）
        $(function () {
            //1.获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            })
        })
       
    </script>

</head>
<body>

    <div id = "div1">div1</div>
    <div id = "div2">div2</div>
    <input type="button" value="点我" id="b1">

</body>
</html>

3.样式控制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式控制</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //两种写法
            $("#div1").css("background-color","red");
            $("#div2").css("backgroundColor","pink");
        })
    </script>

</head>
<body>

    <div id = "div1">div1</div>
    <div id = "div2">div2</div>
    <input type="button" value="点我" id="b1">

</body>
</html>

在这里插入图片描述

4.2.选择器分类

1.基本选择器

1.标签选择器（元素选择器）

语法：$("HTML标签名")，获得所有匹配标签名称的元素

2.id选择器

语法：$("#id的属性值")，获得与指定id属性值匹配的元素

3.类选择器

语法：$(".class的属性值")，获得与指定class属性值匹配的元素

2.层级选择器

1.后代选择器

语法：$("A B ")，选择A元素内部的所有B元素

2.子选择器

语法：$("A > B")，选择A元素内部的所有B子元素

3.属性选择器

1.属性名称选择权

语法：$("A[属性名]")，包含指定属性的选择器

2.属性选择器

语法：$("A[属性名 = '值']")，包含指定属性等于指定值的选择器

3.复合属性选择器

语法：$(A[属性值 = '值'][]...)，包含多个属性条件的选择器

4.过滤选择器

1.首元素选择器

语法：:first，获得选择的元素中的第一个元素

2.尾元素选择器

语法：:last，获得选择的元素中的最后一个元素

3.非元素选择器

语法：:not(selecter)，不包括指定内容的元素

4.偶元素选择器

语法：:even，偶数，从0开始计数

5.奇元素选择器

语法：:odd，奇数，从0开始计数

6.等于索引选择器

语法：:eq(index)，获得指定索引元素

7.大于索引选择器

语法：:gt(index)，获得大于指定索引元素

8.小于索引选择器

语法：:lt(index)，获得小于指定索引元素

9.标题选择器

语法：:header，获得标题元素，固定写法

5.表单过滤选择器

1.可用元素选择器

语法：:enabled，获得可用元素

2.不可用元素选择器

语法：:disabled，获得不可用元素

3.选中选择器

语法：:checked，获得单选、复选框中的元素

4.选中选择器

语法：:selected，获得下拉框选中的元素

5.DOM操作

5.1.内存操作

html()：获取、设置元素的标签体内容
text()：获取、设置元素的标签体纯文本内容
val()：获取、设置元素的value属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作1</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //获取myinput的value值
            //var val = $("#myinput").val();
            //alert(val);
            //$("#myinput").val("李四");

            //获取mydiv的标签体内容
            // var html = $("#mydiv").html();
            // alert(html);
            //$("#mydiv").html("aaa");

            //获取mydiv文本内容
            var text = $("#mydiv").text();
            alert(text);
            $("#mydiv").text("bbb");
        })

    </script>
</head>
<body>

    <input id = "myinput" type="text" name="username" value="张三"><br/>
    <div id = "mydiv"><p><a href="#">标题标签</a></p></div>

</body>
</html>

5.2.属性操作

1.通用属性操作

attr()：获取、设置元素属性
removeAttr()：删除属性
prop()：获取、设置元素属性
removeProp()：删除输出

attr()和prop()的区别:

如果操作的是元素固有属性，建议使用prop

如果操作的是元素自定义属性，建议使用attr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作2</title>
    <script src = "js/jquery-3.3.1.min.js"></script>

    <script type="text/javascript">
        $(function () {
            //获取北京节点的name属性值
            let name = $("#bj").attr("name");
            alert(name);
            //设置北京节点的name属性值为dabeijing
            $("#bj").attr("name","dabeijing");
            //新增北京节点的discription属性，属性值是didu
            $("#bj").attr("discription","didu");
            //删除北京节点的name属性并检验name属性是否存在
            $("#bj").removeAttr("name");
            //获得hobby的选中状态
            var prop = $("#hobby").prop("checked");
            alert(prop);
        })

    </script>

</head>
    <ul>
        <li input id = "bj" name="beijing" xxx="yyy">北京</li>
        <li id = "tj" name="tianjin">天津</li>
    </ul>
    <input type="checkbox" id="hobby"/>
</body>
</html>

2.对class属性操作

addClass() ：添加class属性值
removeClass()：删除class属性值
toggleClass()：切换class属性

toggleClass(“one”)：判断如果元素对象存在class=“one”，则将属性值one删除掉，如果元素对象上不存在class=“one”，则添加

5.3.CRUD操作

append()：父元素将子元素追加到末尾

对象1.append(对象2)：将对象2添加到对象1内部，并且在末尾

prepend：父元素将子元素追加到开头

对象1.preppend(对象2)：将对象2添加到对象1内部，并且在开头

appendTo()

对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾

prependTo()

对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在开头

after()：添加元素到元素后面

对象1.after(对象2)：将对象2添加到对象1后面，对象1和对象2是兄弟关系

before()：添加元素到元素前面

对象1.after(对象2)：将对象2添加到对象1前面，对象1和对象2是兄弟关系

insertAfter()

对象1.insertAfter(对象2)：将对象2添加到对象1前面，对象1和对象2是兄弟关系

insertBefore()

对象1.insertBefore(对象2)：将对象2添加到对象1后面，对象1和对象2是兄弟关系

remove()：移除元素

对象.remove()：将对象删除

empty()：清空元素的所有后代元素

对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

前端——JQuery基础