jQuery核心函数

最新推荐文章于 2021-08-01 14:44:55 发布

Keeling1720

最新推荐文章于 2021-08-01 14:44:55 发布

阅读量100

点赞数

分类专栏： JavaScript JavaWeb

本文链接：https://blog.csdn.net/weixin_44741023/article/details/118226345

版权

JavaWeb 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

JavaScript

32 篇文章 3 订阅

订阅专栏

文章目录

jQuery核心函数

jQuery核心函数

看了前一篇博客的亲，可能会觉得这个$用着好奇怪。
下面，我们就来说说$是个什么东西？他到底有什么用？

$的简介

$是jQuery的核心函数，能完成jQuery的很多功能，${}就是调用$这个函数

$的四个主要用法

1.传入函数

相当于window.onload() = function(){ }
例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(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="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //传入函数
        $(function () {
            alert('页面加载完成！');

            /*传入HTML标签字符串*/
            $("        <li>C++</li>" +
                "        <li>JavaScript</lin" +
                "        <li>Java</li>" +
                "        <li>jQuery</li>").appendTo("ul");
        })
    </script>
</head>
<body>
    <ul>
        <li>Python</li>
    </ul>
</body>
</html>

显示：
在这里插入图片描述

3.传入选择器字符串

简单的选择器有三种：
一、id选择器
二、class选择器
三、标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //传入函数
        $(function () {
            alert('页面加载完成！');

            /*传入HTML标签字符串*/
            $("        <li>C++</li>" +
                "        <li>JavaScript</lin" +
                "        <li>Java</li>" +
                "        <li>jQuery</li>").appendTo("ul");

            /*传入选择器字符串*/
            //查找id为one的对象
            $("#one").click(function () {
                alert("id为one的按钮被点击")
            });
            //查找class为two的对象
            $(".two").click(function () {
                alert("class为two的按钮被点击")
            });
            //查找标签名为button的对象
            $("button").click(function () {
                alert("标签名为button的按钮被点击");
            });

        })
    </script>
</head>
<body>
    <ul>
        <li>Python</li>
    </ul>

    <button id = "one">按钮1</button>
    <button class="two">按钮2</button>
    <button>按钮3</button>
</body>
</html>

显示：
在这里插入图片描述
点击按钮1显示：

点击按钮2显示：

点击按钮3显示：
在这里插入图片描述

4.传入DOM对象

会将其转化为jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入jQuery-->
    <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //传入函数
        $(function () {
            alert('页面加载完成！');

            /*传入HTML标签字符串*/
            $("        <li>C++</li>" +
                "        <li>JavaScript</lin" +
                "        <li>Java</li>" +
                "        <li>jQuery</li>").appendTo("ul");

            /*传入选择器字符串*/
            //查找id为one的对象
            $("#one").click(function () {
                alert("id为one的按钮被点击")
            });
            //查找class为two的对象
            $(".two").click(function () {
                alert("class为two的按钮被点击")
            });
            //查找标签名为button的对象
            $("button").click(function () {
                alert("标签名为button的按钮被点击");
            });

            const btn1 = document.getElementById("one");
            //btn1的类型
            alert(btn1);
            //btn1放到$()中后的类型
            alert($(btn1));
        });
    </script>
</head>
<body>
    <ul>
        <li>Python</li>
    </ul>

    <button id = "one">按钮1</button>
    <button class="two">按钮2</button>
    <button>按钮3</button>
</body>
</html>

显示：
在这里插入图片描述

jQuery对象和DOM对象的互换

DOM对象转化为jQuery对象

只需要把DOM对象放到$()中，假设现在btn是DOM对象，那么就是

$(btn)

jQuery对象转化为DOM对象

jQuery其实就是DOM对象数组加jQuery自带的所有方法。
所以，想要把jQuery转化为DOM只需要取他的数组的一Part就好了。也就是用他的[下标] 获取，比如btns是jQuery对象，那么获取就是

btns[0]
btns[1]
btns[2]
等等

在这里插入图片描述

Keeling1720

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery核心函数

文章目录jQuery核心函数$的简介$的四个主要用法1.传入函数2.传入HTML标签字符串3.传入选择器字符串4.传入DOM对象jQuery核心函数看了前一篇博客的亲，可能会觉得这个$用着好奇怪。下面，我们就来说说$是个什么东西？他到底有什么用？$的简介$是jQuery的核心函数，能完成jQuery的很多功能，${}就是调用$这个函数$的四个主要用法1.传入函数相当于window.onload() = function(){ }例子：<!DOCTYPE html><h
复制链接

扫一扫