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

2019-09-17 22:02:13 阅读：218 来源： 互联网

标签：Jquery jquery span function button 元素 console 第三课 click

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>

标签：Jquery,jquery,span,function,button,元素,console,第三课,click
来源： https://blog.csdn.net/weixin_36691991/article/details/100941357

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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