同系列文章导读：【JavaWEB】文章导读

所有文章均在本博客首发，其他平台同步更新

如有问题，欢迎指正（评论区留言即可）

发表评论时请填写正确邮箱，以便于接收通知【推荐QQ邮箱】

  • jQuery是一个JavaScript 库
  • 所谓的库，就是一个JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就是在使用时直接调用，不需要再重复定义，这样就可以极大地简化JavaScript 编程
  • JavaScript类似楼梯，jQuery类似于电梯
  • jQuery官网：https://www.jquery.com

快速入门

  1. 编写HTML文档
  2. 引入jQuery 文件
  3. 使用jQuery 获取元素
  4. 使用浏览器测试
<!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>快速入门</title>
</head>

<body>
    <div id="div">我是div</div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    // js方式获取div元素
    let jsDiv = document.getElementById("div");
    alert(jsDiv.innerHTML);

    // jQuery方式获取
    let jqDiv = $("#div");
    alert(jqDiv.html());
</script>

</html>

基本语法

对象转换

jQuery 本质上虽然也是JS，但如果想使用jQuery 的属性和方法那么必须保证对象是jQuery 对象，而不是JS 方式获得的 DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换

  • JS的DOM 对象转换成jQuery 对象

    $(JS的DOM对象);

  • jQuery 对象转换成JS 对象

    jQuery对象[索引]; 或者 jQuery对象.get(索引);

    索引值取决于jQuery获取出来了几个元素，如果只有一个，那就是0索引
// JS方式获取
let jsDiv = document.getElementById("div");
// alert(jsDiv.html());         JS对象无法使用jQuery里面的功能

// 将JS对象转换为jQuery对象
let jq = $(jsDiv);
alert(jq.html());

// jQuery方式获取
let jqDiv = $("#div");

// 将jQuery对象转换为JS对象
let js = jqDiv[0];
alert(js.innerHTML);

事件

常用事件

事件名说明
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onclick鼠标单击事件
ondblclick鼠标双击事件
onblur元素失去焦点
onfocus元素获得焦点
onchange用户改变域的内容
在jQuery 中将事件封装成了对应的方法。去掉了JS中的.on语法
<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>事件的使用</title>
</head>

<body>
    <input type="button" value="点我" id="btn">
    <br>
    <input type="text" id="input">
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 单击事件
    $("#btn").click(function() {
        alert("点我干嘛");
    });

    // 获取焦点事件
    $("#input").focus(function() {
        alert("获得了焦点");
    });

    // 失去焦点事件
    $("#input").blur(function() {
        alert("失去了焦点");
    });
</script>

事件的绑定和解绑

  • 绑定事件

    jQuery对象.on(事件名称,执行的功能);

  • 解绑事件

    jQuery对象.off(事件名称);

如果不指定事件名称，则会把该对象绑定的所有事件都解绑

<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>事件的绑定和解绑</title>
    <style>
        input {
            width: 160px;
            height: 40px;
            margin-bottom: 10px;
        }
  
        body {
            text-align: center;
            padding-top: 200px;
        }
    </style>
</head>

<body>
    <input type="button" id="btn1" value="点我">
    <br>
    <input type="button" id="btn2" value="解绑">
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    //给btn按钮绑定单击事件
    $("#btn1").on("click", function() {
        alert("点我干嘛");
    });

    // 解绑按钮解绑
    $("#btn2").on("click", function() {
        $("#btn1").off("click");
        alert("解绑成功");
    });
</script>

事件的切换

  • 事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系

  • 方式一：单独定义

    $(元素).事件方法名1(要执行的功能);
$(元素).事件方法名2(要执行的功能);
...

  • 方式二：链式定义

    $(元素).事件方法名1(要执行的功能)
.事件方法名2(要执行的功能)
...
<body>
    <div id="div">我是div</div>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 方式一：单独定义
    // $("#div").mouseover(function() {
    //     // 设置背景色为红色
    //     // $("#div").css("background", "red");
    //     $(this).css("background", "red");
    // });
    // $("#div").mouseout(function() {
    //     // 设置背景色为蓝色
    //     // $("#div").css("background", "blue");
    //     $(this).css("background", "blue");
    // });

    // 方式二：链式定义
    $("#div").mouseover(function() {
        $(this).css("background", "red");
    }).mouseout(function() {
        $(this).css("background", "blue");
    });
