案例一：全选、反选、取消实例

<!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="">

        <thead>

            <tr>

                <th>选项</th>

                <th>IP</th>

                <th>PORT</th>

            </tr>

        </thead>

        <tbody id="tb">

            <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() {

            $('#tb :checkbox').prop('checked',true);   #prop是jquery的属性，checked设置为true，只有checked表示获取选中的

        }

        function cancleAll() {

            $('#tb :checkbox').prop('checked',false);

        }

        function reverseAll() {

            $(':checkbox').each(function(k){

                // this,代指当前循环的每一个元素

                // Dom

                /*

                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 = 条件? 真值：假值

                var v = $(this).prop('checked')?false:true;

                $(this).prop('checked',v);

            })

        }

    </script>

</body>

</html>

全选、反选、取消

全选、反选、取消

案例二：菜单栏点击展开收起实例

　　本实例实现菜单栏点击一个菜单另一个菜单收起来，类似下图：

　　

<!DOCTYPE html>

<html>

<head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .header {

                background-color: #67b168;

                color: wheat;

            }

            .content {

                min-height: 30px;

            }

            .hide {

                display: none;

            }

        </style>

</head>

<body>

    <div style="height: 400px;width: 200px;border: 1px solid #d58512">

            <div class="tiem">

                <div class="header">标题一</div>

                <div  class="content hide">内容一</div>

            </div>

            <div class="tiem">

                <div class="header">标题二</div>

                <div class="content hide">内容二</div>

            </div>

            <div class="tiem">

                <div class="header">标题三</div>

                <div class="content hide">内容三</div>

            </div>

    </div>

<script src='js/jquery-1.11.0.min.js'></script>

<script>

//        找到所有class为header的标签，然后.click()绑定事件

        $('.header').click(function(){

//                #jQuery默认循环所有选中的标签

//             $(this)  当前点击的标签

//             $(this).next  当前点击的标签的下一个标签

//                找到当前点击的标签的下一个标签，移除hide样式,点击后hide去掉，即展开

            $(this).next().removeClass('hide');

//                找到当前标签的父标签的兄弟标签，然后找样式为.content的标签

            $(this).parent().siblings().find('.content').addClass('hide');

//            可以一行完成

//            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

                })

</script>

</body>

</html>

菜单栏点击展开其余收起

案例三：模态编程框案例

本案例实现魔态编程框案例，点击添加会出现一个对话框，用于添加一行，编辑可以编辑当前行,删除可以删除当前行

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .modal{

            position: fixed;

            top: 50%;

            left: 50%;

            width: 500px;

            height: 400px;

            margin-left: -250px;

            margin-top: -250px;

            background-color: #eeeeee;

            z-index: 10;

        }

        .shadow {

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            opacity: 0.6;

            background-color: #000000;

            z-index: 9;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

    <a onclick="addElement();">添加</a>

    <table border="" id="tb">

        <tr>

            <!--target 自定义属性-->

            <td target="hostname">1.1.1.1</td>

            <td target="port">80</td>

            <td>

                <a class="edit">编辑</a>

                <a class="del">删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">2.2.2.2</td>

            <td target="port">80</td>

            <td>

                <a class="edit">编辑</a>

                <a class="del">删除</a>

            </td>

        </tr>

        <tr>

            <td target="hostname">3.3.3.3</td>

            <td target="port">8000</td>

            <td>

                <a class="edit">编辑</a>

                <a class="del">删除</a>

            </td>

        </tr>

    </table>

    <!--modal 提前写好编程框-->

    <div class="modal hide">

        <div>

            <input name="hostname" type="text">

            <input name="port" type="text">

        </div>

        <div>

            <input type="button" value="取消" onclick="canceModal();">

            <input type="button" value="确定" onclick="confirmModal();">

        </div>

    </div>

    <!--shadow 遮罩层-->

    <div class="shadow hide"></div>

<script src='js/jquery-1.11.0.min.js'></script>

<script>

    function addElement(){

        $(".modal,.shadow").removeClass('hide');

    }

    function canceModal(){

        $(".modal,.shadow").addClass('hide');

//        清空框中的脏数据,

        $('.modal input[type="text"]').val("");

    }

//    $('.edit').click(function(){

//        $(".modal,.shadow").removeClass('hide');

////        this 当前点击的标签，parent父标签，prevAll父标签上面的所有同级标签

//        var tds = $(this).parent().prevAll();

////        循环获取tds中的内容(td中的内容)，赋值给编程框中的value

//        tds.each(function(){

////            this 当前每个td

////            获取自定义属性的值,hostname/port

//            var n = $(this).attr('target');

////            获取当前td内容:1.1.1.1/80

//            var v = $(this).text();

////            将获取的内容放入相应的编程框中

////          $('.modal input[name="[hostname"]').val(1.1.1.1)

////            因为hostaname/port为变量，而name=里面需要是“”格式，所以用到字符串拼接

////            var a1 = '.modal input[name="';

////            var a2 = '"]';

////            var temp = a1 + n + a2

//            $('.modal input[name="' + n + '"]').val(v)

//        });

//

//    });

//    在添加更多一行的时候所产生的 input 和 button 都是动态生成的，所以不能使用 click，要使用 on

    $(document).on('click','.edit',function(){

        $(".modal,.shadow").removeClass('hide');

//        this 当前点击的标签，parent父标签，prevAll父标签上面的所有同级标签

        var tds = $(this).parent().prevAll();

//        循环获取tds中的内容(td中的内容)，赋值给编程框中的value

        tds.each(function(){

//            this 当前每个td

//            获取自定义属性的值,hostname/port

            var n = $(this).attr('target');

//            获取当前td内容:1.1.1.1/80

            var v = $(this).text();

//            将获取的内容放入相应的编程框中

//          $('.modal input[name="[hostname"]').val(1.1.1.1)

//            因为hostaname/port为变量，而name=里面需要是“”格式，所以用到字符串拼接

//            var a1 = '.modal input[name="';

//            var a2 = '"]';

//            var temp = a1 + n + a2

            $('.modal input[name="' + n + '"]').val(v)

        });

    });

    function confirmModal(){

//        创建一个tr

        var tr = document.createElement('tr');

        $('.modal input[type="text"]').each(function(){

//            循环使用dom创建一个td，也就是有几个input就需要加几个td

            var td = document.createElement('td');

//            获取输入框中输入的数据

            var v = $(this).val();

//            获取数据库的属性

            var tage = $(this).attr('name');

//            将属性加入到td中

            $(td).attr('target',tage);

//            将输入的内容加入td中

            $(td).append(v);

//            将td加入tr中

            $(tr).append(td);

        });

//        最后将编辑和删除加入

        var temp = "<a class='edit'>编辑</a> <a class='del'>删除</a>";

//        将一行加入到table里面

        var td2 = document.createElement('td');

        $(td2).append(temp);

        $(tr).append(td2);

        $('#tb').append(tr);

//        添加完成后去掉编程框和遮罩层

        $('.modal,.shadow').addClass('hide');

//        清空框中的脏数据,否则下次在点击添加时，还会有上一次填写的数据

        $('.modal input[type="text"]').val("");

    }

    //    删除tr行

//    在添加更多一行的时候所产生的 input 和 button 都是动态生成的，所以不能使用 click，要使用 on

    $(document).on('click','.del',function(){

        console.log(this,"");

        $(this).parent().parent().remove();

    });

</script>

</body>

</html>

编程框添加删除案例

案例四：横向菜单切换

本案例实现横向菜单菜单切换，即点击菜单一现实内容一，点击菜单二，显示菜单二。。。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            height: 38px;

            background-color: #eeeeee;

            line-height: 38px;

        }

        .active{

            background-color: brown;

        }

        .menu .menu-item{

            float: left;

            border-right: 1px solid red;

            padding: 0 5px;

            cursor: pointer;

        }

        .content{

            min-height: 100px;

            border: 1px solid #eeeeee;

        }

    </style>

</head>

<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">

            <div  class="menu-item active" a="">菜单一</div>

            <div  class="menu-item" a="">菜单二</div>

            <div  class="menu-item" a="">菜单三</div>

        </div>

        <div class="content">

            <div b="">内容一</div>

            <div class="hide"  b="">内容二</div>

            <div class="hide" b="">内容三</div>

        </div>

    </div>

 <script src='js/jquery-1.11.0.min.js'></script>

    <script>

        $('.menu-item').click(function(){

            $(this).addClass('active').siblings().removeClass('active');

            var target = $(this).attr('a');

            $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide');

        });

    </script>

</body>

</html>

横向菜单切换

持续更新中。。。。。。。。。。。

jQuery 简单案例的更多相关文章

  1. 毕业设计---json,Struts,ajax以及JQuery简单案例

    <!-- Struts2的xml文件配置 --><struts> <package name="default" namespace="/& ...

  2. 使用jQuery简单实现返回顶部的一个小案例

    1.简单写一个页面 首先我们应该创建两个盒子,container盒子主要模拟页面滚动到的位置,back盒子主要功能是实现返回顶部的功能 2.简单的对这两个盒子写一些样式 我们应该先将返回顶部盒子隐藏( ...

  3. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  4. jquery简单使用（看教程：快全有实例）（固定样式：$().val()设置属性，$().click()设置方法）

    jquery简单使用(看教程:快全有实例)(固定样式:$().val()设置属性,$().click()设置方法) 一.总结 1.jquery不懂之处直接看教程,案例都有,有简单又快 2.jquery ...

  5. jQuery简单实现iframe的高度根据页面内容自适应的方法(转)

    本文实例讲述了jQuery简单实现iframe的高度根据页面内容自适应的方法.分享给大家供大家参考,具体如下: 方式1: //注意:下面的代码是放在和iframe同一个页面中调用 $("#i ...

  6. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  7. Servlet请求头response应用简单案例

    Servlet请求头response应用简单案例:访问AServlet重定向到BServlet,5秒后跳到CServlet,并显示图片: AServlet package cn.yzu; import ...

  8. winform 通过 html 与swf 交互 简单案例

    在上一篇 winform 与 html 交互 简单案例 中讲了winform与html之间的简单交互,接下来的内容是在winform中以html为中转站,实现将swf嵌入winform中并实现交互. ...

  9. jquery 简单弹出层(转)

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css /* 基本弹出层样式 */ .my-popup-overlay { width:100%; height:auto; /* wid ...

随机推荐

  1. 机器学习入门13 - 正则化：稀疏性 (Regularization for Sparsity)

    原文链接:https://developers.google.com/machine-learning/crash-course/regularization-for-sparsity/ 1- L₁正 ...

  2. 机器学习入门08 - 表示法 (Representation)

    原文链接:https://developers.google.com/machine-learning/crash-course/representation/ 机器学习模型不能直接看到.听到或感知输 ...

  3. js代码跑马灯效果-----轮播图字效果！

    文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...

  4. vue中复选框全选与反选

    html主要部分: <template v-for="(item, index) in checkboxList"> <input type="chec ...

  5. insert update delete 语法 以及用法

    insert update delete 被称为 数据定义语句语句 也就是数据的增加 修改 删除 其中不包括查询 譬如: create database -创建数据库 alter database - ...

  6. 树莓派配置wifi链接

    使用树莓派链接网络是必然的,这里讲一讲如何连接到wifi. 扫描WIFI sudo iwlist wlan0 scan 扫描后得到以下结果 这里的“ESSID”是无线网的名称. 添加有密码的WIFI网 ...

  7. [Maven]package com.sun.image.codec.jpeg does not exist

    ----------------------------------------------------------------- 原创博文,如需转载请通知作者并注明出处! 博主:疲惫的豆豆 链接:h ...

  8. [python]使用virtualenvWrapper

    什么是virtualenv virtualenv是python的环境管理工具,用于隔离python的运行环境.也就是说,一个项目可以有一个属于这个项目的运行环境,从而避免了因为依赖不同的模块而产生的错 ...

  9. Django使用Channels实现WebSocket--下篇

    希望通过对这两篇文章的学习,能够对Channels有更加深入的了解,使用起来得心应手游刃有余 通过上一篇<Django使用Channels实现WebSocket--上篇>的学习应该对Cha ...

  10. windows系统下发布python模块到pypi

    1. 在pypi.python.org网站注册一个用户,记住用户名和密码. 2. 编写需要上传模块的源代码,文件名为:skyersfirstpythonmodule.py 3. 新建文件夹,名称为sk ...