jQuery学习3:操作元素属性和特性


Posted in Javascript onFebruary 07, 2010

先看一个例子:

<a id="easy" href="#">https://3water.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) 移除元素的属性值

下边以实例说明每种方法的具体用法。

<div id="test">

    <a id="hyip" href="javascript:void(0)">三水点靠木</a>

    <a id="baidu" href="javascript:void(0)">百度</a>

    <img id="show" />

</div>
jQuery("#test a").click(function() {

    //得到ID

    jQuery(this).attr("id"); //同this.id
    //为img标签设置src为指定图片;title为百度.

    var v = { src: "http://www.baidu.com/img/bdlogo.gif", title: "百度" };

    jQuery("#show").attr(v);
    //将img的title设置为baidu,同上边的区别是每次只能设定一个属性

    jQuery("#show").attr("title", "baidu");
    //移除img的title属性

    jQuery("#show").removeAttr("title");

});

大家可能已经发现了,在jQuery中attr()方法,既可以获得元素的属性值,又能设置元素的属性值。是的,在jQuery中,类似的方法还有很多,现在将它们总结下来,以后用起来也会比较容易。

方法有:

◦html()  获取或设置元素节点的html内容
◦text()  获取或设置元素节点的文本内容
◦height()  获取或设置元素高度
◦ width()  获取或设置元素宽度
◦ val()  获取或设置输入框的值

以html()为例,其余的相似:

<div id="showhtml">baidu</div>
//获得html,结果为baidu

jQuery("#showhtml").html();

//设置html,结果为I love baidu

jQuery("#showhtml").html("I love baidu");

以上这些就是jQuery操作元素属性的一些基本方法了,经过本次的总结,相信大家在使用jQuery时,会更加的熟练。

以下是其它网友的补充:

下面就列出jQuery中提供的方法:

操作元素属性:each(iterator)遍历包装集里所有元素,为各元素分别调用传递进来的迭代器函数。参数iterator 一个函数,为匹配集中的各元素分别调用一次。传递到函数的参数被设置为包装集里当前元素的下标(从0开始),而当前元素可通过函数this属性来访问。

$('img').each(function(n){

this.alt='This is image['+n+'] with an id of'+this.id;

})

获取特性值:attr(name)获取指派到包装集里第一个元素指定特性的值。参数 name为特性的名称,该特性的值将被获取。如果没有该特性则返回undefined值。

<img id="myImage" src="image.gif" alt="An image" class="someClass" title="This is an image" custom="some value">

$("#myImage").attr("custom") 得到值就是some value。

设置特性值:attr(name,value)为包装集里的所有元素的name特性设置传递进来的值。name将被设置的特性的名称,value指定特性的值。

$('*').attr('title',function(index) {
return 'I am element' '+ index +' and my name is ' +(this.id?this.id:'unset');

});

该函数是设置页面上的所有元素的title特性为一个字符串。由DOM中元素的下标和各个特定元素id特性值所组成的字符串。

attr()还可以一次设置多个特性到包装集里所有元素的快速简便的方式。attr(attributes)。

$('input').attr(

{value:'',title:'please enter a value'}

);

该函数把所有<input>元素的value设置为空字符串,同时把title设置为字符串Please enter a value。

Javascript 相关文章推荐
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
微信小程序 教程之模板
Oct 18 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
200行代码实现blockchain 区块链实例详解
Mar 14 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
jQuery学习2 选择器的使用说明
Feb 07 #Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 #Javascript
JQuery 获取和设置Select选项的代码
Feb 07 #Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 #Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 #Javascript
javascript 函数速查表
Feb 07 #Javascript
js 键盘记录实现(兼容FireFox和IE)
Feb 07 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
利用discuz自带通行证整合dedecms的方法以及文件下载
2007/03/06 PHP
php json_encode奇怪问题说明
2011/09/27 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
2015/07/27 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
Python走楼梯问题解决方法示例
2018/07/25 Python
详细整理python 字符串(str)与列表(list)以及数组(array)之间的转换方法
2019/08/30 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
.NET程序员的几道面试题
2012/06/01 面试题
个人自荐信
2013/12/05 职场文书
逃课上网检讨书
2014/02/20 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
喜之郎果冻广告词
2014/03/20 职场文书
网站客服岗位职责
2014/04/05 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
2014年学生会工作总结
2014/11/07 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python