jQuery的核心函数---$_获取 $(function() 的元素-CSDN博客

本文链接：https://blog.csdn.net/weixin_44768794/article/details/108852388

文章目录

$是 j Q u e r y 的核心函数，能完成 j Q u e r y 的很多功能，$ ()就是调用$这个函数

1.传入参数为【函数】时：

表示页面加载完成后，相当于window.onload = function(){};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    导入jQuery-->
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript">
        //表示页面加载完成后，相当于window.onload = function(){};
        $(function (){
            alert("页面加载完成之后,自动调用.");
        });
    </script>
</head>
<body>
</body>
</html>

自动调用
在这里插入图片描述

2.传入参数为【HTML字符串】时：

会对我们创建这个HTML标签对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    导入jQuery-->
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript">
        //表示页面加载完成后，相当于window.onload = function(){};
        $(function (){
            $(
                "<div>\n" +
                "    <span>div-span1</span>\n" +
                "    <span>div-span2</span>\n" +
                "</div>").appendTo("body");
        });
    </script>
</head>
<body>
<div>
    <span>div-span1</span>
    <span>div-span2</span>
</div>
</body>
</html>

在这里插入图片描述

3.传入参数为【选择器字符串】时：

$(“#id属性值”)； id选择器，根据id查询标签对象
$(“标签名“)；标签名选择器，根据指定的标签名查询标签对象
$(” . c l a s s 属性值 ”) ；类型选择器，根据指定类型查询标签对象下面展示的是 ‘$ (“标签名”)`。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    导入jQuery-->
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript">
        //表示页面加载完成后，相当于window.onload = function(){};
        $(function (){
            $(
                "<div>\n" +
                "    <span>div-span1</span>\n" +
                "    <span>div-span2</span>\n" +
                "</div>").appendTo("body");
            alert($("button").length);
        });
    </script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
</body>
</html>

表示有两个button按钮
在这里插入图片描述

4.传入参数为【dom对象】时：

会把dom对象转化为jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    导入jQuery-->
    <script type="text/javascript" src="../jQuery.js"></script>
    <script type="text/javascript">
        //表示页面加载完成后，相当于window.onload = function(){};
        $(function (){
            $(
                "<div>\n" +
                "    <span>div-span1</span>\n" +
                "    <span>div-span2</span>\n" +
                "</div>").appendTo("body");
            alert($("button").length);
            var btnObj = document.getElementById("btn02");
            //alert(btnObj);
            alert($(btnObj));
        });
    </script>
</head>
<body>
<button id="btn02">总按钮</button>
<button>按钮1</button>
<button>按钮2</button>
</body>
</html>