• jQuery学习


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
            <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                background-color: green;
                margin-top: 20px;
                display: none;
            }
        </style>
    
    </head>
    <body>
    <button>操作</button>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            let obtn=$('button');
            let odiv=$("div");
            console.log(obtn);
            console.log(odiv);
            obtn.click(function () {
                odiv.show(1000);
                odiv.html('赵云')
            })
        })
    </script>
    </body>
    </html>

    导包

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

    文档加载的顺序:从上往下,边解析边执行。

    jQuery$符号

    jQuery 使用 $ 符号原因:书写简洁、相对于其他字符与众不同、容易被记住。

    jQuery占用了我们两个变量:$ 和 jQuery。当我们在代码中打印它们俩的时候:

     

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

        <script>

     

            console.log($);

            console.log(jQuery);

            console.log($===jQuery);

     

     

        </script>

     

    打印结果:

     

    从打印结果可以看出,$ 代表的就是 jQuery。

    那怎么理解jQuery里面的 $ 符号呢?

    $ 实际上表示的是一个函数名 如下:

     

        $(); // 调用上面我们自定义的函数$

     

        $(document).ready(function(){}); // 调用入口函数

     

        $(function(){}); // 调用入口函数

     

        $(“#btnShow”) // 获取id属性为btnShow的元素

     

        $(“div”) // 获取所有的div标签元素

     

    如上方所示,jQuery 里面的 $ 函数,根据传入参数的不同,进行不同的调用,实现不同的功能。返回的是jQuery对象。

    jQuery这个js库,除了$ 之外,还提供了另外一个函数:jQuery。jQuery函数跟 $ 函数的关系:jQuery === $。

     

  • 相关阅读:
    document.ready和window.onload的区别
    js取float型小数点后x位数的方法
    深入理解CSS过渡transition
    HTTP网络协议
    记一次完整的pc前端整站开发
    理解 JavaScript 中的 Function.prototype.bind
    图片懒加载方法
    web开发中兼容性问题(IE8以上含)持续更新~~
    HTTP协议GET和POST请求的区别
    移动端适配之雪碧图(sprite)背景图片定位
  • 原文地址:https://www.cnblogs.com/bigc008/p/9948866.html
Copyright © 2020-2023  润新知