jQuery DOM属性
1、 .addClass(className):为每个匹配的元素添加指定的样式类名
2、 .attr(attributeName):获取匹配的元素集合中的第一个元素的属性值。设置每一个匹配元素的一个或多个属性。(只有一个参数时是获取属性值,两个参数时是设置属性值)
3、 .hasClass(className):确定任何一个元素是否有被分配给定的(样式)类
4、 .html():获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的HTML内容(没有参数则显示内容,有参数则添加或改变内容)
5、 .prop(propertyName):获取匹配的元素集中第一个元素的属性(property)值为匹配的元素设置一个或多个属性(properties)。只能获取默认的属性
6、 .removeAttr(attributeName):为匹配的元素集合中的每个元素中移除一个属性(attribute)。
7、 .removeClass([className]):移除集合中每个匹配元素上一个,多个或全部样式
8、 .removeProp(propertyName):为集合中匹配的元素删除一个属性(property)。
9、 .toggleClass():在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。
10、.val():获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。

jQuery DOM操作

1、class属性:.addClass()、hasClass()、removeClass()、toggleClass()
2、DOM插入并包裹现有内容
注:在每个匹配到的p外面都加上一个html元素格式为"<div></div>"或document.createElement("div")或已存在的元素但元素只能复制不能移动。
<1>、wrap(wrappingElement):在每个匹配的元素外层包上一个html元素。
<2>、unwrap():将匹配元素的父级元素删除
<3>、wrapAll(wrappingElement):在所有匹配元素外面包一层HTML结构。
<4>、wrapInner(wrappingElement):在匹配元素里的内容外面包一层结构。
3、DOM插入现有元素内
注:可进行元素移动 .html()和.text()区别在于获取,html只能获取第一个匹配元素,而text获取所有匹配元素
<1>、.append()=(js)appendChild():在每个匹配元素里面的末尾处插入参数内容。
<2>、.appendTo():将匹配元素插入到目标元素的最后面(译者注:内部插入)
<3>、.html():获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
<4>、.prepend():将参数内容插入到每个匹配元素的前面(元素内部)。
<5>、.prependTo():将所有元素插入到目标前面(元素内).
<6>、.text():得到匹配元素集合中每个元素的合并文本,包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。
4、DOM插入现有元素外
5、DOM移除
<1>、.detach():从DOM中去掉所有匹配的元素
<2>、.empty():从DOM中移除集合中匹配元素的所有子节点。
<3>、.remove():将匹配元素从DOM中删除。(注:同时移除元素上的事件及jQuery事件)
<4>、unwrap():将匹配元素集合的父元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
6、DOM替换
<1>、.replaceAll():用集合的每个元素替换每个目标元素。
<2>、.replaceWith():用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
7、通用属性操作:.attr()、.prop()、.removeAttr()、.removeProp()、.val()
8、CSS属性
<1>、.css():获取匹配元素集合中的第一个元素的样式的值设置每个匹配元素的一个或多个CSS属性.
<2>、.height():获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。(与margin、padding、border无关)
<3>、.width():获取匹配元素集合中的第一个元素的当前计算宽度值。设置每一个匹配元素的宽度值。
<4>、.innerHeight():为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding但不包括border
<5>、.innerWidth():为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding但不包括border
<6>、.offset():在匹配的元素集合中,获取的第一个元素的当前坐标,坐标相对于文档。设置匹配的元素集合中每一个元素的坐标。
<7>、.outerHeight():获取匹配元素集合中的第一个元素的当前计算高度值。包括padding、border和选择性的margin。返回一个整数(不包括"px")表示的值,或如果在一个空集合上调用该方法,则会返回null。 (注:参数若为true则包括margin,若为false或空则不包括margin)
<8>、.outerWidth():获取匹配元素集合中的第一个元素的当前计算宽度值。包括padding、border和选择性的margin。返回一个整数(不包括"px")表示的值,或如果在一个空集合上调用该方法,则会返回null。
<9>、.position():获取匹配元素集合中的第一个元素的当前坐标。相对于offset parent的坐标。(译者注:offset parent指离该元素最近的被定位过的祖先元素)
<10>、.scrollLeft():获取匹配的元素集合中第一个元素的当前水平滚动条的位置。设置每个匹配元素的水平滚动条的位置。(设置参数为设置水平滑动多少,不设置宽度为获取水平滚动调位置)
<11>、.scrollTop():获取匹配的元素集合中第一个元素的当前垂直滚动条的位置。设置每个匹配元素的垂直滚动条的位置。
9、复制元素

