一：jquery实现全选取消反选

　　3元运算：条件？真值：假值

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <input type="button" value="全选" onclick="selectAll()">

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

     <input type="button" value="dom反选" onclick="reverserAll()">

    <input type="button" value="jQuery反选" onclick="reverserAll2()">

      <input type="button" value="jQuery三元运算实现反选" onclick="reverserAll3()">

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

        <tr>

            <td><input type="checkbox"></td>

            <td>1.1.1.1</td>

            <td>1191</td>

        </tr>

        <tr>

            <td><input type="checkbox"></td>

            <td>1.1.1.2</td>

            <td>1192</td>

        </tr>

                <tr>

            <td><input type="checkbox"></td>

            <td>1.1.1.3</td>

            <td>1193</td>

        </tr>

    </table>

    <script src="jquery-1.12.3.js"></script>

    <script>

        function selectAll(){

            $("#tb :checkbox").prop("checked",true);//jquery默认自带循环

        }

        function cancelAll(){

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

        }

        //反选两种方法dom实现和jquery实现

        //dom实现

        function reverserAll(){

            $("#tb :checkbox").each(function(){//each遍历

                    if (this.checked) //this这里是dom对象

                    {

                        this.checked=false;

                    }else {

                        this.checked=true;

                    }

                }

            )

        }

        function reverserAll2(){

            $("#tb :checkbox").each(function() {//each遍历

                if($(this).prop("checked"))//$(this)转jquery对象

                {

                    $(this).prop("checked",false);

                }else

                {

                   $(this).prop("checked",true);

                }

            }

            )

        }

        //3元运算实现反选

        // 条件？真值：假值

        function reverserAll3(){

            $("#tb :checkbox").each(

                    function(){

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

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

                    }

            )

        }

    </script>

</body>

</html>

二：jquery实现菜单栏功能

