• day17--JQuery实例


        1、表格选择框--全选,反选,取消

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <input type="button" value="取消" onclick="cancleAll();"/>
        <table border="2">
            <thead>
                <tr><th>选项</th><th>IP</th><th>端口</th></tr>
            </thead>
            <tbody id="i1">
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            </tbody>
        </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function checkAll(){
                $("#i1 :checkbox").prop('checked', true);
            }
            function cancleAll(){
                $('#i1 :checkbox').prop('checked',false);
            }
            function reverseAll(){
                $('#i1 :checkbox').each(function(){
                    //this,代指当前循环的每一个元素
                    //k是循环的下标
                    //console.log($(this));
                    if(this.checked){this.checked=false} else{
                        this.checked=true
                    };
                })
            }
    
        </script>
    </body>
    </html>

        上面HTML代码中,this代指每次的循环,this.checked判断标签是否被选中,选中则为true;未选中则为false。$().prop()设置隐藏,显示,选中或未选中。prop("checked",true)   prop("checked",false)   prop("disable",none)设置隐藏。

     下面通过JQuery来实现,如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <input type="button" value="取消" onclick="cancleAll();"/>
        <table border="2">
            <thead>
                <tr><th>选项</th><th>IP</th><th>端口</th></tr>
            </thead>
            <tbody id="i1">
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            </tbody>
        </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function checkAll(){
                $("#i1 :checkbox").prop('checked', true);
            }
            function cancleAll(){
                $('#i1 :checkbox').prop('checked',false);
            }
            function reverseAll(){
                $('#i1 :checkbox').each(function(){
                    //this,代指当前循环的每一个元素
                    //k是循环的下标
                    //console.log($(this));
                    //if(this.checked){this.checked=false} else{
                        //this.checked=true
                    //};
                    if($(this).prop('checked')){
                        $(this).prop('checked',false);
                    } else{
                        $(this).prop('checked',true);
                    };
                })
            }
    
        </script>
    </body>
    </html>

     $().prop("checked"),一个参数代表获取值,判断是选定,checked的话,返回true;否则返回false;$().prop("checked",true)代表设置值。

        三元运算,即判断,var v = 条件(true)?false:true   如果条件为真(true),则v=false;否则条件为假(false),则v=true

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <input type="button" value="全选" onclick="checkAll();"/>
        <input type="button" value="反选" onclick="reverseAll();"/>
        <input type="button" value="取消" onclick="cancleAll();"/>
        <table border="2">
            <thead>
                <tr><th>选项</th><th>IP</th><th>端口</th></tr>
            </thead>
            <tbody id="i1">
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
                <tr><td><input type="checkbox"/></td><td>1.1.1.1</td><td>80</td></tr>
            </tbody>
        </table>
        <script src="jquery-1.12.4.js"></script>
        <script>
            function checkAll(){
                $("#i1 :checkbox").prop('checked', true);
            }
            function cancleAll(){
                $('#i1 :checkbox').prop('checked',false);
            }
            function reverseAll(){
                $('#i1 :checkbox').each(function(){
                    //this,代指当前循环的每一个元素
                    //k是循环的下标
                    //console.log($(this));
                    //if(this.checked){this.checked=false} else{
                        //this.checked=true
                    //};
    //                if($(this).prop('checked')){
    //                    $(this).prop('checked',false);
    //                } else{
    //                    $(this).prop('checked',true);
    //                };
                    //三元运算
                    //var v = 条件为真,真值,假值,如果为真,则设置为false;如果为假,则设置为真
                    var v = $(this).prop('checked')?false:true;
                    $(this).prop('checked',v);
                })
            }
    
        </script>
    </body>
    </html>

        上面三元运算中,$().条件?false:true;false一定要写在前面,如果为真,则为false;如果为假,则为真;

     实例二、下拉内容点击展开,关闭的操作,如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .header{
                background-color:black;
                color:wheat;
            }
            .content{
                min-height:50px;
            }
            .hide{
                display:none;
            }
        </style>
    </head>
    <body>
        <div style="height:400px;200px;border:1px solid #dddddd">
            <div class="item">
                <div class="header">标题1</div>
                <div class="content">内容1</div>
            </div>
            <div class="item">
                <div class="header">标题2</div>
                <div class="content hide">内容2</div>
            </div>
            <div class="item">
                <div class="header">标题3</div>
                <div class="content hide">内容3</div>
            </div>
        </div>
        <script src="jquery-1.12.4.js"></script>
        <script>
            //click是给选定的标签绑定一个点击事件,所有选中的标签
            $(".header").click(function(){
                //获取当前点击的标签$(this)
                //点击的去掉hide,没有点击的加上hide,隐藏标签
                //获取某个标签的下一个标签
                //获取某个标签的父标签
                //获取所有的兄弟标签
                //this是DOM对象
                //$().addClass('hide')  添加class属性,如果存在,则不会添加.内部自动加循环,每个自动循环添加
                //$().removeClass("hide")  删除标签中的class属性值
                //筛选器$().next()当前标签的下一个标签
                //$(this).next().removeClass('hide');
                $//(this).parent().siblings().find('.content').addClass('hide');
                $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
           //
    $(this).next().removeClass('hide').parent().siblings().children('.content').addClass('hide');等价与上面
    //JQuery支持链式编程 //find()是查找标签下面的标签,等价与($("p span")==>$('p').find('span')等价与空格  }) </script> </body> </html>

        $().find()是查找子标签满足条件的标签,

  • 相关阅读:
    Centos服务器搭建(3)——安装maven
    Centos服务器搭建(2)——安装tomcat
    Centos服务器搭建(1)——安装jdk
    mysql主从复制
    Json中返回换行符处理
    github pages 绑定域名
    SharePoint学习笔记——子页面
    SharePoint学习笔记——母版页
    SSH+Oracle的整合(SSH与Oracle整合坑巨多)
    SSH整合做CRUD(大神老师整理)
  • 原文地址:https://www.cnblogs.com/gengcx/p/7639109.html
Copyright © 2020-2023  润新知