转载于:https://www.cnblogs.com/huzhuo/p/7460939.html

jQuery DOM相关推荐

  1. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  2. jQuery——入门(三)JQuery DOM操作(核心处理和文档处理)

    jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...

  3. jQuery DOM操作之查找结点

    下面是对jQuery DOM操作中查找结点的整理,希望可以帮助到有需要的小伙伴. 1.查找元素节点 使用jQuery中的选择器用法可以完成查找结点的操作,相对于DOM,jQuery更方便 2.查找属性 ...

  4. jquery dom 节点append、before、after、prepend、insertBefore、empty、remove等添加、移除操作汇总

    之前有个项目前端页面会根据权限进行DOM操作,比如:增加新增.编辑按钮,增加表格操作列等,涉及节点新增.某个节点前后插入.节点移除等操作,在此,对jquery DOM节点的各种操作做一总结. 1.父节 ...

  5. JQuery DOM基本操作

    DOM操作的分类 DOM Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它. 它的用途并非仅限与处理网页,也可以用来处理任何一种使用标记语言编写出来的文档.例如X ...

  6. 【学亮IT手记】jQuery DOM删除操作

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. 【学亮IT手记】jQuery DOM插入操作

    DOM插入操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  8. jQuery DOM 节点操作

    DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的"M".页面中的元 素结构就是通过这种节点模型来互相对应着的,我们只需要通过这些节点关系,可以创建. 插入.替换. ...

  9. jQuery DOM元素的遍历

    目录 ⏹方式1: `$().each()` ⏹方式2: `$.each()` ⏹方式3: `$().toArray() + for of` ⏹方式4: `Array.from() + for of` ...

最新文章

  1. Linux Kernel TCP/IP Stack — Socket Layer
  2. Android SQlite数据库的使用(三)-将数据库文件连同应用程序一起发布
  3. nyoj-37 回文字符串
  4. JZOJ 1219. Num
  5. python iocp_记对协程增加IOCP支持时候踩过的一些坑
  6. windows平台下用CMake工具编译osg用法说明
  7. HTML中关于图像和表格,链接等的知识
  8. mvc 怎么把后台拼接好的div写到前台_五、controller层配置和前台数据crud操作的实现...
  9. sql 插入新数据 如何处理等字符_新手们还在到处找报表资料吗?Intouch SQL 数据库脚本给你安排...
  10. WCF入门学习3-配置文件与部署iis
  11. 负载均衡轮询算法和服务器性能,负载均衡算法
  12. 手机疑似中毒,恢复到出厂设置也不管用,还好有RE文件浏览器
  13. 【Pandas实战】1000部流行电影数据分析
  14. tibco linux安装手册,Tibco 产品安装手册.doc
  15. 苹果净利润同比下滑19%,大中华区下滑30%;养老基金将入股市投资,首批可能达2000亿元
  16. 计算机毕业生该怎么做职业规划?|猿代码科技
  17. 初学MSP430F5529时钟以及FLL配置
  18. 张一鸣:“如果是你偶然发现青霉素能消炎,阿里正式启动2021届春季校招
  19. Amber进行分子动力学模拟以及计算mmpbsa
  20. Servlet中文API文档-个人整理版

热门文章

  1. Java API —— Collections类
  2. MongoDB使用小结:一些常用操作分享
  3. Map m=new HashMap()
  4. #029 博客换个主题从新开始
  5. VS2017登陆不了,TFS无法连接成功的问题
  6. javascript 点点滴滴 jquery
  7. HTML5 未来不可阻挡的力量
  8. android监控来电显示
  9. Enterprise Library: Configuration Application Block应用向导篇, Part 1
  10. framework之Activity 生命周期解析(基于Android11源码)