由于昨天晚上回来的晚，写的有点匆忙，所以昨天的学习笔记中出现了多处错误的地方，幸好有各位园友帮忙指出，在这里谢过各位了！今天继续学习关于Jquery中DOM的操作，其实是昨天随笔的延续，求围观！！！

HTML示例代码如下：

<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>

    <ul>

        <li title="苹果">苹果</li>

        <li title="橘子">橘子</li>

        <li title="菠萝">菠萝</li>

    </ul>

5、替换节点

替换节点有两个方法：replaceWith()和replaceAll()。

replaceWith()：将所有匹配的元素替换成指定的HTML或者DOM元素。

$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>")。

上面代码的效果是将示例中的<p>元素替换为指定的<strong>元素。

replaceAll()的作用与replaceWith()的作用相同，只是写法不同而已。

$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p")。效果同上。

6、包裹节点

包裹节点的方法有三种：wrap()、wrapAll()、wrapInner()。

wrap()方法是在选中节点的外面包裹指定的标记，如果有多个相同的元素被选中，则每个元素单独包裹。

wrapAll()方法也实现了将选中元素包裹指定标记，但是它与wrap()方法的不同是：如果有多个元素被选中，它会在所有被选中的元素外面包裹一个指定标记。（注：如果被包裹的多个元素间有其它元素，其它元素会被放到包裹元素之后）。

wrapInner()方法与上面两种方法的不同是：它将选中元素的子元素用指定的标记包裹起来，包括文本节点。

7、属性操作

在Jquery中，用attr()方法来获取或设置属性，用removeAttr()方法来删除元素属性。

attr()方法中如果只有一个参数，则是获取元素的属性。

$("p").attr("title"),获取<p>元素的title属性。

attr()方法中如果有两个参数，则是为指定元素设置某个属性的值。

$("p").attr("title","your title"),将<p>元素的title属性的值设置为“your title”。

attr()方法还可以为指定元素设置多个属性的值。

$("p").attr({"title":"your title","name":"text"}),将<p>元素的title属性的值设置为"your title"，name属性的值设置为“text”。

removeAttr():$("p").removeAttr("title"),删除<p>元素的title属性值。

8、样式操作

(1)、获取样式和设置样式也是用attr()方法来实现，用法与设置和获取title属性相同。

(2)、追加样式使用addClass()方法。如果在<head>标签下的<style>标签中用class类，即可使用addClass("className")来追加样式。追加样式时需要注意的是：在原有样式的基础上追加样式，如果前后两种样式中用相同的属性，则后者的属性覆盖前者的属性。

(3)、移除样式用removeClass()方法来实现，如果直接用removeClass()没有参数的话，则默认移除选中元素的所有样式；如果有一个参数，则移除指定的一个样式，如果括号中的一对引号有两个样式的名称，并且样式的名称以空格分隔开来的话，则移除这两个样式。

(4)、切换样式。在Jquery中有一个方法toggle(),这个方法我在第二章时就看到了，但忘记介绍了。toggle()方法实现了事件的切换，如果在toggle()存在多个事件，在触发toggle()后会轮流执行其中的事件。而切换样式的方法是toggleClass(),其中参数是一组样式的名称，执行时，如果已存在此样式，则移除样式，如果不存在，则添加该样式。

(5)、判断是否含有某个样式用方法hasClass(),其中的参数则为样式名，如果样式存在，则返回true，不存在返回false。这个方法其实是调用了is()方法来实现的，所以它等同于is(".className")。

9、设置和获取HTML、文本和值

html()方法等同于JavaScript中的innerHTML属性，它的功能是获取或设置某个元素中的HTML内容。

text()方法等同于JavaScript中的innerText属性，它的功能是获取或设置某个元素中的文本内容。

val()方法等同于JavaScript中的value属性，它的功能是获取或设置元素的值。

上面三个方法的用法相同，如果它们没有参数的时，则是获取值；如果有参数时，则是设置值。另外，JavaScript中的innerText不能在Firefox浏览器下运行，而Jquery则支持所有浏览器。

focus()方法相当于JavaScript中的onfocus()方法，作用是处理获得焦点时的事件。

