jQuery第三课 修改元素属性及内容的代码

1. 操作属性
上文介绍了如何筛选到需要的元素。得到了元素之后就要对其进行操作。一个常见的需求是遍历得到的元素集，对每一个元素进行一个操作。jQuery提供的函数是
each(iterator)，其中iterator是一个函数，接受一个整数作为参数，表示第几个元素。看一个简单的例子。


代码如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Operation</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$('img').each(function(n) {
this.alt = "This is " + n + "th picture";
});
});
</script>
</head>
<body>
<h1>Image Gallery<br />March 13th,2010</h1>
<img src="img/bee.jpg" alt="" width="150px"/>
<img src="img/bright.jpg" alt="" width="150px"/>
<img src="img/crowd.jpg" alt="" width="150px"/>
<img src="img/pink.jpg" alt="" width="150px"/>
<img src="img/white.jpg" alt="" width="150px"/>
</body>
</html>

结果用Firebug查看下：

在上例中，采用了原生javascript的方法存取属性，jQuery 提供了一个更加一般的方法来存取属性，attr：

attr(name),如果name是字符串，获得第一个元素的属性的name的值；如果name是一个对象，则对象的属性被作为元素的属性而复制到包装集的所有元素上。

attr(name,value),当name是字符串的时候，就把属性name的值设置为value，当value是一个函数的时候，则对包装集中的每个元素调用此函数，将其name的值设置为函数的返回值。

看一个简单的例子，html代码仍然使用上面的：


代码如下:

<scripttype="text/javascript">
$(function() {
$('body').children().attr('title', function(n) {
return"This is "+ n + "th element";
});
$('img').attr('alt', 'A photo taken by YinZixin');
alert($('h1').attr('title'));
});
</script>

结果为：
 
要删除属性，使用removeAttr(name)方法。
要注意，属性中有一个比较特殊的属性class。class属性十分常用，而他恰好又是javascript的关键字。要存取class属性，需要使用className而不是class。例如：
$('img').attr('className', 'photo');class和其他属性不一样，一个元素可以有多个class，它们用空格隔开，例如 class='big strong',正因为class特殊而又常用，jQuery有专门的方法处理class属性。
addClass(names),添加类；
removeClass(names), 删除类；
toggleClass(names),如果元素有该类，则删除，否则添加。
其中的names是一个字符串，可以是由空格分隔的多个类名组成。addClass和removeClass使用简单不再举例，toggleClass尤为简单实用，下面看一个例子,html代码仍然用上面的:


代码如下:

<style type="text/css">
.red_border
{
border: solid 2px red;
}
</style>
<script type="text/javascript">
function swap() {
$('img').toggleClass('red_border');
}
$(function() {
$('img').mouseover(swap);
$('img').mouseout(swap);
});
</script>

其中最后两句是为img注册事件，鼠标进入和离开的事件是一样的，使用toggleClass它能自动判断当前的类是否存在从而采取不同的操作。
有时候我们不需要为某个元素加载某个class，只需要改变其css属性中的某一项，可以采用css方法，css方法在前面两篇文章中早已用到，不再介绍。
2. 操作DOM节点
要移动一些内容到当前包装集内的元素的内部，可以用append(content)方法，这里的content可以是一个html片段，也可以是元素，或者包装集。看一个例子：


代码如下:

<head>
<title>jQuery Operation</title>
<scripttype="text/javascript"src="jquery-1.3.2.js"></script>
<scripttype="text/javascript">
$(function() {
$('td:odd').append($('span'));
$('div:first').append($('p')).append('<span style="color:red;font-size:small">sub title</span>');
});
</script>
</head>
<body>
<div></div>
<table>
<tr><td>1</td><td></td></tr>
<tr><td>2</td><td></td></tr>
</table>
<span>Hello JQuery</span>
<p>Title</p>
</body>
</html>

最终结果如下：
 
还有一个appendTo(target)，它和append方法的方向反一反，append把参数添加到调用者内部，appendTo把调用者添加到参数的内部。还有几对方法和append,appendTo类似：

prepend,prependTo:append方法当目的元素内部中有其他元素的时候，添加的元素是在原有的元素的最后，prepend则是在最前。

before,insertBefore:插在目的元素之前一个，而不是内部

after,insertAfter:插在目的元素之后。

要删除元素，可以使用remove 或者 empty方法。注意remove会把选中的元素从页面上删除，同时把这些元素作为返回值返回，这些元素不会被垃圾收集，可以对他们进行进一步操作，也可以用append之类的方法重新显示到页面上，而empty方法则彻底删除元素。

3. 操作表单元素的值
操作表单元素的值十分常用，但并不容易。jQuery提供了一个val方法来简化操作。不带参数的val()方法返回当前元素的值。val(values)方法用来将当前元素的值设置为values,如果values是一个数组，则更为有趣一点，它用于匹配select元素中的值，包括在values中的值将会变成选中状态。

赞 (0)

相关推荐

  • jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配

    指定元素中包含 id 属性的, 如: $("span[id]") 复制代码 代码如下: <span id="span1" name="S1">AAA</span><br/> <span id="span2" name="S2">BBB</span><br/> <span name="Sx3">CCC<

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

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

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

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

  • 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 获取/设置/删除DOM元素的属性以a元素为例

    jQuery的属性操作非常简单,下面以一个a元素来说明属性的获取/设置/删除操作 复制代码 代码如下: <body> <a>jquery.com</a> </body> 添加属性 $('a').attr('href', 'http://www.jquery.com') 添加多个属性 $('a').attr({'href':'http://www.jquery.com', 'title':'jquery.com'}) 获取属性 $('a').attr('hre

  • 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 过滤方法filter()选择具有特殊属性的元素

    现在有这样一种需求,需要选出所有有背景图片的元素. 这个问题有点棘手.我们无法使用选择表达式来完成这个问题了. 使用jQuery的DOM过滤方法filter(),可以根据函数中表达的任何条件选择元素. jQuery中的过滤器方法允许传递一个字符串(也就是选择器表达式)作为参数. 或者传递的是一个函数.它的返回值将定义某个元素是否被选中. 传递的函数将对当前选择集中的每个元素运行. 当函数返回假时,对应的函数就从选择集中被删除掉.每当返回值为真的时候,对应的元素 不受影响. 复制代码 代码如下:

  • jQuery获取选中内容及设置元素属性的方法

    获取选中select : $("#id option:selected").val(); 自定义radio: $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio: $("input[name='sex']:checked").val() 设置input不能编辑: $("#cashNum").attr

  • JQuery中根据属性或属性值获得元素(6种情况获取方法)

    根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 复制代码 代码如下: $("p[id]").css("color","red"); 根据属性值获得元素 1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性

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

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

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

随机推荐