js小结

100 阅读1分钟

目前已简单的学习了一些HTML,css,JavaScript,jQuery知识

前端学习是一个漫长的过程,学习实践并行才能加深对知识的认识和领悟

接下来要学习好vue以及小程序开发,vue的重要程度可想而知,希望自己能不忘初心。2022找到一个不错的工作!

互联网飞速发展,日新月异,需要前端人不停的更新学习自己的知识,才能更上一层楼!

jq中的事件

            $('.div1').mouseenter(function(){

            $(this).css('background','green')

        })

        $('.div1').mouseleave(function(){

            $(this).css('background','yellow')

        })

        /* mouseover和mouseout在进入子元素区域时也会触发 */

        /* mouseenter和mouseleave在进入子元素区域时不会触发 */

        /* hover由mouseover和mouseout组成 */

        $('.div1').hover(function(){

            console.log('hover');

        })

jq中的ajax

$('button').click(function(){

        //通过HHTP请求加载远程数据

        $.ajax({

            url:'http://timemeetyou.com:8889/api/private/v1/login',

            method:'post',

            data:{

                username:'admin',

                password:'123456'

            },

            success:function(res){

                /* success后面的方法里的形参res表示后台返回的数据 */

                console.log(res);

            }

        })

    })

jq的未来事件


        $('#btn1').click(function(){

            $('li:last').after($('<li>我是学生'+i+'</li>'));

            i++;

        })

        /* 使用bind实现不了对未来元素的绑定,是老版本的方法 */

        $('body').on('click','li',function(){

           alert($(this).text())

        })

        $('#btn2').click(function(){

            /* 用off方法实现li的解绑事件 */

            $('body').off('click')

        })
        # 5.http JQ的ajax:

<body>

    <!--

        超文本传输协议(HTTP,HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议

设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法

        一次HTTP操作称为一个事务,其工作过程可分为四步

     -->

     <!--

         OPTIONS    返回服务器针对特定资源所支持的HTTP请求方法

HEAD    向服务器索要与GET请求相一致的响应,只不过响应体将不会被返回

GET 向特定的资源发出请求 一般用户请求数据会被经常使用

POST    向指定资源提交数据进行处理请求 一般用于登录 数据保密 还可以用与文件传输

PUT 向指定资源位置上传其最新内容 需要修改数据的时候和更新数据的时候

DELETE  请求服务器删除Request-URI所标识的资源 删除数据的时候使用  

TRACE   回显服务器收到的请求,主要用于测试或诊断  

CONNECT HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器

HTTP/1.1 例如:http://   HTTP/2 例如:https:// 加密 https://www.baidu.com/

PATCH   实体中包含一个表,表中说明与该URI所表示的原内容的区别

- GET(SELECT):从服务器取出资源(一项或多项)。

- POST(CREATE):在服务器新建一个资源。

- PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)。

- PATCH(UPDATE):在服务器更新资源(客户端提供改变的属性)。

- DELETE(DELETE):从服务器删除资源。

- HEAD:获取资源的元数据。

- OPTIONS:获取信息,关于资源的哪些属性是客户端可以改变的。

-->

<!--

    原生的方式

    创建Ajax对象  var oAjax=new XMLHttpRequest();

连接到服务器 oAjax.open("GET","abc.txt",true);

发送请求send oAjax.send();

接收返回值

oAjax.onreadystatechange=function(){

        if (oAjax.readyState==4 && oAjax.status==200){

                alert("请求成功"+oAjax.responseText);

        }

}

 -->

        <button>登录</button>

        <script src="./jquery-1.12.4.js"></script>

        <script>

            $('button').click(function(){

                $.ajax({

                 url:'http://timemeetyou.com:8889/api/private/v1/login',

                 method:'post',

                 data:{

                   username:'admin',

                   password:'123456'

                 },

                 success:function(res){

                     /* success后面的方法里面的形参表示后台返回的数据 */

                     console.log(res);

                 }

             })

            })

        </script>

</body>