xml地图|网站地图|网站标签 [设为首页] [加入收藏]

从零开始学习jQuery,使用jQuery操作元素的属性与

来源:http://www.ccidsi.com 作者:呼叫中心培训课程 人气:170 发布时间:2019-05-29
摘要:本类别小说导航   从零开头学习jQuery (四)使用jQuery操作成分的性质与体制   从零发轫学习jQuery (四) 使用jQuery操作元素的属性与体制,从零开端jquery 一.摘要 本篇作品疏解怎样运用jQu

本类别小说导航

 

从零开头学习jQuery (四) 使用jQuery操作成分的性质与体制

 

从零发轫学习jQuery (四) 使用jQuery操作元素的属性与体制,从零开端jquery

一.摘要

本篇作品疏解怎样运用jQuery获取和操作成分的属性和CSS样式. 当中DOM属性和要素属性的区分值得大家学习.

本类别文章导航

 

从零早先学习jQuery (四) 使用jQuery操作成分的质量与体制

 

 

一.摘要

本篇小说讲授怎样行使jQuery获取和操作成分的属性和CSS样式. 当中DOM属性和因素属性的分别值得大家学习.

二.前言

透过前边几章大家早就能够统统调节jQuery包装集了,  无论是通过选择器选择对象, 或许从包装集中删除,过滤元素. 本章将执教怎么着运用jQuery获取和修改成分属性和样式.

 

 

三. 区分DOM属性和要素属性

一个img标签:

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

 

一般性开垦人士习于旧贯将id, src, alt等誉为这一个因素的"属性". 小编将其称作"成分属性". 可是在分析成DOM对象时, 实际浏览器最后会将标签成分解析成"DOM对象", 并且将成分的"成分属性"存款和储蓄为"DOM属性". 两个是有分别的. 
虽说我们设置了成分的src是相对路线:images/image.壹.jpg 
唯独在"DOM属性"中都会转变来相对路线:.

竟然有一点"成分属性"和"DOM属性"的名目都不雷同,举例上边包车型地铁要素属性class, 调换为DOM属性后对应className.

纪事, 在javascript中大家得以一向获得或安装"DOM属性":

    <script type="text/javascript">
        $(function() {
            var img1 = document.getElementById("hibiscus");
            alert(img1.alt);
            img1.alt = "Change the alt element attribute";
            alert(img1.alt);
        })
    </script>

由此假如要设置成分的CSS样式类, 要使用的是"DOM属性"className"而不是"成分属性"class:

img1.className = "classB";

 

二.前言

透过前边几章大家早已可以统统调控jQuery包装集了,  无论是通过选用器选用对象, 只怕从包装聚焦删除,过滤成分. 本章将执教怎样利用jQuery获取和修改成分属性和样式.

 

四. 操作"DOM属性"

在jQuery中尚无包装操作"DOM属性"的函数, 因为使用javascript获取和安装"DOM属性"都很简单. 在jQuery提供了each()函数用于遍历jQuery包装集, 个中的this指针是三个DOM对象, 所以大家得以接纳那或多或少一双两好原生javascript来操作成分的DOM属性:

            $("img").each(function(index) {
                alert("index:"   index   ", id:"   this.id   ", alt:"   this.alt);
                this.alt = "changed";
                alert("index:"   index   ", id:"   this.id   ", alt:"   this.alt);
            });

上面是each函数的认证:

each( callback )  Returns: jQuery包装集

对包裹聚集的每二个要素施行callback方法. 个中callback方法接受多少个参数, 表示这段时间遍历的索引值,从0开始.

3. 区分DOM属性和因素属性

一个img标签:

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

 

常备开拓职员习于旧贯将id, src, alt等誉为那一个成分的"属性". 笔者将其名称为"成分属性". 可是在深入分析成DOM对象时, 实际浏览器最终会将标签成分深入分析成"DOM对象", 并且将成分的"成分属性"存储为"DOM属性". 两个是有分别的. 
固然大家设置了成分的src是相对路线:images/image.1.jpg 
而是在"DOM属性"中都会转换到相对路径:.

居然有个别"元素属性"和"DOM属性"的称呼都不同,比方上边的成分属性class, 调换为DOM属性后对应className.

牢记, 在javascript中我们得以一直拿走或设置"DOM属性":

    <script type="text/javascript">
        $(function() {
            var img1 = document.getElementById("hibiscus");
            alert(img1.alt);
            img1.alt = "Change the alt element attribute";
            alert(img1.alt);
        })
    </script>

故此1旦要安装元素的CSS样式类, 要使用的是"DOM属性"className"而不是"成分属性"class:

img1.className = "classB";

 

 

四. 操作"DOM属性"

在jQuery中尚无包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. 在jQuery提供了each()函数用于遍历jQuery包装集, 个中的this指针是2个DOM对象, 所以大家能够行使那或多或少同盟原生javascript来操作成分的DOM属性:

            $("img").each(function(index) {
                alert("index:"   index   ", id:"   this.id   ", alt:"   this.alt);
                this.alt = "changed";
                alert("index:"   index   ", id:"   this.id   ", alt:"   this.alt);
            });

下边是each函数的证实:

each( callback )  Returns: jQuery包装集

对包裹聚集的每叁个因素实施callback方法. 在那之中callback方法接受三个参数, 表示近日遍历的索引值,从0开头.

5. 操作"元素属性"

作者们能够利用javascript中的getAttribute和setAttribute来操作成分的"成分属性".

在jQuery中给你提供了attr()包装集函数, 能够同一时间操作包装聚焦具备因素的质量:

名称 说明 举例

attr( name )

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。 返回文档中第一个图像的src属性值: 
$("img").attr("src");
attr( properties )

将一个“名/值”形式的对象设置为所有匹配元素的属性。

这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

为所有图像设置src和alt属性: 
$("img").attr({ src: "test.jpg", alt: "Test Image" });
attr( key, value ) 为所有匹配的元素设置一个属性值。 为所有图像设置src属性: 
$("img").attr("src","test.jpg");
attr( key, fn )

为所有匹配的元素设置一个计算的属性值。

不提供值,而是提供一个函数,由这个函数计算的值作为属性值。

把src属性的值设置为title属性的值: 
$("img").attr("title", function() { return this.src });
removeAttr( name ) 从每一个匹配的元素中删除一个属性 将文档中图像的src属性删除: 
$("img").removeAttr("src"); 

 

当使用id采用器时日常重临唯有三个指标的jQuery包装集, 那个时侯常使用attr(name)函数获得它的成分属性:

function testAttr1(event) {
   alert($("#hibiscus").attr("class"));
}

注意attr(name)函数只回去第三个相配成分的一定成分属性值. 而attr(key, name)会安装富有包装聚集的要素属性:

//修改所有img元素的alt属性
$("img").attr("alt", "修改后的alt属性");

而 attr( properties ) 能够二次修改七个要素属性:

$("img").attr({title:"修改后的title", alt: "同时修改alt属性"});

其余即便我们可以使用 removeAttr( name ) 删除成分属性, 可是对应的DOM属性是不会被删去的, 只会潜移默化DOM属性的值.

比方说将一个input成分的readonly成分属性去掉,会产生对应的DOM属性改为false(即input产生可编写制定状态):

$("#inputTest").removeAttr("readonly");

 

 

本文由68399皇家赌场发布于呼叫中心培训课程,转载请注明出处:从零开始学习jQuery,使用jQuery操作元素的属性与

关键词: 68399皇家赌场

上一篇:Java基础总结

下一篇:没有了

最火资讯