Jquery第三课--jquery与HTML的配合

a.获得内容 - text()、html() 以及 val()
b.获取属性 - attr()
c.
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
d.
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
e.
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

<!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>Document</title>
    <style>
    .button{
        width: 100px;
        height: 100px;
        background-color: aquamarine
    }
    </style>
</head>
<!-- <body>
    <input type="text" value="123">
    <p>hello</p>
    <span where="1"></span>
    <button>click me!</button> -->
    <button class="button">click me!</button>
</body>
</html>
<script src="./jquery-3.4.1.min.js"></script>
<script>
$(function () { 
    $('button').click(function () { 
        // $(this).addClass('button')
        // $(this).removeClass('button')
        // $(this).toggleClass('button')
        $(this).css('color','blue')
     })
    // $('button').click(function () { 
    //     console.log($('input').val())
    //     console.log($('p').html())
    //     console.log($('span').attr('where'))
    //     $('input').val('456')
    //     $('p').html('word')
    //     $('span').attr('where','2')
    //     $('span').append('<p>你好</p>')
    //     $('p').prepend('<p>abc!</p>')
    //     $('span').after('<button>123</button')
    //     $('span').before('<button>456</button')
    //     $('span').remove()
    //     $('button').empty()
    //  })
 })
</script>

来源：https://blog.csdn.net/weixin_36691991/article/details/100941357

标签

按钮

button样式

jquery