《Web前端设计与开发》实验八：Ajax 与 jQuery 编程实验

最新推荐文章于 2022-05-20 20:26:18 发布

山河不夜天Ajatar

最新推荐文章于 2022-05-20 20:26:18 发布

阅读量1.4k

点赞数 2

分类专栏：前端开发文章标签： css html web

本文链接：https://blog.csdn.net/weixin_43795975/article/details/110481236

版权

前端开发专栏收录该内容

15 篇文章 9 订阅

订阅专栏

一、实验内容

（选择器练习 1）利用 jQuery 选择器实现表格的全选，取消选择，单击更改选中状态，反选等功能。如图所示。点击全选按钮，选中所有行，点击取消按钮，所有行为未选中状态，单击反选按钮，则选中的行变成未选中的；未选中的行变成选中的。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器练习1</title>
        <script src="../../lianxi/jquery-3.3.1.min.js"></script>
        <script src="../js/选择器练习1.js"></script>
        <link type="text/css" rel="stylesheet" href="../css/选择器练习1.css">
    </head>
    <body>
    <div>
        <div>
            <button>全选</button>
            <button>取消选中</button>
            <button>反选</button>
        </div>
        <table border="1" cellspacing="0">
            <tr class="head">
                <td width="100" align="center">编号</td>
                <td width="100" align="center">姓名</td>
                <td width="100" align="center">性别</td>
                <td width="100" align="center">年龄</td>
                <td width="100" align="center">地址</td>
            </tr>
            <tr class="center">
                <td>1</td>
                <td>张三</td>
                <td>男</td>
                <td>26</td>
                <td>重庆市</td>
            </tr>
            <tr class="center">
                <td>2</td>
                <td>李四</td>
                <td>男</td>
                <td>24</td>
                <td>重庆市</td>
            </tr>
            <tr class="center">
                <td>3</td>
                <td>王五</td>
                <td>男</td>
                <td>24</td>
                <td>重庆市</td>
            </tr>
            <tr class="center">
                <td>4</td>
                <td>赵六</td>
                <td>女</td>
                <td>22</td>
                <td>重庆市</td>
            </tr>
            <tr class="center">
                <td>5</td>
                <td>田七</td>
                <td>女</td>
                <td>25</td>
                <td>重庆市</td>
    </tr>
        </table>
    </div>
    </body>
</html>

.head {
    background-color: #898989;
    text-align: center;
}

.selected{
    background-color: dimgrey;
}

$(document).ready(function() {
    //全选
    $("button:eq(0)").click(function () {
        $("tr").addClass("selected")
            .siblings(".head").removeClass("selected");
    })
    //取消全选
    $("button:eq(1)").click(function () {
        $("tr").removeClass("selected")
        // .siblings(".head").addClass("selected");
    })
    //点击
    $(".center").click(function () {
        var x=$(this).hasClass("selected")
            if(x==false){
                $(this).addClass("selected");
            }
            else{
                $(this).removeClass("selected");
            }

    })
    //反选
    $("button:eq(2)").click(function () {
        console.dir()
        // .siblings(".head").addClass("selected");
        $(".center").toggleClass("selected")
    })
})

（DOM 操作练习 2）点击“选中添加到右边”讲选中项移动到右侧下拉框，如图 2-2 所示

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../../lianxi/jquery-3.3.1.min.js"></script>
        <script src="../js/DOM操作练习2.js"></script>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
            #box {
                width: 400px;
                height: 400px;
                margin: auto;
                padding: 5px 20px;
                position: relative;
                border: 1px solid black;
            }
            ul li {
                list-style: none;
                text-align: left;
            }
            ul {
                width: 125px;
                height: 200px;
                border: 1px solid black;
                display: inline-block;
            }
            #leftBox {
                position: absolute;
                left: 46px;
                top: 13px;
            }
            #rightBox {
                position: absolute;
                right: 46px;
                top: 13px;
            }
            .button {
                display: inline-block;
                background: palevioletred;
                position: absolute;
            }
            .nw {
                top: 265px;
                left: 40px;
            }
            .ne {
                top: 265px;
                left: 263px;
            }
            .sw {
                left: 40px;
                top: 318px;
            }
            .se {
                top: 319px;
                left: 263px;
            }
            .selected {
                background: indianred;
            }

            .hidden {
                display: none;
            }



        </style>
    </head>
    <body>
    <div id="box">
      <span id="leftBox">
        <ul>
          <li>选项1</li>
          <li>选项2</li>
          <li>选项3</li>
          <li>选项4</li>
          <li>选项5</li>
          <li>选项6</li>
          <li>选项7</li>
          <li>选项8</li>
        </ul>
      </span>
        <span id="rightBox">
        <ul>
          <li>选项1</li>
          <li>选项2</li>
          <li>选项3</li>
          <li>选项4</li>
          <li>选项5</li>
          <li>选项6</li>
          <li>选项7</li>
          <li>选项8</li>
        </ul>
      </span>
        <div class="button nw" onclick="choseSelected()">选中添加到右边>></div>
        <div class="button sw" onclick="choseAll()">全部添加到右边>></div>
        <div class="button ne" onclick="removeSelected()">
            &lt;&lt;选中删除到左边
        </div>
        <div class="button se" onclick="removeAll()">&lt;&lt;全部删除到左边</div>
    </div>
    </body>
