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

jq的dom操作

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

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

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

append

  

i need to add

  $("p").append("b element to p");

效果：

i need to add: b element to p

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

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

appendTo是元素被添加被添加

$("b element to p").append("p");

效果是一致的：

i need to add: b element to p

prepend（prenpend是元素的前面插入内容，和append大同小异）

$("b element to p").prenpend("p");

效果是：

b element to pi need to add:

     同理：prependTo也是一样的

$("p").prenpendTo("b element to p");

效果是：

b element to pi need to add:

after&&insertAfter

$("p").after("b element to p");

效果：

I would like to say:

b element to p

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

before&&insertBefore

$("p").before("b element to p");

效果：<b>b element to p

I would like to say:

$("b element to p").insertBefore ("p")

wrap

$("p").wrap("

");

效果：

empty

Hello, fsoaiyfioashfhsajl;as

$("p").empty();

效果：

remove

Hello

how are

you?

效果：

how are

you?

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

$(""").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();