jQuery和JavaScript的转换

jQuery与JavaScript交互实例

最新推荐文章于 2024-06-08 00:10:13 发布

原创最新推荐文章于 2024-06-08 00:10:13 发布 · 525 阅读

2 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

5 篇文章

订阅专栏

本文通过一个简单的HTML页面示例，展示了如何在jQuery和JavaScript之间进行转换，包括将DOM对象转换为jQuery对象以及反之。通过按钮点击事件，实现了对文本框输入值的获取和展示，演示了两种不同JavaScript库之间的相互操作。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery和javaScript的转换</title>
    <script type="text/javascript" src="jquery-3.4.1.js"></script>
</head>
<body>
<input type="text" id="text">
<input type="button" value="jQuery" id="btn">
</body>
</html>

<script type="text/javascript">

    //入口函数的简写方式
   $(function () {
       $("#btn").click(function () {
            //dom对象转成jQuery对象
            var element = document.getElementById("text");
            var val1 = $(element).val();
            alert(val1)


           //jQuery 对象转成dom对象可以使用dom对象中的属性和方法，如果不进行转化就不能使用
           var val = $("#text")[0].value;
           //alert(val)
       })
   })

</script>