jQuery 中DOM 操作详解

jQuery 中的 DOM 操作

DOM(Document Object Model—文档对象模型)：一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件

DOM 操作的分类:

DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML

HTML DOM: 使用 JavaScript和 DOM 为 HTML文件编写脚本时,　有许多专属于 HTML-DOM的属性

CSS-DOM:针对于 CSS操作, 在 JavaScript中, CSS-DOM 主要用于获取和设置 style对象的各种属性

查找节点

查找节点:

查找元素节点:通过 jQuery 选择器完成.

查找属性节点:查找到所需要的元素之后, 可以调用 jQuery对象的 attr() 方法来获取它的各种属性值

创建节点

创建节点: 使用 jQuery 的工厂函数 $(): $(html);会根据传入的 html 标记字符串创建一个 DOM对象, 并把这个 DOM对象包装成一个 jQuery 对象返回.

注意:

动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中;

当创建单个元素时,需注意闭合标签和使用标准的 XHTML 格式.例如创建一个<p>元素,可以使用 $(“<p/>”) 或 $(“<p></p>”),但不能使用 $(“<p>”) 或 $(“<P>”)

创建文本节点就是在创建元素节点时直接把文本内容写出来;创建属性节点也是在创建元素节点时一起创建

插入节点(1)

动态创建 HTML元素并没有实际用处, 还需要将新创建的节点插入到文档中,即成为文档中某个节点的子节点

插入节点(2)

以上方法不但能将新创建的 DOM元素插入到文档中, 也能对原有的 DOM元素进行移动.

删除节点

remove(): 从 DOM中删除所有匹配的元素, 传入的参数用于根据 jQuery表达式来筛选元素. 当某个节点用 remove()方法删除后, 该节点所包含的所有后代节点将被同时删除.这个方法的返回值是一个指向已被删除的节点的引用.

empty(): 清空节点 –清空元素中的所有后代节点(不包含属性节点).

复制节点

clone(): 克隆匹配的 DOM元素, 返回值为克隆后的副本.但此时复制的新节点不具有任何行为.

clone(true): 复制元素的同时也复制元素中的的事件

替换节点

replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM元素

replaceAll(): 颠倒了的 replaceWith() 方法.

注意: 若在替换之前, 已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失

包裹节点

wrap(): 将指定节点用其他标记包裹起来.该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义.

wrapAll(): 将所有匹配的元素用一个元素来包裹.而 wrap() 方法是将所有的元素进行单独包裹.

wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.

属性操作

attr(): 获取属性和设置属性

当为该方法传递一个参数时,即为某元素的获取指定属性

当为该方法传递两个参数时,即为某元素设置指定属性的值

jQuery 中有很多方法都是一个函数实现获取和设置.如: attr(), html(), text(), val(), height(), width(), css()等.

removeAttr(): 删除指定元素的指定属性

设置和获取 HTML, 文本和值

读取和设置某个元素中的 HTML内容: html() . 该方法可以用于 XHTML,但不能用于 XML 文档

读取和设置某个元素中的文本内容: text().该方法既可以用于 XHTML 也可以用于 XML文档.

读取和设置某个元素中的值: val() ---该方法类似 JavaScript 中的 value属性. 对于文本框,下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框,则返回一个包含所有选择值的数组

赞 (0)

