Javascript知识【jQuery-基本操作】上篇

举报
爱吃豆的土豆 发表于 2022/09/25 04:30:43 2022/09/25
1k+ 0 0
【摘要】 目录 💂 个人主页: 爱吃豆的土豆🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 🏆人必有所执，方能有所成！ 🐋希望大家多多支持😘一起进步呀！ 1，jQuery-基本操作【阶段重点】 1.1：...

目录

  • 💂 个人主页: 爱吃豆的土豆
  • 🤟 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主
  • 💬 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦

  • 🏆人必有所执，方能有所成！

  • 🐋希望大家多多支持😘一起进步呀！

1，jQuery-基本操作【阶段重点】

1.1：概念引入

1.2：导入使用

1.3：与JS互转

1.4：页面加载完成时

1，jQuery-基本操作【阶段重点】

1.1：概念引入

jQuery是一个JavaScript框架。底层封装了大量JavaScript代码。

它兼容CSS3，还兼容各种浏览器，文档说明很全，应用详细，成熟插件多。

1.2：导入使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        $(function () {
           alert("xxx");
        });
    </script>
</head>
<body>

</body>
</html>

 若导入失败，页面没有弹框，并且控制台展示如下报错：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        function run1() {
            //js
            //alert(document.getElementById("d1").innerHTML);
            //jq
            //alert(jQuery("#d1").html());
            alert($("#d1").html());
        }
    </script>
</head>
<body>
    <div id="d1">我是内容体，呵呵</div>
    <input type="button" value="点我获取div内容体" onclick="run1();"/>
</body>
</html>

基本语法：jQuery（选择器）；$(选择器)；

建议使用$替代jQuery英文；

1.3：与JS互转

JS和JQ对象一般不能进行混用。

JS有JS的属性和方法

JQ有JQ的属性和方法

开发中，为了使用JS方法和属性，我们也会选择将jQuery对象转回JS对象。

格式：js对象=jQuery对象[0]

开发中，我们为了方便开发，会将JS对象转为jQuery对象使用；

格式：jQuery对象=$(js对象)；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        function run1() {
            //js
            var s1 = document.getElementById("d1");
            //转jq
            var s2 = $(s1);
            //转js
            var s3 = s2[0];
            alert(s3.innerHTML);
        }
    </script>
</head>
<body>
    <div id="d1">我是内容体，呵呵</div>
    <input type="button" value="点我获取div内容体" onclick="run1();"/>
</body>
</html>

小结：

在开发中，经常涉及到js和jq混用，因为Js有js的用法，jq有jq的用法，必须涉及到相互转换。

Js----->jq: $(js对象)

Jq---->js: jq对象[0]

注：jQuery对象只能调用jQuery方法和属性

JS对象只能调用JS方法和属性；

1.4：页面加载完成时

JS：只能设置一次，设置多次是覆盖<boby οnlοad="">   window.onload = function(){};

JQ:可以设置多次，设置多次是追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script>
        //你好 再见
        /*$(document).ready(function () {
            alert("你好");
        });
        $(document).ready(function () {
            alert("再见");
        });*/

        $(function () {
            alert("你好");
        });
        $(function () {
            alert("再见");
        });
    </script>
</head>
<body>

</body>
</html>

文章来源: qianxu.blog.csdn.net，作者：爱吃豆的土豆，版权归原作者所有，如需转载，请联系作者。

原文链接：qianxu.blog.csdn.net/article/details/126227735

【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript jQuery
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论（0）

抱歉，系统识别当前为高风险访问，暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称，即可参与社区互动！

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    确认 取消

    目录

    加入云驻计划，成为创作者

    • 华为云周边好礼
    • 免费体验产品
    • 特殊身份标识
    • 线下官方门票
    • 内部专家零距离
    • 与10000+优质创作者共同成长
    立即加入