JQuery基础三

2023-01-06 10:15:58

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>

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>

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=" width:300px; height:200px; background-color:Yellow;">

    <p id="p1" style=" width:100px; height:100px; background-color:Blue;">

        <strong id="st">加粗</strong>

    </p>

    </div>

</body>

</html>
<!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>

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>

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

    {

        width:300px;

        height:200px;

        background-color:Blue;

        cursor:url(cur/dinosau2.ani);

        }

    </style>

</head>

<body>

    <div id="dv">

    </div>

</body>

</html>

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=" width: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>

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=" width:300px; height:200px; background-color:Blue;">

    </div>

</body>

</html>

漂亮效果

<!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=" width:300px; height:200px; background-color:Green;">

    </div>

</body>

</html>

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

        {

            width: 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;

            width: 100px;

            font-weight: bolder;

            font-size: 14px;

            float: left;

            border-right: 1px solid blue;

            cursor: pointer;

        }

        #dvTab div

        {

            width: 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>

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>

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>

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>

 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);

        width: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>

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对

});

上一篇：“全栈2019”Java异常第三章：try代码块作用域详解


下一篇：POC - ASP.NET & IIS 部分