zoukankan      html  css  js  c++  java

  • jQuery（二）

    table 全选、反选、清除

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select</title>
</head>
<body>

    <div>
        <input type="button" value="全选" onclick="SelectAll();"/>
        <input type="button" value="取消" onclick="ClearAll();"/>
        <input type="button" value="反选" onclick="ReverseAll();"/>
    </div>
    <div>
        <table border="1">
            <tr>
                <td><input type="checkbox"/></td>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>123</td>
                <td>123</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>123</td>
                <td>123</td>
            </tr>
        </table>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        function SelectAll(){
//            checked 设置默认是否选中
//            先找到所有table下的chekcbox,然后使用prop给checked设置ture 或者false
            $('table :checkbox').prop('checked',true);
        }
        function ClearAll(){
            $('table :checkbox').prop('checked',false);
        }
        function ReverseAll(){
//            $table :checkbox 找到所有的checkbox,注意加空格.each循环后面的所有函数
            $('table :checkbox').each(function(){

                var isChecked = $(this).prop('checked');
                if (isChecked){
                    $(this).prop('checked',false);
                }else {
                    $(this).prop('checked',true);
                }
            })
        }
    </script>
</body>
</html>

    选择li

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="添加" onclick="AddContent();"/>
    <div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        function AddContent(){
            $('ul').append('<li>9</li>')
        }
        //$(document).ready(function)(){代码区}  在DOM加载完成时运行的代码
        //或者$(function($) {////});
        // 你可以在这里继续使用$作为别名...
        $(function(){
            $('ul').delegate('li','click',function(){
                var temp = $(this).text();
                alert(temp);
            })
        })
    </script>
</body>
</html>

    修改css

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0;
        }
        .pg-body .catalog .fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }

    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content">

                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        window.conscroll = function(){
            var ws = $(window).scrollTop();
            if (ws > 50){
                $('.catalog').addClass('fixed');
            }else {
                $('.catalog').removeClass('fixed');
            }
            $('.content').children().each(function(){
                var offs = $(this).offset();
                var offTop = offs.top;
                var total = offTop + $(this).height();
                if (ws>offTop && total > ws){
                    if ($(window).scrollTop()+$(window).height()==$(document).height()){
                        $('.catalog').children(':last').css('fontSize','48px').siblings().css('fontSize','12px');
                    }else {
                        var t = $(this).attr('menu');
                        var target = 'div[auto-to="' + t + '"]';
                        $('.catalog').children(target).css('fontSize','48px').siblings().css('fontSize','12px');
                        return;
                    }

                }
            });
        }
    </script>
</body>
</html>
    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd; 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        $(function(){
            $('#title').mouseover(function(){
                $(this).css('cursor' , 'move');
            }).mousedown(function(e){
                var _event = e || window.event;
                var ord_x = _event.clientX;
                var ord_y = _event.clientY;

                var parent_left = $(this).parent().offset().left;
                var parent_top = $(this).parent().offset().top;

                $(this).bind('mousemove' ,function(e){
                    var _new_event = e || window.event;
                    var new_x = _new_event.clientX;
                    var new_y = _new_event.clientY;

                    var x = parent_left + (new_x - ord_x);
                    var y = parent_top + (new_y - ord_y);

                    $(this).parent().css('left' , x+'px');
                    $(this).parent().css('top' , y+'px');

                })
            }).mouseup(function(){
                $(this).unbind('mousemove');
            });
        })
    </script>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .tab-box .box-menu{
            background-color: #9a9a9a;
            border: 1px solid #5cb85c;
            height: 30px;
        }
        .tab-box .box-body{
            border: 1px solid #5cb85c;
            height: 300px;
        }
        .hide{
            display: none;
        }
        .current{
            background-color: #18a689;
            color: white;
        }
    </style>
