Jquery中如何获取元素的文本,值,属性和内容

jQuery DOM 操作
jQuery 中非常重要的部分,就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
提示:DOM = Document Object Model(文档对象模型)
DOM 定义访问 HTML 和 XML 文档的标准:
“W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html()
- 设置或返回所选元素的内容包括 HTML 标记
val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
实例
$("#btn1").click(function(){
  alert("Text: " $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " $("#test").html());
});
$("#btn1").click(function(){
  alert("Value: " $("#test").val());
});

获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
实例
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

完整代码

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " $("#test").html());
  });

$("#btn3").click(function(){
  alert("Value: " $("#test").val());
});

$("button").click(function(){
    alert($("#w3s").attr("href"));
  });

</script>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>

<p>姓名:<input type="text" id="test" value="米老鼠"></p>
<button id="btn3">显示值</button>

<p><a href=http://www.hello-code.com id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367533.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python中的__new__()方法的使用

__new__() 函数只能用于从object继承的新式类。 先看下object类中对__new__()方法的定义&#xff1a; class object:staticmethod # known case of __new__def __new__(cls, *more): # known special case of object.__new__""" T.__new__(S, ...) -> a new …

什么是消息中间件

面向消息的中间件&#xff1a;Message-oriented Middleware, MOM 基本功能&#xff1a; 将信息以消息的形式&#xff0c;从一个应用程序传送到另一个或多个应用程序 主要特点&#xff1a; 消息异步接受&#xff0c;类似手机短信的行为&#xff0c;消息发送者不需要等待消息接受…

用Java分割大型XML文件

上周&#xff0c;我被要求用Java编写一些东西&#xff0c;该东西能够将单个30GB XML文件拆分为可配置文件大小的较小部分。 该文件的使用者将是一个中间件应用程序&#xff0c;该应用程序存在XML较大的问题。 在后台&#xff0c;它使用某种DOM解析技术&#xff0c;使它在一段时…

am82.top 1.php,Droppy v2.1.3 – PHP在线网盘系统

更新跨度比较大从1.4.6-2.1.3的更新日志我都贴出来利V2.1.9 (10 July, 2019)- Added option to define maximum upload chunk size in the admin panel- Fixed an issue where downloads were corruptedV2.1.8 (10 July, 2019)- Fixed an issue where upload password field wa…

抛出异常–缓慢而丑陋

这篇文章是关于历史经验以及最近应用的性能优化技术的。 几年前&#xff0c;我在特定的应用程序中发誓&#xff0c;我不得不发现隐藏在真正聪明的工程“技术”之下的无证行为。 它是一个典型的用于发票的单片Java EE应用程序。 最好忘记确切的代码&#xff0c;但是我记得开发人…

信号与线性系统翻转课堂笔记9——傅里叶变换概念

信号与线性系统翻转课堂笔记9——傅里叶变换 The Flipped Classroom9 of Signals and Linear Systems 对应教材&#xff1a;《信号与线性系统分析&#xff08;第五版&#xff09;》高等教育出版社&#xff0c;吴大正著 一、要点 &#xff08;1&#xff0c;重点&#xff09;…

abstract修饰符

1、一个类不能同时被 abstract 和 final 修饰。 2、如果一个类包含抽象方法&#xff0c;那么该类一定要声明为抽象类&#xff0c;否则将出现编译错误。 3、抽象类可以包含抽象方法和非抽象方法。 4、抽象方法是由子类来实现。 5、抽象方法不能被声明成 final 和 static。 6、任…

埃及分数问题(带乐观估计函数的迭代加深搜索算法-IDA*)

#10022. 「一本通 1.3 练习 1」埃及分数 【题目描述】 在古埃及&#xff0c;人们使用单位分数的和&#xff08;形如 $\dfrac{1}{a}​$​​ 的&#xff0c;$a$ 是自然数&#xff09;表示一切有理数。如&#xff1a;$\dfrac{2}{3} \dfrac{1}{2} \dfrac{1}{6}​$​​&#xff0c…

玩转Jquery中的动画效果(animate方法)

jQuery 动画 - animate() 方法jQuery animate() 方法用于创建自定义动画。语法&#xff1a;$(selector).animate({params},speed,callback);必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值&#xff1a;"slow"、"…

