HTML 之 JQuery

最新推荐文章于 2024-07-03 21:14:45 发布

一個頭像用四年

最新推荐文章于 2024-07-03 21:14:45 发布

阅读量294

点赞数

文章标签： jquery html javascript ajax api

本文链接：https://blog.csdn.net/huzongnan/article/details/79586261

版权

Jquery

jQuery是一个快速，小巧，功能丰富的JavaScript库。
它使诸如HTML文档遍历和操作，事件处理，动画和Ajax等事情变得简单得多，
它具有可在多种浏览器中工作的易于使用的API。
结合多功能性和可扩展性

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
                background-color: black;
                color: white;
            }
            body div{
                background-color: red;
                margin: 50px auto;
                text-align: center;
            }
            .item{
                width: 100px;
                height: 100px;
                line-height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="item">1</div>
        <div class="item">2</div>
    </body>
    <!-- 引入 jQuery -->
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // jQuery
        // 获取元素:$("选择器") 获取和选择器相匹配的所有元素

        // 修改样式
        $(".item").css("color", "purple"); // 设置单个属性
        $(".item").css({"color": "white", "background-color": "purple", "border": "1px white solid"}); // 设置多个属性, 参数是对象
        $(".item").css({"width": function(index, oldValue){
            console.log(index, oldValue);
            return (index + 1) * 100;
        }, "height": function(index, oldValue){
            console.log(index, oldValue);
            return (index + 1) * 100;
        }, "line-height": function(index, oldValue){
            // line-height 是特殊属性,可以接收数值,相当于倍数
            console.log(index, oldValue);
            return (index + 1) * 100 + "px";
        }});
        // 获取元素属性,只能获取到第一个
        // 设置元素属性是对所有的元素生效
        console.log($(".item").css("width"));
        // 修改内容 innerText innerHTML value
        $("div").text("hello world~");
        // 通过 JQ 的选择器获取到的是 JQ 对象
        // 通过原生方法获取到的是原生对象
        // JQ 对象只能调用 JQ 的方法, 原生对象只能调用原生的方法, 但是 JQ 可以和 JS 混编

        // 原生对象 -> JQ 对象
        var item = document.getElementsByClassName("item")[0];
        $(item); // 将 item 转换为 JQ 对象
        $(".item"); // 获取 .item 对象
        // 两种表达的意思不同

        // JQ 对象 -> 原生对象
        $(".item")[1].innerHTML = "也是JQ 对象转原生对象";
        $(".item").get(0).innerHTML = "JQ 转原生";
        // JQ 里获取第几个, eq 获取到的是 JQ 对象
        $(".item").eq(0).html("这是第一个");

        // 破坏性操作和会到破坏性操作之前
        $(".item").css("background-color", "purple").parent().css("border", "5px red solid").end().css("height", "200px"); // parent() 对父级的操作, end() 找到最近一次的破坏性操作,继续对当前元素的操作

        // 移交$的控制权
        // jQuery(".item") 等价于 $(".item");
        // var test = jQuery.noConflict(); // 从此以后不再使用$代表 JQ, 但是不对之前的代码产生影响, 使用 test 代表 JQ
        // test(".item");

        // 创建元素
        $("<div></div>").html("新的 JQ 对象").appendTo($("body"));

        // 添加元素
        // A.append(B) A 中添加 B, A 为父级
        // A.appendTo(B) 把 A 加到 B 中, B 为父级

        // A.after(B) A 后面添加 B, A 在前面
        // A.insertAfter(B) 把 A 插入到 B 后面, B 在前面

        // 删除元素
        // remove() 删除元素, 同时清空绑定的事件
        // empty() 删除元素内容,元素本身还在
        // detach() 删除元素, 不清空绑定的事件

        // DOM 属性(childNodes children parentNode)
        // className

        // JQ 对象设置属性
        // attr 设置的属性都会被添加到标签上,也能读取到标签上的自定义属性,prop 则不能
        // prop 可以读取到原生对象的一些自带属性和自定义属性, attr则不能
        // $(".item").attr("title", "这是提示");
        $(".item").prop("title", "这是提示");

        // 事件 - 事件对象
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jquery2</title>
        <style type="text/css">
            .redDiv{
                width: 100px;
                height: 100px;
                background-color: red;
                /*display: none;*/
                /*opacity: 0;*/
                /* 可见性 visible 可见
                     hidden 隐藏
                */
                /*visibility: visible;*/
            }
        </style>
    </head>
    <body>
        <div class="redDiv"></div>
        <input type="button" value="显示">
    </body>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(":button").click(function(){
            // $(".redDiv").show("slow", );
            $(".redDiv").slideUp(1000);
        });

        // 元素可以直接绑定某个事件(必须是 JQ 支持的)
        $("div").reset(function(){

        })
        // 对于不能直接绑定的,使用 on 来绑定
        // on 4 个参数
        $("from").on("submit", f1);
        $("from").on("submit", f2);
        // 移除所有事件
        $("from").off();
        // 移除所有点击事件
        $("from").off("click");
        // 移除和f1绑定的点击事件
        $("from").off("click", f1);
        function f1(){

        }
        function f2(){

        }
    </script>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>购物车</title>
        <style type="text/css">
            table{
                margin: 20px auto;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <table border="1" width="800" height="500">
            <tr height="100">
                <td>
                    <input type="checkbox" class="checkboxall">全选
                </td>
                <td>商品</td>
                <td>单价</td>
                <td>数量</td>
                <td>小计</td>
                <td>操作</td>
            </tr>
            <tr class="commodity">
                <td>
                    <input type="checkbox" class="checkbox">
                </td>
                <td>佳能</td>
                <td class="price">100</td>
                <td>
                    <input type="button" value="-" class="minus" />
                    <input type="text" value="0"/>
                    <input type="button" value="+" class="add" />
                </td>
                <td class="subtotal">0</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr  class="commodity">
                <td>
                    <input type="checkbox" class="checkbox">
                </td>
                <td>佳能</td>
                <td class="price">200</td>
                <td>
                    <input type="button" value="-" class="minus" />
                    <input type="text" value="0"/>
                    <input type="button" value="+" class="add" />
                </td>
                <td class="subtotal">0</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr  class="commodity">
                <td>
                    <input type="checkbox" class="checkbox">
                </td>
                <td>佳能</td>
                <td class="price">300</td>
                <td>
                    <input type="button" value="-" class="minus" />
                    <input type="text" value="0"/>
                    <input type="button" value="+" class="add" />
                </td>
                <td class="subtotal">0</td>
                <td>
                    <input type="button" value="删除" class="delete" />
                </td>
            </tr>
            <tr height="100">
                <td colspan="6">
                    <input type="button" value="删除所有" class="deleteall" />
                    已选择商品<span class="pitch">0</span> 
                    合计:￥<span class="total">0</span>
                </td>
            </tr>
        </table>
    </body>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(".add").click(function(){
            var num = $(this).prev().val();
            $(this).prev().val(++num);
            $(this).parent().next().text(num * $(this).parent().prev().text());
            if ($(this).parent().prev().prev().prev()) {}
        });
        $(".minus").click(function(){
            var num = $(this).next().val();
            if (num > 0) {
                $(this).next().val(--num);
                $(this).parent().next().text(num * $(this).parent().prev().text());
            }
        });
        $(".delete").click(function(){
            $(this).parent().parent().remove();
        });
        $(".deleteall").click(function(){
            $(".delete").parent().parent().remove();
        });
        $(".checkboxall").click(function(){
            if ($(this).prop("checked") == true) {
                $(".checkbox").prop("checked", true);
                $(".pitch").text(3);
            } else{
                $(".checkbox").prop("checked", false);
                $(".pitch").text(0);
            }
        });
        $(".checkbox").click(function(){
            var num = $(".pitch").text();
            if ($(this).prop("checked") == true) {
                $(".pitch").text(++num);
            } else{
                $(".pitch").text(--num);
            }
        });
    </script>
</html>

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="购物车.css">
        <link rel="stylesheet" type="text/css" href="reset.css">
    </head>
    <body>
        <table class="box" border="1">
            <tr class="header">
                <td width="90">
                    <input type="checkbox" id="selectAll" />
                    <label for="selectAll">全选</label>
                </td>
                <td width="230">商品</td>
                <td width="173">单价</td>
                <td width="127">数量</td>
                <td width="197">小计</td>
                <td>操作</td>
            </tr>
            <tr>
                <td class="check">
                    <input type="checkbox" class="checkt" />
                </td>
                <td class="proName">
                    <img src="" alt="" />
                    <span>佳能</span>
                </td>
                <td class="proPirce"> 
                    <span>100</span>
                </td>
                <td class="proCount">
                    <input type="button" value="-" class="ys" />
                    <input type="text" class="count" value="0" />
                    <input type="button" value="+" class="ys"/>
                </td>
                <td class="proMoney">
                    <span>0</span>
                </td>
                <td>
                    <input type="button" value="删除" class="proDel" />
                </td>
            </tr>
            <tr>
                <td class="check">
                    <input type="checkbox"  class="checkt"/>
                </td>
                <td class="proName">
                    <img src="" alt="" />
                    <span>佳能</span>
                </td>
                <td class="proPirce"> 
                    <span>200</span>
                </td>
                <td class="proCount">
                    <input type="button" value="-" class="ys" />
                    <input type="text" class="count" value="0" />
                    <input type="button" value="+" class="ys"/>
                </td>
                <td class="proMoney">
                    <span>20</span>
                </td>
                <td>
                    <input type="button" value="删除" class="proDel" />
                </td>
            </tr>
            <tr>
                <td class="check">
                    <input type="checkbox" class="checkt" />
                </td>
                <td class="proName">
                    <img src="" alt="" />
                    <span>佳能</span>
                </td>
                <td class="proPirce"> 
                    <span>300</span>
                </td>
                <td class="proCount">
                    <input type="button" value="-" class="ys" />
                    <input type="text" class="count" value="0" />
                    <input type="button" value="+" class="ys"/>
                </td>
                <td class="proMoney">
                    <span>10</span>
                </td>
                <td>
                    <input type="button" value="删除" class="proDel" />
                </td>
            </tr>

            <tr class="footer">
                <td colspan="6">
                    <div class="delAll">删除所有</div>
                    <div class="proTotal">已选商品<span>0</span>件</div>
                    <div class="totalPirces">合计：￥<span>0</span></div>
                </td>
            </tr>
        </table>
    </body>
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
        // 购物车
        // 1、全选：改变所有的单选 改变合计和件数
        $("#selectAll").click(function(){
            // 改变所有的单选 
            $(".checkt").prop("checked", this.checked);
            // 改变合计和件数
            change();
        })

        // 2、单选：改变全选   改变合计和件数
        $(".checkt").click(function(){
            // 改变合计和件数
            change();
        })
        // 3、加减：改变数量 改变小计  改变合计或件数
        $(".ys").click(function(){
            //改变数量  
            var ys = this;
            var count = 0;
            $(this).siblings(".count").val(function(index, oldValue){
                count = Number(oldValue) + Number(ys.value + 1)
                return count;
            })
            // 改变小计
            var res = count * $(this).parents("tr").find(".proPirce span").html();
            $(this).parents("tr").find(".proMoney span").html(res);
            //改变合计或件数
            change();
        })


        // 4、删除：删除tr 改变全选 改变合计和件数
        $(".proDel").click(function(){
            // 删除tr 
            $(this).parents("tr").remove();
            // 改变合计和件数
            change();
        })
        // 5、删除所有： 取消全选 改变合计和件数
        $(".delAll").click(function(){
            $(".checkt:checked").parents("tr").remove();
            change();
            $("#selectAll").prop("checked", false);
        })

        function change(){
            // 改变全选 
            var res = $(".checkt:checked").length == $(".checkt").length
            $("#selectAll").prop("checked", res);


            // 改变合计
            var all = 0;
            $(".checkt:checked").parents("tr").find(".proMoney span").each(function(index,obj){
                all += Number(obj.innerHTML);
            })
            $(".totalPirces span").html(all);
            // 改变件数
            var count = $(".checkt:checked").length;
            $(".proTotal span").html(count);
        }
    </script>
</html>

table.box{
    width: 900px;
    height:350px;
    margin: 50px auto;
    border-color: #a7cbff;
    border-collapse: collapse;
    text-align: center;
}
.box tr.header td{
    height: 32px;
    background-color: #e2f2ff;
    border-top: 3px solid #a7cbff;
}
.box tr.footer td{
    height: 50px;
    background-color: #eaeaea;
}
.box tr.footer div{
    float: left;
}
.box tr.footer .delAll{
    margin: 0px 500px 0px 50px;
}
.box tr.footer .proTotal{
    margin-right: 50px;
}
div span{
    color: red;
}
.box td .count{
    width: 50px;
}
.box td input{
    text-align: center;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <!-- <link rel="stylesheet" href="reset.css"> -->
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 960px;
                margin: 0 auto;
                padding: 0;
                border: 1px white solid;
            }
            .screen, .stature, .age, .sex{
                width: 920px;
                height: 30px;
                margin: 0 20px;
                line-height: 30px;
                border-bottom: 1px #FFFFFF55 solid;
            }
            .screen{
                margin-top: 10px;
            }
            .screen div{
                float: left;
            }
            .stature div, .age div, .sex div{
                float: left;
                padding: 0 20px 0 0;
            }
            .staturenum, .agenum, .sexnum{
                padding: 0 10px 0 10px;
            }
            table{
                margin: 10px 20px 0;
                text-align: center;
            }
            td{
                width: 100px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <!-- 整体框架 -->
        <div class="box">
            <!-- 筛选条件 -->
            <div class="screen">
                <div class="allres">全部结果</div>
                <div class="people">&nbsp&gt&nbsp"人"</div>
            </div>
            <!-- 身高 -->
            <div class="stature">
                <div>身高:</div>
                <div class="staturenum" value="1">160以下</div>
                <div class="staturenum" value="2">160-180</div>
                <div class="staturenum" value="3">180以上</div>
            </div>
            <!-- 年龄 -->
            <div class="age">
                <div>年龄:</div>
                <div class="agenum" value="1">18以下</div>
                <div class="agenum" value="2">18-30</div>
                <div class="agenum" value="3">30以上</div>
            </div>
            <!-- 性别 -->
            <div class="sex">
                <div class="sexnum">性别:</div>
                <div class="sexnum" value="1">男</div>
                <div class="sexnum" value="2">女</div>
            </div>
            <table border="1">
                <tr>
                    <td>姓名</td>
                    <td>身高</td>
                    <td>年龄</td>
                    <td>性别</td>
                </tr>
            </table>
        </div>
    </body>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        var list = '[{"name":"1", "stature":"159", "age":"17", "sex":"男"}, {"name":"2", "stature":"159", "age":"20", "sex":"男"}, {"name":"3", "stature":"159", "age":"35", "sex":"男"}, {"name":"4", "stature":"159", "age":"17", "sex":"女"}, {"name":"5", "stature":"159", "age":"20", "sex":"女"}, {"name":"6", "stature":"159", "age":"35", "sex":"女"}, {"name":"7", "stature":"175", "age":"17", "sex":"男"}, {"name":"8", "stature":"175", "age":"20", "sex":"男"}, {"name":"9", "stature":"175", "age":"35", "sex":"男"}, {"name":"10", "stature":"175", "age":"17", "sex":"女"}, {"name":"11", "stature":"175", "age":"20", "sex":"女"}, {"name":"12", "stature":"175", "age":"35", "sex":"女"}, {"name":"13", "stature":"185", "age":"17", "sex":"男"}, {"name":"14", "stature":"185", "age":"20", "sex":"男"}, {"name":"15", "stature":"185", "age":"35", "sex":"男"}, {"name":"16", "stature":"185", "age":"17", "sex":"女"}, {"name":"17", "stature":"185", "age":"20", "sex":"女"}, {"name":"18", "stature":"185", "age":"35", "sex":"女"}, {"name":"19", "stature":"178", "age":"22", "sex":"男"}, {"name":"20", "stature":"178", "age":"22", "sex":"女"}]';
        var json = $.parseJSON(list);
        $(json).each(function(){
            $("table").append("<tr><td>" + this.name + "</td><td>" + this.stature + "</td><td>" + this.age + "</td><td>" + this.sex + "</td></tr>");
        });
        $(".staturenum").click(function(){
            switch($(this).attr("value")){
                case "1":
                    $("tr:gt(0) td:nth-child(2)").each(function(index, obj){
                        console.log($(this).text());
                        if ($(this).text() > 160) {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
                case "2":
                    $("tr:gt(0) td:nth-child(2)").each(function(index, obj){
                        console.log($(this).text());
                        if ($(this).text() < 160 || $(this).text() > 180) {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
                case "3":
                    $("tr:gt(0) td:nth-child(2)").each(function(index, obj){
                        console.log($(this).text());
                        if ($(this).text() < 180) {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
            }
            $(this).parent().css("display", "none");
            $(".people").append("<div class=" + "nbsp" +">&nbsp&gt&nbsp</div>").append("<div class=" + "condition value=" + "1" + ">" + $(this).text() + "</div>").append("<div class=" + "miss" + ">&nbsp✘&nbsp</div>");
            miss();

        });
        $(".agenum").click(function(){
            switch($(this).attr("value")){
                case "1":
                    $("tr:gt(0) td:nth-child(3)").each(function(index, obj){
                        console.log($(this).text());
                        if ($(this).text() > 18) {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
                case "2":
                    $("tr:gt(0) td:nth-child(3)").each(function(index, obj){
                        console.log($(this).text());
                        if ($(this).text() < 18 || $(this).text() > 30) {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
                case "3":
                    $("tr:gt(0) td:nth-child(3)").each(function(index, obj){
                        console.log($(this).text());
                        if ($(this).text() < 30) {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
            }
            $(this).parent().css("display", "none");
            $(".people").append("<div class=" + "nbsp" +">&nbsp&gt&nbsp</div>").append("<div class=" + "condition value=" + "2" + ">" + $(this).text() + "</div>").append("<div class=" + "miss" + ">&nbsp✘&nbsp</div>");
            miss();

        });
        $(".sexnum").click(function(){
            switch($(this).attr("value")){
                case "1":
                    $("tr:gt(0) td:nth-child(4)").each(function(index, obj){
                        if ($(this).text() == "女") {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
                case "2":
                    $("tr:gt(0) td:nth-child(4)").each(function(index, obj){
                        if ($(this).text() == "男") {
                            $(this).parent().css("display", "none");
                        }
                    })
                    break;
            }
            $(this).parent().css("display", "none");
            $(".people").append("<div class=" + "nbsp" +">&nbsp&gt&nbsp</div>").append("<div class=" + "condition value=" + "3" + ">" + $(this).text() + "</div>").append("<div class=" + "miss" + ">&nbsp✘&nbsp</div>");
            miss();
        });
        $(".allres").click(function(){
            $(".stature").css("display", "block");
            $(".sex").css("display", "block");
            $(".age").css("display", "block");
            $(".condition").remove();
            $(".miss").remove();
            $(".nbsp").remove();
            $("tr").css("display", "table-row");
        });
        function miss(){
            $(".miss").click(function(){
                if ($(this).prev().attr("value") == 1) {
                    $(".stature").css("display", "block");
                    switch($(this).prev().text()){
                        case "160以下":
                            $("tr:gt(0) td:nth-child(2)").each(function(index, obj){
                                console.log($(this).text());
                                if ($(this).text() > 160) {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                        case "160-180":
                            $("tr:gt(0) td:nth-child(2)").each(function(index, obj){
                                console.log($(this).text());
                                if ($(this).text() < 160 || $(this).text() > 180) {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                        case "180以上":
                            $("tr:gt(0) td:nth-child(2)").each(function(index, obj){
                                console.log($(this).text());
                                if ($(this).text() < 180) {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                    }
                } else if ($(this).prev().attr("value") == 2) {
                    $(".age").css("display", "block");
                    switch($(this).prev().text()){
                        case "18以下":
                            $("tr:gt(0) td:nth-child(3)").each(function(index, obj){
                                console.log($(this).text());
                                if ($(this).text() > 18) {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                        case "18-30":
                            $("tr:gt(0) td:nth-child(3)").each(function(index, obj){
                                console.log($(this).text());
                                if ($(this).text() < 18 || $(this).text() > 30) {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                        case "30以上":
                            $("tr:gt(0) td:nth-child(3)").each(function(index, obj){
                                console.log($(this).text());
                                if ($(this).text() < 30) {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                    }
                } else if ($(this).prev().attr("value") == 3) {
                    $(".sex").css("display", "block");
                    switch($(this).prev().text()){
                        case "男":
                            $("tr:gt(0) td:nth-child(4)").each(function(index, obj){
                                if ($(this).text() == "女") {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                        case "女":
                            $("tr:gt(0) td:nth-child(4)").each(function(index, obj){
                                if ($(this).text() == "男") {
                                    $(this).parent().css("display", "table-row");
                                }
                            })
                            break;
                    }
                }
                $(this).prev().remove();
                $(this).prev().remove();
                $(this).remove();
            });
        }
    </script>
</html>