位置: 编程技术 - 正文
详解jQuery中的DOM操作(jquery中操作dom节点的方法)
编辑：rootadmin推荐整理分享详解jQuery中的DOM操作(jquery中操作dom节点的方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery中有哪些dom操作?,jquery django,jquery td,jquerycdn,jquery dom,jquery中有哪些dom操作?,jquery dom操作方法,jquery dom操作方法,内容如对您有帮助，希望把文章链接给更多的朋友！
大致介绍
jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发人员能方便的操作DOM对象。
jQuery中的DOM操作
看看DOM操作都有哪些
逐一来看
先写一份HTML代码，后面的代码将操作这份HTML代码
查找节点
1、查找元素节点
查找节点可以用各种各样的选择器来查找
$('ul li');
2、查找属性节点
可以用attr()方法，参数是一个的时候是查找属性，两个的时候是设置属性
console.log($('li:eq(2)').attr('title'));//菠萝
创建节点
1、创建元素节点
var $li_1 = $('<li></li>');
2、创建文本节点
var $li_1 = $('<li>香蕉</li>');
3、创建属性节点
var $li_1 = $('<li title="香蕉">香蕉</li>');
插入节点
1、向每个匹配的元素追加内容
$('li:eq(1)').append('<p>香蕉</p>');
2、将匹配的元素追加到指定元素中
$('<p>香蕉</p>').appendTo('li:eq(1)');
这两种方法都是进行同一个操作，prepend()和prependTo()与上述方法类似，不同之处就是在元素内部前插入内容
3、在每个匹配的元素之后插入内容
$('li:eq(1)').after('<p>香蕉</p>');
4、将匹配的元素插入到指定的元素后面
$('<p>香蕉</p>').insertAfter('li:eq(1)');
这两种方法都是进行同一个操作，before()和insertBefore()与上述方法类似，不同之处就是在元素前插入内容
删除节点
1、remove()方法
当某个节点用了remove()方法之后，该节点所包含的所有后代节点都将同时删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在后面再使用这些元素
remove（）方法也可以选择性的删除元素
$('ul li').remove('li[title="菠萝"]');
2、detach()方法
detach()方法和remove()方法用法一样，不同点是detach()方法，所有绑定的事件、附加的数据等都会保留下来
3、empty()方法
empty()方法并不是删除节点而是清空节点
$('ul li:eq(2)').empty();
复制节点
1、clone()方法
传入参数true时，会复制元素中所绑定的事件
替换节点
1、replaceWith()和replaceAll()
replaceWith()方法的作用是将所有匹配的元素都替换成指定的元素
$('p').replaceWith('<p>香蕉</p>');
replaceAll()方法只是将replaceWith()方法翻过来了
$('<p>香蕉</p>').replaceAll('p');
包裹节点
1、wrap()方法
将某个节点用其他的标记包裹起来，如果是一组节点，那么就会包裹这一组节点里的每个节点
$('li').wrap('<b></b>');
2、wrapAll()方法
与wrap()方法不同的是，即使是一组节点，也只会用一个节点包裹
$('li').wrapAll('<b></b>');
3、wrapInner()方法
将匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹
属性操作
1、获取属性和设置属性
attr()方法传递一个参数的时候是获取属性，传递两个参数的时候是设置属性
$('p').attr('title','you title');
2、删除属性
removeAttr()方法
$('p').removeAttr('title');
样式操作
1、获取样式和设置样式
可以用attr()方法
2、追加样式
addClass()是在原有的样式上添加样式
$('p').addClass('another');
3、移除样式
removeClass()方法可以删除class属性，如果有多个需要删除要用空格将他们分隔，如果不传入参数则表示移除全部class
$('p').removeClass('another');
4、切换样式
toggle()方法是交替执行代码
toggleClass()方法控制样式上的重复切换，如果类名存在就删除它，如果不在就添加它
$('p').toggleClass('another');
5、判断是否含有某个样式
hasClass()可以用来判断元素中时候含有某个class，如果有，返回true，否则，返回false
$('p').hasClass('another');
设置和获取HTML、文本和值
1、html()方法
此方法类似于innerHTML，可以用来读取或者设置某个元素中的HTML内容
$('p').html('<b>香蕉</b>');
2、text()方法
类似于innerText,可以用来读取或者设置某个元素中的文本内容
$('p').text('hello');
3、val()方法
类似于value属性，可以用来设置和获取元素的值。如果元素为多选，则返回一个包含所有选择的值的数组
遍历节点
1、children()方法
该方法用于取得匹配元素的子元素集合，值考虑子元素不考虑其他后代元素
$('ul').children();
2、next()方法
匹配元素后面紧邻的同辈元素
$('ul').next();
3、prev()方法
匹配元素前面紧邻的同辈元素
4、siblings()方法
匹配元素前后所有的同辈元素
5、closest()方法
该方法用于取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配直接返回该元素，否则向上查找父级元素，逐级向上查找，如果什么都没有找到则返回一个空的jQuery对象。
6、parent()与parents()方法
parent()方法获得集合中每个匹配元素的父级元素
parents()方法获得集合中每个元素的祖先元素
CSS-DOM操作
1、css()方法
可以获取元素的属性也可以设置元素的属性
$('p').css({fontSize:'px',backgroundColor:'green'});
2、height()方法、innerHeight()方法和outerHeight()方法
height()方法是获取width属性，innerHeight()方法获取的是width + padding,outerHeight()方法获取的是width + padding + border
3、offset()方法
获取元素在当前可视区的相对偏移
4、position()方法
获取元素相对于最近的一个position样式属性设置为relative或者absolute的父元素的相对偏移
5、scrollTop和scrollLeft()方法
获取元素的滚动条距离顶端的距离和左侧的距离