相关推荐

  • JQuery插入DOM节点的方法

    本文实例讲述了JQuery插入DOM节点的方法.分享给大家供大家参考.具体分析如下: 动态创建HTML元素并没有实际用处,还需要将新创建的元素插入文档中.将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点.前面使用了一个插入节点的方法append(),它会在元素内部追加新创建的内容. 将新创建的节点插入某个文档的方法并非只有一种,在JQuery中还提供了其他儿种插入节点的方法,如下表所示.读者可以根据实际需求灵活地做出多种选择. HTML DOM结构如下: <p class

  • 浅谈jQuery 选择器和dom操作

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

  • jQuery DOM插入节点操作指南

    方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p> appendTo() 将所有匹配的元素追加到指定的元素中 .实际上,使用该方法是颠倒了常规 的$(A).append(B)的操作,是将A追加到B

  • JQuery 选择器、DOM节点操作练习实例

    JQuery 选择器、DOM节点操作练习实例

    一.练习一 1.需求效果分析: 2.代码示例: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s

  • JQuery查找DOM节点的方法

    本文实例讲述了JQuery查找DOM节点的方法.分享给大家供大家参考.具体分析如下: DOM操作是JQuery最常见的用法,下面我们来将JQuery的DOM操作逐个剖析下.先来最简单的查找节点操作. 为了能全面地讲解DOM操作,首先需要构建一个网页.因为每一张网页都能用DOM表示出来,而每一份DOM都可以看作一棵DOM树.HTML代码如下: <p class="nm_p" title="欢迎访问我们" >欢迎访问我们</p> <ul c

  • jQuery 中DOM 操作详解

    jQuery 中DOM 操作详解

    jQuery 中的 DOM 操作 DOM(Document Object Model-文档对象模型):一种与浏览器,平台, 语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件 DOM 操作的分类: DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM的程序设计语言都可以使用它. 它的用途并非仅限于处理网页,也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML HTML DOM: 使用 JavaScript和 DOM 为 HTML文

  • jQuery原理系列-常用Dom操作详解

    1. 事件绑定$(el).bind ie使用attachEvent,其它浏览器使用addEventListener,不同的是ie多了个on前缀,this绑定在window上,需要用call和apply修正this 的指向. if (element.addEventListener) { element.addEventListener(type, handler, useCapture); } else { if (element.attachEvent) { element.attachEve

  • jQuery中DOM操作实例分析

    本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

  • jQuery中DOM操作原则实例分析

    本文实例讲述了jQuery中DOM操作原则.分享给大家供大家参考,具体如下: 一丶Get and Set in One(读写一体) 原则 为了更加易于使用,jQuery提供了简洁的DOM操作API,其方法往往是读写一体的.也就是说,某个方法既可用于读取操作,也可用于设置操作.如果没有为其传入表示值的参数,则表示获取操作,将返回获取到的数据:如果为其传入了表示值的参数,则表示设置操作,它将设置DOM元素指定属性的值. 示例代码 // 没有传入value参数,返回第一个匹配元素的value元素 va

  • jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果

    但感觉这样写很没意思. jquery的优势就是简单的代码就能带来更好的用户体验. 所以就找几个我感觉实用的例子,拿出来介绍下.顺带把其中用到的操作和事件介绍下. html代码: <input type="text" id="address" value="请输入邮箱地址"/> jquery代码: 复制代码 代码如下: $(document).ready(function(){ $('#address').focus(function(

  • jQuery常见的遍历DOM操作详解

    jQuery常见的遍历DOM操作详解

    本文实例总结了jQuery常见的遍历DOM操作.分享给大家供大家参考,具体如下: 向上遍历DOM树 .parent():返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历 .parents():返回被选元素的所有祖先元素,一直向上遍历,直到文档的根元素(html) .parentsUntil():返回介于两个给定元素之间的所有祖先元素 <!DOCTYPE html> <html> <head> <style> .ancestors *{ disp

  • Angular2学习教程之组件中的DOM操作详解

    前言 有时不得不面对一些需要在组件中直接操作DOM的情况,如我们的组件中存在大量的CheckBox,我们想获取到被选中的CheckBox,然而这些CheckBox是通过循环产生的,我们无法给每一个CheckBox指定一个ID,这个时候可以通过操作DOM来实现.angular API中包含有viewChild,contentChild等修饰符,这些修饰符可以返回模板中的DOM元素. 指令中的DOM操作 @Directive({ selector: 'p' }) export class TodoD

  • vue指令以及dom操作详解

    "AngularJS 通过被称为 指令 的新属性来扩展 HTML.AngularJS 通过内置的指令来为应用添加功能.AngularJS 允许你自定义指令." 这是我最初接触"指令"这个词.还记得那时候,ng大行其道的时候,我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题. 后来随着前端工作的深入,我用了jq的data-attr并且学会了jq的插件使用.但,这这并不能让我把它"指令"联想到一块,后来插件需要

  • jquery中dom操作和事件的实例学习-表单验证

    很显然,这样做能提升更好的用户体验. html代码: 复制代码 代码如下: <form method="post" action=""> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="r

  • AJAX在JQuery中的应用详解

    AJAX在JQuery中的应用详解

    AJAX在jQuery中的应用 1. $.ajax()方法 $.ajax()方法是一个功能十分强悍的一个底层方法,基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法. 1.1 $.ajax()中的参数及使用方法 $.ajax()调用的语法格式为: $.ajax([options]) 其中,可选参数[options]作为$.ajax()方法中的请求设置,其格式为key/value,既包含发送请求的参数,也含有服务器响应回调的数据,常用的参数具体格式如下: 1.2 $.

随机推荐