jQuery练习t111

最新推荐文章于 2024-10-18 17:51:23 发布

虾米大王

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量219

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/112957414

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            font-size: 13px;
        }
        .iframe{
            width: 260px;
            border: 1px solid #666666;
        }
        .iframe .title{
            padding: 5px;
            background-color: #EEEEEE;
        }
        .iframe .content{
            padding: 8px;
            font-size: 12px;
        }
        .btn{
            border: 1px solid #666666;
            padding: 2px;
            width: 80px;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        var arrGrade = new Array(980886,980666);
        $(function () {
           $("#button1").click(function () {
               var strHtml = "";
               $.ajax({
                   url:"Xml/7-6.xml",
                   datatype:"xml",
                   success:function (data) {
                       $.each(arrGrade,function (i) {
                            var $strUser = $(data).find("User[grade="+ arrGrade[i] +"]");
                            strHtml += "<h3>grade:" + arrGrade[i] + "</h3>";
                            $strUser.each(function () {
                               strHtml += "name:" + $(this).children("name").text() + "<br>";
                               strHtml += "sex:" + $(this).children("sex").text() + "<br>";
                               strHtml += "email:" + $(this).children("email").text() + "<br><hr>";

                            });
                       });

                       $("#tip").html(strHtml);
                   }
               });
           });
        });
    </script>
</head>
<body>
<div class="iframe">
    <div class="title">
        <input type="button" id="button1" value="获取数据" class="btn">
    </div>
    <div class="content">
        <div id="tip"></div>
    </div>
</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8" ?>
<info>
    <User grade="980886">
        <name>taotao</name>
        <sex>nan</sex>
        <email>taotao@163.com</email>
    </User>
    <User grade="980886">
        <name>taotao</name>
        <sex>nan</sex>
        <email>taotao@163.com</email>
    </User>
    <User grade="980666">
        <name>taotao</name>
        <sex>nan</sex>
        <email>taotao@163.com</email>
    </User>
    <User grade="980666">
        <name>taotao</name>
        <sex>nan</sex>
        <email>taotao@163.com</email>
    </User>
    <User grade="980666">
        <name>taotao</name>
        <sex>nan</sex>
        <email>taotao@163.com</email>
    </User>
</info>