zoukankan      html  css  js  c++  java

  • JQuery基础三

    1、checkbox操作：全选、全不选、反选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            //全选
            $('#btnAll').click(function () {

                $('div :checkbox').attr('checked', true);
            });
            //全不选
            $('#btnNoAll').click(function () {

                $('div :checkbox').attr('checked', false);
            });
            //反选
            $('#btnFX').click(function () {

                $('div :checkbox').each(function (index, ele) {
                    $(ele).attr('checked', !$(ele).attr('checked'));
                });
            });
        });

    
    </script>
</head>
<body>
    <input type="button" name="name" value="全选" id="btnAll" />
    <input type="button" name="name" value="全不选" id="btnNoAll" />
    <input type="button" name="name" value="反选" id="btnFX" />
    <div style="border: 1px solid red; height: 200px;">
        <input type="checkbox" name="name" value="1" />忐忑
        <input type="checkbox" name="name" value="2" />法海不懂爱
        <input type="checkbox" name="name" value="3" />金箍棒
        <input type="checkbox" name="name" value="4" />爱情买卖
        <input type="checkbox" name="name" value="5" />最炫民族风
    </div>
</body>
</html>
    View Code

    2、绑定事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //bind可以注册事件
            //            $('#btn').bind('click', function () {
            //                alert('点我了');
            //            }).bind('mouseover', function () {
            //                $(this).css('color', 'yellow');
            //            });

            //            $('#btn').click(function () {

            //            });

            //            $('#btn').toggle(function () {
            //                alert('1');
            //            }).toggle(function () {
            //                alert('2');
            //            }).toggle(function () {
            //                alert('3');
            //            });
            //鼠标进入和鼠标离开
            $('input').hover(function () {
                $(this).css('backgroundColor','red');
            }, function () {
                $(this).css('backgroundColor', '');
            });
        });
    
    </script>
</head>
<body>
   <!-- <input type="button" name="name" value="绑定" id="btn" />-->
    <input type="text" name="name" value="" />
</body>
</html>
    View Code

    3、事件冒泡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            //事件冒泡


            $('div').click(function () {
                alert($(this).attr('id'));
            });
            $('p').click(function () {
                alert($(this).attr('id'));
            });
            $('strong').click(function () {
                alert($(this).attr('id'));
                return false;
            });
        });
    
    </script>
</head>
<body>
    <div id="dv" style=" 300px; height:200px; background-color:Yellow;">
    
    <p id="p1" style=" 100px; height:100px; background-color:Blue;">
        <strong id="st">加粗</strong>
    </p>
    </div>
</body>
</html>
    View Code
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(function () {

            $('#btn').click({ "name": "小马" }, function (eee) {
                alert(eee.data.name);
            });
        });
    
    </script>
</head>
<body>
    <input type="button" name="name" value="按钮" id="btn" />
</body>
</html>
    View Code

    4、让图片飞

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).mousemove(function (e) {

                $('#im').css('position', 'absolute').css({ "left": e.pageX, "top": e.pageY });
            });
        });
    
    </script>
</head>
<body>
    <img src="2.png" id="im" />
</body>
</html>
    View Code

    5、光标改变

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('div').click(function (e) {
               // alert(e.target.id);

            });

            $('div').mousedown(function (e) {
                alert(e.which);
            });
        });
    </script>
    <style type="text/css">
    
    div
    {
        300px;
        height:200px;
        background-color:Blue;
        cursor:url(cur/dinosau2.ani);
        }
  
    </style>
</head>
<body>
    <div id="dv">
    </div>
</body>
</html>
    View Code

    6、折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>

    <style type="text/css">
    
    #u1 li
    {
        margin-bottom:10px;
        background-color:Orange;
        font-size:20px;
        font-weight:bolder;
        cursor:pointer;
        }
    #u1 li ul
    {
        list-style-type:none;
        margin:0;
        padding:0;
        
        }
        
        #u1 li ul li
        {
            background-color:pink;
            }
    </style>
    <script src="../Scripts/jquery-1.10.2.js"></script>

    <script type="text/javascript">

        $(function () {

            $('#u1 li ul li').hide();

            $('#u1 li').click(function () {
                $('ul li', $(this)).show(500);
                $('ul li', $(this).siblings('li')).hide(500);
                $('#san').attr('src','音乐的路径');
            });
        });
    </script>
</head>
<body>

<bgsound id="san" loop="0" src="">

    <div style=" 200px; height:500px; border:1px solid red;">

        <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
            <li>
            幼儿园同学
                <ul>
                    <li>鼻涕虫</li>
                    <li>爱哭鬼</li>
                    <li>张大胆</li>
                </ul>
            </li>
            <li>小学同学
                <ul>
                    <li>张三丰</li>
                    <li>张无忌</li>
                    <li>乔布斯</li>
                </ul>
            </li>
            <li>
            初中同学
                <ul>
                    <li>盖茨</li>
                    <li>种哥</li>
                    <li>奥巴马</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>
    View Code

    7、层的显示和隐藏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            //显示层
            $('#btnShow').click(function () {
                $('div').show(500);
            });
            $('#btnHide').click(function () {
                $('div').hide(500);
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="显示层" id="btnShow" />
    <input type="button" name="name" value="隐藏层" id="btnHide" />
    <div style=" 300px; height:200px; background-color:Blue;">
    </div>
</body>
</html>
    View Code

    漂亮效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#btnslideDown').click(function () {
                $('div').slideDown(500);
            });
            $('#btnslideUp').click(function () {
                $('div').slideUp(500);
            });
            $('#btnslideToggle').click(function () {
                $('div').slideToggle(500);
            });
            //=======================
            $('#btnfadeIn').click(function () {
                $('div').fadeIn(1000);
            });
            $('#btnfadeOut').click(function () {
                $('div').fadeOut(1000);
            });
            $('#btnfadeToggle').click(function () {
                $('div').fadeToggle(500);
            });

        });
    </script>
