zoukankan      html  css  js  c++  java
  • jQuery-修改元素的内容,属性,样式

    1.操作内容

    • 获取:
      • 双标签:html()
      • input:val()
    • 设置:
      • 双标签:html('新内容')
      • input:val('新内容')

    2.操作属性

    * 获取:attr('属性名')
    * 设置:attr('属性名','新的值')
    

    3.样式操作

    * 获取:css('样式名')
    * 设置:css('样式名','新的值')   css({"样式名1":"新的值","样式名2":"新的值"})
    

    4.额外封装的

    • css操作类操作:
      • addClass():添加类名
      • removeClass():删除类名
      • toggleClass():切换类名
    • 尺寸操作:
      • height():高度
      • width():宽度
      • scrollTop():滚动高度
      • scrollLeft():滚动距左边距离

    5.代码如下

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>操作内容,属性,样式</title>
        <style>
            #box {}
            
            .content {}
        </style>
    </head>
    
    <body>
        <div>div的内容</div>
        <input type="text" value="input的标签" />
        <script src=" https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
        <script>
            //获取内容
            console.log($("div:eq(0)").html())
            console.log($("input:eq(0)").html())
                //设置内容
            $('div:eq(0)').html('新的值')
            $('input:eq(0)').html('新的input值')
    
            //设置属性
            $("div:eq(0)").attr('id', 'box').attr('class', 'content')
    
            //获取属性
            console.log($("div:eq(0)").attr('id'))
    
            //获取样式
            console.log($("div:eq(0)").css('fontsize'))
                //设置样式
            $("div:eq(0)").css('color', 'red').css('fontsize', '30px')
            $("div:eq(0)").css({
                'border': '1px solid #000',
                'background': 'skyblue',
                'margin': '10px auto',
                'height': '400px',
                'width': 300,
                'padding': "20px"
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    spin lock自旋锁 双链表操作(多线程安全)(Ring0)
    Interlocked单向链式栈
    自旋锁(Spin Lock)
    可等待定时器(获取系统时间)
    APC注入(Ring3)
    IOCP IO完成端口
    异步设备IO OVERLAPPED结构(设备内核对象 事件内核对象 可提醒IO)
    读写锁 SRWLOCK
    shell查看进程
    linux dmesg命令
  • 原文地址:https://www.cnblogs.com/dongxuelove/p/12933460.html
Copyright © 2011-2022 走看看