• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.1 属性操作

在jQuery中,对元素的操作包括3个方面:

  • (1)属性操作;
  • (2)内容操作;
  • (3)样式操作;

这一章我们主要讲解jQuery对元素属性操作和内容操作。由于样式操作内容比较多,因此我们独立成一章(即下一章),以便大家有一个清晰的学习思路。

在jQuery中,关于元素属性的操作共有3种:

  • (1)获取元素属性;
  • (2)设置元素属性;
  • (3)删除元素属性;

下面我们一一详细介绍这3种元素属性的操作。

一、获取元素属性

语法:

 
$().attr("属性名")

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="jquery-1.12.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn_src").click(function () {
                alert($("img").attr("src"));
            });
            $("#btn_alt").click(function () {
                alert($("img").attr("alt"));
            });
        })
    </script>
</head>
<body>
    <img src="jquery.png" alt="jquery标志"/><br />
    <input id="btn_src" type="button" value="获取src属性"/>
    <input id="btn_alt" type="button" value="获取alt属性"/>
</body>
</html>

在浏览器预览效果如下:

分析:

这里我们使用attr()方法获取img元素的src和alt这两个属性值。

二、设置元素属性

语法:

 
$().attr("属性","属性值")

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("a").attr("title", "欢迎来到绿叶学习网");
        })
    </script>
</head>
<body>
<div id="main">
    <a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</div>
</body>
</html>

在浏览器预览效果如下:

分析:

这里使用attr()方法为a标签添加了一个title属性。有些人就会问了,搞么子非要在jQuery添加属性,我直接在a标签内部添加不也可以吗?干嘛那么费劲呢?说得一点都没错。像上面这个例子,我们是可以直接在a标签内部添加属性即可。我们在这里只是用一个简单给大家讲解一下方法罢了。在实际开发中,我们很多时候需要使用jQuery来为某些元素添加一些属性,这就需要用到上面的方法了。

三、删除元素属性

语法:

举例:

 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("a").removeAttr("title");
        })
    </script>
</head>
<body>
    <a href="http://www.lvyestudy.com" target="_blank" title="欢迎来到绿叶学习网">绿叶学习网</a>
</body>
</html>

在浏览器预览效果如下:

分析:

在这个例子中,我们使用了removeAttr()方法把a标签的title属性删除。

此外在jQuery中,除了可以使用attr()方法来操作元素的属性之外,还可以使用prop()方法。prop()方法和attr()方法语法相同,其中prop()用于获取和设置元素属性,removeProp()用于删除元素的属性。

但是attr()和prop()这2种方法有着本质的区别,其中attr()方法用于操作元素的固有属性,所谓的“固有属性”指的是元素本身具有的属性如a标签的href、target、title等。而prop()方法用于操作元素的自定义属性,所谓的“自定义属性”指的是用户自己定义的一些属性。

咦?HTML元素还可以自定义属性?说得一点都没错,在HTML中使用自定义属性可以完成帮助我们完成一些复杂的操作。使用自定义属性会比较复杂,对于初学者来说比较困难。因此对于prop()方法,我们再在jQuery进阶再跟大家详细讲解。

:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部