</head>
<body>
    <div class="tab-box">
        <div class="box-menu">
            <!--all menu-->
            <a tx="c1" onclick="ChangeTab(this);">菜单一</a>
            <a tx="c2" onclick="ChangeTab(this);">菜单二</a>
            <a tx="c3" onclick="ChangeTab(this);">菜单三</a>
        </div>
        <div class="box-body">
            <!--all content-->
            <div id="c1">内容一</div>
            <div id="c2" class="hide">内容二</div>
            <div id="c3" class="hide">内容三</div>
        </div>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        function ChangeTab(ths){
//            当前标签增加current,其他移除
            $(ths).addClass('current').siblings().removeClass('current');
//            获取当前标签的属性'tx',根据'tx'获取关联的id
            var contentId = $(ths).attr('tx');
//            拼接获取的id
            var temp = '#' + contentId;
//            给获取的id设置移除隐藏,其他增加隐藏
            $(temp).removeClass('hide').siblings().addClass('hide');
        }
    </script>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>top</title>
    <style>
        .go-top{
            position: fixed;
            width: 200px;
            height: 200px;
            right: 10px;
            bottom: 10px;


        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height: 2048px">
        <div style="background-color: #7cbe56;height: 500px">这里是顶部</div>
        <div class="go-top hide">

            <img src="top.jpg" alt="返回顶部" onclick="GoTop();"/>
        </div>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        window.onscroll = function(){
            var currentTop = $(window).scrollTop();
            if (currentTop>100){
                $('.go-top').removeClass('hide');
            }else {
                $('.go-top').addClass('hide');
            }
        };
        function GoTop(){
            $(window).scrollTop(0);
        }

    </script>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="获取节目" onclick="SubmitData();"/>
    <div id="container"></div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        function SubmitData(){
            $.ajax({
                url:"http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403",
                data:{},
                type:'GET',
                dataType:'jsonp',
                jsonp:'callback',
                jsonpCallback:'list',
                success:function(arg){
                    console.log(arg);
                    var jsonArry = arg.data;
                    $.each(jsonArry,function(k,v){
                        var week = v.week;
                        var temp = '<h1>' + week + '</h1>';
                        $('#container').append(temp);
                        var listArray = v.list;
                        $.each(listArray,function(kk,vv){
                            var link = vv.link;
                            var name = vv.name;

                            var  tempNew = "<a href='" + link + "'>" + name + "</a><br/>";
                            $('#container').append(tempNew);
                        })
                    })
                },
                error:function(){}
            })
        }
    </script>
</body>
</html>
    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
            </div>
            <div class="content">

                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="jquery-2.2.3.js"></script>
    <script type="text/javascript">
        window.onscroll = function(){
            var ws = $(window).scrollTop();

            if(ws > 50){
                $('.catalog').addClass('fixed');
            }else{
                $('.catalog').removeClass('fixed');
            }

            $('.content').children().each(function(){
                var offs = $(this).offset();
                var offTop = offs.top;
                var total = offTop + $(this).height();

                if(ws>offTop && total>ws){
                    if($(window).scrollTop()+$(window).height == $(document).height()){
                        $(".catalog").children(':last').css("fontSize",'48px').sibling().css("fontSize",'12px');
                    }else{
                        var t = $(this).attr('menu');
                        var target = 'div[auto-to="' + t +'"]';
                        $('.catalog').children(target).css("fontSize",'48px').siblings().css('fontSize','12px');
                        return;
                    }

                }

            });



        };







    </script>
</body>
</html>
  • 相关阅读:
    在Centos 7下编译openwrt+njit-client
    开博随笔
    Chapter 6. Statements
    Chapter 4. Arrays and Pointers
    Chapter 3. Library Types
    Chapter 2.  Variables and Basic Types
    关于stm32不常用的中断,如何添加, 比如timer10 timer11等
    keil 报错 expected an identifier
    案例分析 串口的地不要接到电源上 会烧掉
    案例分析 CAN OPEN 调试记录 进度
  • 原文地址：https://www.cnblogs.com/xiajie/p/5445500.html
Copyright © 2011-2022 走看看