Jquerry:jquery中的DOM操作<一>

之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学?

首先需要知道,DOM操作分为3个方面:DOM
Core、HTML-DOM、CSS-DOM。我们很多情况下用到的getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法都是DOM
Core的组成部分。而document.forms(获取表单对象)、element.src(获取元素的src属性)是HTML-DOM中的方法,这是我以前没用过的。element.style.coler="red"这种对获取style各种属性的方法则属于CSS-DOM。

Jquery中的DOM操作包括以下部分

1、查找节点

查找元素的节点:这是我们之前介绍过的选择器实现的功能。

查找属性节点:当获取到元素的节点后,若是想要获取该元素的相关属性,可使用Jquery中的attr()方法,这个方法中需要的参数是想要查找的属性的名称,例如title。

2、创建节点

插入节点的方法有以下几种:

例:<p> world </p>

append():向匹配元素内部追加内容。$("p").append("<b> hello
</b>"),结果是:<p> world <b> hello
</b></p>。

appendTo():将匹配元素追加到指定元素中。$("<b> hello
</b>").appendTo("p"),结果是:<p>
world <b> hello
</b></p>。

prepend():向每个匹配元素中前置内容。$("p").prepend("<b> hello
</b>"),结果是:<p><b> hello
</b> world
</p>。

propendTo():将匹配元素前置到指定元素中。$("<b> hello
</b>").prepend("p"),结果是:<p><b>
hello </b> world
</p>。

after():在每个匹配元素之后插入内容。$("p").after("<b> hello
</b>"),结果是:<p> world <b> hello
</b></p>。

insertAfter():将匹配元素插入到指定元素的后面。$("<b> hello
</b>").after("p"),结果是:<p> world
<b> hello
</b></p>。

before():在每个匹配元素之前插入内容。$("p").before("<b>
hello </b>"),结果是:<p><b> hello
</b> world
</p>。

insertBefore():将匹配元素插入到指定元素的前面。$("<b>
hello
</b>").insertBefore("p"),结果是:<p><b>
hello </b> world
</p>。

另插入的元素中可以包含文本和属性:$("p").append("<span title=‘hello‘> hello
</span>")。

3、删除节点

删除节点的方法有三种:remove()、detach()、empty()。

remove():var delLi = $("ul
li:eq(1)").remove()。删除ul下第二个li节点。使用remove()删除节点后,被删除的节点的子节点也会被删除,这个方法的返回值是指向被删除节点的引用,所以可以利用返回值再添加此节点。

detach():此方法和remove()用法相同,它们的区别在于detach()删除节点后,再添加此节点,该节点原有的事件、绑定的数据都会保留下来。

empty():$("ul
li:eq(1)").empty(),这个方法严格来说不是一个删除的方法,它是清空节点的方法。它能清空选中节点的所有子节点。

4、复制节点

复制节点使用的方法是clone()。$("ul li").clone().appendTo("ul")
注:复制ul中所有li节点,并将复制的节点添加到ul中,这样,在ul中就有了两份原有的li节点了!

哎,今天加班了,一直加到八点半,回家了就九点半了,今天就学习到这了,明天继续。各位菜鸟,晚安!!!

时间: 2024-10-22 08:12:33

Jquerry: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

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操作

DOM操作分为:DOM核心.HTML-DOM.CSS-DOM 1.节点操作 查找 查找元素节点:jquery选择器 查找属性节点:attr("")方法,参数为要查询的属性的名字 创建 创建元素节点:$("html")方法,参数为HTML标记字符串,如:<p></p> 注意:(1)动态创建的新元素节点不会被自动添加到文档中,需要用其他方法插入文档中(2)创建元素时注意标签闭合,可以用$("<p></p>&quo

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对象