</html>

//左边框点击功能
$(function () {
    $("#box #leftBox li").click(function () {
        var clicked = getIndex($(this).html());
        $(this).toggleClass("selected");
        $("#box #rightBox li").eq(clicked).toggleClass("selected");
    });
});

//右边框点击功能
$(function () {
    $("#box #rightBox li").click(function () {
        var clicked = getIndex($(this).html());
        $(this).toggleClass("selected");
        $("#box #leftBox li").eq(clicked).toggleClass("selected");
    });
});

//得到索引
function getIndex(str) {
    return str[2] - 1;
}

//载入时隐藏右边框
window.onload = function () {
    $("#box #rightBox li").addClass("hidden");
};

function choseSelected() {
    $("#box #leftBox li.selected").addClass("hidden");
    $("#box #rightBox li.selected").removeClass("hidden");
}
function choseAll() {
    $("#box #leftBox li").addClass("hidden");
    $("#box #rightBox li").removeClass("hidden");
}
function removeSelected() {
    $("#box #leftBox li.selected").removeClass("hidden");
    $("#box #rightBox li.selected").addClass("hidden");
}
function removeAll() {
    $("#box #leftBox li").removeClass("hidden");
    $("#box #rightBox li").addClass("hidden");
}

（jQuery 动画练习 3）修改练习 1 中的表格，为表格添加光棒效果，当鼠标移入某一行时，对应行出现光棒效果（高亮鼠标移入行）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器练习1</title>
    <script src="../../lianxi/jquery-3.3.1.min.js"></script>
    <script src="../js/jQuery%20动画练习3.js"></script>
    <link type="text/css" rel="stylesheet" href="../css/jQuery%20动画练习3.css">
</head>
<body>
<div>
    <div>
        <button>全选</button>
        <button>取消选中</button>
        <button>反选</button>
    </div>
    <table border="1" cellspacing="0">
        <tr class="head">
            <td width="100" align="center">编号</td>
            <td width="100" align="center">姓名</td>
            <td width="100" align="center">性别</td>
            <td width="100" align="center">年龄</td>
            <td width="100" align="center">地址</td>
        </tr>
        <tr class="center">
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>26</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>24</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td>24</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>4</td>
            <td>赵六</td>
            <td>女</td>
            <td>22</td>
            <td>重庆市</td>
        </tr>
        <tr class="center">
            <td>5</td>
            <td>田七</td>
            <td>女</td>
            <td>25</td>
            <td>重庆市</td>
        </tr>
    </table>
</div>
</body>
</html>

$(document).ready(function() {
    //全选
    $("button:eq(0)").click(function () {
        $("tr").addClass("selected")
            .siblings(".head").removeClass("selected");
    })
    //取消全选
    $("button:eq(1)").click(function () {
        $("tr").removeClass("selected")
        // .siblings(".head").addClass("selected");
    })
    //点击
    $(".center").click(function () {
        var x=$(this).hasClass("selected")
        if(x==false){
            $(this).addClass("selected");
        }
        else{
            $(this).removeClass("selected");
        }

    })
    //反选
    $("button:eq(2)").click(function () {
        console.dir()
        // .siblings(".head").addClass("selected");
        $(".center").toggleClass("selected")
    })
    //光棒
    $(".center").hover(
         function(){
             $(this).css("background","pink");
         },
         function(){
             $(this).css("background","");
         })
})