jQuery节点操作练习

最新推荐文章于 2023-07-07 19:51:56 发布

易辰_

最新推荐文章于 2023-07-07 19:51:56 发布

阅读量1.9k

点赞数

分类专栏： Jquery\Js\Ajax

本文链接：https://blog.csdn.net/u013210620/article/details/62214211

版权

Jquery\Js\Ajax 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

练习1

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function(){
                //1. 点击所有的 p 节点, 能够弹出其对应的文本内容
                /*
                1. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});
                为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 
                DOM 对象的数组
                2. 在响应函数中, this 是一个 DOM 对象. 若想使用 jQuery 对象的方法
                需要把其包装为 jQuery 对象: 使用 $() 把 this 包起来. 
                3. text() 方法时一个读写的方法: 不加任何参数, 读取文本值; 加参数为
                属性节点添加文本值(文本节点) (和 text() 类似的方法: attr(), val())
                */
                $("p").click(function(){
                    alert($(this).text());
                    $(this).text("^^" + $(this).text());
                    //alert(this.firstChild.nodeValue);
                });

                //2. 使第一个 table 隔行变色
                $("table:first tr:even").css("background", "#ffaacc");

                //3. 点击 button, 弹出 checkbox 被选中的个数
                $("button").click(function(){
                    alert($(":checkbox:checked").length);
                });
            });
        </script>
    </head>
    <body>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>

        <table>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
        </table>
        <br>
        <hr>
        <br>
        <table>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
            <tr>
                <td>第一行</td><td>第一行</td>
            </tr>
        </table>

        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <input type="checkbox" name="test" />
        <button>您选中的个数</button>
    </body>
</html>

练习2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function(){
                //1. 为 #address 添加 focus(获取焦点), blur(失去焦点) 响应函数
                $(":text").focus(function(){
                    //2. 当获取焦点时, 若 #address 中是默认值
                    //(defaultValue 属性, 该属性是 DOM 对象的属性), 就使其值置为 ""
                    var val = $(this).val();

                    if(val == this.defaultValue){
                        $(this).val("");
                    }
                }).blur(function(){
                    //3. 失去焦点是, 若 #address 的值在去除前后空格后等于 ""
                    //则为其恢复默认值. 
                    var val = this.value;   
                    if($.trim(val) == ""){
                        this.value = this.defaultValue;
                    }
                });

                //2. 
                $(":button:eq(1)").click(function(){
                    $("#single").val("选择3号");
                });

                $(":button:eq(2)").click(function(){
                    $("#multiple").val(["选择2号", "选择4号"]);              
                });

                $(":button:eq(3)").click(function(){
                    $(":checkbox[name='c']").val(["check2", "check4"]);
                });

                $(":button:eq(4)").click(function(){
                    //即便是为一组 radio 赋值, val 参数中也应该使用数组. 
                    //使用一个值不起作用。 
                    $(":radio[name='r']").val(["radio2"]);
                });

                $(":button:eq(5)").click(function(){
                    //val() 可以直接获取 select 的被选择的值. 
                    alert($("#single").val());
                    alert($("#multiple").val());

                    //val 不能直接获取 checkbox 被选择的值
                    //若直接获取, 只能得到第一个被选择的值. 
                    //因为 $(":checkbox[name='c']:checked") 得到的是一个
                    //数组. 而使用 val() 方法只能获取数组元素的第一个值
                    //若希望打印被选择的所有制, 需要使用 each 遍历. 
                    //alert($(":checkbox[name='c']:checked").val());
                    $(":checkbox[name='c']:checked").each(function(){
                        alert(this.value);
                    });

                    //而 raido 被选择的只有一个, 所以可以直接使用 val() 方法. 
                    alert($(":radio[name='r']:checked").val());
                });

            })

        </script>
    </head>
    <body>
        <input type="text" id="address" value="请输入邮箱地址"><br>
        <input type="text" id="password" value="请输入邮箱密码"><br>
        <input type="button" value="登录">

        <br><br><br>

        <input type="button" value="使单选下拉框的'选择3号'被选中"/>
        <input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
        <input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
        <input type="button" value="使单选框的'单选2'被选中"/><br>
        <input type="button" value="打印已经被选中的值"><br>

        <br/>

        <select id="single">
          <option>选择1号</option>
          <option>选择2号</option>
          <option>选择3号</option>
        </select>

        <select id="multiple" multiple="multiple" style="height:120px;">
          <option selected="selected">选择1号</option>
          <option>选择2号</option>
          <option>选择3号</option>
          <option>选择4号</option>
          <option selected="selected">选择5号</option>
        </select>

        <br/><br/>

        <input type="checkbox" name="c" value="check1"/> 多选1
        <input type="checkbox" name="c" value="check2"/> 多选2
        <input type="checkbox" name="c" value="check3"/> 多选3
        <input type="checkbox" name="c" value="check4"/> 多选4

        <br/>

        <input type="radio" name="r" value="radio1"/> 单选1
        <input type="radio" name="r"  value="radio2"/> 单选2
        <input type="radio" name="r"  value="radio3"/> 单选3

    </body>
