JQuery 基本操作（初级部分）-CFANZ编程社区

JQuery基础学习

基本操作

使用方法

jQuery 不需要安装，要使用它只需要引入一个 js 文件即可，该文件可以放在外部站点上，也可以放在自己的服务器上。但是在实际开发过程中还是使用本地服务器更加方便一些。

各大开发公司都提供 jquery 下载的 CDN，本课件以百度 CDN 的 jquery 2.1.4 为基础。可以使用下面的路径引入 jquery。

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

在实际开发中，第三方服务器可能由于网络，自启等第三方因素导致 jquery 不能访问，所以建议将其下载到本地。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>引用jQuery库</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="div"></div>
<script>
    // document.getElementById("div").innerHTML="hello world！"
    $("#div").html("hello world！！");
</script>
</body>
</html>

在引用样式表文件的代码之后，是包含 JavaScript 文件的代码，这里需要注意的是，引用 jQuery 库文件的

增加节点

要在页面中动态创建一个 div 元素，并设置其内容与属性，具体代码如下所示：

var div = "<div class='new_class'>创建的新的div块</div>";
$("body").append(div);

从上面可知，在页面中动态创建元素需要执行节点的插入或追加操作。而在 jQuery 中，有很多方法可以实现该功能，上述例子用到的 append() 方法仅仅是其中一种，按照插入元素的顺序来划分，可以将插入节点分为内部插入和外部插入两种方法。

①内部插入节点

方法语法	描述	参数说明
append(content)	内部追加内容（放在后面）	content：追加到目标中的内容或者选择的节点
prepend(content)	内部追加内容（放在前面）	content：插入目标元素内容前面的内容或者选择节点

②外部插入节点

方法语法	描述	参数说明
after(content)	元索外部后面追加内容	插入目标元素外部后面的内容
before(content)	元素外部前面插入内容	插入目标元素外部前面的内容

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>java 学习平台</title>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<span id="span3">3</span>
<div id="append">
    <span>1</span>
</div>
<div id="prepend">
    <span>1</span>
</div>
<script>
    $("#append").append("<span>2</span>");
    $("#append").append($("#span3"));
    $("#prepend").prepend("<span>2</span>");
    $("#append").after("<span>4</span>");
    $("#append").before("<span>5</span>");
</script>
</body>
</html>

删除节点

在 DOM 操作页面时，删除多余或指定的页面元素是经常使用到的，jQuery 提供了两种可以删除元素的方法，即 remove() 和 empty() 。严格的说，empty() 方法并非真正意义上的删除，使用该方法，仅仅可以清空全部的节点或节点所包含的所有后代元素，并非删除节点与元素。remove() 方法的语法结构如下所示：

remove([expr])

其中参数 expr 为可选项，如果接受参数，则该参数为筛选元素的 jQuery 表达式，通过该表达式获取指定的元素进行删除。

empty() 方法的语法结构如下所示：

empty()

其功能为清空所选择的页面元素及其所有后代元素。

案例：

<body>
<ul>
    <li title="1">这是第一条新闻</li>
    <li title="2">这是第二条新闻</li>
    <li title="3">这是第三条新闻</li>
    <li title="4">这是第四条新闻</li>
</ul>
<input type="button" value="删除操作" id="btn1"/>
<input type="button" value="清空操作" id="btn2"/>
<script>
    //单击事件
    $("#btn1").click(function () {
        $("ul li").remove("li[title=1]");
        $("ul li:eq(2)").remove();
    })
    $("#btn2").click(function () {
        $("ul").empty();
    })
</script>
</body>

替换遍历节点

在 jQuery 中，如果要替换元素中的节点，可以使用 replaceWith() 方法， replaceWith() 方法的语法结构如下所示：

replaceWith(content)

该方法的功能是将所有选择的元素替换为执行的 HTML 或 DOM 元素，其中参数 content 为被所选元素替换的内容。

案例：

<body>
<div>
    <p>姓名：<span id="span1">张三</span></p>
    <p>班级：<span id="span2">计科1班</span></p>
    <input type="button" value="点击替换" id="btn"/>
