Jquery·DOM操作

DOM操作分为3个：

DOM core（核心），HTML_DOM，CSS_DOM

jQuery中的DOM操作：

查找节点：

1.查找节点元素：

    var $li = $('ul li:eq(1)');

2.查找节点属性：

    var $p = $('p').attr('title');

创建节点：

1.创建元素节点：

var $li = $('<li></li>');

2.创建文本节点：

var $li = $('<li>一二三</li>');

3.创建属性节点：

var $li = $('<li title='123'>一二三</li>');

插入节点：

append():在每个匹配的元素内部追加指定内容

appendTo():将所有的匹配元素追加到指定元素中

prepend():在每个匹配的元素内部前置内容

prependTo():将所有匹配的元素前置到指定的元素中

after():在每个匹配的元素之后插入内容

insertAfter():将所有匹配的元素插入到指定的元素后面

before():在每个匹配的元素之前插入内容

insertBefore():将所有匹配的元素插入到指定元素之前

删除节点：

1.remove()方法：在网页中删除节点，但在jQuery中该元素还存在

2.empty()方法： 清空元素中的内容或者子元素

复制节点：

clone();

替换节点：

1.replaceWith():

2.replaceAll():

包裹节点：

1.wrap():单独包裹

2.wrapAll():一次性包裹

3.wrapInner():将匹配的元素的内容包裹

属性操作：

1.获取属性：

var $href = $('a').attr('href');

2.设置属性：

$('a').attr('href','html....');

$('a').attr({'height':'20','href':'www.sss'});

3.删除属性

1.removeArrt();

$('a').removeAttr('hright');

样式操作：

1.获取样式，设置样式：

var $href = $('a').attr('class');

$('a').attr('class','high');

2.追加样式：

$('a').addClass('high');

3.移除样式：

$('a').removeClass('high');

4.切换样式：

//控制方法

$('a').toggle(function(){

//显示元素

}，

function(){

//隐藏元素

});

//控制样式

$('a').toggle('class');

5.判断是否含有某个样式：

1.hasClass();

$('a').hasClass('class');

2.is();

$('a').is('class');

设置和获取html，文本和值

1.html()方法：

获取或者设置元素内的内容（包含标签以及属性）

2.text()方法：

获取或者设置元素内的内容（不包含标签以及属性）

3.val()方法():

获取表单中的value值

遍历节点

1.children()方法：

$('p').children();

取得匹配元素的子元素集合

2.next()方法：

$('p').next();

取得匹配元素后面紧邻的同级元素

3.prev()方法：

$('p').prev();

取得匹配元素后面紧邻的同级元素

4.siblings()方法：

$('p').siblings();

取得匹配元素后面紧邻的同级元素

5.closest()方法：

取得最近的匹配元素

CSS_DOM操作

1.css()方法：

$('p').css('color');

$('p').css('color','red');

2.opacity()方法：

jQuery已经处理好了透明度的兼容问题

$('p').css('opacoty','0.5');

3.height()方法：

获取和设置元素宽高

$('p').height('20');

4.width()方法：

获取和设置元素宽高

$('p').width('20');

5.offset()方法：

获取元素的相对偏移

$('p').offset().left;

$('p').offset().top;

6.position()方法：

获取元素的相对偏移

$('p').position().left;

$('p').position().top;

7.scrollTop()方法，scrollLeft()方法：

$('p').scrollTop();

$('p').scrollTop('50');