jquery操作节点；jquery遍历节点

来源：互联网发布：mac 删除智能文件夹编辑：程序博客网时间：2024/06/11 17:01

有些方法获取的是元素是集合，方法是要用单个元素调用的。例如：jquery遍历，js一些方法等
<div id="mydiv">
<input id="btnew" type="button" value="创建" />
</div>
为某一元素添加子节点
方法：append（）；
格式：[获取到此元素].append('[要添加的子元素格式]');
例子：
$("#mydiv").append("<p>我有一个梦想！</p>");
$("#mydiv").append("<a href='http://www.baidu.com'>我有一个梦想！</a>");
$("#mydiv").append("<img src='images/ma.jpg' width='300px';height='300px'/>");

appendTo():就是将append方法反过来，
append方法是新创建的节点作为参数，而appendTo方法则是将原有节点作为参数。
$("<img src='images/ma.jpg' width='300px';height='300px'/>").appendTo("#mydiv");

使用append（）方法会将子元素添加到div元素最后，在button的后面。
如果想添加到前面应用prepend（）方法，格式与append（）方法一致。
prependTo()方法和appendTo()方法用法相同。

为某一元素添加相邻元素
方法：after（）；
格式：[获取到此元素].after('[要添加的子元素格式]');
例子：
$("#mydiv").after("<p>我有一个梦想！</p>");
$("#mydiv").after("<a href='http://www.baidu.com'>我有一个梦想！</a>");
$("#mydiv").after("<img src='images/ma.jpg' width='300px';height='300px'/>")

insertAfter（）方法和after（）方法效果一致，只是格式不同。
$('<img src="images/3.jpg" class="classimg"/>').insertAfter('#mydiv');
使用此方法会在div后面添加同级元素，

如果想添加到前面应该用before（）方法；
insertBefore（）方法和before（）方法效果一致，只是格式不同。
$('<img src="images/3.jpg" class="classimg"/>').insertBefore('#mydiv');

复制节点

$('#img').click(function () {
    $(this).clone().appendTo('#divshow');
    }):
复制'img'节点，并将新复制的节点添加到divshow上，新复制的节点不具备原节点的事件，

如单击新节点就不会复制新节点。

$('#img').click(function () {
$(this).clone(true).appendTo('#divshow');
}):
复制img的新节点，并将新节点添加到divshow山，并且新复制的节点也具有原节点的特性，

如点击新节点也会复制新节点

替换节点：
$('#sname').replaceWith('<span id=sname>' + name + '</span>');将id为sname的控件替换成后面的字符串
$('<span id=semail>' + emial + '</span>').replaceAll('#semail'):将id为semail的控件替换成前面指定的字符串
注:前者是被替换的在前边，后者是被替换的在后边，且一旦替换完成，被替换元素的一切事件都将消失

删除节点：
$('li').remove('li[title=t]'):删除title=t的li节点
$('li:eq(1)').remove():删除索引为1的li节点

遍历节点：
例子：
<head runat="server">
    <title></title>
    <style type="text/css">

    </style>
    <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript">
//js代码
        /*function showinfo() {
            var radios = document.getElementsByName('rad');
            for (var i = 0; i < radios.length; i++) {
                if (radios[i].checked==true) {
                    alert(radios[i].value);
                }
            }
        }*/
//jquery代码
$(function () {
            $('#showinfo').click(function () {
                $('#form1 :radio').each(function () {
                    if ($(this).is(':checked')) {
                        alert($(this).val());
                    }
                })
//另外一种jquery方法
               /*$('#form1 :radio').each(function () {
                    if (this.checked==true) {
                        alert($(this).attr('value'));
                    }
                });*/
//另外一种jquery方法
           /* $('#form1 :radio').each(function (i) {
                    if ($('#form1 :radio')[i].checked == true) {
                        alert($(this).attr('value'));
                    }
                });*/
            })
        })

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="radio" name="rad" value="红色" />红色
    <input type="radio" name="rad" value="蓝色" />蓝色
    <input type="radio" name="rad" value="橙色" />橙色
    <input type="radio" name="rad" value="黄色" />黄色
    </div>
    <input type="button" value="确定" onclick="showinfo();" id="showinfo" />
    </form>
</body>

0 0