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

先看一个例子：

代码如下:

<a id="easy" href="#">http://www.jb51.net</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。

赞 (0)

相关推荐

  • 从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    从零开始学习jQuery (四) jQuery中操作元素的属性与样式

    一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="

  • jquery中添加属性和删除属性

    jquery中添加属性和删除属性: 复制代码 代码如下: $("#2args").attr("disabled",'disabled'); $("#2args").removeAttr("disabled"); 问题背景: 选择"选项1"是,"两个参数"这个单选按钮有效. 选择"选项2"时,让"两个参数"的这个单选按钮无效. 代码: <!DO

  • jquery操作checked属性以及disabled属性的多种方法

    下边两种写法没有任何区别 只是少了些代码而已... 复制代码 代码如下: <input id="cb1" type="checkbox" checked /> <input id="cb2" type="checkbox" checked="checked" /> jquery判断checked的三种方法: 复制代码 代码如下: .attr('checked'):   //看版本1.

  • defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx，操作被中止”错误的解决方法

    defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx，操作被中止”错误的解决方法

    在一个aspx页面中使用了JQuery,但当IE6浏览器打开这个页面的时候会报"Internet Explorer cannot open the Internet site http://localhost:9001/Index.aspx. Operation aborted"的错误,然后就不能正常浏览此页面.如果使用IE7或者IE8就没有此问题. 将所有的js脚本都使用"<!-- -->"标记注释掉(这样虽然会导致问题,但至少可以浏览此页面).逐个检

  • jQuery学习笔记 操作jQuery对象 属性处理

    元素的属性处理 方法 描述 attr(name) attr(name,value) attr(name,fn(index,value)) attr({name1:value1,-,nameN:valueN}) 获取某个属性的取值,或可以用于设置某个属性的值.还可以使用函数作为参数,将函数返回值作为需要为元素属性设置的值,比如将第(index+1)个元素的name属性设置为函数返回值(实际上,明白函数式就根本不需要这说明).也可以一次性给同一元素多个属性 removeAttr(name) 删除某个

  • jQuery .attr()和.removeAttr()方法操作元素属性示例

    今天主要和大家一起分享一下如何使用jQuery的.attr()和.removeAttr()方法读取,添加,修改,删除元素的属性.大家在平时的Web页面制作中都有碰到如何动态的获取元素的属性和属性值,或者说动态的修改元素的某个(某些)属性的属性值.那么jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现: 1 .attr():jQuery中的.attr()方法让你能轻松的读取,增加或修改一个元素的属性(详情参考.attr(

  • jquery根据属性和index来查找属性值并操作

    <div class="zy_menu clearfix"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" re

  • JQuery对class属性的操作实现按钮开关效果

    在本文中用JQuery对class属性的操作方法实现页面中的按钮开关效果. 首先定义两个class: 复制代码 代码如下: .controlOff{ display:inline-block; width:130px; height:36px; cursor:pointer; background-image:url("../iclass/images/teach_off.png"); background-repeat: no-repeat; } .controlOn{ displa

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

    先看一个例子: 复制代码 代码如下: <a id="easy" href="#">http://www.jb51.net</a>现在要得到a标签的属性id.有如下方法: 复制代码 代码如下: jQuery("#easy").click(function() {     alert(document.getElementById("easy").id); //1     alert(this.id); /

  • jQuery使用之标记元素属性用法实例

    本文实例讲述了jQuery使用之标记元素属性用法.分享给大家供大家参考.具体分析如下: 这里介绍jQuery的使用主要包括jQuery如何控制页面,包含元素的属性.css样式风格.DOM模型.表单元素和事件处理等. 标记元素的属性 html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记 复制代码 代码如下: <a herf="http://www.baidu.com" title="isaac" target=&

  • jQuery学习总结之元素的相对定位和选择器(持续更新)

    jQuery学习总结之元素的相对定位和选择器(持续更新)

    ①jQuery元素的相对定位. jQuery中不仅可以使用选择器就行绝对定位,而且还可以进行相对定位,只要在$()中指定第二个参数,第二个参数就是相对的元素.第二个参数传递一个jQuery对象,则相对于这个对象为基准进行相对的选择. 复制代码 代码如下: <html> <head> <title>jQuery元素的相对定位和选择器</title> <script type="text/javascript" src="jQ

  • jQuery修改CSS伪元素属性的方法

    CSS伪元素(pseudo elements)不是DOM元素,因此你无法直接选择到它们. 假设有如下HTML代码: <div class="techbrood" id="td_pseudo">techbrood introduction</div> 和CSS代码: .techbrood:before { width: 0; } 现在你想在某个元素的click事件中动态的把techbrood:before的width属性设置为100%, 有两个

  • jQuery学习7 操作JavaScript对象和集合的函数

    删除字符串首尾空字符:$.trim() 像很多高级语言都提供了类似的函数,jQuery类库也提供了这样的函数.具体用法:$.trim(value)从已传入的字符串里删除首尾空白字符并返回结果. 对属性和集合进行迭代: 在JavaScript操作数组和对象可以采用下面的方法: var anArray = ['one','two','three']; for(var n = 0; n < anArray.length; n++){...} var anObject = {one:1, two:2,

  • jQuery 学习6 操纵元素显示效果的函数

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Collapsible List — Take 1</title> <link rel="stylesheet" type="t

  • jQuery学习笔记 操作jQuery对象 CSS处理

    CSS基本属性处理 方法 描述 css(name) 获取元素上CSS规则中name属性值 css(name,value) css(name,fn(index,value)) css({name1:value1,-,nameN:valueN}) 设置元素上CSS规则name属性的值为value,也可使用函数参数,不解释:还可以一次性为同一元素设置多个CSS属性 CSS尺寸属性处理 方法 描述 height() 获取元素CSS属性height的值 width() 获取元素CSS属性width的值.这

  • jQuery学习笔记 操作jQuery对象 文档处理

    下面就是一些常用方法,格式为$(selector).方法,其中$(selector)即当前选定元素: 移动元素 方法 描述 append($(selector)) 向当前元素的内部追加内容 appendTo($(selector)) 将当前元素在某元素内部追加.但由于会根据需要对当前元素进行移动,所以jQuery对象更改了,可用end()还原 prepend($(selector)) 向当前元素的内部前置内容 prependTo($(selector)) 将当前元素在某元素内部前置.类似于app

随机推荐