jquery 第五章 jQuery操作表单与表格

1.回顾

　　对象.bind("事件名称",function(){

　　　　//

})

阻止冒泡事件

return false,   event stopProapagation()

模拟事件:自动执行,对象.trigger("事件名")

合成事件:对象.hover(function(){

//

},function(){

//

})

hide()/show()

slideUp()/slideDown()

fadeIn()/fadeOut()

对象.animate({属性1:值1,属性2:值2......},时间)

对象.stop();

2.本章目标

　　掌握表格和表单的应用

.3.完成

输入框默认值提示"请输入内容",获取焦点的时候清空提示,失去焦点时,值为空,恢复到默认提示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                //获取焦点事件
                $("input").focus(function(){
                    $(this).val('')
                })
                //失去焦点事件
                .blur(function(){
                    if($(this).val() == ''){
                        //把文本框的默认值赋予文本框
                        $(this).val(this.defaultValue)
                    }
                })            
            })
        </script>
    </head>
    <body>
        <input type="" name="" id="" value="请输入内aa" />
    </body>
</html>
输入框默认提示

4.表单-多行文本框

　　完成:放大,缩小,上滚,下滚

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("input:eq(0)").click(function(){
                    $("textarea").animate({"600px",height:"300px"},3000)
                    
                })
                $("input:eq(1)").click(function(){
                    $("textarea").animate({"300px",height:"150px"},3000)
                    
                })
                $("input:eq(2)").click(function(){
                    $("textarea").animate({scrollTop:"-=100px"},3000)
                    
                })
                $("input:eq(3)").click(function(){
                    $("textarea").animate({scrollTop:"+=100px"},3000)
                    
                })
            })
        </script>
    </head>
    <body>
        <input type="button" value="放大" />
        <input type="button" value="缩小" />
        <input type="button" value="上滚" />
        <input type="button" value="下滚" />
        <textarea rows="10" cols="50">萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多
            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多
            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多
            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多
            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多
            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多
            萨达所大大所大所大所大所大所大所大大所大所多萨达所大所大所大所多
        </textarea>
    </body>
</html>
多行文本框 放大缩小 内容上滚下滚

5.表单-复选框

　　表格数据前 都有一个复选框,实现全选和反选   再加删除选中按钮

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                width: 480px;
                height: 200px;
                border-collapse: collapse;
            }
            table tr th,td{
                border-collapse: collapse;
                border: 1px solid darkgoldenrod;
                text-align: center;
            }
            table td{
                width:160px;
                height: 50px;
            }            
        </style><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("input:first").click(function(){
                    $("input[tid]").attr("checked",this.checked)
                })
                
                $("button").click(function(){
                    //获取偶tid 的属性的input标签,并且被选中,进行迭代遍历
                    $("input[tid]:checked").each(function(){
                        //拿到当前选中的input的tid值
                        var tid=$(this).attr('tid')
                        //通过tid 删除对应的tr对象
                        $("tr[id="+tid+"]").remove()
                    })                
                })
            })
        </script>
    </head>
    <body>
        <table border="" >
            <button>删除选中数据</button>
            <tr><th width="10%"><input type="checkbox"/>全选反选</th><th width="20%">姓名</th><th width="20%">性别</th><th width="20%">年龄</th></tr>
            <tr id="1"><td><input type="checkbox" tid="1"/></td><td>张三</td><td>男</td><td>20</td></tr>
            <tr id="2"><td><input type="checkbox" tid="2"/></td><td>李四</td><td>男</td><td>21</td></tr>
            <tr id="3"><td><input type="checkbox" tid="3"/></td><td>王五</td><td>男</td><td>22</td></tr>
        </table>
    </body>
</html>
全选反选 删除选中

6.表格-数据过滤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                width: 100%px;
                height: 100%px;
                border-collapse: collapse;
            }
            table tr th,td{
                border-collapse: collapse;
                border: 1px solid darkgoldenrod;
                text-align: center;
            }
            table td{
                width:160px;
                height: 50px;
            }            
        </style><script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("button").click(function(){
                    //获取输入的值
                    var v=$("input").val()
                    //先影藏所有数据行  在显示出有关键字的行
                    $("table tr:first ~ tr").hide().filter(":contains("+v+")").show()
                    
                })
            })
        </script>
    </head>
    <body>
        <table border="" >
            关键字<input  /><button>查询</button>
            <tr><th width="20%">姓名</th><th width="20%">性别</th><th width="20%">年龄</th></tr>
            <tr><td>张三</td><td>男</td><td>20</td></tr>
            <tr></td><td>李四</td><td>男</td><td>21</td></tr>
            <tr></td><td>王五</td><td>男</td><td>22</td></tr>
        </table>
    </body>
</html>
表格数据过滤

7.展开与关闭表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            table{
                width: 100%px;
                height: 100%px;
                border-collapse: collapse;
            }
            table tr th,td{
                border-collapse: collapse;
                border: 1px solid darkgoldenrod;
                text-align: center;
            }
            table td{
                width:160px;
                height: 50px;
            }    
            .group1_child,.group2_child{
                display: none;
            }        
        </style>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                //给有id 属性的tr绑定单击事件
                $("table tr[id]").click(function(){
                    //获取当前的class属性
                    var c=$(this).attr("class")
                    //筛选出满足条件的行,进行显示和隐藏的转换
                    $("table tr[class="+c+"_child]").toggle()
                })
                
                
            })
        </script>
    </head>
    <body>
        <table border="" >
            <tr><th width="20%">姓名</th><th width="20%">性别</th><th width="20%">年龄</th></tr>
            <tr class="group1" id="1"><td colspan="3">开发部</td></tr>
            <tr class="group1_child"><td>张三</td><td>男</td><td>20</td></tr>
            <tr class="group2" id="2"><td colspan="3">财务部</td></tr>
            <tr class="group2_child"></td><td>李四</td><td>男</td><td>21</td></tr>
            <tr class="group2_child"></td><td>王五</td><td>男</td><td>22</td></tr>
        </table>
    </body>
</html>
展开与关闭表格

8.选项卡

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style: none;
                
            }
            ul li{
                float: left;
                margin-left: 10px;
                display: block;
                text-align: center;
                cursor: pointer;
                border: 1px solid #7FFFD4;    
                background-color: #f1f1f1;            
            }
            .content{
                clear: left;
                border: aqua 1px solid;
                height: 100px;
            }
            .content div {
                display: none;
            }
            .select{
                background-color: aquamarine;
                
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("ul li").click(function(){
                    //给当前点击的li项添加一个选中的背景样式,然后将其他级别的li选中的样式移除
                    $(this).addClass("select").siblings().removeClass("select")
                    //获取当前点击的li项的下表index( 获得下标)
                    var index=$(this).index();
                    $(".content div:eq("+index+")").show().siblings().hide()
                })
                
            })    
        </script>
    </head>
    <body>
        <div>
            <ul>
                <li>首页</li>
                <li>新闻</li>
                <li>视频</li>
            </ul>            
        </div>
        <div class="content">
            <div>首页内容</div>
            <div>新闻内容</div>
            <div>视频内容</div>
        </div>
    </body>
</html>
选项卡代码
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/faded8679/p/10528094.html