jQuery - 获取内容和属性浅谈-程序员宅基地

技术标签: jQuery  编程语言  前端  jquery  javascript  

摘自:微点阅读  https://www.weidianyuedu.com

jQuery - 获取内容和属性


jQuery 拥有可操作 HTML 元素和属性的强大方法。


jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

lamp

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()); });

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:

实例

$("#btn1").click(function(){ alert("值为: " + $("#test").val()); });


获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值:

实例

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hdxx2022/article/details/137915968

智能推荐

prometheus 0基础知识点和安装操作步骤_prometheus 中文文档-程序员宅基地

文章浏览阅读302次。近几年随着k8s的流行,prometheus成为了一个越来越流行的监控工具,是现在重要的云原生监控平台之一,它允许企业从任何基础设施或应用组件收集和处理指标数据,用于监控容器化工作负载。数据检索worker用于发现Kubernetes中的目标,并从正在进行的作业或用于短期作业的推送网关中获取指标,然后将这些指标推送到数据库,从那里可以通过HTTP访问指标以进行查询和警报。在持久性存储中,数据被分为两个小时的块,最终进行压缩。由于它的灵活性,这些组件会因我们的具体实现而异,但是应始终包含以下的元素。_prometheus 中文文档

python实现mqtt_python mqtt 客户端的实现代码实例-程序员宅基地

文章浏览阅读492次。这篇文章主要介绍了python mqtt 客户端代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下安装paho-mqttpip install paho-mqtt -i http://pypi.douban.com/simple --trusted-host pypi.douban.compython消息收发实现import paho.mqt..._python实现mqtt

文件夹权限问题和linux下搭建FTP服务器_linux 文件夹权限 影响ftp listfles-程序员宅基地

文章浏览阅读2.6w次。文件夹权限问题Linux、Fedora、Ubuntu修改文件、文件夹权限的方法差不多。很多人开始接触Linux时都很头痛Linux的文件权限问题。这里告诉大家如何修改Linux文件-文件夹权限。以主文件夹下的一个名为cc的文件夹为例。 下面一步一步介绍如何修改权限: 1.打开终端。输入su(没 Linux、Fedora、Ubuntu修改文件、文件夹权限的方法差不多。很多人开始接触Lin_linux 文件夹权限 影响ftp listfles

JavaScript调用Python程序_javascript 调用python-程序员宅基地

文章浏览阅读186次。JavaScript调用Python程序_javascript 调用python

这个为生信学习打造的开源Bash教程真香!!(目录更新)!-程序员宅基地

文章浏览阅读300次。生物信息学习的正确姿势NGS系列文章包括NGS基础、在线绘图、转录组分析(Nature重磅综述|关于RNA-seq你想知道的全在这)、ChIP-seq分析(ChIP-seq基本分析流..._bash教程 国外

oracle详解-程序员宅基地

文章浏览阅读4.3k次,点赞11次,收藏65次。首先看张图:对于一个数据库系统来说,假设这个系统没有运行,我们所能看到的和这个数据库相关的无非就是几个基于操作系统的物理文件,这是从静态的角度来看,如果从动态的角度来看呢,也就是说这个数据库系统运行起来了,能够对外提供服务了,那就意外着数据库系统启动了自己的一个实例,综合以上2个角度,Oracle如何定义上述描述呢?我们来引入第一个概念,Oracle服务器,所谓Oracle服务器是一个数据库管理系统,它包括一个Oracle实例(动态)和一个Oracle数据库(静态)。Oracle实例是一个运行的概念(_oracle

随便推点

求助spyder闪退问题_活动代码页936spyder-程序员宅基地

文章浏览阅读5.6k次,点赞6次,收藏4次。背景:windows11+anaconda3+spyder5.1.5今天给笔记本重装系统,想尝鲜直接装了win11,然后下载了最新的anaconda,自己创了环境,装了最新的spyder,第一次是在anaconda nagivator里面下载的,launch之后会自动弹出来一个CMD窗口,显示“活动代码页:936” 。spyder 虽然可以打开,但是如果关掉这个cmd窗口,spyder会闪退。然后卸载掉spyder之后尝试从anaconda promot 里面重新安装spyder ,lau._活动代码页936spyder

SublimeText3 插件开发记录 --- 划词翻译_sublime text 翻译-程序员宅基地

文章浏览阅读4.4k次,点赞3次,收藏10次。最近正研究怎么使用SublimeText3开发Python,然而对Python英文文档的阅读是一个比较头疼的问题,在AndroidStudio中有自动翻译插件ECTranslation,能方便的翻译单词和句子。因此想仿照ECTranslation,自己写一个翻译插件,正好也能加深对Python的印象。(在SublimeText3中,似乎没有特别好用的划词翻译插件)开发ST3的插件,网上只有简单的入门_sublime text 翻译

c语言struct的作用和用法,c语言struct用法详解-程序员宅基地

文章浏览阅读8.5k次,点赞4次,收藏19次。c语言struct用法详解在C语言中,可以使用结构体(Struct)来存放一组不同类型的数据。结构体的定义形式为:struct 结构体名{结构体所包含的变量或数组};结构体是一种集合,它里面包含了多个变量或数组,它们的类型可以相同,也可以不同,每个这样的变量或数组都称为结构体的成员(Member)。请看下面的一个例子:struct stu{char *name; //姓名int num; //..._c语言struct的作用和用法

java爬虫之登录到教务系统抓取成绩_java实现从学校教务网上爬取数据(-程序员宅基地

文章浏览阅读2.2k次。最近使用java写了个爬虫,可能我对java比较熟悉,所以相对于python来说,我觉得用java写更得心应手些。我采用的是java的jsoup,以及解析用到的json先放上学校教务系统的url http://222.200.98.147首先可以看到,这里是需要验证码输入的,所以我使用了以下的思路:第一步,先访问验证码所在的url,把图片下载到本地,然后保存cookie_java实现从学校教务网上爬取数据(

[ERROR] Can't find error-message file '/data/mysql/share/errmsg.sys'. Check error-message file locat...-程序员宅基地

文章浏览阅读5.6k次。1. MySQL5.7.21启动时报错:[ERROR] Can't find error-message file '/data/mysql/3307/share/errmsg.sys'. Check error-message file location and 'lc-messages-dir' configuration directive.2. 登录MySQL查看系统全局参数:..._can't find error-message file '/data/mysql/share/errmsg.sys'. check error-me

51单片机入门——数字时钟_51单片机 时钟-程序员宅基地

文章浏览阅读2.5w次,点赞58次,收藏419次。文章目录1. 前言1.1. 设计要求2. 硬件原理2.1. 时钟信号(晶振)2.2. 按键开关2.3. 数码管显示3. 原理图3.1. 仿真原理图3.2. AD原理图3.3. PCB图4. 软件设计4.1. 初版代码(无年月日)4.2. 终版代码5. 元器件清单5.1. 仿真软件5.2. 实物1. 前言在此之前我们已经学习了单片机的定时器、中断、数码管。这篇文章主要讲述如何用上述的知识自己制作一个基于51单片机的数字时钟。1.1. 设计要求(1)主电路由秒信号发生器、“时、分、秒”计数器_51单片机 时钟