上次总结了下,jQuery包装集,今天主要总结一下jQuery操作元素属性的一些知识。
先看一个例子:
<aid="easy"href="#">http://www.jquery001.com</a>
现在要得到a标签的属性id。有如下方法:
jQuery("#easy").click(function(){
alert(document.getElementById("easy").id);//1
alert(this.id);//2
alert(jQuery(this).attr("id"));//3});
方法1使用的是javascript原始方法;方法2用到了this,this就相当于一个指针,返回的是一个dom对象,本例中返回a标签对象。所以this.id可直接得到id。方法3将dom对象转换成了jQuery对象,再利用jQuery封装的方法attr()得到a标签的ID。
可见,有时候用javascript配合jQuery会很方便。下边着重总结一下jQuery操作元素属性。
- attr(name) 取得元素的属性值
- attr(properties) 设置元素属性,以名/值形式设置
- attr(key,value) 为元素设置属性值
- removeAttr(name) 移除元素的属性值
下边以实例说明每种方法的具体用法。
<divid="test"><aid="hyip"href="javascript:void(0)">jQuery学习</a><aid="google"href="javascript:void(0)">谷歌</a><imgid="show"/></div>
jQuery("#test a").click(function(){//得到ID
jQuery(this).attr("id");//同this.id//为img标签设置src为指定图片;title为谷歌.var v ={ src:"http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", title:"谷歌"};
jQuery("#show").attr(v);//将img的title设置为google,同上边的区别是每次只能设定一个属性
jQuery("#show").attr("title","google");//移除img的title属性
jQuery("#show").removeAttr("title");});
大家可能已经发现了,在jQuery中attr()方法,既可以获得元素的属性值,又能设置元素的属性值。是的,在jQuery中,类似的方法还有很多,现在将它们总结下来,以后用起来也会比较容易。
方法有:
- html() 获取或设置元素节点的html内容
- text() 获取或设置元素节点的文本内容
- height() 获取或设置元素高度
- width() 获取或设置元素宽度
- val() 获取或设置输入框的值
以html()为例,其余的相似:
<divid="showhtml">google</div>
//获得html,结果为google
jQuery("#showhtml").html();//设置html,结果为I love google
jQuery("#showhtml").html("I love google");
以上这些就是jQuery操作元素属性的一些基本方法了,经过本次的总结,相信大家在使用jQuery时,会更加的熟练。
相关推荐
**jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...
今天我们将主要关注jQuery中的节点操作、特殊属性操作以及事件机制。 一、jQuery节点操作 1. 选择器:jQuery提供了丰富的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,用于快速定位DOM元素...
- jQuery提供了丰富的DOM操作方法,如`append()`向元素内部添加内容,`prepend()`在元素内部开头添加内容,`remove()`移除元素,`html()`获取或设置元素的HTML内容,`attr()`处理属性值。 4. **事件处理** - ...
jQuery提供了丰富的选择器,包括基本选择器(ID、类、标签)、层次选择器(子元素、相邻兄弟、一般兄弟)、属性选择器(根据属性值选取元素)和表单选择器(用于选取表单元素)。 ### 3. DOM操作 - `$(selector)....
### 使用jQuery操作元素的属性与样式 ...通过以上示例,我们可以看到jQuery提供的`attr()`方法不仅功能强大而且易于使用,非常适合用来操作元素属性。这对于构建具有高度交互性和响应式的网页来说是非常有用的工具。
尽管JQuery不直接提供修改DOM属性的方法,但它提供了`attr()`函数来处理元素属性。`attr()`函数可以用于获取或设置一个或多个元素的属性值。以下是一个示例,展示如何使用`attr()`来改变图片的`src`和`alt`属性: `...
操作"元素属性" 32 六,修改CSS样式 34 七.获取常用属性 35 八.总结 39 从零开始学习jQuery (五) 事件与事件对象 40 一.摘要 40 二.前言 40 三.事件与事件对象 40 四. jQuery中的事件 43 五.常用事件函数举例 46 六....
在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心概念和实用技巧,帮助你全面掌握这个强大的工具。 一、jQuery简介 ...
《JQuery学习手册》是一份全面且深入的资源,旨在帮助开发者掌握JavaScript库JQuery的核心概念和实用技巧。这份手册不仅包含理论知识,还有实践应用的案例,是初学者和经验丰富的开发者提升JQuery技能的理想参考资料...
- **属性操作**:`attr()` 和 `removeAttr()` 用于设置或移除元素属性,`addClass()`、`removeClass()` 和 `toggleClass()` 管理类名。 ### 2. 事件处理 jQuery 提供了一套方便的事件处理函数,如 `click()`, `...
jQuery是一款广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。本压缩包提供了全面的jQuery学习资源,包括全版本的jQuery库、学习日志、常用插件及官方帮助...
jQuery是一个广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本教程将深入探讨jQuery的核心概念、功能和应用,旨在帮助初学者和有经验的开发者更好地理解和...
《jQuery学习总结》 jQuery 是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本文主要总结了jQuery的一些核心概念和常用方法。 首先,jQuery的核心是选择器...
《jQuery元素操作详解》 在Web开发中,jQuery库以其简洁、高效的API赢得了广大开发者喜爱,其中元素操作是jQuery的核心功能之一。这篇博客将深入探讨jQuery如何进行元素选择、操作和增强DOM(文档对象模型)的功能...
jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了网页中的 JavaScript 代码,特别是涉及到 DOM 操作、事件处理和动画效果时。以下是对 jQuery 学习文档中提到的关键知识点的详细说明: 1. **jQuery 语法实例...
例如,闭包可以用于创建私有变量,原型链则解释了如何通过对象之间的继承关系共享属性和方法,这对于理解JQuery的面向对象编程有很大帮助。 最后,`程序员常用javascript特效`可能是关于使用JQuery实现的各种常见...
这本电子书通常会覆盖从基础到进阶的jQuery内容,包括选择器、DOM操作、事件处理、动画制作以及Ajax交互等多个方面,非常适合初学者系统学习。 通过持续实践和查阅相关资料,你将能够熟练掌握jQuery,从而提高开发...
在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本资料包“jQuery学习ppt和实例”提供了深入学习jQuery的详细内容,旨在帮助开发者快速掌握这一强大...