js和jq的dom操作&&append的元素绑定事件失效

本文介绍了jQuery中的DOM操作,包括append、prepend、after、before等方法,以及如何处理append后元素的事件绑定问题,推荐使用.on()方法来解决事件失效的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

jq的dom操作

1、添加元素  append 、prepend、after、before

append、和prepend是加在元素里面的

after、和before是加在元素外面的

append

  <p>i need to add</p>

  $("p").append("<b>b element to p</b>");

效果:<p>i need to add: <b>b element to p</b></p>

append添加到元素内最后的方法

appendTo和append的效果是一致的只是使用方法不一致

appendTo是元素被添加被添加

$("<b>b element to p</b>").append("p");

效果是一致的:<p>i need to add: <b>b element to p</b></p>

prepend(prenpend是元素的前面插入内容,和append大同小异

$("<b>b element to p</b>").prenpend("p");

效果是:<p> <b>b element to p</b>i need to add:</p>

     同理:prependTo也是一样的

$("p").prenpendTo("<b>b element to p</b>");

效果是:<p> <b>b element to p</b>i need to add:</p>

after&&insertAfter

$("p").after("<b>b element to p</b>");

效果:<p>I would like to say: </p><b>b element to p</b>

$("<b>b element to p</b>").insertAfter("p") 效果与after一致

before&&insertBefore

$("p").before("<b>b element to p</b>");

效果:<b>b element to p</b><p>I would like to say: </p>

$("<b>b element to p</b>").insertBefore("p")

wrap

$("p").wrap("<div class='wrap'></div>");

效果:<div class='wrap'><p></p></div>

empty

<p>Hello, fsoaiyfioashfhsajl;as</p>

$("p").empty();

效果:<p></p>

remove

<p class="hello">Hello</p> how are <p>you?</p>

效果:

how are <p>you?</p>

JQ的兄弟节点的控制

js的同胞兄弟
obj.parentNode.getElementsByTagName("label")[0];

jq的同胞兄弟
$(obj).siblings().eq(1);
js的查找元素
document.getElementById("");

getElementsByTagName("");
jq的查找元素
find("");


js的dom操作

appendChild

var div = document.createElement("div");

div.innerHTML = "js 动态添加div";在创建的元素中编辑内容

最后parent.appendChild(div);添加到父元素中

removeChild

parent.removeChild(element);//删除节点  

append的绑定事件失效

当我在ul中append一个li
$(".year_select ul li").click(function(){
});
明明我写了点击事件,但是append之后的元素这样是没反应的
这个时候可以用on来绑定click方法
根据jq的官方消失,jq 1.7的时候不再建议使用live元素来绑定事件,我们可以用on来绑定事件
$(".year_select ul,.activity_select ul").on("click","li",function(){
}); 
$(”.year_select“).on("click",function(){
}); 


table的js&&jq控制
js获取table的行数
 行数:var table=document.getElementById("toptable");
   var len=table.rows.length;
列数:table.rows[0].cells.length

jq获取table的行数和列数
行数:var len=$("#toptable tr").length;
列数:var td=$("#toptable tr").eq(1).find("td").length;    ps:当第一列是th的时候可以选择find("th")然后就是弟0行,如果第一列不是th那么可以直接eq(0)
js添加&&删除一行tr
var tr=table.insertRow(len);
 tr.className="h30";
 tr.insertCell(0).innerHTML=td1;
 tr.insertCell(1).innerHTML=td2;
删除:
var tr=obj.parentNode.parentNode;
  tr.parentNode.removeChild(tr);
jq添加&&删除一行tr
$("<tr><td></td><td></td><td>"</td></tr>").insertAfter($("#toptable tr").eq(len));
删除:$(obj).parent().parent().remove();

select的js&&jq控制
js的获取selct的索引和选中的值
索引:obj.selectedIndex; 
选中的值:obj.options[index].text; 
jq的获取selct的索引和选中的值
索引:$(obj).get(0).selectedIndex;
选中的值:$(obj).val();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值