`
周大帅
  • 浏览: 27164 次
社区版块
存档分类
最新评论

JavaScript强化教程——获取内容和属性

阅读更多
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 获取内容和属性


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"));
});
分享到:
评论

相关推荐

    HTML5程序设计、HTML5教程

    本教程集合了两个PDF文档——《HTML+5+从入门到精通》-中文学习教程.pdf和HTML 5 教程.pdf,旨在帮助对HTML5感兴趣的读者深入理解和掌握这一技术。 首先,HTML5的核心目标是简化开发过程,提高网页的可访问性和可用...

    自己写的JS框架 SFS2.0

    SFS2.0基于JavaScript的面向对象特性构建,它强化了类的概念,实现了封装、继承和多态性。在JavaScript中,对象是通过构造函数创建的,而SFS2.0可能提供了自己的构造函数系统,简化了对象实例化的过程。同时,SFS2.0...

    jQuery1.6优秀的Web前端开发框架

    `.clone()`方法现在能更好地保留元素的事件绑定,`.attr()`和`.prop()`方法的区分则使得获取和设置属性值更加精确。`.attr()`主要用于处理HTML属性,而`.prop()`则是为了获取或设置元素的JavaScript属性,如`checked...

    html5和php实现微信小游戏智力撑杆源码.zip

    PHP则是一种服务器端脚本语言,尤其适合处理动态内容和与数据库的交互。 首先,我们要理解HTML5的核心特点。HTML5引入了新的元素,如、、、等,用于更好地结构化页面内容。此外,它强化了对音频、视频的支持,使得...

    JSR 286 Portlet 的新特性,第 3 部分: Portlet 过滤器和 Portlet 窗口

    3. **窗口属性**:开发者可以通过`PortletSession`对象设置和获取窗口属性,实现portlet间的共享数据和状态管理。 4. **窗口事件**:JSR 286增加了窗口事件机制,允许portlet在窗口状态改变或属性更新时通知其他...

    ECMAScript-Edition5-小试

    而访问器描述符则由 `[[Get]]` 和 `[[Set]]` 方法组成,它们分别用来获取和设置属性值。 - **严格模式**:ES5 引入了一种新的执行上下文——严格模式,这种模式下 JavaScript 的运行会受到更多限制,从而有助于避免...

    jquery1.7.2_20120420中文版 和jQuery1.6_英文版

    `.attr()`用于获取或设置元素的属性(attribute),而`.prop()`则用于处理元素的属性(property)。例如,`checked`、`selected`这些状态属性应当使用`.prop()`来操作,以确保正确反映元素的当前状态。 在jQuery ...

    圣诞节模板HTML

    HTML是网页设计的基础,它定义了网页的内容和结构。在制作圣诞节模板时,首先要了解HTML的基本标签,如`<html>`、`<head>`、`<body>`、`<title>`等,它们构建了网页的整体框架。同时,通过`<h1>`至`<h6>`设置标题,...

    ASP程序设计(第2版).7z

    2. **脚本语言**:ASP主要支持两种脚本语言——VBScript和JScript。VBScript是Visual Basic的简化版本,而JScript是JavaScript的微软实现。学习这两种语言的基本语法和用法是ASP编程的基础。 3. **服务器控件**:...

    jquery3.6.0

    此外,新版本还强化了事件处理机制,提供了更灵活的事件绑定和解绑选项,如`.on()`和`.off()`方法,可以更好地控制事件的生命周期。 在动画效果上,jQuery 3.6.0保持了其一贯的平滑体验。`$.animate()`函数在处理...

    HTML5基础知识 入门知识学习文档

    这些元素有助于搜索引擎理解和索引网页内容,提高网页的可读性和可访问性。 2. 新增表单控制:HTML5增加了多种新的表单控件,如日期选择器(),电子邮件输入框(),搜索框(),URL输入框()等,提高了用户输入数据的...

    精品源码 / 炫酷特效 / 倒计时秒表

    同时,"收费只是想让你们知道资源得来不易"这部分可能意味着该资源包含了开发者的心血和创新,付费获取不仅是对作者劳动成果的尊重,也是支持持续创新的一种方式。 总的来说,炫酷倒计时秒表是一个结合了前端技术、...

    ASP教务实验课选课系统(2)

    2. **VBScript与JScript**:ASP默认支持两种脚本语言——VBScript和JScript。VBScript是Visual Basic的简化版,广泛用于ASP,而JScript是JavaScript的微软版本,两者都可用于编写ASP页面的逻辑。 3. **Web数据库...

    codeup-web-exercises

    2. DOM操作:学会添加、删除和修改元素,以及通过innerHTML和textContent属性操作元素内容。 3. 事件监听:理解事件和事件处理程序,学习addEventListener和removeEventListener的使用。 **三、AJAX与异步编程** ...

    详解JavaScript跨域总结与解决办法

    JavaScript跨域是Web开发中一个重要的概念,主要是由于浏览器的安全策略——同源策略(Same-origin policy)所引发的问题。同源策略规定,JavaScript只能访问与自身URL协议、域名和端口完全一致的网页资源。这一策略...

    jQuery权威指南-源代码

    因此,为了提高Web开发的效率和强化Web应用的功能,熟练使用jQuery是Web开发者必备的一种能力。 《jQuery权威指南》由国内资深Web技术专家亲自执笔,4大Web开发社区一致鼎力推荐,权威性毋庸置疑。 内容新颖,基于...

    AngoNews:新闻门户网站传播安哥拉新闻

    描述中的“安哥新闻 新闻门户网站传播安哥拉新闻”是对标题的进一步强化,它强调了网站的核心功能——分享和更新安哥拉的相关新闻。这暗示着AngoNews可能具有用户友好的界面,方便用户快速浏览和搜索感兴趣的内容,...

    angular-app:赫尔松餐厅应用程序

    在Angular应用中,HTML模板被用来声明视图,结合Angular指令,可以实现动态内容和交互。 3. **TypeScript**:Angular通常使用TypeScript编写,这是一种静态类型的超集,提供了强类型、接口、泛型等特性,增强了...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    本人电子文档的内容和纸质论文的内容相一致。除在保密期内的保密论文和在技术保护期限内的论文外,允许论文被查阅和借阅,可以公布(包括以电子信息形式刊登)论文的全部内容或中、英文摘要等部分内容。论文的公布...

    有角的雌性:Desenvolvendo as habilidades em angular

    标题“有角的雌性:Desenvolvendo as habilidades em Angular”暗示了这是一个关于学习和提升Angular技术的教程或项目。Angular是一个流行的前端开发框架,由Google维护,用于构建高性能、响应式的Web应用程序。...

Global site tag (gtag.js) - Google Analytics