- 浏览: 27164 次
最新评论
本文为 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"));
});
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"));
});
发表评论
-
JavaScript强化教程 —— 对象创建模式
2016-10-09 17:12 749本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 依赖注入
2016-09-28 17:10 677本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— Select(选择框)
2016-09-23 17:14 861本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 控制器
2016-09-21 17:22 630本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
AngularJs 基础教程 —— 简介(10)
2016-09-14 17:41 566本文为 H5EDU 机构官方 HT ... -
AngularJs 基础教程 —— 与php服务器
2016-09-12 17:49 1321本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS自动JSB绑定规则修改
2016-09-09 18:08 1217本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 —— 资源打包工具的使用及资源的异步加载处理
2016-09-08 17:45 804本文为 HTML5培训 机构官方 HTML5培训 教程,主要介 ... -
JavaScript强化教程 —— Cocos2d-JS极速调试技巧
2016-09-05 16:18 927本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS游戏快速接入微信JS-SDK
2016-09-02 16:07 1082本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程—— 内置粒子系统
2016-08-29 16:00 803本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——JavaScript Math(算数) 对象
2016-08-26 16:33 595本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
2016-08-25 16:25 1244本文为 H5EDU 机构官方 HT ... -
JavaScript强化教程 -- cocosjs场景切换
2016-08-24 16:11 1410本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
CSS基础教程 -- 媒体查询屏幕适配
2016-08-22 15:15 1130本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JQuery强化教程 —— jQuery Easing
2016-08-18 14:54 833本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
fullPage教程 -- 整屏滚动效果插件 fullpage详解
2016-08-17 15:21 853本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
JavaScript强化教程——jQuery 动画2
2016-08-12 14:12 651本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二) —— 列表组listgroup
2016-08-11 14:46 661本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ... -
bootstrap教程(二)——导航条
2016-08-08 16:22 568本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍: ...
相关推荐
本教程集合了两个PDF文档——《HTML+5+从入门到精通》-中文学习教程.pdf和HTML 5 教程.pdf,旨在帮助对HTML5感兴趣的读者深入理解和掌握这一技术。 首先,HTML5的核心目标是简化开发过程,提高网页的可访问性和可用...
SFS2.0基于JavaScript的面向对象特性构建,它强化了类的概念,实现了封装、继承和多态性。在JavaScript中,对象是通过构造函数创建的,而SFS2.0可能提供了自己的构造函数系统,简化了对象实例化的过程。同时,SFS2.0...
`.clone()`方法现在能更好地保留元素的事件绑定,`.attr()`和`.prop()`方法的区分则使得获取和设置属性值更加精确。`.attr()`主要用于处理HTML属性,而`.prop()`则是为了获取或设置元素的JavaScript属性,如`checked...
PHP则是一种服务器端脚本语言,尤其适合处理动态内容和与数据库的交互。 首先,我们要理解HTML5的核心特点。HTML5引入了新的元素,如、、、等,用于更好地结构化页面内容。此外,它强化了对音频、视频的支持,使得...
3. **窗口属性**:开发者可以通过`PortletSession`对象设置和获取窗口属性,实现portlet间的共享数据和状态管理。 4. **窗口事件**:JSR 286增加了窗口事件机制,允许portlet在窗口状态改变或属性更新时通知其他...
而访问器描述符则由 `[[Get]]` 和 `[[Set]]` 方法组成,它们分别用来获取和设置属性值。 - **严格模式**:ES5 引入了一种新的执行上下文——严格模式,这种模式下 JavaScript 的运行会受到更多限制,从而有助于避免...
`.attr()`用于获取或设置元素的属性(attribute),而`.prop()`则用于处理元素的属性(property)。例如,`checked`、`selected`这些状态属性应当使用`.prop()`来操作,以确保正确反映元素的当前状态。 在jQuery ...
HTML是网页设计的基础,它定义了网页的内容和结构。在制作圣诞节模板时,首先要了解HTML的基本标签,如`<html>`、`<head>`、`<body>`、`<title>`等,它们构建了网页的整体框架。同时,通过`<h1>`至`<h6>`设置标题,...
2. **脚本语言**:ASP主要支持两种脚本语言——VBScript和JScript。VBScript是Visual Basic的简化版本,而JScript是JavaScript的微软实现。学习这两种语言的基本语法和用法是ASP编程的基础。 3. **服务器控件**:...
此外,新版本还强化了事件处理机制,提供了更灵活的事件绑定和解绑选项,如`.on()`和`.off()`方法,可以更好地控制事件的生命周期。 在动画效果上,jQuery 3.6.0保持了其一贯的平滑体验。`$.animate()`函数在处理...
这些元素有助于搜索引擎理解和索引网页内容,提高网页的可读性和可访问性。 2. 新增表单控制:HTML5增加了多种新的表单控件,如日期选择器(),电子邮件输入框(),搜索框(),URL输入框()等,提高了用户输入数据的...
同时,"收费只是想让你们知道资源得来不易"这部分可能意味着该资源包含了开发者的心血和创新,付费获取不仅是对作者劳动成果的尊重,也是支持持续创新的一种方式。 总的来说,炫酷倒计时秒表是一个结合了前端技术、...
2. **VBScript与JScript**:ASP默认支持两种脚本语言——VBScript和JScript。VBScript是Visual Basic的简化版,广泛用于ASP,而JScript是JavaScript的微软版本,两者都可用于编写ASP页面的逻辑。 3. **Web数据库...
2. DOM操作:学会添加、删除和修改元素,以及通过innerHTML和textContent属性操作元素内容。 3. 事件监听:理解事件和事件处理程序,学习addEventListener和removeEventListener的使用。 **三、AJAX与异步编程** ...
JavaScript跨域是Web开发中一个重要的概念,主要是由于浏览器的安全策略——同源策略(Same-origin policy)所引发的问题。同源策略规定,JavaScript只能访问与自身URL协议、域名和端口完全一致的网页资源。这一策略...
因此,为了提高Web开发的效率和强化Web应用的功能,熟练使用jQuery是Web开发者必备的一种能力。 《jQuery权威指南》由国内资深Web技术专家亲自执笔,4大Web开发社区一致鼎力推荐,权威性毋庸置疑。 内容新颖,基于...
描述中的“安哥新闻 新闻门户网站传播安哥拉新闻”是对标题的进一步强化,它强调了网站的核心功能——分享和更新安哥拉的相关新闻。这暗示着AngoNews可能具有用户友好的界面,方便用户快速浏览和搜索感兴趣的内容,...
在Angular应用中,HTML模板被用来声明视图,结合Angular指令,可以实现动态内容和交互。 3. **TypeScript**:Angular通常使用TypeScript编写,这是一种静态类型的超集,提供了强类型、接口、泛型等特性,增强了...
本人电子文档的内容和纸质论文的内容相一致。除在保密期内的保密论文和在技术保护期限内的论文外,允许论文被查阅和借阅,可以公布(包括以电子信息形式刊登)论文的全部内容或中、英文摘要等部分内容。论文的公布...
标题“有角的雌性:Desenvolvendo as habilidades em Angular”暗示了这是一个关于学习和提升Angular技术的教程或项目。Angular是一个流行的前端开发框架,由Google维护,用于构建高性能、响应式的Web应用程序。...