jQuery中的DOM操作

Dom操作的分类:DOM Core,html-DOM,CSS-DOM

查找节点:

查找属性节点(通过jq选择器),操作属性节点(attr(‘属性名’,’属性值’)), 操作文本节点(text())读/写

1.创建节点:

可以使用工厂函数:$(创建节点的内容)。要使用标准的开闭和标签

$('<p id="text">p</p>')//创建了一个id为text,内容为p的p标签

返回值是一个jq对象

2.插入节点:

append()://向匹配的元素的内部的结尾处追加内容
appendTo()://将每个匹配的元素追加到指定的元素内部结尾处
$('<p id="text">p</p>').appendTo("#outer");    
$('#outer').append('<p id="text2">插入p2</p>');  // 主语宾语调换
prepend()://向每个元素的内部的开始处插入内容
prependTo()://将每个匹配的元素插入到指定元素内部的开始处
$('<p id="text">插入p</p>').prependTo("#outer");
$('#outer').prepend('<p id="text2">插入p2</p>');   //主语宾语调换

插入为某个节点的子节点

insertAfter://将指定元素a插入到另一个元素b的后面
After://在b元素的后面插入a
insertBefore://将指定元素a插入到另一个元素b的前面
Before://在b元素的前面插入a

删除节点: remove:$(‘#test′).remove();该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。不占位置

清空节点:

empty:$(selector).empty() 从指定元素中移出所有的内容,包括子节点和内容。占位置

复制节点:clone():只复制节点中的内容,不包括任何行为。 注意克隆后节点的id属性,避免id重复 clone(true):复制内容,也复制行为

替换节点:xxx.replace(a)用xxx把a替换掉 前后宾语调换:a.replaceWith(xxx)将a替换成xxx 节点互换需要先克隆节点 包裹节点:warp() 将指定节点用其他标记包裹起来,该方法对于需要在文档中插入额外的结构化标记非常有用。将所有的元素进行单独包裹 wrap(“”) wrapAll() 将所有匹配的元素用一个元素来包裹, wrapAll(“”)

wrapInner()包裹指定元素中的子内容(包括文本节点)

find()方法:查找子节点,返回值为子节点对应的jq对象 var text=$trNode.find(“te:first”).text();//获取tr的第一个td的文本节点的文本值

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Python

利用闭包解决for循环里onclick事件不能捕捉实时i值问题

问题描述 我们都知道,如果我们对于一组元素(相同的标签)同时进行onclick事件处理的时候(在需要获取到索引的时候),一般是写一个for循环,但是onclic...

1868
来自专栏HTML5学堂

HTML5-类库系列 类名的各种操作

HTML5学堂:最近讲师团队在学习JS类库的知识,因此就跟大家一起共享一下类库的搭建吧。今天要讲解的功能是:类名的各种操作。在这里,HTML5学堂提醒各位,不要...

3325
来自专栏柠檬先生

VUE 入门基础(6)

六,条件渲染   v-if 添加一个条件块     <h1 v-if=“ok”>Yes</h1>   也可以用v-else 添加else 块   <templa...

1879
来自专栏菜鸟前端工程师

JavaScript学习笔记022-原型链0原型继承0对象的深浅拷贝extends

521
来自专栏个人随笔

JavaScript 网页脚本语言 由浅入深

1)基础 学习目的: 1. 客户端表单验证 2. 页面动态效果 3. jQuery的基础 什么是JavaScript? 一种描述性语言,也是一种基于对象和事件驱...

33810
来自专栏青玉伏案

iOS可视化动态绘制八种排序过程(Swift版)

前面几篇博客都是关于排序的,在之前陆陆续续发布的博客中,我们先后介绍了冒泡排序、选择排序、插入排序、希尔排序、堆排序、归并排序以及快速排序。俗话说的好,做事儿要...

2009
来自专栏北京马哥教育

35个Python黑魔法级别

从我开始学习python的时候,我就开始自己总结一个python小技巧的集合。后来当我什么时候在Stack Overflow或者在某个开源软件里看到一段很酷代码...

3217
来自专栏懒人开发

鸿洋AutoLayout代码分析(五):Attr相关类

上一节,我们分析了很多类, 其中,最重要的是 AutoLayoutHelper 类的2个方法 adjustChildren() 和 getAutoLayou...

863
来自专栏马涛涛的专栏

JS面向对象二:this/原型链/new原理

也可以看看这篇文章周大侠啊 进击的 JavaScript(六) 之 this先了解一下`this的四种绑定规则和箭头函数的this绑定

773
来自专栏Ryan Miao

YAML 语法

YAML 语法 来源:yaml 这个页面提供一个正确的 YAML 语法的基本概述, 它被用来描述一个 playbooks(我们的配置管理语言). 我们使用 YA...

3399

扫码关注云+社区