</div>
<span id="span3">测试</span>
<script>
    //单击事件
    $("#btn").click(function () {
        $("#span1").replaceWith("<span>李四</span>");
        $("#span2").replaceWith($("#span3"));
    })
</script>
</body>

遍历节点

在 DOM 元素操作中，有时需要对统一标记的全部元素进行统一操作。在 JavaScript 中，需要先获取元素的总长度，然后用 for 语句循环处理。而在 jQuery 中可以直接使用 each() 方法轻松实现元素的遍历，其语法结构如下所示：

each(callback)

其中参数 callback 是一个 function 函数，该函数还可以接受一个形参 index 和当前遍历的 DOM 元素（不是 jQuery 对象），此形参为遍历元素的序号(从 0 开始)；如果需要访问元素中的属性，可以借助形参 index，配合 this 关键字来实现元素属性的设置或获取。

案例：

<ul>
    <li>这是第一条新闻</li>
    <li>这是第二条新闻</li>
    <li>这是第三条新闻</li>
    <li>这是第四条新闻</li>
</ul>
<input type="button" value="为新闻添加序号" id="btn"/>
<script>
    //单击事件
    $("#btn").click(function () {
        $("ul li").each(function (i, j) {
            console.info(i, j)
            console.info(j.innerHTML)
            console.info($(j).html())
            //为新闻添加序号
            let content = $(this).text();
            console.info(content)
            $(this).html(i + 1 + "、" + content);
        })
    })
</script>

属性样式操作

在 jQuery 中，可以对元素的属性执行获取、设置、删除操作。通过 attr() 方法可以对元素属性执行获取与设置操作，通过 removeAttr() 方法则可以执行删除元素属性操作。

(1)获取元素属性

可通过attr()方法获取元素的属性，其语法结构如下所示：

attr(name)

其中，参数 name 表示属性的名称，以元素属性名称为参数来获取元素的属性值。

(2)设置元素的属性

在页面中，attr() 方法不仅可以用来获取元素的属性值，还可以用来设置元素的属性，其设置元素属性的语法格式如下所示：

attr(key,value)

其中参数 key 表示属性的名称，value 表示属性的值。如果要设置多个属性，也可通过 attr() 方法实现，其语法结构如下所示：

attr({key0:value0,key1:value1})

(3)删除元素属性

jQuery 中通过 attr() 方法设置元素的属性后，使用 removeAttr() 方法可以将元素的属性删除，其语法结构如下所示：

removeAttr(name)

其中，参数 name 为元素属性的名称。

<body>
<ul title="新闻列表">
    <li>这是第一条新闻</li>
    <li>这是第二条新闻</li>
    <li>这是第三条新闻</li>
    <li>这是第四条新闻</li>
</ul>
<input type="button" value="属性操作" id="btn"/>
<script>
    $("#btn").click(function () {
        console.info($("ul").attr("title"));
        $("ul").attr("title", "我的新闻列表");
        $("ul").attr({"title": "我的新闻列表", class: "list"});
        $("ul").removeAttr("title");
    })
</script>
</body>

样式操作

在页面中，元素的样式操作包含直接设置样式、增加 CSS 类别、类别切换、删除类别四部分。

(1)直接设置元素样式

在 jQuery 中可以通过 css() 方法直接为某个指定的元素设置样式值，其语法结构如下所示：

css(name,value)

其中 name 为样式名称，value 为样式的值，比如可以使用下面的代码使 p 元素字体变粗，其语法结构如下所示：

$("p").css("font-weight","bold");

(2)增加 CSS 类别

通过 addClass() 方法可以增加元素类别的名称，其语法结构如下所示：

addClass(class)

其中，参数 class 为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法结构如下所示：

addClass(class0 class1..)

(3)类别切换

通过 toggleClass() 方法可以切换不同的元素类别，其语法结构如下所示：toggleClass(class) 其中参数 class 为类别名称，其功能是当元素中含有名称为 class 的 CSS 类别时，删除该类别名称，否则增加一个该名称的 CSS 类别。

$(".div_frame").click(functionO{
    $(this).toggleClass("divred");
})

(4)删除类别

