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对

});

相关阅读:
gitlab 简介
 gitlab安装配置（Ubuntu18和CentOS7）
CentOS7 安装 vsftpd 服务
 CentOS7.5 系统最小化安装与初始化配置
 ubuntu1604系统初始化
 关于CGI和FastCGI的理解
 CentOS7安装OpenStack(Rocky版)-09.安装Cinder存储服务组件（控制节点）
CentOS7安装OpenStack(Rocky版)-08.启动一个虚拟机实例
 CentOS7安装OpenStack(Rocky版)-07.安装horizon服务组件（控制节点dashboard）
CentOS7安装OpenStack(Rocky版)-06.安装Neutron网络服务（控制节点）
原文地址：https://www.cnblogs.com/ecollab/p/6131519.html