zoukankan      html  css  js  c++  java
  • jQuery(八):属性操作

    一、获取或设置元素的属性值

    attr()获取或设置匹配元素的属性值,语法如下:

    获取元素属性值示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>属性操作</title>
        <style>
          *{
              margin: 0px;
              padding: 0px;
          }
          td{
              width: 100px;
              border: 1px solid #cccccc;
              cursor: pointer;
          }
        </style>
        <!--引入jQuery-->
        <script src="../jquery-3.3.1.js"></script>
        <!--javascript-->
        <script>
           $(function(){
               $("img").click(function(){
                  // 获取属性的值
                  alert($("img").attr("src")) ;              
               });          
           });
        </script>
    </head>
    <body>
        <img src="../qq.jpg" />
    </body>
    </html>

    效果:

    设置单个元素属性值示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>属性操作</title>
        <style>
          *{
              margin: 0px;
              padding: 0px;
          }
          td{
              width: 100px;
              border: 1px solid #cccccc;
              cursor: pointer;
          }
        </style>
        <!--引入jQuery-->
        <script src="../jquery-3.3.1.js"></script>
        <!--javascript-->
        <script>
           $(function(){
               $("img").click(function(){
                  // 获取属性的值
                  //alert($("img").attr("src")) ; 
    
                  // 添加单个属性
                  $("img").attr("alt","QQ斗地主"); 
                  alert($("img").attr("alt")) ;             
               });          
           });
        </script>
    </head>
    <body>
        <img src="../qq.jpg" />
    </body>
    </html>

    效果:

    添加多个属性值示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>属性操作</title>
        <style>
          *{
              margin: 0px;
              padding: 0px;
          }
          td{
              width: 100px;
              border: 1px solid #cccccc;
              cursor: pointer;
          }
        </style>
        <!--引入jQuery-->
        <script src="../jquery-3.3.1.js"></script>
        <!--javascript-->
        <script>
           $(function(){
               $("img").click(function(){
                  // 获取属性的值
                  //alert($("img").attr("src")) ; 
    
                  // 添加单个属性
                  //$("img").attr("alt","QQ斗地主"); 
                  //alert($("img").attr("alt")) ;
    
                  // 添加多个属性
                  $("img").attr({"alt":"QQ斗地主","title":"斗地主"}); 
                  console.log($(this).attr("alt")); 
                  console.log($(this).attr("title"));            
               });          
           });
        </script>
    </head>
    <body>
        <img src="../qq.jpg" />
    </body>
    </html>

    效果:

    二、删除属性值

    removeAttr()匹配的元素中删除一个属性,语法如下:

    示例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>属性操作</title>
        <style>
          *{
              margin: 0px;
              padding: 0px;
          }
          td{
              width: 100px;
              border: 1px solid #cccccc;
              cursor: pointer;
          }
        </style>
        <!--引入jQuery-->
        <script src="../jquery-3.3.1.js"></script>
        <!--javascript-->
        <script>
           $(function(){
               $("img").click(function(){
                  // 获取属性的值
                  //alert($("img").attr("src")) ; 
    
                  // 添加单个属性
                  //$("img").attr("alt","QQ斗地主"); 
                  //alert($("img").attr("alt")) ;
    
                  // 添加多个属性
                  //$("img").attr({"alt":"QQ斗地主","title":"斗地主"}); 
                  //console.log($(this).attr("alt")); 
                  //console.log($(this).attr("title")); 
    
                  // 删除属性
                  $(this).removeAttr("src");           
               });          
           });
        </script>
    </head>
    <body>
        <img src="../qq.jpg" />
    </body>
    </html>

    效果:

     

  • 相关阅读:
    linux shell 脚本显示执行的命令与关闭显示执行的命令
    docker-compose 文件参考
    django 关系字段一对多的筛选
    深度学习-tensorflow学习笔记(2)-MNIST手写字体识别
    opencv-学习笔记(6)图像梯度Sobel以及canny边缘检测
    opencv-学习笔记(5)形态学转变
    opencv-学习笔记(4)-模糊
    opencv-学习笔记(3)
    opencv-学习笔记(2)
    opencv-学习笔记(1)常用函数和方法。
  • 原文地址:https://www.cnblogs.com/dotnet261010/p/9736107.html
Copyright © 2011-2022 走看看