</script>

遍历操作

  • 方式一：传统方式

    for(let i = 0; i < 容器对象长度; i++){
    执行功能;
}

  • 方式二：对象.each()方法

    容器对象.each(function(index,ele){
    执行功能;
});

  • 方式三：$.each()方法

    $.each(容器对象,function(index,ele){
    执行功能;
});

  • 方式四：for of语句

    for(ele of 容器对象){
    执行功能;
}
<body>
    <input type="button" id="btn" value="遍历列表项目">
    <ul>
        <li>清华大学</li>
        <li>北京大学</li>
        <li>西安工业大学</li>
    </ul>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 传统方式
    /*
    $("#btn").click(function() {
        let lis = $("li");
        // 遍历数组
        for (let i = 0; i < lis.length; i++) {
            alert(i + ":" + lis[i].innerHTML);
        }
    });
    */

    // 对象.each()方法
    /*
    $("#btn").click(function() {
        let lis = $("li");
        // 遍历数组
        lis.each(function(index, ele) {
            alert(index + ":" + ele.innerHTML);
        });
    });
    */

    // 方式三：$.each方法
    /*
    $("#btn").click(function() {
        let lis = $("li");
        $.each(lis, function(index, ele) {
            alert(index + ":" + ele.innerHTML);
        });
    });
    */

    // 方式四：for of语句
    $("#btn").click(function() {
        let lis = $("li");
        for (ele of lis) {
            alert(ele.innerHTML);
        }
    });
</script>

选择器

  • 选择器：类似于CSS 的选择器，可以帮助我们获取元素
  • 例如：id选择器、类选择器、元素选择器、属性选择器等等
  • jQuery中选择器的语法：$();

基本选择器

选择器语法作用
元素选择器$("元素的名称")根据元素名称获取元素对象们
id选择器$("#id的属性值")根据id属性值获取元素对象
类选择器$(".class的属性值")根据class属性值获取元素对象们
<body>
    <div id="div1">div1</div>
    <div class="cls">div2</div>
    <div class="cls">div3</div>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 元素选择器
    let divs = $("div");
    // alert(divs.length);

    // id选择器
    let div1 = $("#div1");
    // alert(div1);

    // 类选择器
    let cls = $(".cls");
    alert(cls.length);
</script>

层级选择器

选择器语法作用
后代选择器$("A B");A下的所有B(包括B的子级)
子选择器$("A > B");A下的所有B(不包括B的子级)
兄弟选择器$("A + B");A相邻的下一个B
兄弟选择器$("A ~ B");A相邻的所有B
<body>
    <div>
        <span>s1
            <span>s1-1</span>
            <span>s1-2</span>
        </span>
        <span>s2</span>
    </div>

    <div></div>
    <p>p1</p>
    <p>p2</p>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 后代选择器
    let spans1 = $("div span");
    // alert(spans1.length);    // 4

    // 子选择器
    let spans2 = $("div > span");
    // alert(spans2.length);    // 2

    // 兄弟选择器1
    let ps1 = $("div + p");
    // alert(ps1.length);    // 1

    // 兄弟选择器2
    let ps2 = $("div ~ p");
    alert(ps2.length);        // 2
</script>

属性选择器

选择器语法作用
属性名选择器$("A[属性名]");根据指定属性名获取元素对象们
属性值选择器$("A[属性名=属性值]");根据指定属性名和属性值获取元素对象们
<body>
    <input type="text">
    <input type="password">
    <input type="password">
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 属性名选择器
    let in1 = $("input[type]");
    // alert(in1.length);

    // 属性值选择器
    let in2 = $("input[type='password']");
    alert(in2.length);
</script>

过滤器选择器