</html>

练习3

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        //需求: 点击 submit 按钮时,　检查是否选择 type, 若没有选择给出提示: "请选择类型"; 
        //     检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
        //若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点 

        //需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值. 

        $(function(){

            function showContent(li){
                alert($(li).text());
            }

            $("li").click(function(){
                showContent(this);
            });

            //1. 同 JS 的响应函数一样, jQuery 对象的响应函数若返回 false, 
            //可以取消指定元素的默认行为. 比如 submit, a 等
            //2. val() 方法, 相当于 attr("value"), 获取表单元素的 value 属性值. 
            //3. $.trim(str): 可以去除 str 的前后空格.
            //4. jQuery 对象的方法的连缀: 调用一个方法的返回值还是调用的对象, 于是可以
            //在调用方法的后面依然调用先前的那个对象的其他方法. 
            $(":submit").click(function(){

                var $type = $(":radio[name='type']:checked");
                if($type.length == 0){
                    alert("请选择类型.");
                    return false;
                }

                var type = $type.val();

                var $name = $(":text[name='name']");
                var name = $name.val();

                //$.trim(str): 可以去除 str 的前后空格.
                name = $.trim(name);
                $name.val(name);

                if(name == ""){
                    alert("请输入内容");
                    return false;
                }

                $("<li>" + name + "</li>").appendTo($("#" + type))
                                          .click(function(){
                                              showContent(this);
                                          });

                //取消 submit 的默认行为
                return false;
            });

        })


    </script>
</head>
<body>

    <p>你喜欢哪个城市?</p>

        <ul id="city">
            <li id="bj">北京</li>
            <li>上海</li>
            <li>东京</li>
            <li>首尔</li>
        </ul>

        <br><br>
        <p>你喜欢哪款单机游戏?</p>
        <ul id="game">
            <li id="rl">红警</li>
            <li>实况</li>
            <li>极品飞车</li>
            <li>魔兽</li>
        </ul>

        <br><br>

        <form action="dom-7.html" name="myform">

            <input type="radio" name="type" value="city">城市
            <input type="radio" name="type" value="game">游戏

            name: <input type="text" name="name"/>

            <input type="submit" value="Submit" id="submit"/>

        </form>


</body>
</html>

练习4

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">

 $(function(){

     //1. jQuery 对象调用 jQuery 提供的方法的返回值如果是一个对象的话
     //那么这个对象一定是一个 jQuery 对象
     //2. find() 方法: 查找子节点, 返回值为子节点对应的 jQuery 对象
     function removeTr(aNoe){
         //获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象
         var $trNode = $(aNoe).parent().parent();
         var textContent = $trNode.find("td:first").text();
         textContent = $.trim(textContent);

         var flag = confirm("确定要删除" + textContent + "的信息吗?");
         if(flag){
             $trNode.remove();
         }

         return false;
     }

     $("#employeetable a").click(function(){
         return removeTr(this);
     });

     $("#addEmpButton").click(function(){
         $("<tr></tr>").append("<td>" + $("#name").val() + "</td>")
                       .append("<td>" + $("#email").val() + "</td>")
                       .append("<td>" + $("#salary").val() + "</td>")
                       .append("<td><a href='deleteEmp?id=xxx'>Delete</a></td>")
                       .appendTo("#employeetable tbody")
                       .find("a")
                           .click(function(){
                               return removeTr(this)
                           });
     });

 })


