频道栏目
首页 > 资讯 > JavaScript > 正文

jQuery_创建节点及插入节点

17-01-09        来源:[db:作者]  
收藏   我要投稿

•创建节点:使用 jQuery 的工厂函数$(): $(html); 会根据传入的html 标记字符串创建一个DOM 对象, 并把这个DOM 对象包装成一个jQuery对象返回.

•注意:

–动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;

–当创建单个元素时,需注意闭合标签和使用标准的 XHTML 格式.例如创建一个<p>元素,可以使用 $(“<p/>”)或 $(“<p></p>”), 但不能使用$(“<p>”) 或 $(“<P>”)

创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建

<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Untitled Document</title>  
          
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
        <script type="text/javascript">  
              
            //测试使用 jquery 创建节点并插入节点到指定的节点中  
            /*  
            1. 创建节点: 使用 $(html) 方式即可, 元素节点, 文本节点, 属性节点可以一网打尽  
            返回对应节点的 jquery 对象:  
            $("<li id='hz'>杭州</li>")  
              
            2. 添加节点:  
            1). appendTo 和 append: 主语和宾语的位置不同:    
            $("<li id='hz'>杭州</li>").appendTo($("#city"));    
            $("#city").append("<li id='hz'>[杭州]</li>");  
              
            2). prependTo 和  prepend: 主语和宾语的位置不同:   
            $("<li id='hz'>杭州</li>").prependTo($("#city"));  
            $("#city").prepend("<li id='hz'>[杭州]</li>");      
            */  
            $(function(){  
                //1. 创建一个 <li id="hz">杭州 </li>  
                //2. 并把其加入到 #city 的子节点  
                //$("<li id='hz'>杭州</li>").appendTo($("#city"));  
                $("#city").append("<li id='hzback'>[back杭州]</li>");  
  
                //$("<li id='hz'>杭州</li>").prependTo($("#city"));  
                $("#city").prepend("<li id='hzhead'>[head杭州]</li>");  
                  
                alert($("#hzback").text());  
            })  
        </script>  
          
    </head>  
    <body>  
        <p>你喜欢哪个城市?</p>  
        <ul id="city"><li id="bj" name="BeiJing">北京</li>  
            <li>上海</li>  
            <li id="dj">东京</li>  
            <li id="se">首尔</li>  
        </ul>  
          
        <br><br>  
        <p>你喜欢哪款单机游戏?</p>  
        <ul id="game">  
            <li id="rl">红警</li>  
            <li>实况</li>  
            <li>极品飞车</li>  
            <li>魔兽</li>  
        </ul>  
          
        <br><br>  
        gender:   
            <input type="radio" name="gender" value="male"/>Male  
            <input type="radio" name="gender" value="female"/>Female  
      
        <br><br>  
        name: <input type="text" name="username" value="hello"/>  
          
    </body>  
</html>
<!DOCTYPE html>  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Untitled Document</title>  
          
        <script type="text/javascript" src="js/jquery-1.7.2.js"></script>  
        <script type="text/javascript">  
              
            //测试使用 jQuery 插入节点  
            $(function(){  
                //1. 创建一个 <li id="hz">杭州</li>  
                //2. 并把其加入到 #bj 的后面  
                //$("<li id='hz'>杭州</li>").insertAfter($("#bj"));  
                $("#bj").after("<li id='hz'>[杭州]</li>");  
  
                //$("<li id='hz'>杭州</li>").insertBefore($("#bj"));  
                $("#bj").before("<li id='hz'>[杭州]</li>");  
            })  
          
        </script>  
          
    </head>  
    <body>  
        <p>你喜欢哪个城市?</p>  
        <ul id="city"><li id="bj" name="BeiJing">北京</li>  
            <li>上海</li>  
            <li id="dj">东京</li>  
            <li id="se">首尔</li>  
        </ul>  
          
        <br><br>  
        <p>你喜欢哪款单机游戏?</p>  
        <ul id="game">  
            <li id="rl">红警</li>  
            <li>实况</li>  
            <li>极品飞车</li>  
            <li>魔兽</li>  
        </ul>  
          
        <br><br>  
        gender:   
            <input type="radio" name="gender" value="male"/>Male  
            <input type="radio" name="gender" value="female"/>Female  
      
        <br><br>  
        name: <input type="text" name="username" value="hello"/>  
          
    </body>  
</html>
<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
<title>Insert title here</title>  
    <script type="text/javascript" src="js/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>
相关TAG标签
上一篇:jquery的ajax和getJson跨域获取json数据
下一篇:javadoc文档生成
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站