都div在所有li的html()值被设置"哈哈",当点击设置"我被点击",其余的还是不点击设置“哈哈”

<1>

<!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/jquery-1.10.2.js" type="text/javascript"></script>
    <script type="text/javascript">
    //将全部div下的全部li的html值设为"哈哈",当点击的时候设为"我被点击了",其余没有点击的依旧设为“哈哈”
        $(function () {
            var ss = $("div li"); //获取div下的全部li元素
            $.each(ss, function () { //遍历获取到的这些li元素
                $(this).html("哈哈"); //将当前遍历到li元素的html()设为"哈哈"

                $(this).click(function () { //给当前遍历到的li元素加入click事件
                    $("div li").html("哈哈");  //将div下是全部li的html()设为"哈哈"
                    $(this).html("我被点击了"); //将当前点击的li的html()设为"我被点击了";
                })
            });
        })
        
    </script>
</head>
<body>

<div>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>
<div>
    <ul>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li></li>
        <li></li>
    </ul>
</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="script/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        //将input标签的button控件的value值设为"哈哈"。当点击这个button按钮的时候就将当前点击的按钮值设为"我被点击了",其它没被点击的仍然为"哈哈"

        //Jquery写法
        $(function () {
            $.each($("input"), function () {
                $(this).val("哈哈");
                $(this).click(function () {
                    $("input").val("哈哈");
                    $(this).val("我被点击了");

                })
            })
        })


       

        //DOM写法
        function fn() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].value="哈哈";
                inputs[i].onclick = btnClick;
            }
        }
        function btnClick(e) {
            
            var inputs=document.getElementsByTagName("input");
            for(var i=0;i <inputs.length;i ++){
                var obj = e.srcElement || e.target;
                var name = inputs[i];
                if(name==obj)
                {
                    name.value = "我被点击了";
                }
                else
                {
                    name.value = "哈哈";
                }
            }
        }


    </script>
    
</head>
<body onload="fn()">
<input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
<input type="button" />
</body>
</html>


<3>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>
    <script  type="text/javascript">
        $(function () {
            var inputs = $("input"); //获得或有的input表单
            $.each(inputs, function () { //遍历这些表单
                $(this).val("广州").css("background", "red"); //将当前遍历到的input表单的val设为广州。颜色设为红色
                $(this).click(function () { //给当前遍历到的input表单加入click事件
                    //给当前点击的input表单的val设为深圳,颜色设为黄色,给当前点击的input表单的兄弟的val设为广州。颜色设为红色
                    $(this).val("深圳").css("background", "yellow").siblings().val("广州").css("background", "red");
                })

            })
        })
    </script>
</head>
<body>
<input  type="button"/>
<input  type="button"/>
<input  type="button"/>
<input  type="button"/>
</body>
</html>

版权声明:本文博主原创文章,博客,未经同意不得转载。

posted @ 2015-09-12 10:37  hrhguanli  阅读(273)  评论(0编辑  收藏  举报