之前两天学习了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节点了!

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

Jquery:jquery中的DOM操作<一>的更多相关文章

  1. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

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

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  3. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  4. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  5. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  6. 第三章(jQuery中的DOM操作)

    3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...

  7. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

  8. jQuery中的DOM操作——《锋利的JQuery》

    jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...

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

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

随机推荐

  1. DG下手工处理v$archive_gap方法

    从9i以后,oracle dataguard 备库一般都不需要手工处理丢失的日志,FAL自动会帮我们处理,下面通过个案例来讲下手工处理丢失的日志的方法: 1.在备库查询有哪些日志丢失,没应用到备库 S ...

  2. OC基础 NSDate

    OC基础  NSDate #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @auto ...

  3. js带箭头左右翻动控制

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. Java Se 基础系列(笔记) -- Exception && Array

    Exception 1.java 异常是java提供的用于处理程序中错误(指在程序运行的过程中发生的一些异常事件)的一种机制 2.java程序的执行过程中如果发生异常事件则自动生产一个异常类对象,该对 ...

  5. MySQL学习笔记(1) - cmd登陆和退出

    1. 打开cmd,输入,回车 mysql -uroot -p -P3306 -h127. 1)-u :指定用户名,root为超级权限用户. 2)-p :输入密码,不指定时回车后会提示输入密码,并用*号 ...

  6. 第8章BOM笔记

    第八章 BOM 一. Window 在浏览器中window有双重角色,他既是JavaScript访问浏览器窗口的一个借口,又是ECMAscript 规定的Global对象. 1.全局作用域 由于win ...

  7. 关于ajax直接提交表单jQuery .validator验证不起作用问题

    之前用$.ajax(function(){});直接提交表单,而表单验证不通过也能提交. $(document).ready(function(){ $.ajax({       url:" ...

  8. C语言初学 求100到200的全部素数

    #include<stdio.h> #include<math.h> int main() { int m,i,k; for(m=101;m<=200;m=m+2) { ...

  9. iOS开发 masonry 设置tableHeadView

    最近做公司项目,使用到到tableHeadView,一直习惯用masonry来设置约束,但是设置tableHeadView没有那么的简单.先看下效果图: 视图层次结构是这样的: 基础的创建工程项目之类 ...

  10. Linux/Unix工具与正则表达式的POSIX规范

    http://www.infoq.com/cn/news/2011/07/regular-expressions-6-POSIX 对正则表达式有基本了解的读者,一定不会陌生『\d』.『[a-z]+』之 ...