源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-07-28 19:49 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery学习3:操作元素属性和特性
先看一个例子:
[url=#]
方法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) 移除元素的属性值 下边以实例说明每种方法的具体用法。
[url=javascript:void(0)]     <a id="baidu" href="javascript:void(0)">百度</a>     <img id="show" /> </div>
大家可能已经发现了,在jQuery中attr()方法,既可以获得元素的属性值,又能设置元素的属性值。是的,在jQuery中,类似的方法还有很多,现在将它们总结下来,以后用起来也会比较容易。 方法有: ◦html()  获取或设置元素节点的html内容 ◦text()  获取或设置元素节点的文本内容 ◦height()  获取或设置元素高度 ◦ width()  获取或设置元素宽度 ◦ val()  获取或设置输入框的值 以html()为例,其余的相似:
[u]复制代码[/u] 代码如下:
<div id="showhtml">baidu</div>
[u]复制代码[/u] 代码如下:
//获得html,结果为baidu jQuery("#showhtml").html(); //设置html,结果为I love baidu jQuery("#showhtml").html("I love baidu");
以上这些就是jQuery操作元素属性的一些基本方法了,经过本次的总结,相信大家在使用jQuery时,会更加的熟练。 [b]以下是其它网友的补充:[/b] 下面就列出jQuery中提供的方法: 操作元素属性:each(iterator)遍历包装集里所有元素,为各元素分别调用传递进来的迭代器函数。参数iterator 一个函数,为匹配集中的各元素分别调用一次。传递到函数的参数被设置为包装集里当前元素的下标(从0开始),而当前元素可通过函数this属性来访问。
[u]复制代码[/u] 代码如下:
$('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指定特性的值。
[u]复制代码[/u] 代码如下:
$('*').attr('title',function(index) {   return 'I am element' '+ index +' and my name is ' +(this.id?this.id:'unset'); });
该函数是设置页面上的所有元素的title特性为一个字符串。由DOM中元素的下标和各个特定元素id特性值所组成的字符串。 attr()还可以一次设置多个特性到包装集里所有元素的快速简便的方式。attr(attributes)。
[u]复制代码[/u] 代码如下:
$('input').attr( {value:'',title:'please enter a value'} );
该函数把所有<input>元素的value设置为空字符串,同时把title设置为字符串Please enter a value。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部