jquery中的DOM操作

DOM操作分为:DOM核心、HTML-DOM、CSS-DOM

1.节点操作

查找

查找元素节点:jquery选择器

查找属性节点:attr(“”)方法,参数为要查询的属性的名字

创建

创建元素节点:$("html")方法,参数为HTML标记字符串,如:<p></p>

注意:(1)动态创建的新元素节点不会被自动添加到文档中,需要用其他方法插入文档中(2)创建元素时注意标签闭合,可以用$("<p></p>")或$("</p>")

创建文本节点:$("<p>文本内容</p>")方法

创建属性节点:$("<p 属性名=‘属性值‘></p>")方法

插入节点

(1)$("A").append("B")方法:将B节点插入到A节点内部的后位

 $("B").appendTo("A")方法:

(2)$("A").prepend("B")方法:将B节点插入到A节点内部的前置位置

         $("B").prependTo("A")方法:

(3)$("A").after("B")方法:将B节点插到A节点之后

         $("B").insertAfter("A")方法:

(4)$("A").before("B")方法:在B节点之前插入A节点

         $("B").insertBefore("A")方法:

删除节点

(1)remove()方法:删除某个节点及该节点包含的所有后代节点,返回值是一个指向已被删除的节点的引用,可再次使用

可通过传参选择性的删除节点

(2)detach()方法:该方法不会把匹配元素从jquery对象中删除,可再次使用

和remove的区别:所有绑定的事件、附加的数据等都都会保留下来

(3)empty()方法:清空某个节点中的所有后代节点,即:清空后只剩下HTML标记,不可再次使用

复制节点

clone()方法:复制的新元素不具有任何行为

传入参数true可使复制元素的同时复制元素中的绑定事件

替换节点

$("A").replaceWith("B")方法:将所有匹配元素替换成指定的HTML或DOM元素,即:用B节点替换A节点

$("B").replaceAll("A")方法

包裹节点

(1)$("A").wrap("B")方法:将所有的元素进行包裹,用B将A包裹起来

(2)$("A").wrapAll("B")方法:将符合的每个元素进行单独包裹

(3)$("A").wrapInner("B")方法:用B节点将A节点的子内容(包括文本节点)包裹起来

2. 属性操作

获取属性:attr()方法— — 参数为属性名

设置属性:attr()方法— — 参数为“属性名”,“属性值”;或“属性名“:”属性值”,“属性名”:“属性值”

注意:有些方法既能获取元素的值,也能设置元素的值——html()、text()、height()、width()、val()、css()、attr()

删除属性:removeAttr()方法

3.样式操作

获取样式和设置样式(获取和设置class属性):attr()方法

追加样式:addClass(“class类名”)方法

移除样式:removeClass()方法,参数为class名时,移除相应的样式;参数为空时,移除所有class的值

切换样式:toggle()方法— —控制行为的重复切换

toggleClass("class名")方法— —样式的重复切换。如果类名存在删除它,不存在添加它。

判断是否含有某个样式:hasClass("class")方法,如果有true,否则返回false

4.获取和设置HTML、文本和值

获取和设置某个元素中的HTML内容:html()方法,类似于js的innerHTML

获取和设置某个元素中的文本内容:text()方法,类似于js的innerText

注意:(1)Firefox不支持innerText,text()支持所有浏览器(2)text()对HTML和XML都有效

时间: 2024-10-12 10:56:50

jquery中的DOM操作的相关文章

HTML5移动开发之路(36)——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery

Jquerry:jquery中的DOM操作&lt;一&gt;

之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:DOM Core.HTML-DOM.CSS-DOM.我们很多情况下用到的getElementById().getElementByTagName().getAttribute()和setAttribute()等方法都是DOM Core的组成部分.而document.forms(获取表单对象).elem

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

锋利的jQuery ——jQuery中的DOM操作(三)

一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery选择器来选中元素,获取元素节点. 2)查找属性节点 利用jQuery选择器查找到需要的元素后,用attr()方法来获取它的各种属性的值. ②创建节点 1>创建元素节点 创建节点利用$(html),加入元素用append()还可以连写. 2>创建文本节点 创建文本节点直接在创建的html元素里面直接

第三章(jQuery中的DOM操作)

3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute() ) //获取表单对象 docuement.getElementsByTagName("form"); //获取某元素的src属性 element.getAttribute("src"); ②HTML DOM 专属HTML_DOM属性,提供一些更简明的记号来描述各种H

JQuery中的Dom操作和事件

(一)JQuery中的事件 1.常规事件,把js事件中的on去掉 复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行 toggle(function(){},function(){},....)可以写多个,点击事件循环执行 未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作 列子:点击按钮,创建元素,并给创建的元素添加点击事件 //对象.append():在什么

jQuery之第3章 jQuery中的DOM操作

DOM操作分为3个方面: DOM Core(核心).HTML-DOM 和 CSS-DOM 1.查找节点: 查找元素节点: var $li = $("ul li:eq(1)"); var li_txt = $li.text(); 查找属性节点: var $p = $("p"); var p_title = $p.attr("title"); 注意: attr() 获取指定元素节点属性的值. 2.创建节点: 创建元素节点: var $li = $(&

2017-6-3 JQuery中的Dom操作和事件

---恢复内容开始--- (一)JQuery中的事件 1.常规事件,把js事件中的on去掉 复合事件:hover(function(){},function(){}) ---- 相当于把鼠标移入移出事件和在一起执行 toggle(function(){},function(){},....)可以写多个,点击事件循环执行 未来元素:对象.live("事件名",function(){});   --- 对未来创建的元素进行操作 列子:点击按钮,创建元素,并给创建的元素添加点击事件 //对象

1. jQuery中的DOM操作

1)查找节点 通过jQuery选择器来完成 2)创建节点 创建元素节点:var newTd = $("<td></td>") 创建文本节点:在创建元素节点时直接把文本内容写出来.var newTd = $("<td>文本内容</td>") 3)插入节点: append() 在每个匹配元素里面的末尾处插入参数内容.作为它的最后一个子元素. 参数 一个或多个DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象