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({width:"600px",height:"300px"},3000)

                })

                $("input:eq(1)").click(function(){

                    $("textarea").animate({width:"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>

选项卡代码

jquery 第五章 jQuery操作表单与表格的更多相关文章

JQuery中操作表单和表格
一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
jQuery第五章
jQuery对表单.表格的操作以及更多应用一.表单应用 1.单行文本框应用 (1)获取和失去焦点改变样式 HTML代码如下: <form action="#" method ...
jQuery 第五章实例方法详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
jQuery 第五章实例方法事件
.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ----------------------- ...
jQuery系列第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
jQuery系列第二章 jQuery框架使用准备
第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...
第五章jQuery
DOM文档加载的步骤解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. DOM树构建完成. 加载图片等外部文件. 页面加载完毕. 执行时间不同 window.onload必须等到页 ...
第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法该方法的功能与css()方法设置display属性效果相同. 给show( ...

随机推荐

Object的所有方法
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. const object1 = { a: 1, b: 2, c: 3 }; const ...
电脑重装系统后如何恢复 Mysql 数据库
电脑重装系统后如何恢复 Mysql 数据库一.[设置mysql的path] 比如:我的mysql在:D:\DataBase\mysql-5.7.13-winx64,可以在环境变量中重新新建一个环境变 ...
Flask 框架介绍
FLASK 框架框架介绍简单来说: 小扩展性极强官方文档点这里 Flask 和 Django 的区别 Django 无socke,依赖第三方模块wsgi 路由系统(CBV,FBV) 中间件, ...
利用ESLINT进行js 语法检查，以及局部安装时遇到的一些坑
1)安装ESlint,这里我说一下全局安装,一会我会说我为什么不局部安装. npm install eslint -g 2)创建一个你的项目文件夹,随便起个名字吧,并初始化 cd myapp npm ...
Androidstudio 使用git插件提交代码
1.androidstudio中的项目已经推送到git仓库上(与仓库已经建立了联系) 参见: 2.右键目录--git---commit directory : 3.填写相应的commit Messig ...
ArrayList的实现及原理
ArrayList ArrayList是最常见以及每个Java开发者最熟悉的集合类了,顾名思义,ArrayList就是一个以数组形式实现的集合,以一张表格来看一下ArrayList里面有哪些基本的元素 ...
CSS font字体知识学习
字体系列 [1]5种通用字体系列:拥有相似外观的字体系列 serif字体:字体成比例,且有上下短线(衬线字体),包括Times\Georgia\New century Schoolbook sans- ...
分享一个jsonp劫持造成的新浪某社区CSRF蠕虫
最近jsonp很火,实话说已经是被玩烂了的,只是一直没有受到大家的重视.正好在上个月,我挖过一个由于jsonp造成的新浪某社区CSRF,当时是为了准备一篇文章,之后这篇文章也会拿出来分享. 因为新浪已 ...
【Unity]】AR小工具-Vuforia
很有意思的增强现实玩具,六分钟应用. https://www.youtube.com/watch?v=khavGQ7Dy3c
时间序列函数resamlpe详解
resample与groupby的区别:resample:在给定的时间单位内重取样groupby:对给定的数据条目进行统计函数原型:DataFrame.resample(rule, how=None ...

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

jquery 第五章 jQuery操作表单与表格的更多相关文章

随机推荐

热门专题