JavaScript之jQuery框架案例

最新推荐文章于 2021-09-06 18:44:48 发布

码说芯语

最新推荐文章于 2021-09-06 18:44:48 发布

阅读量322

点赞数

本文链接：https://blog.csdn.net/YYBDESHIJIE/article/details/106438622

版权

1、什么是jQuery?

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <style type="text/css">
        table{
            border: 1px solid springgreen;
            width: 500px;
            border-collapse: collapse;
        }
        table th,td{
         border: 1px solid springgreen;
         text-align: center;
        }
     </style>
     <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
     <script type="text/javascript">
      //相当于window.onload
      $(document).ready(function(){
        $("#btn").click(function(){
            //点击之后，调Ajax, $.ajax就表示发送一个ajax请求
            $.ajax({
                type:"get",
                url:"http://123.57.7.108:83/product.json",
                dataType:"json",
                sync:true,
                headers:{"Content-Type":"application/x-www-form-urlencoded"},
                success:function(data){//data就是返回的数据
                    //得到数据之后进行dom操作
                    for(let i=0;i<data.length;i++){
                        var tr=`
                        <tr>
                         <td>
                            <input type="checkbox" name="ck"/ >
                          </td>
                         <td>${data[i].id}</td>
                         <td>${data[i].name}</td>
                         <td>
                          <img style="width:150px;height:150px" src="http://123.57.7.108:81 /${data[i].image}"/>
                         </td>
                       <td>${data[i].price}</td>
                       <td>${data[i].spuId}</td>
                       </tr>
                        `;
                        //将tr追加到表格当中
                        $("#tbl").append(tr);
                    }
                }
            });
        });
      });
     </script>
</head>
<body>
    <h1>Jqurey-Ajax实战案例</h1>
    <h2>
        <button id="btn" type="button">刷新</button>
    </h2>
    <table id="tbl">
        <thead>
            <tr>
                <th>
                    全选
                    <input type="checkbox" name="all" id="all" />
                </th>
                <th>编号</th>
                <th>名称</th>
                <th>图片</th>
                <th>价格</th>
                <th>类型</th>
            </tr>
        </thead>
        <tbody>
    
        </tbody>
    </table>
</body>
</html>

码说芯语

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之jQuery框架案例

1、什么是jQuery?jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的
复制链接

扫一扫