blur()方法相当于JavaScript中的onblur()方法，作用是处理失去焦点时的事件。

10、遍历节点

children():获取选中元素的子元素的集合，不考虑其后代元素。

next()：获取选中元素后面紧邻的同辈元素。

prev():获取选中元素前面紧邻的同辈元素。

siblings()：获取选中元素前后的所有同辈元素。

closest()：该方法用于取得最近的匹配元素，首先看选中元素是否匹配，若不匹配则向上检索父元素，直到找到匹配元素。如果没有匹配元素，则返回一个空Jquery对象。

parent()：获取每一个选中元素的父元素。

parents()：获取每一个选中元素的祖先元素。

好吧，今天就到此结束了。这一个多月来一直在加班，晚上回来的时候就九点半了，有时候会想，要不今天累了就不学习了，但是马上又想到如果今天不学习了，可能还会有下一个今天，还有下下一个今天，所以我还是坚持了下来，我相信我能一直坚持下去，我一定能成长为大神的！！！

各位，晚安！

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：jquery中的DOM操作<一>

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

  5. jQuery中的DOM操作总结

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

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

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

  7. 第三章（jQuery中的DOM操作）

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

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

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

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

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

  10. 锋利的jQuery ——jQuery中的DOM操作（三）

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

随机推荐

  1. FineUI添加隐藏标题

    添加隐藏标题 窗体前台: <x:Button ID="btnShowHideHeader" runat="server" Icon="Secti ...

  2. Sherpa | Complete Navigation System 介绍与教材

    这里的夏尔巴人在iPad上使用的一种新的视频. 正如其名称所暗示的,夏尔巴人是所有您的导航需求的整体解决方案. 夏尔巴人带来了每个接口的三个主要的导航元素结合在一起 - 导航栏,侧边栏和页脚粘. 每一 ...

  3. 《第一行代码》学习笔记39－服务Service（6）

    1.Android中定时任务一般有两种实现方式:(1)使用Java API里提供的Timer类:(2)使用Android的Alarm机制. 但是,Timer类有个明显的短板,不太适用于那些需要长期在后 ...

  4. 如何快速恢复MyEclipse的默认主题

    这里天在研究主题,到网上找了一些主题导入,可是有一部分主题导入后不能通过preference选项进行恢复默认主题!那怎么办?有没有别的办法! 在网上找了一些答案,有更改工作空间的办法,也有替换.set ...

  5. .NET MVC通过反射获取数据修改历史记录，并插入数据表中

    本文属于原创,转载时请标明出处! 折磨了我一个晚上的问题,奈何对物理的反射印象太深了,整天去想着物理的反射.折射怎么解.感谢少将哥哥给我的指点,经过一个晚上对反射的恶补,最终搞定了.纪念一下. 1.核 ...

  6. （五）JS学习笔记 - Sizzle选择器

    Sizzle词法解析 sizzle对于分组过滤处理都用正则,其中都有一个特点,就是都是元字符^开头,限制匹配的初始,所以tokenize也是从左边开始一层一层的剥离. •可能会应用到正则如下: // ...

  7. win7下的iis配置

    1.配置错误 说明:在处理向该请求提供服务所需的配置文件时出错.请检查下面的特定错误详细信息并适当地修改配置文件. 分析器错误消息:无法识别的属性“targetFramework”.请注意属性名称区分 ...

  8. Activiti工作流学习-----基于5.19.0版本(4)

    四.使用工作流开发 org.activiti.engine.ProcessEngine提供的Service作用在工作流引擎上面,如果所示是模仿一个公司简单的审批流程,你可以下载这个Demo:Activ ...

  9. 关于uC/OS的简单学习(转)

    1.微内核 与Linux的首要区别是,它是一个微内核,内核所实现的功能非常简单,主要包括: 一些通用函数,如TaskCreate(),OSMutexPend(),OSQPost()等. 中断处理函数, ...

  10. AES CBC 128的实现

    原由 AES已经变成目前对称加密中最流行算法之一,AES可以使用128.192.和256位密钥,并且用128位分组加密和解密数据. 项目中需要使用AES对密码信息进行加密,由嵌入式设备使用C语言进行加 ...