Jquery学习（三）—改变HTML内容 css size函数使用

最新推荐文章于 2022-06-01 15:33:11 发布

sungang1120

最新推荐文章于 2022-06-01 15:33:11 发布

阅读量100

点赞数

分类专栏：细细品味-Jquery 文章标签： jquery html css ViewUI

本文链接：https://blog.csdn.net/sungang1120/article/details/84380846

版权

细细品味-Jquery 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

Jquery学习（三）—改变HTML内容 css size函数使用

<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //改变 HTML 内容
        $("#button1").click(function(){
            $("p").html("哈哈  你被我改变了...");
        });
        //添加 HTML 内容
        //append() 函数向所匹配的 HTML 元素内部追加内容
        $("#button2").click(function(){
            $("p").append("我是被追加的内容...");
        });
        //after() 函数在所有匹配的元素之后插入 HTML 内容
        $("#button3").click(function(){
            $("p").after("我也是被追加的内容...但是和他显示方式不一样..");
        });
        //before() 函数在所有匹配的元素之前插入 HTML 内容
        $("#button4").click(function(){
            $("p").before("我也是被追加的内容...但是和他们显示方式也不一样..");
        });
        
        //函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值
        $("#button5").click(function(){
            $("p").css("background-color","yellow");
        });
        //函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值
        $("#button6").click(function(){
            $("p").css({
                "color":"white",
                  "background-color":"#98bf21",
                  "font-family":"Arial",
                  "font-size":"20px",
                  "padding":"5px"
            });
        });
        //函数 css(name) 返回指定的 CSS 属性的值
        $("#cssDiv1").click(function(){
            $("#result").html($(this).css("background-color"));
        });
        //jQuery Size 操作
        $("#button7").click(function(){
            $("#id100").height("200px");
        });
        $("#button8").click(function(){
            $("#id200").width("300px");
        });
    });

</script>

</head>
<body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button" id="button1">Click me html</button>
    <button type="button" id="button2">Click me append</button>
    <button type="button" id="button3">Click me after</button>
    <button type="button" id="button4">Click me before</button>
    <br></br>
    <h2>jQuery CSS 操作</h2>
    <button type="button" id="button5">Click me css1</button>
    <button type="button" id="button6">Click me css2</button>
    <br></br>
    <div id="cssDiv1" style="width: 100px;height: 100px; background: #ff0000"></div>
    <span id="result"></span>
    
    <h2>jQuery Size 操作</h2>
    <div id="id100" style="background:yellow;height:100px;width:100px">HELLO</div>
    <div id="id200" style="background:yellow;height:100px;width:100px">WORLD</div>
    <button type="button" id="button7">Click me Size1</button>
    <button type="button" id="button8">Click me Size2</button>