jquery总结

最新推荐文章于 2022-10-24 18:37:49 发布

gccv_

最新推荐文章于 2022-10-24 18:37:49 发布

阅读量76

点赞数

CC 4.0 BY-SA版权

文章标签： 1024程序员节

本文链接：https://blog.youkuaiyun.com/gccv_/article/details/127488718

此博客演示了使用jQuery进行DOM元素的选择、检查、删除、属性修改以及事件绑定和解绑。示例包括判断checkbox是否选中、获取和设置radio状态、绑定和解绑button的点击事件、修改img属性、动态生成和删除表格行，以及实现全选、批量删除功能。代码展示了如何在JavaScript中处理表单元素和响应用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作元素

jquery判断checkbox是否被选中

if($("#id").is(":checked"))

jquery获取选中的radio

var gender = $("input[name='gender']:checked").val();

jquery选中radio

$("input:radio[name='gender'][value='M']").attr("checked",'checked');

jquery对button进行绑定和解绑

$("#id").bind("click",function(){ // 要绑定的方法});

//解除绑定

$("#id").unbind("click");

jquery选取指定div中的img 并修改其属性

$("#replay_first img").each(function(){
   $(this).css("width","100%");
   $(this).css("height","20%");
});

当点击新的时候，首先清空元素

$("#list").empty();

当前点击的删除按钮的父辈元素且名字是tr的进行移除

$(this).parents("tr").remove();

获取当前复选框变成的状态

$(this).prop("checked");

筛选被勾选的复选框，删除他们父元素的tr行

$(".check:checked").parents("tr").remove();

案例：物品的刷新，删除，全选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>页面元素综合操作</title>
        <style type="text/css">
            *{
            border: none;
            }
        </style>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //实际开发这些数据不是写死的，通过后端程序读取数据库的内容，然后使用JQ动态生成的!
                //模拟一些数据，假设这些数据是通过后端程序读取的数据库内容
                var datda=[
                {"id":1,"name":"方便面","price":3.5,"brand":"白象"},
                    {"id":2,"name":"火腿肠","price":1.5,"brand":"双汇"},
                    {"id":3,"name":"牛奶","price":4.5,"brand":"蒙牛"},
                    {"id":4,"name":"瓜子","price":6.5,"brand":"金鸽"},
                    {"id":5,"name":"辣条","price":5.5,"brand":"卫龙"},
                    {"id":6,"name":"面包","price":3.5,"brand":"盼盼"},
                ]
                //刷新生成数据
                $("#refresh").click(function(){
                    //当点击新的时候，首先清空元素
                    $("#list").empty();
                    //1.定义标签变量
                    var dom="";
                    //2.读取data中的数据，把数据生成每一行的标签元素追加到dom变量中
                    for(var i=0;i<datda.length;i++){
                        var goods=datda[i];
                        dom+="<tr>"+
                                "<td><input type='checkbox' class='check'/></td>";
                        dom+="<td>"+goods.id+"</td>"+
                                "<td>"+goods.name+"</td>"+
                                "<td>"+goods.price+"</td>"+
                                "<td>"+goods.brand+"</td>";
                        dom+="<td>"+
                                "<a href='#'>购买</a>&nbsp;"+
                                "<button class='del'>删除</button>"+
                                "</td>"+
                            "</tr>";
                    }
                    $("#list").append(dom);
                })
                //click不能对动态生成的元素执事件绑定，必须使用on进行事件动态绑定
                //语法：  元素.on(事件名,元素里面那个标签绑定,function(){})
                $("#list").on('click','.del',function(){
                    //当前点击的删除按钮的父辈元素且名字是tr的进行移除
                    $(this).parents("tr").remove();
                });
                //点击全选，勾选列表中的所有的复选框
                $("#checkAll").click(function(){
                    //获取当前复选框变成的状态
                    var flag=$(this).prop("checked");
                    if(flag){
                        //全选被勾选了，把id为list里面所有的class为check的复选框设置勾选
                        $("#list .check").prop("checked",true);
                    }else{
                        //全选被取消了，把id为list里面所有的class为check的复选框设置勾选
                        $("#list .check").prop("checked",false);
                    }
                })
                //批量删除
                $("#batchDel").click(function(){
                    //筛选class叫做check的复选框，而且状态被勾选，删除他们父元素的tr行
                    $(".check:checked").parents("tr").remove();
                })
            })
        </script>
    </head>
    <body>
        <button id="refresh">刷新</button>
        <hr />
        <table border="" cellspacing="" cellpadding="">
            <thead>
                <tr>
                <th>勾选</th>
                <th>编号</th>
                <th>名称</th>
                <th>价格</th>
                <th>名牌</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="list">
                
            </tbody>
        </table>
        <div id="">
            <input type="checkbox" name="" class="check" id="checkAll"/>
            <span >全选&nbsp;&nbsp;&nbsp;</span>
            <button id="batchDel">删除</button>
        </div>
    </body>
</html>