jquery简单使用入门

<!DOCTYPE html>

<html>

<head>

    <title>jquery</title>

    <meta charset="utf-8">

    <!-- 引入jquery库和bootstrap的css库 -->

    <script src="static/jquery-3.3.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">

<div class="container">

    <div id="alertbox" class="alert alert-success" role="alert">这是警告框</div>

</div>

</head>

<body>

<!-- ①按钮和表单元素 -->

<button id="btn1" class="btn btn-info">按钮</button>

<form id="form1" action="http://www.baidu.com/s">

    <input type="text" id="search1" name="wd">

    <input type="submit" name="提交">

</form>

<!-- ②通过按钮提交内容到某段内容id=content中并累加 -->

<div class="alert alert-success" id="content"></div>

<input type="text" id="input-text" name="">

<button class="btn btn-default" id='submit-btn'>发送</button>

<script type="text/javascript">

    /*

    注意：js代码必须在获取的元素以后加载，否则无法正常获取元素

    jquery的语法

    $(选择元素).操作方法().操作方法2()

    选择元素和我们的css语法一致

    操作方法：

        .show 显示

        .hide 隐藏  可以传入一个毫秒值 产生动画

        .html() 修改元素标签内的内容

            .html() 获取标签内部的值

            .html(xxx) 把标签内部的值 设置为xxx

        .on 绑定事件(时间类型，触发函数)

        .val 获取或者设置输入框的值

            .val() 获取输入框的值

            .val(xxx) 把输入框的值 设置为xxx

    */

    // ①jquery实现隐藏3秒，和展示动画效果1秒展示

    /*$('#alertbox').hide(3000).show(1000);

    // 赋值html

    $('#alertbox').html('heihei');

    // 赋值输入框

    $('#alertbox').html('username: <input type="text" value="username" />');*/

    //触发点击事件

    /*$('#btn1').on('click',function(){

        $('#alertbox').html('username: <input type="text" value="username" />').hide(2000);

        // alert('jack')

    })*/

    //通过val赋值

    /*$('#btn1').on('click',function(){

        $('#search1').val('51reboot');

    })

    $('#form1').on('submit',function(){

        if ($('#search1').val() == "51reboot"){

            alert('go');

            //return false是终止submit事件

            return false;

        }

    })*/

    //②通过按钮提交内容到某段内容中并累加

    $('#submit-btn').on('click', function(){

        var oriText = $('#input-text').val()

        var oriContent = $('#content').html()

        $('#content').html(oriContent + '<br/>' + oriText)

        //清除输入框的内容

        $('#input-text').val('')

    })

</script>

</body>

</html>
秒客网

jquery简单使用入门

相关文章
