对内容的操作:

捕获:获得内容

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的操作)的更多相关文章

  1. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  2. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  3. jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()

    jQuery - 设置内容和属性  设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...

  4. jQuery - 获取内容和属性

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...

  5. jquery获取内容和属性的方法

    通过jquery如何捕获文本内容和属性? text(),html(),val()及attr(). attr()更具有普遍性,元素text属性和表单value属性,可以通过attr()操作. <! ...

  6. jQuery - 获得内容和属性

    jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力. jQuery 提供一系列与 DOM 相关的方法,这使 ...

  7. <七> jQuery 设置内容和属性

    设置内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表单字段的值 设置属性 jQuery attr( ...

  8. jQuery设置内容和属性方

    何问起 hovertree.com 设置内容 - text().html() 以及 val()text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML ...

  9. jquery选择伪元素属性的方法

    CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...

  10. <六> jQuery 获得内容和属性

    获得内容 三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - ...

随机推荐

  1. [LC]235题 二叉搜索树的最近公共祖先 (树)(递归)

    ①题目 给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先. 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个结点 p.q,最近公共祖先表示为一个结点 x,满足 x 是 p.q 的祖先 ...

  2. 关于 “'sqlite3' 不是内部或外部命令.....”问题

    学习django 按书上的  执行 manage.py dbshell 时, 报“'sqlite3' 不是内部或外部命令,也不是可运行的程序 或批处理文件.” 也就是指,环境变量中没有“sqlite3 ...

  3. SpringBoot学习(二)—— springboot快速整合spring security组件

    Spring Security 简介 spring security的核心功能为认证(Authentication),授权(Authorization),即认证用户是否能访问该系统,和授权用户可以在系 ...

  4. python:利用celery分布任务

    Celery是一个功能完备即插即用的任务队列.它使得我们不需要考虑复杂的问题,使用非常简单.celery看起来似乎很庞大.celery适用异步处理问题,当发送邮件.或者文件上传, 图像处理等等一些比较 ...

  5. ubuntu 16.04上源码编译libjpeg-turbo和使用教程 | compile and use libjpeg-turbo on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/9f626e7a/,欢迎阅读! compile and use libjpeg-turbo on ubuntu 16.04 Seri ...

  6. selenium中延时等待三种方式

    selenium中的延时等待方式有三种:强制等待:sleep()  隐示等待:implicitly_wait()  显示等待 WebDriverWait() 1.强制等待:sleep(),time模块 ...

  7. 万恶之源-python的部分内容

    1.字符串格式化输出 ​ %占位符: ​ 声明占位的类型%s--字符串 %d%i--整型 %%转义 成为普通的% %s ,%d, %% msg = '%s,学习进度5%%' print(msg%(in ...

  8. 京东物流出问题了?褥了30块羊毛 & 浅析系统架构

    本人亲身经历,但后续的流程分析都是个人猜测的,毕竟没有实际做过这块的业务. 订单物流阻塞经过 火热的双11刚刚退去,截止今日,我在京东购买的矿泉水终于到货啦,下单两箱还只收到了一箱 :( ,从下单到收 ...

  9. k8s 随记

    1.kubelet参数解析:https://blog.csdn.net/qq_34857250/article/details/84995381 2.如何在github中查找k8s代码关键字? 现在我 ...

  10. Python 中国大学排名定向爬虫

    代码来自于中国大学Mooc北京理工大学Pythont教学团队:https://www.icourse163.org/learn/BIT-1001870001#/learn/content?type=d ...