jQuery基础-选择图片并赋值

文件目录:

jQuery基础-选择图片并赋值_第1张图片



例一:点击按钮图片全部复制

目标效果:

jQuery基础-选择图片并赋值_第2张图片

页面代码:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.8.0.min.js"></script>
	<meta charset="utf-8" />
    <script>
        $(function () {                                         //等同于$(document).ready(function(){});
            $("button").click(function () {                     //按钮的点击方法
                $("#copyBefore").clone().appendTo("#copyAfter");//将id为copyBefore的层的内容的复制到id为copyAfter的层中去
            });
        });
    </script>
</head>
<body>
    <div id="copyBefore">
        <img src="image/one.png" />
        <img src="image/three.jpg" />
        <img src="image/two.jpg" />
    </div>
    <button>Click</button>
    <div id="copyAfter"></div>
</body>
</html>



例二:点击按钮选择,选中的图片边框变色
目标效果:
jQuery基础-选择图片并赋值_第3张图片
页面代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="js/jquery-1.8.0.min.js"></script>
	<meta charset="utf-8" />

    <script>
        var index = 0;
        var temp = 0;
        $(function () { 
            $("button").click(function () {
                $("img:eq(" + temp + ")").removeClass("Selected");    //该对象删除使用的css类,这里名称前不需要加“.”,另外eq下标是从0开始
                $("img:eq(" + index + ")").addClass("Selected");      //该对象添加css类
                temp = index;                                         //将原先的使用css类的下标赋给temp
                index = index + 1;
                if (index == $("img").length) {                       //判断下标是否等于img对象个数,因为个数从1开始,而eq从0开始,所以当下标index等于img对象个数时,就已经越界,需要修改下标
                    index = 0;                                        //将下标重新定义为最开始的0,因为最后一个img对象应用了css类还没有消除,所以temp的值不用变
                }
            });
        });
    </script>

    <style>
        img
        {
            width:160px;
            height:160px;
            border:6px solid red;
        }       
        .Selected{
            border-color:yellow;
        }
    </style>
</head>
<body>
    <div id="picture">
        <img src="image/one.png" />
        <img src="image/three.jpg" />
        <img src="image/two.jpg" />
    </div>
    <button>next</button>   
</body>
</html>


例三:点击next按钮进行选择,点击copy按钮进行复制
目标效果:
jQuery基础-选择图片并赋值_第4张图片
页面代码:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.8.0.min.js"></script>
    <meta charset="utf-8" />

    <script>
        var index = 0;
        var temp = 0;
        
        $(function () {
            $("#next").click(function () {
                $("img:eq(" + temp + ")").removeClass("Selected");    //该对象删除使用的css类,这里名称前不需要加“.”,另外eq下标是从0开始
                $("img:eq(" + index + ")").addClass("Selected");      //该对象添加css类
                temp = index;                                         //将原先的使用css类的下标赋给temp
                index = index + 1;
                if (index == 3) {                       //判断下标是否等于img对象个数,因为个数从1开始,而eq从0开始,所以当下标index等于img对象个数时,就已经越界,需要修改下标
                    index = 0;                                        //将下标重新定义为最开始的0,因为最后一个img对象应用了css类还没有消除,所以temp的值不用变
                }
            });
            $("#copy").click(function () {
                $("img:eq(" + temp + ")").clone().appendTo("#copyAfter").removeClass("Selected");
            });
        });
    </script>

    <style>
        img {
            width: 160px;
            height: 160px;
            border: 6px solid red;
        }

        .Selected {
            border-color: yellow;
        }
    </style>
</head>
<body>
    <div id="copyBefore">
        <img src="image/one.png" />
        <img src="image/three.jpg" />
        <img src="image/two.jpg" />
    </div>
    <button id="next">next</button>
    <button id="copy">copy</button>
    <div id="copyAfter"></div>
</body>
</html>




你可能感兴趣的:(jquery,图片,div,button)