当前位置：文档之家 › jquery_03 DOM操作

jquery_03 DOM操作

  • 格式：doc
  • 大小：214.50 KB
  • 文档页数：9

1.DOM操作
1.1.筛选节点API
过滤：类似基本过滤选择器、内容过滤选择器
$(“table tr”) 选中table中所有tr元素
$(“table tr:first”) 基本过滤选择器写法
$(“table tr”).first() 选中这些tr元素的第一个
查找：通过当前元素，获取祖先、后代、父元素、子元素、兄弟元素$(“#mydiv”) 获取id为mydiv的元素
$(“#mydiv a”) 获取id为mydiv 中所有a元素
$(“#mydiv”).children(“a”) 获取子元素
$(“#mydiv”).find(“a”) 获取id为mydiv 中所有a元素
$(“#mydiv”).parent(“div”) 获取父元素
$(“#mydiv”).parents(“div”) 获取id为mydiv 的所有div祖先元素
1.2.文档对象属性操作
获取一个元素的属性jquery对象.attr(属性名)
为一个元素的属性赋值jquery对象.attr(属性名, 属性值)删除一个属性jquery对象.removeAttr(属性名)
【示例代码】
需求：
脚本代码：
1.3.文档对象CSS样式操作
【示例代码】
HTML代码：
需求：
样式代码：
1.4.设置或获取HTML、文本和值
【示例代码】
需求：
脚本代码：
重点：val() 快速获取select选中的值，val(值) 对select、radio、checkbox 进行赋值！！【示例代码2】
脚本代码：
1.5.文档DOM对象增删改查
回顾传统XML DOM编程
1.5.1.添加节点
DOM 添加节点：
document.createElement(元素名称); // 创建节点<a></a>
element.setAttribute(name, value) ; // 设置元素属性值<a href=”#”></a>
element. textContent = 文本内容; // 浏览器不兼容<a href=”#”>xxxx</a> 父节点.appendChild(elements) ; // 添加节点元素
JQuery 创建节点
【示例代码】
js脚本
1.5.
2.删除节点
传统DOM操作：通过父节点干掉子节点获取被删除节点o
【示例代码】
脚本代码：。

合集下载

什么是DOM及DOM操作？

什么是DOM及DOM操作？

什么是DOM及DOM操作？什么是 DOM ?DOM(⽂档对象模型)是针对于xml但是扩展⽤于html的应⽤程序编程接⼝，定义了访问和操作html的⽂档的标准。

W3C⽂档对象模型是中⽴于平台和语⾔之间的接⼝，它允许程序和脚本动态的访问和更新⽂档的内容、结构、样式。

总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。

DOM 分层节点DOM的分层节点⼀般被称作是DOM树，树中的所有节点都可以通过脚本语⾔例如js进⾏访问，所有HTMlL元素节点都可以被创建、添加或者删除。

在DOM分层节点中，页⾯就是⽤分层节点图表⽰的。

整个⽂档是⼀个⽂档节点，就想是树的根⼀样。

每个HTML元素都是元素节点。

HTML元素内的⽂本就是⽂本节点。

每个HTML属性时属性节点。

当咱们访问⼀个web页⾯时，浏览器会解析每个HTML元素，创建了HTML⽂档的虚拟结构，并将其保存在内存中。

接着，HTML页⾯被转换成树状结构，每个HTML元素成为⼀个叶⼦节点，连接到⽗分⽀。

考虑以下 Html 结构：<!DOCTYPE html><html lang="en"><head><title>A super simple title!</title></head><body><h1>A super simple web page!</h1></body></html>在这个结构的顶部有⼀个document，也称为根元素，它包含另⼀个元素：html。

html元素包含⼀个head，⽽ head ⼜有⼀个title。

然后body 包含⼀个h1。

每个HTML元素都由特定类型（也称为接⼝）表⽰，并且可能包含⽂本或其他嵌套元素：document (HTMLDocument)|| --> html (HTMLHtmlElement)|| --> head (HtmlHeadElement)| || | --> title (HtmlTitleElement)| | --> text: "A super simple title!"|| --> body (HtmlBodyElement)| || | --> h1 (HTMLHeadingElement)| | --> text: "A super simple web page!"每个HTML元素都来⾃Element，但其中很⼤⼀部分都是专⽤的。

jq常用方法

jq常用方法

jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。

在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。

1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。

- $(".class")：根据class选择元素。

- $("tag")：根据标签名选择元素。

- $("element").find(selector)：在指定元素中查找符合条件的元素。

2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。

常用的事件有：- $(selector).click(function(){})：点击元素触发事件。

- $(selector).mouseover(function(){})：鼠标移上元素触发事件。

- $(selector).submit(function(){})：表单提交触发事件。

- $(selector).focus(function(){})：元素获得焦点触发事件。

3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。

- $(selector).text()：获取或设置元素的文本内容。

- $(selector).attr()：获取或设置元素的属性。

- $(selector).addClass()：为元素添加class。

- $(selector).remove()：删除指定元素。

4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。

dom操作中几种获取文本内容的方法

dom操作中几种获取文本内容的方法

dom操作中几种获取文本内容的方法在网页开发中，DOM（文档对象模型）操作是一种常用的技术，它允许开发者通过编程方式访问和修改HTML或XML文档的内容、结构和样式。

获取文本内容是DOM操作中的常见任务之一。

下面介绍几种获取文本内容的方法。

1. 使用 innerHTML 属性`innerHTML` 属性返回一个表示由开始到结束的整个文档内容的字符串表示。

这个属性包括了所有的标签和文本内容。

例如：```javascriptvar text = document.getElementById("myElement").innerHTML;```上述代码将获取ID为`myElement`的元素的HTML内容，并将其存储在变量`text`中。

2. 使用 textContent 属性`textContent` 属性返回一个表示元素的所有文本内容（包括所有标签内的文本）的字符串表示。

它不会获取标签之间的空白字符。

例如：```javascriptvar text =document.getElementById("myElement").textContent;```上述代码将获取ID为`myElement`的元素的文本内容，并将其存储在变量`text`中。

3. 使用 getElementById 或 querySelector 方法获取元素，再使用 innerText 或 textContent 属性如果你只想获取文本内容，而不包括任何标签或属性值，可以使用 `innerText` 或 `textContent` 属性。

但是，如果你想获取包括标签和属性值的完整内容，可以使用 `getElementById` 或`querySelector` 方法获取元素，然后再使用 `textContent` 或`innerText` 属性。

例如：```javascriptvar element = document.getElementById("myElement");var text = element.textContent || element.innerText;```上述代码将获取ID为`myElement`的元素，并使用`textContent` 或 `innerText` 属性获取其文本内容，并将其存储在变量`text`中。

使用jQuery操作 DOM

使用jQuery操作 DOM

DOM操作分为三类：
DOM Core：任何一种支持DOM的编程语言都可 以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如 document.forms CSS-DOM：用于操作CSS，如 element.style.color="green"
提示
JavaScript用于对(x)html文档进行操作，它对这三类 DOM操作都提供了支持
演示示例6：节点属性操作
21/38
插入同辈节点
元素外部插入同辈节点
语法 after(content) 功能 $(A).after (B)表示将B插入到A之后 如：$("ul").after($newNode1); $(A). insertAfter (B)表示将A插入到B之后 如：$newNode1.insertAfter("ul"); $(A). before (B)表示将B插入至A之前 如：$("ul").before($newNode1);
appendTo(content) $(A).appendTo(B)表示把A追加到B中 如：$newNode1.appendTo("ul"); prepend(content) $(A). prepend (B)表示将B前置插入到A中 如：$("ul"). prepend ($newNode1);
prependTo(content $(A). prependTo (B)表示将A前置插入到B中 ) 如：$newNode1. prependTo ("ul");
3/38
本章任务
制作今日团购模块 制作YY安全中心登录框特效 制作会员信息 制作凡客诚品帮助中心页面