锋利的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元素里面直接添加文本,无论多复杂都可以直接写入。
3》创建属性节点
与创建文本节点类似,直接将属性写入到创建的节点当中。
可以利用火狐里面的firebug工具来查看比较。
③ 插入节点
插入节点的方法:
1》append() 和appendTo() 一个是利用jQuery选择器选择元素后插入节点内容。 一个是将节点内容插入到jQuery选择器选到的元素节点中。
2》prepend()和prependTo() 向每一个匹配的元素内部插入前置内容,后面是把需要插入的前置内容 插入到选择的元素里。
3》after()和insertAfter() 在每一个匹配的元素后面插入内容,把要插入的内容插入到选定元素的后面。
4》before()和 inertBefore()在匹配的元素之前插入内容,把要插入的内容插入到元素之前。
④删除节点
1》remove() 当节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,这个方法的返回值是一个指向已被删除的节点的引用,因此可以再使用这些元素,另外remove()方法也可以通过传递参数来选择性的删除元素。
2》detach() 方法,该方法和remove()不一样的是,这个方法删除元素之后,不会把匹配的元素从jQuery对象中删除,因而可以继续使用这些匹配的元素。
3》empty() 不是删除节点,而是清空节点,清空元素中的所有后代节点。
⑤复制节点
clone()
复制节点后,被复制的元素不具有有何行为,如果需要新的元素也具有复制功能,可以使用如下代码。
在clone()方法中传递了一个参数true,代表复制元素的同时也复制元素中绑定的事件。
⑥替换节点
replaceWith()和replaceAll() replaceWith()是将左右匹配的元素都替换成指定的HTML或者DOM元素,replaceAll()和replaceWith()作用相同,只是颠倒了操作。
⑦包裹节点
wrap()
wrapAll()将所有匹配的元素用同一个元素来包裹选中的元素。
wrapInner() 将每一个匹配元素的字内容(包括文本节点)用其他结构化的标记包裹起来。
⑧属性操作
1》获取属性和设置属性
attr()方法来获取和设置元素属性,用removeAttr()方法来删除元素属性。
还可以设置属性
如果需要设置多个属性,用大括号{}括起来,属性和值之间用:号,不同属性中间用,隔开。
jQuery中的很多方法都是统一函数实现获取和设置的,如attr(),html(),text(),height(),width(),val()和css()等。
2》删除属性
removeAttr(),新增的prop()和removeProp()分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性。
⑨样式操作
1》获取样式和设置样式
获取样式也可以用attr()来获取和设置。
2》追加样式
用addClass()的方法。
3》移除样式
removeClass()
可以用空格的方式删除多个class名。当removeClass()里面不带class值的时候等于移除所有的Class。
4》切换样式
toggle()方法主要是控制行为上的重复切换。toggleClass()方法控制样式上的重复切换。
5》判断是否含有某个样式
hasClass()可以用来判断元素中是否含有某个class,如果有返回true,没有返回false。
⑩设置和获取HTML,文本和值。
1》html()方法
注意:html()方法可用于XHTML文档,但不能用于XML文档。
2》text() 方法
用来读取或者设置某个元素中的文本内容。
text()方法支持所有的浏览器,innerText属性不能再firefox浏览器下运行。
3》val()方法
val()无论元素是文本框,下拉列表还是单选框,都可以用val()返回元素的值,如果元素为多选,则返回一个含有所有选择的值的数组。
this.defaultValue 就是当前文本框的默认值
val()案例分析
val()方法也可以用attr()方法实现同样功能。
11)遍历节点
①children()方法y用来获取匹配元素的所有子元素的个数
children()方法只考虑子元素而不考虑其他的后代元素。
②next()方法
该方法匹配元素后面紧邻的同辈元素。
③pre()方法
用于匹配元素前面紧邻的同辈元素。
④siblings()方法
取得匹配元素前后所有的同辈元素。
⑤closest()方法
用于取得最近的匹配元素。
⑥parent(),parents(),closest()的区别
parent()是获取每个匹配元素的父级元素,parents()是获取匹配元素的祖先元素,closest()获取匹配的最近的父级元素
12)CSS-DOM操作
css()方法获取的高度值与设置有关,可能是auto,也可能是10px;height()获取的高度值是实际高度,不带单位。
offset()方法,作用是获取元素当前视窗的相对偏移,包含两个属性,top和left,只对可见元素有效。
position()方法,获取元素相对于最近的一个position样式属性设置为relative和absolute的祖父节点的相对偏移,也是两个属性top和left。
scrollTop()方法和scrollLeft()方法,分别是获取元素的滚动条距顶端的距离和距左侧的距离。还可以为这两个方法设置参数,控制元素滚动条的滚动位置。
锋利的jQuery ——jQuery中的DOM操作(三)的更多相关文章
- jQuery中的DOM操作(三)
一.查找节点 [返回jQuery对象]$(选择器字符串); 使用jQuery函数,里面参数为选择器字符串,查询符合条件的BOM对象并返回jQuery对象eg: $('div.one spa ...
- jQuery中的DOM操作——《锋利的JQuery》
jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
随机推荐
- django model序列化作用举例
一直对使用DRF的了解停留在一知半解的状态,今天在实际操作中,感受到了DRF带来的方便 Django工程,其中两个model定义如下: AutomationHeadRaw: class Automat ...
- Android中StatFs获取系统/sdcard存储(剩余空间)大小
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- Windows 下安装Apache web服务器
1.Apache 服务器的下载 进入下载页面:http://httpd.apache.org/download.cgi 为提高下载速度,镜像选择清华大学的服务器(http://mirrors.tuna ...
- 【Python】学习笔记五:缩进与选择
Python最具特色的用缩进来标明成块的代码 缩进 i = 4 j = 2 if i > j: i = i+1 print(i) 这是一个简单的判断,Python的if使用很简单,没有括号等繁琐 ...
- nodejs 文件操作
前言: nodejs 自带的文件操作的模块 fs 就是对文件的增删查改: 就像我们用的服务器,我们没有办法在运行的文件上进行一直的修改,因为他不向浏览器,刷新后我们的文件会自己修改: 如果想要更改我 ...
- 用JS实现快速排序
"快速排序"的思想很简单,整个排序过程只需要三步: (1)在数据集之中,选择一个元素作为"基准"(pivot). (2)所有小于"基准"的元 ...
- 阶段3 1.Mybatis_09.Mybatis的多表操作_7 mybatis多对多准备角色表的实体类和映射配置
创建Role表和user_role表 DROP TABLE IF EXISTS `role`; CREATE TABLE `role` ( `ID` int(11) NOT NULL COMMENT ...
- 【Linux 应用编程】进程管理 - 进程间通信IPC之共享内存 mmap
IPC(InterProcess Communication,进程间通信)是进程中的重要概念.Linux 进程之间常用的通信方式有: 文件:简单,低效,需要代码控制同步 管道:使用简单,默认阻塞 匿名 ...
- NFS服务和DHCP服务讲解
1.NFS服务端概述 NFS,是Network File System的简写,即网络文件系统.网络文件系统是FreeBSD支持的文件系统中的一种,也被称为NFS: NFS允许一个系统在网络上与他人共享 ...
- linux常用终端指令+如何用vim写一个c程序并运行
在装好ubuntu之后今天学习了一些linux的一些基础知识: windows里面打开命令窗口是win+r,在linux系统里面,ctrl+alt+t打开终端,今天的一些指令都是围绕终端来说的 首先s ...