jquery (对内容,元素,属性,class的操作)
对内容的操作:
捕获:获得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值。
设置:设置内容
添加新内容:
text("新内容") - 设置所选元素的文本内容
html("新内容") - 设置所选元素的内容(包括 HTML 标记)
val("新内容") - 设置表单字段的值
添加新内容的同时,通过回调函数,拿到旧的内容和当前元素的下标:
<body>
<p>baidu.com.cn</p>
<p>baidu.com.cn</p>
<p>baidu.com.cn</p>
<button>添加新内容</button>
</body>
</html>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html(function(i,origValue){
//回调函数中i是当前被选元素的下标,origValue是原来的文本
return i+","+origValue + "/news";
});
});
});
</script>
对元素的操作:
添加元素:添加新的 HTML 内容
1.append() - 在被选元素的内部结尾插入内容
2.prepend() - 在被选元素的内部开头插入内容
3.after() - 在被选元素外部之后插入内容
4.before() - 在被选元素外部之前插入内容
删除元素:
1.remove() - 删除被选元素(及其子元素)
2.empty() - 从被选元素中删除其子元素
属性操作:
获取属性:attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#runoob").attr("href"));
});
设置属性:
attr("属性名","属性值") 方法也用于设置属性值。
多个属性:
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.baidu.com",
"title" : "百度"
});
});
添加新属性的同时,通过回调函数,拿到旧的属性和当前元素的下边:
<body>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<p><a href="http://www.baidu.com.cn" class="baidu">baidu.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值。</p>
</body>
</html>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".baidu").html(function(i,origValue){
//回调函数中i是当前被选元素的下标,origValue是原来的文本
return i+","+origValue + "/images";
});
});
});
</script>
删除属性:removeAttr() 从所有匹配的元素中移除指定的属性。
class类的操作:
addClass() 向匹配的元素添加指定的类名。
hasClass() 检查匹配的元素是否拥有指定的类。 removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
jquery (对内容,元素,属性,class的操作)的更多相关文章
- JQuery处理DOM元素-属性操作
JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()
jQuery - 设置内容和属性 设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...
- jQuery - 获取内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...
- jquery获取内容和属性的方法
通过jquery如何捕获文本内容和属性? text(),html(),val()及attr(). attr()更具有普遍性,元素text属性和表单value属性,可以通过attr()操作. <! ...
- jQuery - 获得内容和属性
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...
- <七> jQuery 设置内容和属性
设置内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 设置属性 jQuery attr( ...
- jQuery设置内容和属性方
何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML ...
- jquery选择伪元素属性的方法
CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...
- <六> jQuery 获得内容和属性
获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - ...
随机推荐
- 在Debian/Ubuntu上面安装升级nginx到最新版
在Debian下面通过 apt-get 可以自动安装 nginx,不过版本一般比较老,如果想要使用nginx的最新特性就需要升级版本. 一般安装可以通过编绎源文件安装,但可能需要安装很多编绎工具, ...
- 【SQL】安装后设置 sa账号登录
1.windows身份验证登录管理员账户 2.找到sa账号双击 3.设置密码,启用 4.右键 属性 安全性 5.重启服务,sa账号登录 本地服务用 . 6.登录成功:
- 网页版的支付宝授权登录(vue+java)
api接口文档:https://docs.open.alipay.com/289/105656 后台管理系统原本是用账号密码登录的,不过需求要改成支付宝授权, 前端仅仅需要改登录页,以及添加一个授权返 ...
- 心里有点B树
在说B树之前最好先看看2-3树, 2-3树是B树的一种特例, 什么B树, B树就是2-3树, 2-3-4 树 , 2-3-4-5... 树的统称, 而B+树又是B树的一种变形 性质: 什么是二节点, ...
- 防火墙和SELinux复习02
1.防火墙 防火墙主要起隔离作用,严格的过滤入站,允许出站.又分为硬件防火墙和软件防火墙,硬件防火墙主要保护一群机器,而软件防火墙主要保护本机. 防火墙相关命令:systemctl status fi ...
- tomcat-9.0.20缓存空间不足
问题2:启动时候报这样的警告:警告 [main] org.apache.catalina.webresources.Cache.getResource 无法将位于[/WEB-INF/classes/t ...
- 使用boost实现线程池thread pool | boost thread pool example
本文首发于个人博客https://kezunlin.me/post/f241bd30/,欢迎阅读! boost thread pool example Guide boost thread pool ...
- 【Oracle】Oracle数据库基本指标查看
目录 1.查看表空间 2.查看用户 3.查看数据库内存 4.查看数据库版本 5.oracle归档情况 6.查看redo log日志位置 7.查看数据库的控制文件 8.查看RMAN的备份情况 9.FRA ...
- C/C++ 条件编译静态库
==>windows 下方法: 1.方法一:VS工程中中直接添加 1.1在VS的属性->常规->附加库目录,添上文件夹的路径:例如:lib/x64: 1.2输入的附加依赖项,添加上库 ...
- 2019年12月1日Linux开发手记
配置ubuntu摄像头: 1.设置→添加→usb控制器→兼容usb3.0 2.虚拟机→可移动设备→web camera→连接(断开主机) 3.查看是否配置成功,打开终端,输入: susb ls /de ...