jQuery-使用jQuery进行Dom操作

使用jQuery进行Dom操作；
1：节点操作
操作文本节点:通过jQuery对象的text()方法；
alert($("#bj").text());
$("#bj").text("test");

操作属性节点：通过jQuery对象的attr()方法；
alert($(":text[name='username']").attr("value"));
$(":text[name='username']").attr("value","do a test");

直接操作value属性值，可以使用更便捷的val()方法
$(":text[name='username']").val("do a test");


2：创建节点：新建（元素，属性，文本）节点：直接使用$()保证即可，返回值是一个jQuery对象
创建节点<li id="xj"'>西京</li>
$("<li id='xj'>西京</li>").appendTo($("#city"));

3：把节点插入到文档中，
创建节点<li id="xj"'>西京</li>   append增加到节点的最后
插入节点   append增加到节点的最后
$("<li id='xj'>西京</li>").appendTo($("#city"));
$("#city").append($("<li id='xj'>西京</li>"));

插入节点   append增加到节点的最前边
$("<li id='xj'>西京</li>").prependTo($("#city"));
$("#city").prepend($("<li id='xj'>西京</li>"));

插入节点 insertAfter
$("#bj").after("<li id='xj'>西京</li>");
$("<li id='xj'>西京</li>").insertAfter($("#bj"));
插入节点 insertBefore();
$("#bj").before("<li id='xj'>西京</li>");
$("<li id='xj'>西京</li>").insertBefore($("#bj"));

4：删除节点：
将jquery对应的dom节点直接删除
$("#bj").remove();

jquery对象的所有的empty()方法，清空jquery对象对应的Dom对象的所有子节点；
$("#game").empty();
5：克隆节点：
$("#bj").clone();
$("#bj").clone().attr("id","bj00");//一般克隆需要更改属性id值
$("#bj").clone(true);//克隆全部属性 如click

6：替换节点：
$("#bj").replaceWith($("<li>test</li>"));
$("<li>TEST</li>").replaceAll($("#city li:last"));
7：包裹节点
//包装li本身
$("#game li").wrap("<font color='red'></font>");
//包装所有li
$("#city li").wrapAll("<font color='red'></font>");
//包装li内部
$("#lag li").wrapInner("<font color='red'></font>");
8：常用方法
8.1 attr(): 获取属性和设置属性
   当为该方法传递一个参数时, 即为某元素的获取指定属性
   当为该方法传递两个参数时, 即为某元素设置指定属性的值
8.2 jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.
8.3 removeAttr(): 删除指定元素的指定属性
8.4 读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档
8.5 读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.
8.6 读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 
    下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组
8.7 jQuery的隐式迭代：$("p").click(function(){});
显示迭代：$(":input[name='c']:checked").each(function()
{
alert(this.value);
});//可以在显示迭代的响应函数的参数中，通过index属性获得正在遍历的对象的索引
响应函数中this是一个dom对象  若想使用jQuery对象的方法  需要将其包装为jQuery对象 $(this)
8.8 $.trim(),去除前后空格
8.9 jQuery对象方法的连缀，调用一个方法的返回值 还是调用的对象，于是可以在调用方法的后面，依然调用先前的那个对象的其他方法；
例如：
var tr = $("<tr>"+"</tr>");

tr.append($("<td>"+name+"</td>"))
.append($("<td>"+email+"</td>"))
.append($("<td>"+salary+"</td>"))
.append($("<td><a href=\"deleteEmp?id=003\">Delete</a></td>"))
.find("a")//find()方法，查找子节点，返回值为对应的jquery对象，
.click(function()
{
return removeTr(this);
});
8.10 find()方法，查找子节点，返回值为对应的jquery对象，var contend = $trNode.find("td:first").text();