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>

    效果:

     

  • 相关阅读:
    hibernate4 无法保存 不报错
    win10开启mongodb 开启服务
    nodejs学习笔记
    mariadb Too many connections
    新老ECS数据库速度对比
    数据库自动备份并打成tar.gz包
    字符串和数组----string
    I/O复用(select)——回声服务器端/客户端
    回声UDP服务器端/客户端
    回声TCP服务器端/客户端
  • 原文地址:https://www.cnblogs.com/dotnet261010/p/9736107.html
Copyright © 2011-2022 走看看