与增加 CSS 类别的 addClass() 方法相对应，removeClass() 方法则用于删除类别，其语法结构如下所示：

removeClass([class])

其中，参数 class 为类别名称，该名称是可选项，当选择该名称时，则删除名称是 class 的类别，有多个类别时用空格隔开。如果不选择该名称，则删除元素中的所有类别。

案例：

<body>
<ul title="新闻列表">
    <li>这是第一条新闻</li>
    <li>这是第二条新闻</li>
    <li>这是第三条新闻</li>
    <li class="red add">这是第四条新闻</li>
</ul>
<input type="button" value="样式操作" id="btn"/>
<script>
    $("#btn").click(function () {
        $("li:eq(0)").css("font-weight", "bold");
        $("li:eq(1)").addClass("red")
        $("li:eq(2)").toggleClass("red")
        $("li:eq(3)").removeClass("red")
        $("li:eq(3)").removeAttr("class")
    })
</script>
</body>

练习：1.按照设计图完成如下编码，素材下载。
在这里插入图片描述
参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>章节练习</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .loadTxt {
            height: 50px;
            line-height: 50px;
            width: 531px;
            text-align: center;
            font-size: 30px;
            color: #29B6FF;
            font-family: Arial;
            margin: 0 auto;
        }

        .loadBox {
            height: 15px;
            background: #F5FAFD url(img/test2.jpg) no-repeat left center;
            width: 471px;
            position: relative;
            padding: 0 30px;
            margin: 0 auto;
        }

        .loadBox img {
            position: absolute;
            left: 50px;
            top: 0;
        }
    </style>
</head>
<body>

<div class="loadTxt">加载中<span>.</span><span>.</span><span>.</span></div>
<div class="loadBox">
    <img src="img/test1.jpg"/>
</div>

<script>
    var delVal = 50;
    function autoMove() {
        delVal++;
        if (delVal > 400) {
            delVal = 50;
        }
        $(".loadBox img").css("left", delVal);
    }

    setInterval(autoMove, 8);

    function autoTsq() {
        $(".loadTxt span").css("color", "#F5FAFD");
        setTimeout(function () {
            $(".loadTxt span").eq(0).css("color", "#29B6FF")
        }, 0);
        setTimeout(function () {
            $(".loadTxt span").eq(1).css("color", "#29B6FF")
        }, 500);
        setTimeout(function () {
            $(".loadTxt span").eq(2).css("color", "#29B6FF")
        }, 1000);
    }
    setInterval(autoTsq, 1500);
</script>
</body>
</html>

内容操作

在 jQuery 中，操作元素内容的方法包括 html() 和 text()，前者与 JavaScript 中的 innerHTML 属性相似，即获取和设置元素的 HTML 内容；而后者类似于 JavaScript 中的 innerText 属性，即获取或设置元素的文本内容。

二者的语法格式和功能区别如下所示。

html()            用于获取元素的HTML内容            无
html(value)       用于设置元素的HTML内容            参数为元素的HTML内容
text()            用于获取元素的文本内容            无
text(value)       用于设置元素的文本内容            参数为元素的文本内容

在 jQuery 中，如果要获取 input、select 元素的值，可以通过 val() 方法来实现，其语法结构如下所示：

val(value)

如果不带参数 value，则是获取元素的值：反之则是将参数 value 的值赋给元素，该方法常用于表单中获取和设置元素对象的值，另外通过 val() 方法还可以获取 select 元素的多个选项值，其语法结构如下所示：

val().join(",")

案例：

<body>
<div class="divframe">
    <select multiple="multiple">
        <option value="1">Item 1</option>
        <option value="2">Item 2</option>
        <option value="3">Item 3</option>
        <option value="4">Item 4</option>
        <option value="5">Item 5</option>
        <option value="6">Item 6</option>
    </select>
    <p></p>
</div>
<div>
    <input type="text"/>
    <p id="p2"></p>
</div>
<script>
    $("select").change(function () {
        //获取列表框所选中的全部选项的值
        var strSelect = $("select").val().join(",");
        $(this).siblings("p").html(strSelect);
    });

    $("input").change(function () {
        //获取文本框的值
        var strText = $("input").val();
        //显示选中的值
        $("#p2").html(strText);
    });

    $("input").focus(function () {
        //清空文本框的值
        $("input").val("");
    });
