jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条
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对象原本在文档树中,那么这些元素将从原位置上消失。简言之,就是移动操作。
示例代码:
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒子(重要),jq操作滚动条的更多相关文章
- jquery 追加元素/jquery文档处理,插入、修改、移动、删除指定的DOM元素.
jquery 追加元素 $("#content").append("..."); // 添加到元素内部最后面 $("#content").p ...
- Jquery操作文档标签
1.插入动作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- MongoDB中的映射,限制记录和记录拼排序 文档的插入查询更新删除操作
映射 在 MongoDB 中,映射(Projection)指的是只选择文档中的必要数据,而非全部数据.如果文档有 5 个字段,而你只需要显示 3 个,则只需选择 3 个字段即可. find() 方法 ...
- 配置允许匿名用户登录访问vsftpd服务,进行文档的上传下载、文档的新建删除等操作
centos7环境下 临时关闭防火墙 #systemctl stop firewalld 临时关闭selinux #setenforce 0 安装ftp服务 #yum install vsftpd - ...
- C# 添加文本、图片到PDF文档(基于Spire.Cloud.PDF.SDK)
Spire.Cloud.PDF.SDK提供了接口PdfTextApi及PdfImagesApi用于添加文本和图片到PDF文档,添加文本时,可格式化文本样式,包括文本字体类型.字号.字体样式.文本颜色. ...
- textContent、innerText的用法,在文档中插入纯文本
有时候需要查询纯文本形式的元素内容,或者在文档中插入纯文本.标准的方法是用Node的textContent属性来实现: var para = document.getElementsByTagName ...
- python 解析docx文档的方法,以及利用Python从docx文档提取插入的文本对象和图片
首先安装docx模块,通过pip install docx或者在docx官方链接上下载安装都可以 下面来看下如何解析docx文档:文档格式如下 有3个部分组成 1 正文:text文档 2 一个表格. ...
- jQuery全屏滚动插件fullPage.js中文帮助文档API
jQuery全屏滚动插件fullPage.js中文帮助文档API 发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...
- jQuery LigerUI 最新版压缩包(含chm帮助文档、源码、donet权限示例)
jQuery LigerUI 最新版压缩包 http://download.csdn.net/download/heyin12345/4680593 jQuery LigerUI 最新版压缩包(含ch ...
随机推荐
- VUE简单的语法
这篇主要记录了在使用过程的当中,对于vue的一些方法的理解 1.Vue生命周期中mounted和created的区别 created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视 ...
- yandexbot ip列表整理做俄罗斯市场的站长可以关注一下
这段时间ytkah在负责一个客户的网站,主要做俄罗斯市场,当然是要研究Yandex了,首先是要知道yandexbot的ip有哪些,本文通过分析这个站从2018.12.02到2019.05.21这段时间 ...
- 常用dos命令(4)
系统管理at 安排在特定日期和时间运行命令和程序shutdown立即或定时关机或重启taskkill结束进程(WinXPHome版中无该命令)tasklist显示进程列表(Windows XP Hom ...
- Kinect for Windows V2开发教程
教程 https://blog.csdn.net/openbug/article/details/80921437 Windows版Kinect SDK https://docs.microsoft. ...
- 归并排序 MergeSort
今天第一次看懂了严奶奶的代码( ̄▽ ̄)~*,然后按照厌奶那的思路进行了一波coding,稍加调试后即可跑起来. 学习链接:排序七 归并排序.图解排序算法(四)之归并排序 merge函数:将两个有序序列 ...
- Python中的next()\iter()函数详解
什么是可迭代的对象(Iterable,即可以用for循环的对象)和迭代器(Iterator) Iterable: 一类是:list.tuple.dict.set.str 二类是:generator(都 ...
- BootstrapTable的简单使用教程
1.引入必须的几个包 <link th:href="bootstrap/css/bootstrap.css}"/> <link th:href="boo ...
- vue CSS使用/deep/
比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要有一个方法或者方式,既不影响到别的地 ...
- easyMock本地化搭建
为了更快捷的定义接口且mock接口数据,减轻前后端对接时的工作量,可以使用easyMock平台. 1. 使用 git clone 下载easy-mock项目 https://github.com/ea ...
- pytest学习笔记二 fixtrue
前言 官方文档关于fixture功能的解释如下: The purpose of test fixtures is to provide a fixed baseline upon which test ...