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() - ...
随机推荐
- 通过myclipse建立一个简单的Hibernate项目（PS：在单元测试中实现数据的向表的插入）
Hibernate的主要功能及用法: Ⅰ.Hibernate封装了JDBC,使Java程序员能够以面向对象的思想对数据库进行操作 Ⅱ.Hibernate可以应用于EJB的J2EE架构,完成数据的持久化 ...
- hdu 1878 欧拉回路（联通<并查集> + 偶数点）
欧拉回路Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
- C语言博客I作业09
提问 回答 这个作业属于哪个课程 C语言程序设计Ⅱ 这个作业要求在哪里 https://www.cnblogs.com/sanying/p/11907721.html 我在这个课程的目标 掌握语句嵌套 ...
- linux配置安装源
ubutu:图形界面或者/etc/apt/sources.list redhat7:可以把DVD安装盘里的软件包拷贝到硬盘,然后设置一个本地源,具体如下: /etc/yum.repos.d/local ...
- SIGCHLD waitpid， 小心子进程结束事件被偷了
原本项目中依赖子进程执行的地方,都使用jni调用java层的ProcessManager,换了c++ACE框架后,发现这些任务都很慢,调试才发现所有子进程执行的任务都必须等待到reactor超时才返回 ...
- 关于Java 值传递深度分析
首先说观点:java只有值传递没有引用传递 然后再来看看值传递与引用传递两者的定义 值传递(pass by value)是指在调用函数时将实际参数复制一份传递到函数中,这样在函数中如果对参数进行修改, ...
- 突破至暗时刻，HCIE-RS的6个月成就之路
我是今年四月份报的HCIE培训,到考完面试总共六个月的时间,对于HCIE整个考试的流程来说,六个月的时间不短,但也不是很长.尤其是面试,需要花费大量的时间和精力,下面我就把我整个备考历程做个简单的分享 ...
- go语言学习笔记（二）
整数 有符号整数 int8 int16 int32 int64 无符号整数 uin8 uin16 uin32 uin64 无符号整数 uintptr可以进行运算这点很重要请了解unsafe包,大小不明 ...
- python gui tkinter快速入门教程 | python tkinter tutorial
本文首发于个人博客https://kezunlin.me/post/d5c57f56/,欢迎阅读最新内容! python tkinter tutorial Guide main ui messageb ...
- 记一次LDAP主从同步配置
LDAP主从同步 OpenLDAP在2.3版本之前的同步复制带有一系列缺点如只支持一主多从模式等,在此缺点就不多说,下文着重介绍一下OpenLDAP V2.4以后的同步负复制功能 同步功能 2.4版最 ...