jQuery第3课修改元素属性和内容的代码

1.操作属性上面描述了如何过滤所需的元素。一旦你得到元素，你就必须操作它。一个常见的要求是遍历元素集并对每个元素执行操作。jQuery提供的函数是每个(迭代器)，其中迭代器是一个接受整数作为参数来指示哪个元素的函数。看一个简单的例子。复制的代码如下： html XMLNS=' http://www.w3.org/1999/XHTML'头部title jquery操作/title脚本类型=' text/JavaScript ' src=' http 3360 jquery-1 . 3 . 2 . js '/脚本脚本类型=' text/JavaScript ' $(function(){ $(' img ')。每个(函数(n) { this.alt='这是'第' n张图片'；});});/script/head body h1 image gallery br/2010年3月13日/h1 img src=' http : img/bee . jpg ' alt=' width=' 150 px '/img src=' http : img/bright . jpg ' alt=' width=' 150 px '/img src=' http : img/crowd . jpg ' alt=' width=' 150 px '/img src=' http

在上面的例子中，使用了原生javascript来访问属性，jQuery提供了一种更通用的访问属性的方法，attr: attr:attr(name)。如果名称是字符串，则获取第一个元素的属性名称的值；如果name是一个对象，该对象的属性将作为元素的属性复制到包装集的所有元素中。Attr(name，value)，当name为字符串时，将属性name的值设置为value；当value是一个函数时，为包装集中的每个元素调用这个函数，并将其名称值设置为函数的返回值。看一个简单的例子，html代码仍然使用上面的：复制代码如下： script type=' text/JavaScript ' $(function(){ $(' body ')。儿童()。attr ('title '，function (n) {return '这是第' n '个元素；});$('img ')。attr('alt '，'一张尹子欣拍的照片')；警报($('h1 ')。attr(' title ')；});/脚本的结果是：

若要移除属性，请使用removeAttr(name)方法。请注意，属性中有一个特殊的属性类。Class属性很常见，正好是javascript的关键字。要访问类属性，需要使用类名而不是类。例如：$ ('img ')。attr ('classname '，' photo ')；与其他属性不同，一个元素可以有多个类，这些类由空格分隔，例如class='big strong '。因为类是特殊且常用的，所以jQuery有特殊的方法来处理类属性。添加类(名称)，添加一个类；remove class(name)，删除该类；ToggleClass(name)，如果元素有这个类，删除它，否则添加它。的名称是一个字符串，可以由多个用空格分隔的类名组成。AddClass和removeClass使用起来很简单，但是toggleClass特别简单实用。我们举个例子。html代码仍然用上面的：复制。代码如下：style type=' text/CSS '。red _ border { border 3360 solid 2px red；} /style脚本类型='text/javascript '函数swap() { $('img ')。toggle class(' red _ border ')；} $(function() { $('img '))。鼠标悬停(交换)；$('img ')。mouseout(交换)；});/script的最后两句是为img注册事件，鼠标进入和离开时的事件是一样的。使用toggleClass，可以自动判断当前类是否存在，并采取不同的动作。有时候我们不需要为一个元素加载一个类，只需要改变它的一个css属性，就可以使用css方法，前面两篇文章已经使用过了，不再介绍。2.操作DOM节点要将一些内容移动到当前包装器集中的元素内部，可以使用append(content)方法，其中内容可以是html片段、元素或包装器集。看一个例子：复制的代码如下： head title jquery operation/title script type=' text/JavaScript ' src=' http 3360 jquery-1 . 3 . 2 . js '/script script type=' text/JavaScript ' $(function(){ $(' TD 3360 odd ')。追加。$(“div : first”)。追加($(“p”))。追加(' span style=' color:redfont-size : small ' sub title/span ')；});/script/head body div/div table TRT D1/TDD/TD/tr TRT D2/TDD/TD/tr/table span hello jquery/span ptitle/p/body/html最终结果如下：。

还有一个appendTo(目标)，与append方法的方向相反。append向调用者添加参数，appendo向参数添加调用者。有几对方法类似于append append，appendTo: prepend，prependTo:append方法当目标元素中有其他元素时，添加的元素在原始元素的末尾，而prepend在前面。在目标元素之前插入Before:而不是内部的Before，在目标元素之后插入before :若要移除元素，可以使用移除或空方法。请注意，移除将从页面中删除所选元素，并将它们作为返回值返回。这些元素不会被垃圾收集，因此可以通过追加等方法进一步操作或在页面上重新显示，而空方法将完全删除这些元素。3.操纵表单元素的值操纵表单元素的值很常见，但并不容易。JQuery提供了一个val方法来简化操作。不带参数的val()方法返回当前元素的值。val(values)方法用于将当前元素的值设置为值。如果值是一个数组，那就更有趣了。它用于匹配select元素中的值，包含在values中的值将被选中。