</script>
</body>

在 val(value) 方法中，如果有参数，其参数还可以是数组的形式，即 val(array)，其作用是设置元素被选中。

练习：手风琴菜单：按照如下设计图完成练习，点击对应的父菜单展开内部的子菜单。再次点击又折叠子菜单。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ov72om3V-1647143270577)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220308101758725.png)]$
参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #09fbd2;
            text-align: center;
        }

        .menu {
            text-align: left;
            width: 400px;
            margin: 20px auto;
        }

        .menu .list {
            border-bottom: 1px solid #324252;
            list-style: none;
            background: #3e5165;
        }

        .menu .list a {
            text-decoration: none;
            color: #fff;
            padding: 17px 0px 17px 45px;
            display: block;
            height: 100%;
        }

        .menu .list > a {
            padding-left: 10px;
        }

        .menu .list > a:before {
            content: "▶";
            margin-right: 10px;
            color: white;
        }

        .menu .list.active > a:before {
            content: "▼";
        }

        .menu .list > a:after {
            content: "△";
            float: right;
            margin-right: 20px;
            color: white;
        }

        .menu .list.active > a:after {
            content: "▽";
        }

        .menu .list a:hover {
            background-color: #576676;
            color: #09fbd2;
        }

        .menu .items li {
            background-color: #324252;
            padding: 0px;
            border-bottom: 1px solid #3e5165;
            list-style: none;
        }

        .menu .items {
            display: none;
        }

    </style>
    <script src="js/jquery.js"></script>
</head>
<body>
<h1>手风琴菜单(Accordion Menu)</h1>
<ul class="menu">
    <li class="list"><a href="#">系统管理</a>
        <ul class="items">
            <li><a href="#">用户管理</a></li>
            <li><a href="#">角色管理</a></li>
            <li><a href="#">资源管理</a></li>
        </ul>
    </li>

    <li class="list"><a href="#">商品配置</a>
        <ul class="items">
            <li><a href="#">商品分类</a></li>
            <li><a href="#">商品规格</a></li>
            <li><a href="#">商品价格</a></li>
        </ul>
    </li>
    <li class="list"><a href="#">业务管理</a>
        <ul class="items">
            <li><a href="#">订单业务</a></li>
            <li><a href="#">拼团业务</a></li>
            <li><a href="#">营销业务</a></li>
        </ul>
    </li>
</ul>
<script>
    $(".list a").click(function () {
        $(this).parent().toggleClass("active").find(".items").toggle()
    })
</script>

</body>
</html>

2.星级评分：使用 jquery 完成如下的星级评分模块。

在这里插入图片描述
参考代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>星级评分</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        .stars {
            margin: 10px;
            padding: 10px;
            border: 1px saddlebrown solid;
        }

        .stars span {
            float: left;
            height: 30px;
            line-height: 30px;
        }

        .stars i {
            width: 30px;
            height: 30px;
            line-height: 30px;
            float: left;
            margin-right: 30px;
            background: #ccc;
            color: #fff;
            text-align: center;
            cursor: default;
            font-style: normal;
        }

        .stars .on {
            color: #a71417;
        }

    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div class="stars">
    <span>商品评价：</span>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <input type="text"/>
</div>
<div class="stars">
    <span>商家评价：</span>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <input type="text"/>
</div>
<div class="stars">
    <span>物流评价：</span>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <i>★</i>
    <input type="text"/>
</div>

<script>

    $('.stars i').click(function () {
        let num = $(this).index();
        $(this).siblings('input').val(num);
    });

    $('.stars i').mouseover(function () {
        $(this).parent().children('i').removeClass('on');
        $(this).addClass('on').prevAll('i').addClass('on');
    });

    $('.stars i').mouseout(function () {
        $(this).parent().children('i').removeClass('on');
        let score = $(this).siblings('input').val();
        for (let i = 0; i < score; i++) {
            $(this).parent().find('i').eq(i).addClass('on');
        }
    });

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