JQUREY DOM 操作详解
JQUREY DOM 操作详解
一、获取
1、获取内容----.text() .html() .value()
- text() - 设置或返回所选元素的文本内容 格式:$(选择器).text();
- html() - 设置或返回所选元素的内容(包括 HTML 标记) 格式:$(选择器).html();
- val() - 设置或返回表单字段的值 格式:$(选择器).val()
2、获取属性----------attr()
格式:$("选择器").attr("属性名")
二、设置
1、设置内容
.text() 格式:$("选择器").text("要设置的内容")
.html() 格式:$("选择器").html("要设置的内容")
.val() 格式:$("选择器").val("要设置的内容")
2、设置属性
(1) .attr() 格式:$("选择器").attr("属性名","属性值")
(2)attr() 方法也允许您同时设置多个属性。$("button").click(function() {$("选择器).attr({"属性名" : "属性值","属性名" : "属性值"})})
(3)attr()方法也允许回调函数,$("选择器").attr("属性名",function(){回调函数})
三、添加
- append() - 在被选元素的结尾插入内容--------内部添加
- prepend() - 在被选元素的开头插入内容--------内部添加
- after() - 在被选元素之后插入内容--------------外部添加
- before() - 在被选元素之前插入内容-------------外部添加
格式:括号内部添加的是字符串
四、删除
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
格式:$("选择器").empty()
格式:$("选择器").remove()
过滤删除 $("选择器").remove("子选择器")
五、CSS类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
格式:前三个括号内部放的是Class的名字
css("样式名","样式值"),可以添加多个样式css({"样式名":"样式值","样式名":"样式值",........})
六、尺寸
jQuery 提供多个处理尺寸的重要方法:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。
七、JQUERY 遍历
jQuery 遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
jQuery 提供了多种遍历 DOM 的方法。
遍历方法中最大的种类是树遍历(tree-traversal)。
1、祖先
祖先是父、祖父或曾祖父等等。
通过 jQuery,您能够向上遍历 DOM 树,以查找元素的祖先
- parent()--------parent() 方法返回被选元素的直接父元素。
- parents()------parents() 方法返回被选元素的所有祖先元素,它是一个集合
- parentsUntil()----------parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素,也是一个集合
2、后代
后代是子、孙、曾孙等等。
- children()---------children() 方法返回被选元素的所有直接子元素。可以进行过滤选择.children("p.1")返回class名为1的p元素
- find()-------------find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。find("选择器")
3、同胞
同胞拥有相同的父元素。
- siblings()--------------siblings() 方法返回被选元素的所有同胞元素。
- next()-----------------next() 方法返回被选元素的下一个同胞元素。
- nextAll()--------------nextAll() 方法返回被选元素的所有跟随的同胞元素。
- nextUntil()------------nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
- prev()----------------返回被选元素的上一个同胞元素
- prevAll()--------------返回被选元素的所有前面的同胞元素。
- prevUntil()------------返回介于两个给定参数之间的所有前面的同胞元素
4、元素过滤
三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法,比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。
转载于:https://www.cnblogs.com/suiyuejinghao123/p/5822365.html
JQUREY DOM 操作详解相关推荐
- OSCache操作详解+标签使用
OSCache操作详解+标签使用 1.OSCache是什么? OSCache标记库由OpenSymphony设计,它是一种开创性的缓存方案,它提供了在现有JSP页面之内实现内存缓存的功能.OSC ...
- jquery在html实现遍历,jQuery教程之jQuery遍历、HTML操作详解
本篇文章探讨了jQuery教程之jQuery遍历.HTML操作详解,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 什么是遍历? jQuery 遍历,意为"移 ...
- python输入参数改变图形_Python基于Tensor FLow的图像处理操作详解
本文实例讲述了Python基于Tensor FLow的图像处理操作.分享给大家供大家参考,具体如下: 在对图像进行深度学习时,有时可能图片的数量不足,或者希望网络进行更多的学习,这时可以对现有的图片数 ...
- 第 5 章 Nova - 041 - Resize Instance 操作详解
Resize Instance 操作详解 Resize 的作用是调整 instance 的 vCPU.内存和磁盘资源. Instance 需要多少资源是定义在 flavor 中的,resize 操作是 ...
- SVN的Windows和Linux客户端操作详解
SVN的Windows和Linux客户端操作详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Windows客户端操作 1.安装SVN客户端 a>.去官网下载svn软件 ...
- python对输入的字符串进行解析_python数据类型_字符串常用操作(详解)
这次主要介绍字符串常用操作方法及例子 1.python字符串 在python中声明一个字符串,通常有三种方法:在它的两边加上单引号.双引号或者三引号,如下: name = 'hello' name1 ...
- countif和sum套用_if函数嵌套countif、sumif函数实例操作详解 你需要学习了
excel中if函数嵌套countif函数实例操作详解,需要了解if函数.countif函数.sumif函数字符串引用方式,isblank函数 操作方法 01 用扫描枪连接excel后将自动将货物名称 ...
- Java实现话术词槽匹配_桔子互动|百度UNIT操作详解(上篇)
原标题:桔子互动|百度UNIT操作详解(上篇) 作者:令狐曦 文章简介: 本篇文章对UNIT的操作和注意事项进行详细说明,内容包括: 建立场景 配置对话单元/问答单元/高级设置 [配置对话单元] [配 ...
- python3d动态图-Python图像处理之gif动态图的解析与合成操作详解
本文实例讲述了Python图像处理之gif动态图的解析与合成操作.分享给大家供大家参考,具体如下: gif动态图是在现在已经司空见惯,朋友圈里也经常是一言不合就斗图.这里,就介绍下如何使用python ...
最新文章
- IT人士群聚喝酒的讲究(转载)
- 互链网-未来世界的连接方式 (1)央行数字货币CBDC模型
- antd 嵌套子表格_大型前端项目架构优化探索之路腾讯文档表格
- Android studio启动后卡在refreshing gradle project
- 微信“支付”页全国多地上线“出行服务”,已覆盖108城
- Win10系列:VC++ 定时器
- .NET的资源并不限于.resx文件,你可以采用任意存储形式[上篇] (转载)
- vegan稀释曲线 基因丰度_R语言 vegan包计算物种累计曲线
- ArcGIS 如何卸载再重装
- 1、pthon中类包含的方法
- 计算机双人游戏玩不了,PC上的双人单机游戏
- 复盘:C语言中int a[][3]={1,2,3,4,5,6,7,8}什么意思,int a[3][]又是什么意思,结果为10的是
- c语言函数写巴德歌赫猜想,高三励志演讲稿范文
- 读书有益——》小朋友的诗(六)
- 10.2-控制单元CU的微程序设计
- STM32外围电路硬件解析
- Linux 命令学习_无名小仙男
- 刘韧马杰花总:诗歌小说电影游戏都是元宇宙
- 0基础学Linux-从小白到大牛(3)Linux命令
- IF/RF数据转换器中的数字信号处理
热门文章
- 机原自检——第4章 平面机构的力分析
- 浏览器兼容问题(实战干货)
- 气泡shader_Android超简单气泡效果
- 电梯监控系统的服务器,电梯物联网及远程实时监控系统方案-20210712141708.docx-原创力文档...
- 怒江java培训班_智慧树知到答案Java项目实战(黑龙江联盟)查题公众号
- 主题:“芙蓉姐姐”荣登05年十大令人作呕女人榜首…… [荐]
- Tableau同环比分析系列(一)--基础同比、环比
- R语言动量和马科维茨Markowitz投资组合(Portfolio)模型实现
- jQuery 插件开发——Menu(导航菜单)
- access的否定形式_“肯定形式”表示“否定含义”三种形式