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 操作详解相关推荐

  1. OSCache操作详解+标签使用

    OSCache操作详解+标签使用 1.OSCache是什么?    OSCache标记库由OpenSymphony设计,它是一种开创性的缓存方案,它提供了在现有JSP页面之内实现内存缓存的功能.OSC ...

  2. jquery在html实现遍历,jQuery教程之jQuery遍历、HTML操作详解

    本篇文章探讨了jQuery教程之jQuery遍历.HTML操作详解,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 什么是遍历? jQuery 遍历,意为"移 ...

  3. python输入参数改变图形_Python基于Tensor FLow的图像处理操作详解

    本文实例讲述了Python基于Tensor FLow的图像处理操作.分享给大家供大家参考,具体如下: 在对图像进行深度学习时,有时可能图片的数量不足,或者希望网络进行更多的学习,这时可以对现有的图片数 ...

  4. 第 5 章 Nova - 041 - Resize Instance 操作详解

    Resize Instance 操作详解 Resize 的作用是调整 instance 的 vCPU.内存和磁盘资源. Instance 需要多少资源是定义在 flavor 中的,resize 操作是 ...

  5. SVN的Windows和Linux客户端操作详解

    SVN的Windows和Linux客户端操作详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Windows客户端操作 1.安装SVN客户端 a>.去官网下载svn软件 ...

  6. python对输入的字符串进行解析_python数据类型_字符串常用操作(详解)

    这次主要介绍字符串常用操作方法及例子 1.python字符串 在python中声明一个字符串,通常有三种方法:在它的两边加上单引号.双引号或者三引号,如下: name = 'hello' name1 ...

  7. countif和sum套用_if函数嵌套countif、sumif函数实例操作详解 你需要学习了

    excel中if函数嵌套countif函数实例操作详解,需要了解if函数.countif函数.sumif函数字符串引用方式,isblank函数 操作方法 01 用扫描枪连接excel后将自动将货物名称 ...

  8. Java实现话术词槽匹配_桔子互动|百度UNIT操作详解(上篇)

    原标题:桔子互动|百度UNIT操作详解(上篇) 作者:令狐曦 文章简介: 本篇文章对UNIT的操作和注意事项进行详细说明,内容包括: 建立场景 配置对话单元/问答单元/高级设置 [配置对话单元] [配 ...

  9. python3d动态图-Python图像处理之gif动态图的解析与合成操作详解

    本文实例讲述了Python图像处理之gif动态图的解析与合成操作.分享给大家供大家参考,具体如下: gif动态图是在现在已经司空见惯,朋友圈里也经常是一言不合就斗图.这里,就介绍下如何使用python ...

最新文章

  1. IT人士群聚喝酒的讲究(转载)
  2. 互链网-未来世界的连接方式 (1)央行数字货币CBDC模型
  3. antd 嵌套子表格_大型前端项目架构优化探索之路腾讯文档表格
  4. Android studio启动后卡在refreshing gradle project
  5. 微信“支付”页全国多地上线“出行服务”,已覆盖108城
  6. Win10系列:VC++ 定时器
  7. .NET的资源并不限于.resx文件,你可以采用任意存储形式[上篇] (转载)
  8. vegan稀释曲线 基因丰度_R语言 vegan包计算物种累计曲线
  9. ArcGIS 如何卸载再重装
  10. 1、pthon中类包含的方法
  11. 计算机双人游戏玩不了,PC上的双人单机游戏
  12. 复盘:C语言中int a[][3]={1,2,3,4,5,6,7,8}什么意思,int a[3][]又是什么意思,结果为10的是
  13. c语言函数写巴德歌赫猜想,高三励志演讲稿范文
  14. 读书有益——》小朋友的诗(六)
  15. 10.2-控制单元CU的微程序设计
  16. STM32外围电路硬件解析
  17. Linux 命令学习_无名小仙男
  18. 刘韧马杰花总:诗歌小说电影游戏都是元宇宙
  19. 0基础学Linux-从小白到大牛(3)Linux命令
  20. IF/RF数据转换器中的数字信号处理

热门文章

  1. 机原自检——第4章 平面机构的力分析
  2. 浏览器兼容问题(实战干货)
  3. 气泡shader_Android超简单气泡效果
  4. 电梯监控系统的服务器,电梯物联网及远程实时监控系统方案-20210712141708.docx-原创力文档...
  5. 怒江java培训班_智慧树知到答案Java项目实战(黑龙江联盟)查题公众号
  6. 主题:“芙蓉姐姐”荣登05年十大令人作呕女人榜首…… [荐]
  7. Tableau同环比分析系列(一)--基础同比、环比
  8. R语言动量和马科维茨Markowitz投资组合(Portfolio)模型实现
  9. jQuery 插件开发——Menu(导航菜单)
  10. access的否定形式_“肯定形式”表示“否定含义”三种形式