</script>
</head>
<body>

    <center>
        <br> <br> 添加新员工 <br> <br> name: <input type="text"
            name="name" id="name" />&nbsp;&nbsp; email: <input type="text"
            name="email" id="email" />&nbsp;&nbsp; salary: <input type="text"
            name="salary" id="salary" /> <br> <br>
        <button id="addEmpButton" value="abc">Submit</button>
        <br> <br>
        <hr>
        <br> <br>
        <table id="employeetable" border="1" cellpadding="5" cellspacing=0>
            <tbody>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Salary</th>
                    <th>&nbsp;</th>
                </tr>
                <tr>
                    <td>Tom</td>
                    <td>tom@tom.com</td>
                    <td>5000</td>
                    <td><a href="deleteEmp?id=001">Delete</a></td>
                </tr>
                <tr>
                    <td>
                        Jerry
                    </td>
                    <td>jerry@sohu.com</td>
                    <td>8000</td>
                    <td><a href="deleteEmp?id=002">Delete</a></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>bob@tom.com</td>
                    <td>10000</td>
                    <td><a href="deleteEmp?id=003">Delete</a></td>
                </tr>
            </tbody>
        </table>
    </center>

</body>
</html>

练习五引入css

    <script>
            //1.页面加载
            $(function(){
                /*//2.获取tbody下面的偶数行并设置背景颜色
                $("tbody tr:even").css("background-color","yellow");
                //3.获取tbody下面的奇数行并设置背景颜色
                $("tbody tr:odd").css("background-color","green");*/

                //2.获取tbody下面的偶数行并设置背景颜色
                $("tbody tr:even").addClass("even");
                //$("tbody tr:even").removeClass("even");
                //3.获取tbody下面的奇数行并设置背景颜色
                $("tbody tr:odd").addClass("odd");
            });
        </script>

.even       { background:#FFF38F;}  /* 偶数行样式*/
.odd        { background:#FFFFEE;}  /* 奇数行样式*/

练习六全选不选

        <script>
            $(function(){
                $("#select").click(function(){
                    //获取下面所有的 复选框并将其选中状态设置跟编码的前端 复选框保持一致。
                    //attr方法与JQ的版本有关，在1.8.3及以下有效。
                    //$("tbody input").attr("checked",this.checked);
                    $("tbody input").prop("checked",this.checked);
                });
            });
        </script>

练习七图片定时弹出消失

<script>
            $(function(){
                //1.书写显示广告图片的定时操作
                time = setInterval("showAd()",3000);
            });

            //2.书写显示广告图片的函数
            function showAd(){
                //3.获取广告图片，并让其显示
                //$("#img2").show(1000);
                //$("#img2").slideDown(5000);
                $("#img2").fadeIn(4000);
                //4.清除显示图片定时操作
                clearInterval(time);
                //5.设置隐藏图片的定时操作
                time = setInterval("hiddenAd()",3000);
            }

            function hiddenAd(){
                //6.获取广告图片，并让其隐藏
                //$("#img2").hide();
                //$("#img2").slideUp(5000);
                $("#img2").fadeOut(6000);
                //7.清除隐藏图片的定时操作
                clearInterval(time);
            }
        </script>

练习八省级联动

        <td>
                                <!--2.确定事件，通过函数传参的方式拿到改变后的城市-->
                                <select id="province">
                                    <option>--请选择--</option>
                                    <option value="0">湖北</option>
                                    <option value="1">湖南</option>
                                    <option value="2">河北</option>
                                    <option value="3">河南</option>
                                </select>
                                <select id="city">

                                </select>
                            </td>

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                //2.创建二维数组用于存储省份和城市
                var cities = new Array(3);
                cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
                cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
                cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
                cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

                $("#province").change(function(){
                    //10.清除第二个下拉列表的内容
                    $("#city").empty();

                    //1.获取用户选择的省份
                    var val = this.value;
                    //alert(val);
                    //3.遍历二维数组中的省份
                    $.each(cities,function(i,n){
                        alert(i+":"+n);
                        //4.判断用户选择的省份和遍历的省份
                        if(val==i){
                            //5.遍历该省份下的所有城市
                            $.each(cities[i], function(j,m) {
                                //alert(m);
                                //输出:武汉市，黄冈市，襄阳市，荆州市
                                //6.创建城市文本节点
                                var textNode = document.createTextNode(m);
                                //7.创建option元素节点
                                var opEle = document.createElement("option");
                                //8.将城市文本节点添加到option元素节点中去
                                $(opEle).append(textNode);
                                //9.将option元素节点追加到第二个下拉列表中去
                                $(opEle).appendTo($("#city"));
                            });
                        }
                    });

                });
            });
        </script>