选择器语法作用
首元素选择器$("A:first");获得选择的元素中的第一个元素
尾元素选择器$("A:last");获得选择的元素中的最后一个元素
非元素选择器$("A:not(B)");不包括指定内容的元素
偶数选择器$("A:even");偶数，从0开始计数
奇数选择器$("A:odd");奇数，从0开始计数
等于索引选择器$("A:eq(index)");指定索引元素
大于索引选择器$("A:gt(index)");大于指定索引元素
小于索引选择器$("A:lt(index)");小于指定索引元素
<body>
    <div>div1</div>
    <div id="div2">div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 首元素选择器
    let div1 = $("div:first");
    // alert(div1.html());

    // 尾元素选择器
    let div4 = $("div:last");
    // alert(div4.html());

    // 非元素选择器
    let divs1 = $("div:not(#div2)");
    // alert(divs1.length);

    // 偶数选择器
    let divs2 = $("div:even");
    // alert(divs2.length);
    // alert(divs2[0].innerHTML);
    // alert(divs2[1].innerHTML);

    // 奇数选择器
    let divs3 = $("div:odd");
    // alert(divs3.length);
    // alert(divs3[0].innerHTML);
    // alert(divs3[1].innerHTML);

    // 等于索引选择器
    let div3 = $("div:eq(2)");
    // alert(div3.html());

    // 大于索引选择器
    let divs4 = $("div:gt(1)");
    // alert(divs4.length);
    // alert(divs4[0].innerHTML);
    // alert(divs4[1].innerHTML);

    // 小于索引选择器
    let divs5 = $("div:lt(2)");
    alert(divs5.length);
    alert(divs5[0].innerHTML);
    alert(divs5[1].innerHTML);
</script>

表单属性选择器

选择器语法作用
可用元素选择器$("A:enabled");获得可用元素
不可用元素选择器$("A:disabled");获得不可用元素
单选/复选框被选中的元素$("A:checked");获得单选/复选框选中的元素
下拉框被选中的元素$("A:selected");获得下拉框选中的元素
<body>
    <input type="text" disabled>
    <input type="text">
    <input type="radio" name="gender" value="men" checked>男
    <input type="radio" name="gender" value="women">女
    <input type="checkbox" name="hobby" value="study" checked>学习
    <input type="checkbox" name="hobby" value="sleep" checked>睡觉
    <select>
        <option>---请选择---</option>
        <option selected>本科</option>
        <option>专科</option>
    </select>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 可用元素选择器
    let ins1 = $("input:enabled");
    // alert(ins1.length);

    // 不可用元素选择器
    let ins2 = $("input:disabled");
    // alert(ins2.length);

    // 单选/复选框被选中的元素
    let ins3 = $("input:checked");
    // alert(ins3.length);

    // 下拉框被选中的元素
    let select = $("select option:selected");
    alert(select.html());
</script>

DOM

操作文本

方法作用
html()获取标签的文本
html(value)设置标签的文本内容，解析标签
<body>
    <div id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的文本">
    <input type="button" id="btn2" value="设置div的文本">
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 获取标签
    $("#btn1").click(function() {
        let value = $("#div").html();
        alert(value);
    });

    // 设置标签的文本内容，解析标签
    $("#btn2").click(function() {
        $("#div").html("<b>我真的是div</b>");
    });
</script>

操作对象

方法作用
$("元素")创建指定元素
append(element)添加成最后一个子元素，由添加者对象调用
appendTo(element)添加成最后一个子元素，由被添加者对象调用
prepend(element)添加成第一个子元素，由添加者对象调用
prependTo(element)添加成第一个子元素，由被添加者对象调用
before(element)添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
after(element)添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
remove()删除指定元素(自己移除自己)
empty()清空指定元素的所有子元素
<body>
    <div id="div"></div>
    <input type="button" id="btn1" value="添加一个span到div"><br><br><br>

    <input type="button" id="btn2" value="将加油添加到城市列表的最下方">      
    <input type="button" id="btn3" value="将加油添加到城市列表的最上方">      
    <input type="button" id="btn4" value="将雄起添加到上海下方">      
    <input type="button" id="btn5" value="将雄起添加到上海上方">      
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="gz">广州</li>
        <li id="sz">深圳</li>
    </ul>
    <ul id="desc">
        <li id="jy">加油</li>
        <li id="xq">雄起</li>
    </ul> <br><br><br>

    <input type="button" id="btn6" value="将雄起删除">      
    <input type="button" id="btn7" value="将描述列表全部删除">
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 添加一个span到div
    $("#btn1").click(function() {
        let span = $("<span>span</span>");
        $("#div").append(span);
    });

    // 将加油添加到城市列表最下方
    $("#btn2").click(function() {
        // $("#city").append($("#jy"));
        $("#jy").appendTo($("#city"));
    });

    // 将加油添加到城市列表最上方
    $("#btn3").click(function() {
        // $("#city").prepend($("#jy"));
        $("#jy").prependTo($("#city"));
    });

    // 将雄起添加到上海下方
    $("#btn4").click(function() {
        $("#sh").after($("#xq"));
    });

    // 将雄起添加到上海上方
    $("#btn5").click(function() {
        $("#sh").before($("#xq"));
    });

    // 将雄起删除
    $("#btn6").click(function() {
        $("#xq").remove();
    });

    // 将描述列表全部删除
    $("#btn7").click(function() {
        $("#desc").empty();
    });
