将所有div下的所有li的html()值设为"哈哈"，当点击的时候设为"我被点击了",其余没有点击的依然设为“哈哈”

最新推荐文章于 2021-07-05 16:32:20 发布

无盐海

最新推荐文章于 2021-07-05 16:32:20 发布

阅读量1.6k

点赞数

分类专栏： JQuery DOM 文章标签： JQuery

本文链接：https://blog.csdn.net/Fanbin168/article/details/38182145

版权

JQuery 同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

DOM

19 篇文章 0 订阅

订阅专栏

<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 οnlοad="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>

无盐海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
将所有div下的所有li的html()值设为"哈哈"，当点击的时候设为"我被点击了",其余没有点击的依然设为“哈哈”

//将所有div下的所有li的名字设为"哈哈"，当点击的时候设为"我被点击了",其余没有点击的依然设为“哈哈” $(function () { var ss = $("div li"); //获取div下的所有li元素 $.each(ss, function () { //遍历获取到的这些li元素 $(
复制链接

扫一扫

专栏目录