Jquery中的DOM操作:
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操作:的更多相关文章
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
- jQuery中的Ajax应用<思维导图>
传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 如何合理利用iMindMap中的模板创建思维导图
思维导图的制作并不是一项简单的工作,尤其是对许多工作或学习有特殊要求的朋友而言,当我们需要应对不同场景制作不同的思维导图时,总不能都靠自己从头制作,这样难度比较大也比较耗时.而iMindMap(win ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
随机推荐
- ES6知识整理(7)--Set和Map数据结构
(文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) Set构造函数 初始化一个值不重复的数组,适合做数组去重. 2种数组去重的方法: 这里再说下Array.from(),表示以一个类数组|| ...
- EDK II之DXE Core的事件管理
本文简单介绍一下UEFI中的事件管理: UEFI是不支持多进程的,但是UEFI支持多事件分发机制.UEFI只支持时钟中断,并基于时钟中断实现事件分发.类似于OS中基于时钟中断来实现基于时间片的多任务调 ...
- Golang 数组和字符串之间的相互转换[]byte/string
package main import ( "fmt" ) func main() { str := "hello" arr := []byte(str) fm ...
- css列表list、表格table
列表list,无序列表ul,有序列表ol 1.列表项样式list-style-type 无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0) 其他无序列表常用none无样式 ...
- SQL介绍
SQL,即structured query language,结构化查询语言,是一种对关系型数据库中的数据进行管理和操作的语言方法,SQL包括6个部分 DQL:数据查询语言,最常用的为select,其 ...
- bzoj1088 P2327 [SCOI2005]扫雷
P2327 [SCOI2005]扫雷 emmmmm.....这题真可以用状压写 因为每个数字只对3个格子有影响,相当于只有2^3=8种状态,所以可以用状压瞎搞 我们用8个数字代表二进制下的8种状态 0 ...
- socket:10038错误
转自:http://blog.csdn.net/chen495810242/article/details/42029825 winSock的一个bug:当closesocket多次错误使用时会导致问 ...
- shell 变量相关的命令
变量="变量" readonly 变量名="变量" 表示设置该变量为只读变量 ,这个变量不能别改变 echo $变量名 set 显示本地所有的变量 unse ...
- Guitar Pro怎样可以快速打出三连音?
相信很多的音乐爱好初学者在使用入门编曲软件Guitar Pro的时候,都会碰到这样一个问题,很多乐谱中都出现了三连音,那么我们使用Guitar Pro的时候,如何能够打出三连音呢? 三连音,就是三等分 ...
- struts2 action中字符串转json对象出错 java.lang.NoClassDefFoundError: org/apache/commons/lang/exception/NestableRuntimeException
commons-lang包有错,要么是引入错误,要么是没引入. 报不同错误,引入不同包. commons-beanutils-1.8.0.jar不加这个包 java.lang.NoClassDefFo ...