zoukankan      html  css  js  c++  java
  • 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 === $。

     

  • 相关阅读:
    Android 获取SDCard中某个目录下图片
    Android ListView中 每一项都有不同的布局
    Listview 异步加载图片之优化篇(有图有码有解释)
    Android 实现ListView异步加载图片
    android ListView异步加载图片(双缓存)
    使用 COM 风格的编程接口
    deb包+软件图标+添加到系统菜单+举例安装卸载
    罗将公布手机锤,我感到深深的内疚
    【 D3.js 入门系列 --- 9.6 】 生产的包图
    Junit指定测试运行顺序
  • 原文地址:https://www.cnblogs.com/bigc008/p/9948866.html
Copyright © 2011-2022 走看看