有些方法获取的是元素是集合,方法是要用单个元素调用的。例如: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="确定" οnclick="showinfo();" id="showinfo" />
</form>
</body>