jQuery小结

1.使用jQuery进行DOM操作：
1）.新建（元素、属性、文本）节点：直接使用$()包装即可，返回的是jQuery对象
var $jQuery = $("<li id='jQuery'>jQuery</li>">


2）.把节点插入到文档中：
①.append , appendTo:把节点A插入为节点B的最后一个子节点。
$("#city").append($("<li id='jQuery'>jQuery</li>"));
$("<li id='jQuery'>[jQuery]</li>").appendTo($("#city"));


②.prepend , prependTo:把节点A插入为节点B的最前面的一个子节点
$("#city").prepend($("<li id='jQuery'>jQuery</li>"));
$("<li id='jQuery'>[jQuery]</li>").prependTo($("#city"));


③.before , insertBefore:把A插入到指定的B节点之前。
$("#bj").before($("<li id='jQuery'>jQuery</li>"));
$("<li id='jQuery'>[jQuery]</li>").insertBefore($("#bj"));


④.after , insertAfter:把A插入到指定的B节点之后。
$("#bj").after($("<li id='jQuery'>jQuery</li>"));
$("<li id='jQuery'>[jQuery]</li>").insertAfter($("#bj"));


3）.删除节点：
$("#bj").remove()


4）.清空节点：
$("#game").empty();


5）.克隆节点：
1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id
属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况.
2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. 


$("#bj").clone(true)
.attr("id","bj2")
.insertAfter("#rl");


6）.替换节点：
1. 创建一个 <li>尚硅谷</li> 节点, 替换 #city 的最后一个 li 子节点
$("<li>jQuery</li>").replaceAll($("#city li:last"));


2. 创建一个 <li>[尚硅谷]</li> 节点, 
替换 #city 的第二个 li 子节点
$("#city li:eq(1)").replaceWith($("<li>[jQuery]</li>"))


7）.wrap,wrapAll,wrapInner:了解


8）.val(),html(),text(),attr(),width(),height()等兼具有读写的方法：
//读取某个节点的html内容
alert("#city").html();
//设置某个节点的html内容
$("#city").html("<li id='jQuery'>jQuery</li>");


2.技术之外：
1）. jQuery 对象可以进行隐式迭代: $("p").click(function(){...});
为选取的所有的 p 节点都添加了 click 响应函数. jQuery 对象本身就是一个 
DOM 对象的数组


2）.在jQuery中显示迭代：使用each()方法：
$(":checkbox[name='c']:checked").each(function(){
alert(this.value);
});


可以在显示迭代的响应函数的参数中通过index属性获取到正在遍历的对象的索引。


3）.在响应函数中，this是一个DOM对象，若想使用jQuery对象的方法，需要把其包装为jQuery对象
使用$()把this包起来。


4）.defaultValue:DOM对象的属性，可以获取表单元素的默认值。


5）.通过val()为radio赋值：val参数中也应该使用数组，使用一个值不起作用。


6）.val()方法不能直接获取checkbox被选择的值，若是直接获取，只能获取第一个被选择的值。因为
$(":checkbox[name='c']":checked)得到的是一个数组。若希望打印被选择的所有值，需要使用each遍历
而radio被选择的只有一个，所以可以直接使用val()方法获取被选择的值


7）.同JS的响应函数一样，jQuery对象的响应函数若返回false，可以取消指定元素的默认行为
比如submit，a等。


8）.$.trim(str):可以去除str的前后空格。


9）.jQuery对象的连缀：调用一个方法的返回值还是调用的对象，于是可以在
调用方法的后面依然调用先前的那个对象的其他方法。
$("<tr></tr>").append($("<td>"+$("#name").val()+"</td>"))
 .append($("<td>"+$("#email").val()+"</td>"))
 .append($("<td>"+$("#salary").val()+"</td>"))
 .append($("<td><a href='deleteEmp?id=xxx'>Delete</a></td>"))
 .appendTo($("#employeetable tbody"))
 .find("a").click(function(){
   return removeTr(this); 
 });
 
10）.find()方法：查找子节点，返回值为子节点对应的jQuery对象
//获取 a 节点所在的的 tr 节点. 返回时是 jQuery 对象
 var $trNode = $(aNoe).parent().parent();
 var content = $trNode.find("td:first").text();