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。当我们在代码中打印它们俩的时候：

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 === $。