</head>
<body>
    <input type="button" name="name" value="slideDown" id="btnslideDown" />
    <input type="button" name="name" value="slideUp" id="btnslideUp" />
    <input type="button" name="name" value="slideToggle" id="btnslideToggle" />
    <input type="button" name="name" value="fadeIn" id="btnfadeIn" />
    <input type="button" name="name" value="fadeOut" id="btnfadeOut" />
    <input type="button" name="name" value="fadeToggle" id="btnfadeToggle" />

    <div style=" 300px; height:200px; background-color:Green;">


    </div>
</body>
</html>
    View Code

    8、TAB显示

    div:gt(0)选择器用于匹配所有大于指定索引的元素，将其封装为jQuery对象并返回。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #dvTab
        {
             500px; /*  border: 1px solid blue;*/
            height: 200px;
        }
        
        #dvTab ul
        {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #dvTab ul li
        {
            text-align: center;
            background-color: Yellow;
            color: Red;
             100px;
            font-weight: bolder;
            font-size: 14px;
            float: left;
            border-right: 1px solid blue;
            cursor: pointer;
        }
        
        #dvTab div
        {
             400px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {

            $('#dvTab div:gt(0)').hide();
            $('#uu1 li').mouseover(function () {

                var tt = $(this).text();
                switch (tt) {
                    case '新闻': $('#dvNews').show().siblings('div').hide(); break;
                    case '图片': $('#dvPic').show().siblings('div').hide(); break;
                    case '深度': $('#dvDeep').show().siblings('div').hide(); break;
                    case '军事': $('#dvMl').show().siblings('div').hide(); break;
                }


            });
        });
    </script>
</head>
<body>
    <div id="dvTab">
        <ul id="uu1">
            <li>新闻</li>
            <li>图片</li>
            <li>深度</li>
            <li>军事</li>
        </ul>
        <div id="dvNews">
            新闻新闻新闻
        </div>
        <div id="dvPic">
            图片，图片图片图图片图片图图图片贴图
        </div>
        <div id="dvDeep">
            深度深度深度深度十多年对于
        </div>
        <div id="dvMl">
            军事军事军事军事
        </div>
    </div>
</body>
</html>
    View Code

    9、图片动画

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {

            $('#btn').click(function () {
                $('img').animate({ "left": "55px", "top": "500px", "width": "50px", "height": "50px" }, 3000).animate({ "left": "+=800px", "top": "-=500px" }, 2000);
            });

           
        });
    
    </script>
</head>
<body>
    <input type="button" name="name" value="飞起来" id="btn" />
    <img src="2.png" style=" position:absolute;" />
</body>
</html>
    View Code

    10、cookie保存用户

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.8.3.js" type="text/javascript"></script>
    <script src="jquery.cookie.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            if ($.cookie('userName')==null ) {
                $('span').text('欢迎菜鸟登录');
            } else {
                $('span').text('欢迎'+$.cookie('userName')+'登录');
            }


            $('#btn').click(function () {

                $.cookie('userName', $('#txt').val());
            });
        });
    
    </script>
</head>
<body>
    <span>欢迎菜鸟登录</span>
    <input type="text" name="name" value="" id="txt" />
    <input type="button" name="name" value="记住密码" id="btn" />
</body>
</html>
    View Code

    11、显示高清图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.10.2.js"></script>
    <script src="../Scripts/jquery.jqzoom-core.js" type="text/javascript"></script>
    <link href="../Scripts/jquery.jqzoom.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

        $(document).ready(function () {
            $('.MYCLASS').jqzoom();
        }); 
    </script>
</head>
<body>
    <a class="MYCLASS" title="MYTITLE" href="triumph_big1.jpg" target="_blank">
        <img title="IMAGE TITLE" src="triumph_thumb1.jpg">
    </a>
</body>
</html>
    View Code

     12、通过改变图片位置显示需要显示的资源

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style type="text/css">
    
    div
    {
        background-image:url(1.jpg);
        60px;
        height:500px;
        border:1px solid red;
        background-repeat:no-repeat;/*:repeat-y; /*:repeat-x;/*横向平铺*/
        background-position:-215px -170px;
        /*此时的层显示图片是平铺*/
        
        }
    </style>
</head>
<body>
    <div>
    
    
    </div>
</body>
</html>
    View Code

    1、选择器+遍历

    $('div').each(function (i){

       i就是索引值

       this 表示获取遍历每一个dom对象

    });

     

    2、选择器+遍历

    $('div').each(function (index,domEle){

       index就是索引值

      domEle 表示获取遍历每一个dom对象

    });

     

    3、更适用的遍历方法

     

    1）先获取某个集合对象

    2）遍历集合对象的每一个元素

     

    var d=$("div");

     

    $.each(d,function (index,domEle){

     

      d是要遍历的集合

      index就是索引值

      domEle 表示获取遍历每一个dom对

     

    });
  • 相关阅读:
    vue-fullcalendar插件
    iframe 父框架调用子框架的函数
    关于调试的一点感想
    hdfs 删除和新增节点
    hadoop yarn 实战错误汇总
    Ganglia 安装 No package 'ck' found
    storm on yarn(CDH5) 部署笔记
    spark on yarn 安装笔记
    storm on yarn安装时 提交到yarn失败 failed
    yarn storm spark
  • 原文地址：https://www.cnblogs.com/ecollab/p/6131519.html
Copyright © 2011-2022 走看看