JQuery的使用对传统JavaScirpt使用的影响和变化----JQuery中函数声明和使用的简单介绍

月亮的天空

已于 2023-10-11 15:52:50 修改

阅读量93

点赞数

分类专栏： JQuery 文章标签： javascript jquery 前端

于 2023-10-11 15:40:15 首次发布

本文链接：https://blog.csdn.net/JavaDer/article/details/133769065

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文回顾了JavaScript与jQuery的区别，展示了如何在HTML页面中混合使用它们，包括传统JavaScript方法的调用、jQuery的自动执行、在jQuery中声明方法以及正常调用。重点指出JavaScript方法无法直接调用jQuery内部方法和HTML控件的交互方式。

摘要由CSDN通过智能技术生成

最近代码开发工作少了，以前的一些技巧总是遗忘，现在写一篇文章巩固一下生锈的大脑，也做一下分享。

JQuery的产生简化了Javascript的调用，提高了生产效率，但是JQuery与传统的javascript方法有什么区别和关联呢，传统的javascript方法是否能够和JQuery互动。这是初学或者遗忘后再学经常遇到的困惑，也是一个很简单的小技巧。

一、传统的javascript方法调用

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript和Jquery混用</title> 
</head>
<body>          

输入内容：<input type="text" name="lname" id="lname">
<button onclick="callAlert()">弹出告警框</button>

<script>
    function callAlert(){

        alert("1")

        var lname = document.getElementById("lname").value
        alert(lname)
    }
</script>

</body>
</html>

执行效果如下：

、

二、加入JQuery的自动执行

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript和Jquery混用</title> 
</head>
<body>          

输入内容：<input type="text" name="lname" id="lname" value="1234">
<button onclick="callAlert()" id="myButton">弹出告警框</button>

<script src="js/jquery3.7.1.min.js" charset="utf-8"></script>
<script>
    function callAlert(){
        alert("1")
        var lname = document.getElementById("lname").value
        alert(lname)
    }

    $(document).ready(function(){               
        var llname = $("#lname").val();
        alert(llname);
    });
</script>

</body>
</html>

打开网页，JQuery自动执行，弹出警告框，如下：

点击按钮，如下：

三、在JQuery中声明方法

在JQuery中声明方法，非常简单，把javascript方法直接写在JQuery代码中即可。

上面的代码中，有传统的javaScript代码，也有JQuery代码，两者混在一起，如何在JQuery中声明方法呢，在JQuery中声明的方法和传统的javaScript方法是否效果一样呢？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript和Jquery混用</title> 
</head>
<body>          

输入内容：<input type="text" name="lname" id="lname" value="1234">
<button onclick="callAlert1()" id="myButton">弹出告警框</button>

<script src="js/jquery3.7.1.min.js" charset="utf-8"></script>
<script>
    function callAlert(){
        alert("1")
        var lname = document.getElementById("lname").value
        alert(lname)
    }

    $(document).ready(function(){               
        var llname = $("#lname").val();

        function callAlert1(){
            alert("1")
            var lname = document.getElementById("lname").value
            alert(lname)
        }

        alert(llname);

        callAlert1();
    });
</script>

</body>
</html>

打开网页，JQuery自动执行，弹出警告框，如下：

点击按钮，如下：

浏览器DEBUG工具显示方法callAlert1()未定义，可见，在JQuery中声明的方法和传统的JavaScript方法效果不一样，不能被html控件直接调用。

四、正常的JQuery调用以及方法声明

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript和Jquery混用</title> 
</head>
<body>          

输入内容：<input type="text" name="lname" id="lname" value="1234">
<button  id="myButton">弹出告警框</button>

<script src="js/jquery3.7.1.min.js" charset="utf-8"></script>
<script>
    $(document).ready(function(){               
        var llname = $("#lname").val();

        function callAlert2(){
            alert(llname);
        }

        //日历渲染引擎
        var callAlert3 = function(){
            alert("333")
        }

        $("#myButton").click(()=>{
            callAlert2();
            callAlert3();
        })
    });
</script>

</body>
</html>

点击按钮，效果如下：

        从上面的例子中可以得到以下结论：

        1.JQuery之外的javascript方法暂无好的方法直接调用JQuery内部的方法；

        2.JQuery内部可以声明方法或函数，方式和普通的javascript方法是一样的；

        3.HTML控件也无法直接调用JQuery内部的方法，需要在JQuery内部绑定控件和控件方法，通过绑定的控件方法调用JQuery方法和参数。

        以上是关于JQuery和javascript的简单总结，研究不深，如有不到位的地方，请多指正。