jQuery -- DOM节点的操作

DOM 操作的分类：
dom core： getElementById() getElementsByTagName() getAttribute() setAttribute()
html-dom : document.forms element.src (这些属性只能用来处理web文档)
css-dom ： element.style.color="red"
jQuery 中的dom操作：
创建节点：
var li1 = $('<li></li>');
$('ul').append(li1);
插入节点：
append var li1 = $('<li></li>'); $('p').append(li1); ==>像p标签中加入li标签
appendTo var li1 = $('<li></li>'); li1.appendTo('p'); ==>像p标签中加入li标签
after() var li1 = $('<li></li>'); $('p').after(li1); ==>像p标签的后面加入li标签
insertAfter()var li1 = $('<li></li>'); $('p').insertAfter(li1); ==>颠倒了after的操作 li在前面 p在后面
before() 作用跟after 相反
insertBefore() 作用跟before 相反
删除节点：
remove()==> var li1 = $('ul li:eq(1)').remove(); li1 为删除的节点的保留
empty() ==> var li1 = $('ul li:eq(1)').empty(); empty 不是删除节点而是清空节点

复制节点：

clone: 里面有个参数 true/false 这个是表示是否复制功能此例子中是单击事件
$('ul li').click(function(){
$(this).clone().appendTo('ul');
})
替换节点：
replaceWith():将匹配的元素替换成指定的html 或者dom元素 $('p').replaceWith('<strong>frute</strong>');==>将所有的p标签替换成strong标签
replaceAll(): 此方法跟replaceWith操作作用相同，只是颠倒了操作==>$('<strong>frute</strong>').replaceAll('p');
包裹节点：
wrap():$('p').wrap('<b></b>')// 得到的结果为b把p包裹起来<b><p></p></b>
wrapAll():$('p').wrapAll('<b></b>')// 得到的结果为b把所有的p包裹起来<b><p></p><p></p></b>
wrapInner():$(strong).wrapInner('<b></b>');//用b标签把strong内部的内容包裹起来 <strong><b>水果</b></strong>
属性操作：
attr() : $('p').attr('title');/$('p').attr('title','sab') 添加 或者获取属性
removeAttr ：$('p').removeAttr('title');
样式操作：
$('p').attr('css','myClass');
$('p').addClass('another');
$('p').removeClass('another one');以空格的形式删除多个样式

$('p').toggle(function(){},function(){})==>此处的toggle 交替执行一组动作
$('p').toggleClass('another');
$('p').hasClass('another');
$('p').html();
$('p').text();
$('input').val();
遍历节点：
children() 找到节点的子元素 而不考虑任何其他的后代元素
next() 取得匹配元素后面紧邻的同辈元素
prev() 取得前面紧邻的同辈元素
siblings() 取得匹配元素前后所有的同辈元素
closest() 取得最近的匹配元素
$(document).bind('click',function(e){
$(e.target).closest('li').css('color','red');
})//获取离点击目标最近的li元素并且添加颜色