　　1)找到header标签所在位置
　　1)在找到header标签加入onclick事件
　　2)找到下一个标签所在位置content
　　3)去除当前content的hide类，显示本标栏
　　4)找到当前header的父标签item
　　5)找到item所有兄弟标签
　　6)找到item兄弟标签下面的content
　　7)在找到content加入hide类，隐藏标题栏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .menu{

            height: 400px;

            width: 200px;

            border: 1px solid #dddddd;

        }

        .header{

            background-color: black;

            color: white;

        }

        .content{

            height: 50px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div class="menu">

    <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.3.js"></script>

    <script>

        /*

        1)找到header标签所在位置

        1)在找到header标签加入onclick事件

        2)找到下一个标签所在位置content

        3)去除当前content的hide类，显示本标栏

        4)找到当前header的父标签item

        5)找到item所有兄弟标签

        6)找到item兄弟标签下面的content

        7)在找到content加入hide类，隐藏标题栏

        */

        $(".header").click(

                function() {

                    $(this).next().removeClass("hide")

                    //找到header父级标签的所有兄弟标签的孩子content,并加入hide类

                    $(this).parent().siblings().find(".content").addClass("hide")

                }

        )

    </script>

</body>

</html>

三：jquery模态编辑1

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .shadow{

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom:0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .model{

            position: fixed;

            top:50%;

            left: 50%;

            margin-left: -250px;

            maigin-top: -200px;

            background-color: white;

            z-index: 10;

            height: 200px;

            width: 400px;

        }

    </style>

</head>

<body>

    <a onclick="addElement();" style="color: red">增加</a>

    <input type="button" value="+" onclick="addElement();">

    <table border="1px">

        <tr>

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

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

            <td>

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

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

            </td>

        </tr>

                <tr>

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

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

            <td>

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

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

            </td>

        </tr>

                <tr>

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

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

            <td>

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

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

            </td>

        </tr>

                <tr>

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

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

            <td>

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

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

            </td>

        </tr>

    </table>

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

    <div class="model hide">

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

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

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

    </div>

    <script src="jquery-1.12.3.js"></script>

    <script>

        function addElement(){

            console.log(1)

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

        }

        function cancelElement(){

            $(".model,.shadow").addClass("hide");

            $('.model input[name="host"]').val("");

            $('.model input[name="port"]').val("");

        }

        $(".edit").click(

                function(){

                    addElement()

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

                    var host=$(tds[1]).text();

                    var port=$(tds[0]).text();

                    console.log(host,port);

                    $('.model input[name="host"]').val(host);

                    $('.model input[name="port"]').val(port);

                }

        )

    </script>

</body>

</html>

四：jquery模态编辑-改进版

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .shadow{

            position: fixed;

            top: 0;

            left: 0;

            right: 0;

            bottom:0;

            background-color: black;

            opacity: 0.6;

            z-index: 9;

        }

        .model{

            position: fixed;

            top:50%;

            left: 50%;

            margin-left: -250px;

            maigin-top: -200px;

            background-color: white;

            z-index: 10;

            height: 200px;

            width: 400px;

        }

    </style>

</head>

<body>

    <a onclick="addElement();" style="color: red">增加</a>

    <input type="button" value="+" onclick="addElement();">

    <table border="1px">

        <tr>

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

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

            <td>

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

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

            </td>

        </tr>

                <tr>

            <td target="host">1.1.1.2</td>

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

            <td>

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

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

            </td>

        </tr>

                <tr>

            <td target="host">1.1.1.3</td>

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

            <td>

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

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

            </td>

        </tr>

                <tr>

            <td target="host">1.1.1.4</td>

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

            <td>

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

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

            </td>

        </tr>

    </table>

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

    <div class="model hide">

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

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

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

    </div>

    <script src="jquery-1.12.3.js"></script>

    <script>

        function addElement(){

            console.log(1)

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

        }

        function cancelElement(){

            $(".model,.shadow").addClass("hide");

            $('.model input[name="host"]').val("");

            $('.model input[name="port"]').val("");

        }

//        $(".edit").click(

//                function(){

//                    addElement()

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

//                    var host=$(tds[1]).text();

//                    var port=$(tds[0]).text();

//

//                    console.log(host,port);

//                    $('.model input[name="host"]').val(host);

//                    $('.model input[name="port"]').val(port);

//

//                }

//        )

        /*上面直接使用tds[0]等存在这个问题，就是如果在增加一列，所有tds及下面的赋值都要修改

        处理方法：给每个td绑定个属性，并且这个属性值和model中name属性的值相对应，通过each循环获取并把属性值相等的设置

        */

        $(".edit").click(

                function(){

                    addElement();

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

                    tds.each(

                            function(){

                                var v1=$(this).attr("target");

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

                                var a1=".model input[name=";

                                var a2="]";

                                //字符串拼接

                                var tmp=a1+v1+a2;

                                $(tmp).val(value)

                            }

                    )

                }

        )

    </script>

</body>

</html>

五：jquery实现tab页

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            width:400px;

            height: 38px;

            margin: 0 auto;

            line-height: 38px;

        }

        .menu .menu-item{

            float: left;

            padding: 0 10px;

            border-right: 1px solid red;

            cursor: pointer;

        }

        .active{

            background-color: rebeccapurple;

        }

        .content{

            min-height: 100px;

            width: 400px;

            border:1px solid #2459a2;

            margin: 0 auto;

        }

    </style>

</head>

<body>

    <div class="menu">

        <div class="menu-item active" target="1">菜单1</div>

        <div class="menu-item " target="2">菜单2</div>

        <div class="menu-item "target="3">菜单3</div>

        <div style="clear:both"></div>

    </div>

    <div class="content">

        <div class="content-pg" target="1">内容1</div>

        <div class="content-pg hide" target="2">内容2</div>

        <div class="content-pg hide" target="3">内容3</div>

    </div>

    <script src="jquery-1.12.3.js"></script>

    <script>

        $(".menu-item").click(

                function(){

                    //菜单切换

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

                    var target=$(this).attr("target");

                    console.log($(".content-pg [target='"+target+"']"));

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

                }

        )

    </script>

</body>

</html>

jquery-实用例子的更多相关文章

  1. Struts1+JQuery的例子

    Struts1+JQuery的例子 2014年2月10日 11:25 Struts1+JQuery+JSON/XML的例子 1.Struts+JQuery+XML struts-config.xml如 ...

  2. jQuery实用工具集

    插件描述:jQuery实用工具集,该插件封装了常用功能,如序列化表单值获取地址栏参数window对象操作等 此工具集包含判断浏览器,判断浏览终端,获取地址栏参数,获取随机数,数据校验等常用操作功能 引 ...

  3. react-router4.x 实用例子(路由过渡动画、代码分割)

    react-router4.2.0实用例子 代码分割 官网上面写的代码分割是不支持create-react-app脚手架的,要使用import实现 创建一个bundle.js文件 import { C ...

  4. jquery autocomplete 简单实用例子

    <link href="../../themes/default/css/jquery.ui.all.css" rel="stylesheet" type ...

  5. jquery jQuery-File-Upload 例子

    网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考. 下面介绍 用插件实现图片异步上传的代码. 1   比要的js一个都不能少,他们之间是有依赖关系的 ...

  6. jQuery实用的语法总结

    1.关于页面元素的引用 通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用do ...

  7. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  8. ajax 源生，jquery封装 例子 相同哈哈

    http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22 ajax使用回调函数的例子(原生代码和jquery代码) 一. ajax代码存在的问 ...

  9. JQuery实用技巧--学会你也是大神(1)——插件的制作技巧

      前  言 JRedu 学习之前,首先我们需要知道什么是JQuery? JQuery是一个优秀的javascript框架. JQuery是继Prototype之后又一个优秀的Javascript框架 ...

  10. jquery dataTables例子

    https://datatables.net/examples/styling/bootstrap.html http://datatables.club/example/#styling http: ...

随机推荐

  1. PHP 使用GD 库绘制图像，无法显示的问题

    根据官方GD 库绘制图像文档样式 原基本样式 $width = 120; $height = 50; $img = @imagecreatetruecolor($width, $height) or ...

  2. Java对象与Map间相互转换

    将Java对象转为一个Map,以及将map转为对应Java对象,代码如下: public class BeanMapUtil { private static ConcurrentHashMap< ...

  3. 【跨域】jsonp跨域实现方法

    封装原生jsonp: 以跨域调取豆瓣电影最热榜单为例: function $jsonp(url,data,callback){ var funcName = 'jsonp_cb' + Math.ran ...

  4. 【loj6029】「雅礼集训 2017 Day1」市场 线段树+均摊分析

    题目描述 给出一个长度为 $n$ 的序列,支持 $m$ 次操作,操作有四种:区间加.区间下取整除.区间求最小值.区间求和. $n\le 100000$ ,每次加的数在 $[-10^4,10^4]$ 之 ...

  5. BZOJ2728 HNOI2012与非（并查集+数位dp）

    容易发现x nand x=not x.并且使用这个性质有x and y=not(x nand y)=(x nand y)nand(x nand y).也就是说nand运算可以作为not和and运算使用 ...

  6. BZOJ2622 深入虎穴（最短路径）

    如果对某个点能求出与其相邻的所有点到达出口的最短时间,那么该点的答案就可以在其中取次小值了. 对于dijkstra魔改一下就能做到这个.初始时将所有出口的最短时间设为0并放入堆,记录最短和次短路径,每 ...

  7. 洛谷P4486 Kakuro

    题意:你有一个棋盘,某些格子是限制条件,形如"从这里开始下面所有连续空格的和为a"或"从这里开始向右的所有连续空格之和为b"一个格子可以同时拥有两个限制条件. ...

  8. MySQL的备份和恢复-基于LVM快照的备份（lvm-snapshot）

    MySQL的备份和恢复-基于LVM快照的备份(lvm-snapshot) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.什么是快照卷 如上图所示,原卷和快照卷可以不一样大,因为 ...

  9. VMware ESXI6.0服务器安装

    1.制作一个ESXI6.0的系统安装盘 2.服务器启动后加载VMware ESXi 6.0的ISO文件,开始安装. 3.ESXi引导装入程序,VMware ESXi引导过程,在屏幕上方显示的版本号.内 ...

  10. CF&&CC百套计划4 Codeforces Round #276 (Div. 1) A. Bits

    http://codeforces.com/contest/484/problem/A 题意: 询问[a,b]中二进制位1最多且最小的数 贪心,假设开始每一位都是1 从高位i开始枚举, 如果当前数&g ...