</script>

操作样式

方法作用
css(name)根据样式名称获取css样式
css(name,value)设置CSS样式
addClass(value)给指定的对象添加样式类名
removeClass(value)给指定的对象删除样式类名
toggleClass(value)如果没有样式类名，则添加。如果有，则删除
<!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>操作样式</title>
    <style>
        .cls1 {
            background: pink;
            height: 30px;
        }
    </style>
</head>

<body>
    <div style="border: 1px solid red;" id="div">我是div</div>
    <input type="button" id="btn1" value="获取div的样式">    
    <input type="button" id="btn2" value="设置div的背景色为蓝色">    
    <br><br><br>
    <input type="button" id="btn3" value="给div设置cls1样式">   
    <input type="button" id="btn4" value="给div删除cls1样式">   
    <input type="button" id="btn5" value="给div设置或删除cls1样式">   
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 获取样式
    $("#btn1").click(function() {
        let css = $("#div").css("border");
        alert(css);
    });

    // 设置div的背景色为蓝色
    $("#btn2").click(function() {
        $("#div").css("background", "blue");
    });

    // 给div设置cls1样式
    $("#btn3").click(function() {
        $("#div").addClass("cls1");
    });

    // 给div删除cls1样式
    $("#btn4").click(function() {
        $("#div").removeClass("cls1");
    });

    // 给div设置或删除cls1样式
    $("#btn5").click(function() {
        $("#div").toggleClass("cls1");
    });
</script>

</html>

操作属性

方法作用
attr(name,[value])获得/设置属性的值
prop(name,[value])获得/设置属性的值（checked,selected）
<body>
    <input type="text" id="username">
    <br>
    <input type="button" id="btn1" value="获取输入框的id属性">    
    <input type="button" id="btn2" value="给输入框设置value属性">    
    <br><br>

    <input type="radio" id="gender1" name="gender">男
    <input type="radio" id="gender2" name="gender">女
    <br>
    <input type="button" id="btn3" value="选中女">
    <br><br>

    <select>
        <option>---请选择---</option>
        <option id="bk">本科</option>
        <option id="zk">专科</option>
    </select>
    <br>
    <input type="button" id="btn4" value="选中本科">
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 获取输入框的id属性
    $("#btn1").click(function() {
        alert($("#username").attr("id"));
    });

    // 给输入框设置value属性
    $("#btn2").click(function() {
        $("#username").attr("value", "hello");
    });

    // 选中女
    $("#btn3").click(function() {
        $("#gender2").prop("checked", true);
    });

    // 选中本科
    $("#btn4").click(function() {
        $("#bk").prop("selected", true);
    });
</script>

综合案例

复选框案例

  • 全选

    1. 为全选按钮绑定单击事件
    2. 获取所有的商品项复选框元素，为其添加checked 属性，属性值为 true

  • 全不选

    1. 为全不选按钮绑定单击事件
    2. 获取所有的商品项复选框元素，为其添加checked属性，属性值为false

  • 反选

    1. 为反选按钮绑定单击事件
    2. 获取所有的商品项复选框元素，为其添加checked 属性，属性值是目前相反的状态
<!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>复选框案例</title>
</head>

