jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
2024-10-19 07:28:51
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
一丶jQ操作标签内文本
html() 标签元素中的内容
/** 替换的内容可以使一个js对象,jq对象,文本 **/
/* 获取值:获取选中标签元素的所有内容 ,包括标签*/
$('ul').html()
"
<li>1</li>
<li>2</li>
<li>3</li>
"
/* 设置值:设置该元素的所有内容,会替换掉标签中原来的内容 */
$('#box').html('<a>哈哈哈</a>')
text() 标签元素的文本内容
/** 替换的内容都会变成文本样式,html标签不会渲染,jsjq对象则是地址 **/
/* 获取值:获取选中标签元素的文本内容*/
$('ul').text()
"
1
2
3
"
/* 设置值:设置该元素的所有文本内容 */
$('ul').text('替换了所有内容')
jQuery.fn.init [ul, prevObject: jQuery.fn.init(1)]
//PS:
text()方法接收的值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
二丶jQ操作文档标签
插入标签
子元素可以为:stirng | element(js对象) | jquery元素
/* append 和 appendTo : 追加到某个元素之后 */
//父元素.append(子元素)
$('ul').append('<li>抽象类1</li>') // jq对象后,末尾添加 子对象
//子元素.appendTo(父元素)
$('<li>抽象类2</li>').appendTo('ul') // 子对象必须转成jq对象 ,末尾添加 Jq对象后
/* prepend 和 prependTo : 添加到某个元素之前 */
//父元素.prepend(子元素)
$('ul').prepend('<li>抽象类1</li>') // jq对象前,添加 子对象
//子元素.prependTo(父元素)
$('<li>抽象类2</li>').prependTo('ul') // 子对象必须转成jq对象 ,添加 Jq对象前
/* after 和 insertAfter : 兄弟元素之后插入某个元素/内容 */
//兄弟元素.after(要插入的兄弟元素)
$('#l2').after('<li>哈哈</li>')
//要插入的兄弟元素.insertAfter(兄弟元素)
$('<li>哈哈2</li>').insertAfter('#l2')
/* before 和 insertBefore : 兄弟元素之前插入某个元素/内容 */
//兄弟元素.before(要插入的兄弟元素)
$('#l2').before('<li>哈哈3</li>')
//要插入的兄弟元素.insertBefore(兄弟元素)
$('<li>哈哈4</li>').insertBefore('#l2')
//PS:
如果追加的jquery对象原本在文档树中,那么这些元素将从原位置上消失。简言之,就是移动操作。
示例代码:
最新文章
- 如何查看 Linux是32位还是64位?
- AppleWatch___学习笔记(一)开发思路和框架
- BZOJ 1500 Splay 全操作
- LoadRunner并发用户和集合点的深入讨论
- sort方法的使用、随机数的产生
- ubuntu下格式化内存当硬盘使的小实验
- c++ ANSI、UNICODE、UTF8互转
- 在C#中实现Socket端口复用
- MongoDB学习笔记(一)
- Java Object 构造方法的执行顺序
- Oracle索引语句整理
- mysql4 - 高级操作
- C 语言经典例子
- Groovy 反射字符串常量方法
- JavaScript使用注意事项
- IntelliJ IDEA2018.3 最新破解方法 无需改host
- <;mvc:annotation-driven />;做了什么
- 修改字段结构之ArcGIS Diagrammer
- Java并发--线程间协作的两种方式:wait、notify、notifyAll和Condition
- Knime 连接 MYSQL 8
热门文章
- Python使用进程间共享变量来控制两个进程(监听键盘和相机录制)的交互
- Navicat Premium 12 永久使用办法
- windows下apache + mod_wsgi + python部署flask接口服务
- PHP实例:获取操作系统、IP、地理位置、浏览器、等信息
- 21-C#笔记-名称空间
- 补充:垃圾回收机制、线程池和ORM缺点
- Checkout 显示 URL /../../.. 不存在
- 【oracle】decode函数
- 37 树莓派识别opencv-dnn
- django -- ORM实现出版社增删改查