jQuery属性选择器

最新推荐文章于 2024-04-05 22:03:35 发布

恋恋玫瑰花

最新推荐文章于 2024-04-05 22:03:35 发布

阅读量710

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_42923643/article/details/81605777

版权

jQuery 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性选择器</title>
    <style>
        a{
            margin: 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // $,以.pdf结尾
            var a1 =$("a[href$='.pdf']");
            a1.html(function(){
                return "<img src='images/30_30/1.jpg'>" + $(this).attr("href");
            });

            var a2 =$("a[href$='.rar']");
            a2.html(function(){
                return "<img src='images/30_30/2.jpg'>" +$(this).attr("href");
            });

            var a3 =$("a[href$='.jpg']");
            a3.html(function(){
                return "<img src='images/30_30/3.gif'>" +$(this).attr("href");
            });

            var a4 = $("a[href^='http:']");
            a4.html(function(){
                return "<img src='images/30_30/4.jpg'>" +$(this).attr("href");
            });
        });


    </script>
</head>
<body>
    <a href="1.pdf">pdf1</a>
    <a href="2.pdf">pdf2</a>
    <a href="3.rar">rar</a>
    <a href="4.jpg">image1</a>
    <a href="5.jpg">image2</a>
    <a href="6.jpg">image3</a>
    <a href="7.jpg">image4</a>
    <a href="http://www.baidu.com">baidu</a>
    <a href="http://www.sina.com.cn">sina</a>
</body>
</html>

恋恋玫瑰花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery属性选择器

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery属性选择器&lt;/title&gt; &lt;style&gt; a{ margi
复制链接

扫一扫