<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: center;">
                <input style="background: lightgreen;" id="selectAll" type="button" value="全选">
                <input style="background: lightgreen;" id="selectNone" type="button" value="全不选">
                <input style="background: lightgreen;" id="reverse" type="button" value="反选">
            </th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 全选
    // 1. 为全选按钮绑定单击事件
    $("#selectAll").click(function() {
        // 2. 获取所有的商品项复选框元素，为其添加checked 属性，属性值为 true
        $(".item").prop("checked", true);
    });

    // 全不选
    // 1. 为全不选按钮绑定单击事件
    $("#selectNone").click(function() {
        // 2. 获取所有的商品项复选框元素，为其添加checked 属性，属性值为 false
        $(".item").prop("checked", false);
    });

    // 反选
    // 1. 为反选按钮绑定单击事件
    $("#reverse").click(function() {
        // 2. 获取所有的商品项复选框元素，为其添加checked 属性，属性值是目前相反的状态
        let items = $(".item");
        items.each(function() {
            $(this).prop("checked", !$(this).prop("checked"));
        })
    });
</script>

</html>

随机图片案例

动态切换小图

  1. 准备一个数组
  2. 定义计数器
  3. 定义定时器对象
  4. 定义图片路径变量
  5. 为开始按钮绑定单击事件
  6. 设置按钮状态
  7. 设置定时器，循环显示图片
  8. 循环获取图片路径
  9. 将当前图片显示到小图片上
  10. 定时器自增

显示大图

  1. 为停止按钮绑定单击事件
  2. 取消定时器
  3. 设置按钮状态
  4. 将图片显示到大图片上

完整代码

<!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>随机图片案例</title>
</head>

<body>
    <!-- 小图 -->
    <div style="background-color: red; border: dotted; width: 100px; margin-bottom: 20px;">
        <img src="img/01.jpeg" id="small" style="width: 100px; ">
    </div>
    <!-- 大图 -->
    <div style="border: double; width: 400px; height: 400px; position: absolute; left: 500px;">
        <img src="" id="big" style="width: 400px; height: 400px; display: none;">
    </div>

    <!-- 开始和结束按钮 -->
    <input type="button" id="startBtn" style="width: 150px; height: 150px; font-size: 20px;" value="开始">
    <input type="button" id="stopBtn" style="width: 150px; height: 150px; font-size: 20px;" value="停止">
</body>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
    // 1. 准备一个数组
    let imgs = [
        "img/01.jpeg",
        "img/02.jpeg",
        "img/03.jpeg",
        "img/04.jpeg",
        "img/05.jpeg",
        "img/06.jpeg",
        "img/07.jpeg",
        "img/04.jpeg",
        "img/09.jpeg"
    ];
    // 2. 定义计数器
    let count = 0;
    // 3. 定义定时器对象
    let time = null;
    // 4. 定义图片路径变量
    let imgSrc = "";
    // 5. 为开始按钮绑定单击事件
    $("#startBtn").click(function() {
        // 6. 设置按钮状态
        $(this).prop("disabled", true);
        $("#stopBtn").prop("disabled", false);
        // 7. 设置定时器，循环显示图片
        time = setInterval(function() {
            // 8. 循环获取图片路径
            let index = count % imgs.length;
            // 9. 将当前图片显示到小图片上
            imgSrc = imgs[index];
            $("#small").prop("src", imgSrc);
            // 10. 计数器自增
            count++;
        }, 10);
    });

    // 1. 为停止按钮绑定单击事件
    $("#stopBtn").click(function() {
        // 2. 取消定时器
        clearInterval(time);
        // 3. 设置按钮状态
        $(this).prop("disabled", true);
        $("#startBtn").prop("disabled", false);
        // 4. 将图片显示到大图片上
        $("#big").prop("src", imgSrc);
        $("#big").prop("style", "width: 400px; height: 400px;")
    });
</script>

</html>

推荐阅读：【JavaWEB】AJAX快速入门

END
本文作者： 文章标题：【JavaWEB】JQuery基础
 本文地址：https://www.jiusi.cc/archives/45/
 版权说明：若无注明，本文皆九思のJava之路原创，转载请保留文章出处。
最后修改：2022 年 05 月 07 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