初识 jQuery

最新推荐文章于 2024-07-12 16:27:40 发布

你桃不掉啦..

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量238

点赞数 9

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

本文链接：https://blog.csdn.net/2301_80849825/article/details/137644143

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一章初识 jQuery

1、jquery的介绍

jquery 就是 js 函数库，里面有大量 js 函数，使用这些函数操作 dom 对象，做事件，动画，aJax 处理

jquery 分别使用 $("#id"), $(".class名"), $("标签名") 封装了上面的 js 方法

1.1使用jquery

在 js 代码中，调用 jquery 中函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>第一个jquery例子</title>
  <script src="../js/jquery-3.6.4.min.js"></script>
  <script type="">
        /*
        $:jquery 中的函数名
        document:是参数
        $(document):是 js 中的 document 对象变成 jquery 可以使用的对象。
                    然后调用 ready()的函数。  这个 ready() 是 jquery中的函数

                    read()的执行时间在页面 dom 对象加载后执行的。 相当于 js 中 onload事件
        ready(函数):表示在页面对象加载后执行 这个函数
        */

            $(document).ready(function(){
            alert("使用了jquery")
            })


        <!-- $(document).ready(myinit())


        function myinit(){
            alert("====相当于onload====")
        }-->


        //jquery 提供了简单的方式，使用ready


        $(function(){
            alert("简单的方式使用ready")
        })
        
    </script>

</head>
<body>

</body>
</html>

1.2对象的分类

dom 对象和 jquery 对象。在一个文件中同时存在两种对象

dom对象：使用 js 的代码获取，创建的对象。html 中的对象都是dom对象

jquery对象：使用jquery 获取的对象

为什么要使用 dom 对象，还有 jquery对象？

目的是要 dom 对象的函数或者属性，以及使用使用 jquery 中提供的函数或属性

要 dom 中的内容就需要使用 dom 对象，要使用 jquery 函数库中的函数需要使用 jquery 对象。

dom 对象和 jquery 对象可以互相转换的

1.2.1 dom对象转为 jquery 对象

语法：$(dom 对象) 得到的是一个 jquery 对象，可以调用 jquery 中提取的函数

<input type="button" value="我是按钮" onclick="btnClick()">


function btnClick(){
            //获取 dom 对象
            var obj = document.getElementById("btn");
            //转为 jquery 类型对象
            var jobj = $(obj); //jobj 就是一个 jquery 对象
            //调用 jquery 中的函数
            alert(jobj.val());
        }

提示：为了区分 dom 和 jquery 对象，可以在 jquery 对象变量名前面加一个 $ 例如：$obj

1.2.2jquery对象转换为dom对象

语法：jquery对象是一个数组，数组成员是dom对象。

 <input type="button" value="计算平方" onclick="btnClick()">
        <br/>
        <input type="text" id="txt1" value="请输入整数"/>

function btnClick(){
            //使用 jquery 语法，获取 jquery 对象
            var obj = $("#txt1"); //obj 是 jquery对象
            //从数组中获取成员，成员是dom对象
            //数组长度
            // alert("array length="+obj.length);

            //var dom = obj[0];
            var dom = obj.get(0);
            //调用dom的属性或者函数
            // alert(dom.value())

            var num = dom.value;
            dom.value = num * num;
        }

你桃不掉啦..

关注

9
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
初识 jQuery

jquery 就是 js 函数库，里面有大量 js 函数，使用这些函数操作 dom 对象，做事件，动画，aJax 处理。要 dom 中的内容就需要使用 dom 对象，要使用 jquery 函数库中的函数需要使用 jquery 对象。语法：$(dom 对象) 得到的是一个 jquery 对象，可以调用 jquery 中提取的函数。目的是要 dom 对象的函数或者属性，以及使用使用 jquery 中提供的函数或属性。dom对象：使用 js 的代码获取，创建的对象。html 中的对象都是dom对象。
复制链接

扫一扫