matlab 等分矩阵,用matlab根据列拆分矩阵.

使用logical indexingBA(A(:,end)10,:);CA(A(:,end)2,:);回报>> BB 1 4 2 5 102 1 5 6 10>> CC 2 4 5 6 22 3 5 4 2编辑&#xff1a;在回复丹的评论这里是一般情况的扩展e unique(A(:,end));B cell(size(e));for k 1:numel(e)B{k} A(A(:,end)e(k),:);end或者更…

点击网页跟踪php代码的工具,使用ltrace工具跟踪PHP库函数调用的方法

本文实例讲述了使用ltrace工具跟踪PHP库函数调用的方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;可能大家已经很熟悉使用strace来跟踪系统调用&#xff0c;今天介绍一个跟踪库函数的利器ltrace比如我有这么一段PHP代码test.php&#xff1a;$y 1380;$arr array…

HDU 2841 Visible Trees(容斥)题解

题意&#xff1a;有一块&#xff08;1,1&#xff09;到&#xff08;m&#xff0c;n&#xff09;的地&#xff0c;从&#xff08;0&#xff0c;0&#xff09;看能看到几块&#xff08;如果两块地到看的地方三点一线&#xff0c;后面的地都看不到&#xff09;。 思路&#xff1a;…

Jquery获取服务器端控件ID的方法

<asp:textbox runat"server" id"txtMessage" textmode"SingleLine">some strings here...</asp:textbox>但是当这段代码输出到客户端时就变成了这样&#xff1a;<input name"ctl00$txtMessage" id"ctl00_txtMessa…

安全地创建和存储密码

几乎每次涉及用户配置文件时&#xff0c;都必须管理用户凭据&#xff0c;从而能够创建和存储用户密码。 通常应该使用散列密码和盐分密码来准备数据库公开和通过使用Rainbow表进行散列反转的密码。 但是&#xff0c;找到以明文形式存储的密码并不少见&#xff08;很不幸&#…

Swift Defer 延迟调用

1、Defer 在一些语言中&#xff0c;有 try/finally 这样的控制语句&#xff0c;比如 Java。这种语句可以让我们在 finally 代码块中执行必须要执行的代码&#xff0c;不管之前怎样的兴风作浪。在 Swift 2.0 中&#xff0c;Apple 提供了 defer 关键字&#xff0c;让我们可以实现…

mysql strtok,strtok()和strtok_r()

下面的说明摘自于最新的Linux内核2.6.29&#xff0c;说明了strtok()这个函数已经不再使用&#xff0c;由速度更快的strsep()代替/** linux/lib/string.c** Copyright (C) 1991, 1992 Linus Torvalds*//** stupid library routines.. The optimized versions should generally b…

from 下拉框多个值提交_Git commit 多行信息提交

git commit可接受多个消息标志(-m)来允许多行提交原文地址&#xff1a;https://www.stefanjudis.com/today-i-learned/git-commit-accepts-several-message-flags-m-to-allow-multiline-commits/原文作者&#xff1a;Stephan Schneider在命令行上使用git时&#xff0c;您可能已…

处理缓慢的资源泄漏

使用Java监视器查找资源泄漏 查找缓慢的资源泄漏是使应用程序服务器长时间保持正常运行的关键。 在这里&#xff0c;我解释了如何使用Java监视器来发现缓慢的资源泄漏&#xff0c;以及如何验证它们是实际的泄漏&#xff0c;而不仅仅是额外的预分配到某些HTTP连接器或数据库池中…

jquery简单实现点击弹出层效果实例

先看效果图&#xff1a;完整例子&#xff1a; <!-- 渐变弹出层 --><div id"race"><a href"#">点击</a></div><div id"racePop" class"raceShow">这里是弹出层效果</div> <script type&q…

Openfire源码阅读(一)

本篇先分析openfire源码的主要流程&#xff0c;模块细节后续再继续分析&#xff1b; 一、简介&#xff1a; Openfire是开源的实时协作服务器&#xff08;RTC&#xff09;&#xff0c;它是基于公开协议XMPP&#xff08;RFC-3920&#xff09;&#xff0c;并在此基础上实现了XMPP-…