详解jQuery中的DOM操作

大致介绍  

jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象。

jQuery中的DOM操作

看看DOM操作都有哪些

逐一来看

先写一份HTML代码,后面的代码将操作这份HTML代码

<p title="选择你最喜欢的水果">你最喜欢的水果?</p>
<ul>
 <li title="苹果">苹果</li>
 <li title="橘子">橘子</li>
 <li title="菠萝">菠萝</li>
</ul>

查找节点

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()方法之后,该节点所包含的所有后代节点都将同时删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在后面再使用这些元素

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

remove()方法也可以选择性的删除元素

$('ul li').remove('li[title="菠萝"]');

2、detach()方法

detach()方法和remove()方法用法一样,不同点是detach()方法,所有绑定的事件、附加的数据等都会保留下来

$('ul li').click(function(){
 alert($(this).html());
});
 var $li = $('ul li:eq(1)').detach();
$li.appendTo('ul');//点击事件会保存下来

3、empty()方法

empty()方法并不是删除节点而是清空节点

$('ul li:eq(2)').empty();

复制节点

1、clone()方法

$('ul li').click(function(){
$(this).clone(true).appendTo($('ul'));

传入参数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()方法是交替执行代码

$('p').toggle(function(){
 // 函数1
},function(){
 // 函数2
 });

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:'20px',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()方法

获取元素的滚动条距离顶端的距离和左侧的距离

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

(0)

相关推荐

  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

  • jQuery遍历DOM节点操作之filter()方法详解

    本文实例分析了jQuery遍历DOM节点操作之filter()方法.分享给大家供大家参考,具体如下: .filter(selector) 此方法用于在匹配元素中按照选择器表达式进行筛选. 记住:使用此方法必须得传入选择器表达式参数,不然会报错"'nodeType' 为空或不是对象" 另外请注意这个filter方法和jquery中的find方法的区别: filter方法是对匹配元素进行筛选,而find方法是对匹配元素的后代元素进行筛选. 从jquery1.4版本开始,filter方法又添

  • jQuery利用sort对DOM元素进行排序操作

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来进行重新渲染列表到客户端,这样做未尝不可,但是在有些情况下,我们既不需要利用框架也不需要重新生成列表到客户端,明明可以在客户端进行,达到我们的目的,为何要再一次发送请求到服务器呢?下面我们来看看. 话题 我们首先看看在w3c中js的sort方法. <script type="text/java

  • 牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作

    只有jQuery对象才能调用jQuery类库的各种函数,同样有些dom对象的属性和方法在jQuery上也是无法调用的,不过基本上jQuery类库提供的函数包含了所有的dom操作.这就需要我们知道如何将jQuery对象和DOM的相互转换的方法. 1.jQuery对象就是通过jQuery包装DOM对象后产生的对象. 2.jQuery对象和DOM对象的相互转换. 良好的书写风格: 复制代码 代码如下: var $input=$("input") jQuery获取的对象在变量前面加上$. &l

  • 使用jQuery操作DOM的方法小结

    一.DOM操作分为3类 1.DOM Core DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它.它的用途不仅限于处理一种使用标记语言编写出来的文档 2.HTML-DOM 比DOM Core出现的更早,它提供了一些更加简明的标记来描述各种HTML-DOM的元素属性 3.CSS-DOM CSS-DOM 失针对CSS的操作,在JavaScript中,只要作用是获取和设置style对象各种属性 二.样式操作 1.直接设置样式值 css(name,value) /

  • jQuery移动和复制dom节点实用DOM操作案例

    本文章简单的介绍了关于jQuery移动和复制dom节点程序实现,有需要学习的朋友可参考参考. 在做一个项目时,需要dom节点移动,如以下代码: 复制代码 代码如下: <div></div> <p></p> 需要把p标签移动到div标签里,经过测试发现,在jQuery中移动dom节点非常方便: 复制代码 代码如下: $('div').append($('p')) 这样即可把p标签移动到div标签里,千万不要写成这样: 复制代码 代码如下: $('div').a

  • 原生JS和jQuery操作DOM对比总结

    一.创建元素节点 1.1 原生JS创建元素节点 document.createElement("p"); 1.2 jQuery创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: var textEl = document.createTextNode("He

  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

  • jQuery学习笔记之jQuery的DOM操作

    一.节点的操作 1.查找节点: var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点 如:var $ul_1=$("ul"); 2.创建并追加节点: var $var_1=$("<htmltype>");//这句话是创建一个节点 $("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中 例子:var $li_1=

  • jQuery的DOM操作之删除节点示例

    如果文档中某一个元素多余,那么应将其删除.jQuery提供了两种删除节点的方法,remove()方法和empty()方法. 1. remove(): <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <meta http-equiv="Content-Type" content=&quo

随机推荐