JSDAY10----学的好杂这几天（node.js,jq,ajax）-CSDN博客

本文链接：https://blog.csdn.net/wafer_biscuit/article/details/114714970

这几天真的天麻，当时候怎么就进了一个机器学习组的项目呢？佛了
不过有压力就有动力，这几天的进步也是很快的，主要是在新知识的学习和了解上。虽然今天下午拉了跨，沉迷了游戏，，就当是放松吧。封校了也出不去，周末把落下的时间给补上，不说了，上代码，笔记在代码里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery/jp.js"></script>
    <title>Document</title>
</head>
<style>

</style>
<body>
    <button id="btn1">btn1</button>
    <div id="pan1">
        pan1
    </div>
    <ul class="a1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        $(document).ready(function(){   //同onload，等待加载完以后再加载js
        console.log('aaa');
        });
        $(function(){       //简洁的写法
            console.log('bbb');
            $('#pan1').hide(1000).show(1000);  //ID选择器，hide在2000ms以后，可以链式写方法
            //(1000ms)内消失，然后在与1000ms内显示
            $('#pan1').slideUp(1000).slideDown(1000-800).fadeOut(1000);//可以运算
            $('#btn1').toggle(1000).fadeToggle(1000);//切换状态,(前加名字指定效果)
            $('#btn1').css({
                color:'red',
                fontWeight:'bold'
            });      //修改css样式,不可用-，被识别为减法

            $('#btn1').html('change it by jq');//改变html==innerHTML

            $('#btn1').on('click',function(){
                $('#pan1').toggle(2000);        //click事件
            });
            var oh = $('#btn1').attr('id');//get到元素属性!
            alert(oh);
            console.log($('button'));
            var a1lis=$('.a1 li');
            console.log(a1lis);
            $(a1lis).on('click',function(){
                $(this).next().remove();    //hide()只是隐藏
            });
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery/jp.js"></script>
    <title>Document</title>
</head>

<body>
    <button id='a1'>123</button>
    <input type="text" class="in1" value="">
    <input type="text" class="in2">
    <ul id="orders"></ul>
    <script>
        $(function () {
            var $a1 = $('#a1');
            var $in1 = $('#in1');
            var $in2 = $('#in2');
            // $.ajax({
            //     type:'POST'
            // });
            ($a1).on('click', function () {
                var order = {
                    name: $in1.val(),
                    drink: $in2.val()
                };

                $.ajax({
                    type:'POST',
                    url:'api/orders',
                    data:order,
                    success:function(neworder){
                        $orders.append('<li>name:'+neworder.name+' drink'+neworder.name+'</li>');
                    },
                    error:function(){
                        alert('qqq');
                    }
                })
            });
        })
    </script>
</body>

</html>