JavaScript之jQuery框架案例

小鱼儿 2021-05-03 05:48 477阅读 0赞

## 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>