DOM是 Document Object Model的缩写,是一种与浏览器,平台,语言无关的接口,使用该接口可以访问页面中所有的标准组件,下面介绍一下常用的一些DOM操作:

选择节点:

将在下篇博客中详细的说一下JQuery的选择器

创建节点:

使用$( html );函数,例如创建一个<li>元素。使用JQuery写成:

var $li = $("<li Title=’元素的Title属性名‘>元素名</li>");

创建完成后,通过.appendTo()方法添加到想要添加到的具体元素里

常用的插入节点的方法:

append()/appendTo() : 在元素内加载内容

prepend()/prependTo() : 在匹配的元素内部前置加载元素

after()/insertAfter() : 在匹配的元素后加载元素

before()/insertBefore() 在匹配的元素前加载元素

删除节点:

Remove(),Detath(),empty()

Remove()删除元素节点后,会把附带的绑定事件,附加数据等全部删除,此外Remove()方法也可以有选择性的删除元素,例如:

$("ul li").remove("li[title != 元素的Title名]");

Detath()删除元素节点后,会保留附带的绑定事件,附加数据等

empty()确切的说,是清空节点的所有后代元素

复制节点:

使用clone()函数,复制的元素不具有原有的功能,如果想把功能等也复制过去,在clone()函数中传入参数true,变为clone(true)

替换节点:

replaceWith()和replaceAll()函数。替换之后,原有的节点绑定事件失效

在替换的元素前加入<strong></strong>标签

属性操作:

atter(): 用来获取和设置元素属性

removeAtter(): 删除元素属性

获取到元素

往atter()函数中传入属性名称

设置元素

往atter()函数中传入属性名称以及设置的属性值,中间用.隔开

样式操作:

addClass/RemoveClass()

RemoveClass()函数中,传入class样式名称,则删除对应的样式,若要删除多个样式,填入多个样式名,中间用空格隔开,若不填入参数,则删除全部样式

ToggleClass() : 替换样式

hasClass() : bool值类型,判断谁否有相应样式

获取html,文本和值:

$().html()/$().text()/$().val()

鼠标的焦点事件:

focus()/blur() 获得焦点/失去焦点

遍历节点:

children(): 获取元素的子元素

next() : 获取所选元素的下一个同辈节点

prev(): 获取所选元素的前面紧临的同辈节点

siblings(): 获取所选元素的前后所有的同辈节点

Jquery中的DOM操作:的更多相关文章

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

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

  2. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

  3. jQuery中的Ajax应用<思维导图>

    传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...

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

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

  5. 如何合理利用iMindMap中的模板创建思维导图

    思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...

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

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

  7. Jquery:jquery中的DOM操作<一>

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

  8. jQuery中的DOM操作总结

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

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

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

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

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

随机推荐

  1. 分享30道Redis面试题,面试官能问到的我都找到了

    1.什么是Redis?简述它的优缺点? Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到 ...

  2. 怎样从外网访问内网SQLServer数据库?

    本地安装了一个SQLServer数据库,只能在局域网内访问到,怎样从外网也能访问到本地的SQLServer数据库呢?本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动SQLServer数据 ...

  3. MyEclipse中项目运行时发生了Tomcat报错:[java.lang.OutOfMemoryError: PermGen space]

    Tomcat内存溢出,异常信息如下: 十一月 26, 2017 1:52:26 下午 org.apache.catalina.core.ContainerBase$ContainerBackgroun ...

  4. 《2015 html5 iweb 峰会观会后感》

    今天是2015  html5 iweb 峰会,大会在早上8:30,就开始了,没想到被坑了,看错一个字,把"国际会议中心",看成了"国家会议中心".大约过了10多 ...

  5. mysql查询INFORMATION_SCHEMA表很慢的性能优化

    最近发现,我们有些环境的tomcat应用启动非常缓慢,大部分在3-5分钟,有个测试环境更加阶段,要十几分钟才能启动完成.经过仔细分析,是一个查询INFORMATION_SCHEMA库中数据字典信息的查 ...

  6. eclipse maven jar工程导出项目依赖的jar包

    今天遇到个事,给业务开发/测试搞个了转换工具,是使用swing写的,依赖了很多的三方包,为了方便打算以bat方式提供,但是要导出依赖的三方jar,网上搜了下,如下(已测试): 一.导出到默认目录 ta ...

  7. mysql 水平分表技术

    这里做的是我的一个笔记. 水平分表比较简单, 理解就是: 合并的表使用的必须是MyISAM引擎 表的结构必须一致,包括索引.字段类型.引擎和字符集 数据表 user1 CREATE TABLE `us ...

  8. topcoder srm 530 div1

    problem1 link 对于每个还未切掉的‘X’用cutter作用一次.从左上角到右下角,依次判断即可. problem2 link 首先,如果一个顶点不能从0到达或者不能到达节点$n-1$,那么 ...

  9. ODAC(V9.5.15) 学习笔记(二)控件列表

    ODAC的控件有26个,简单介绍如下: TOraSession  管理Oracle的连接  TOraQuery  使用SQL进行数据获取,自动将更新提交数据库  TSmartQuery    在处理字 ...

  10. 【做题】CF196E. Opening Portals 排除无用边&最小生成树

    题意:给出一个有\(n\)个结点,\(m\)条边的连通无向图,边有边权,等于经过这条边所需的时间.有\(k\)个点设有传送门.一开始,所有传送门关闭.你从\(1\)号点出发,每当你到达一个有传送门的点 ...