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