jQuery入门

最新推荐文章于 2022-02-13 08:32:35 发布

泡老师大迷弟

最新推荐文章于 2022-02-13 08:32:35 发布

阅读量425

点赞数

分类专栏： JavaWeb 文章标签： jquery

本文链接：https://blog.csdn.net/PengK_aha/article/details/121479461

版权

jQuery DOM对象页面加载选择器对象转换

关键词由CSDN通过智能技术生成

JavaWeb 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        // window.onload=function (){
        //     var btnObj = document.getElementById("btnId");
        //     //alert(btnObj);
        //     btnObj.onclick=function (){
        //         alert("js 原生的单击事件")
        //     }
        // }

    </script>

    <script type="text/javascript" src="jquery-3.6.0.js"></script>
    <script>
        //alert($)
        $(function(){//表示页面加载完成之后，相当于window.onload=function (){}
            var $btnObj = $("#btnId"); //表示按id查询标签对象
            $btnObj.click(function (){ //绑定单击事件
                alert("jQuery的点击事件")
            })
        });
    </script>
</head>
<body>
    <button id="btnId">SayHello</button>
</body>
</html>

1.jQuery的核心函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.6.0.js" ></script>
    <script type="text/javascript">
        // 核心函数的4个作用
        $(function(){
            alert("页面加载完成之后，自动调用");
            $("<div>\n" +
                "        <span>div-span1</span>\n" +
                "        <span>div-span2</span>\n" +
                "    </div>").appendTo("body");
            alert($("button").length);

            var btnObj = document.getElementById("btn01");
            //alert(btnObj);
            alert($(btnObj)) //[object Object] jQuery对象
        })



        //1.传入参数为[函数]时，在文档加载完成后执行这个函数

        //2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象

        //3.传入对象为[选择器字符串]时，根据这个字符串查找元素节点对象
        //$("#id属性值")；id选择器，根据id查询标签对象
        //$("标签名");     标签名选择器，根据指定的标签名查询
        //$(".class属性值")； 类型选择器，可以根据class属性查询

        //4.传入参数为[DOM对象]时,将DOM对象包装成jQuery对象返回
        //会把dom对象转为jQuery对象
    </script>


</head>
<body>
    <button id="btn01">按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>

</body>
</html>

2.jQuery对象和DOM对象区别

DOM对象

1.通过 getElementById() 查询出来的标签对象是Dom对象；

2.通过 getElementsByName() 查询出来的标签对象时Dom对象；

3.通过 getElementByTagName() 查询出来的标签对象时Dom对象；

4.通过 createElement() 方法创建出来的的对象时Dom对象；

dom对象alert() 出来的效果是：[object HTML标签名 Element]

jQuery 对象

1.通过jQuery提供的API创建的对象，是jQuery对象；

2.通过jQuery包装的dom对象，也是jQuery对象；

3.通过jQuery提供的API查询到的对象，是jQuery对象；

3.jQuery对象的本质是什么？

jQuery对象是dom对象的数组 + jQuery提供的一系列功能函数。

4.jQuery对象和Dom对象使用区别

jQuery对象不能使用Dom对象的属性和方法；

Dom对象也不能使用jQuery对象的属性和方法；

5.Dom对象和jQuery对象互转

1.dom对象转化为jQuery对象

1.先有DOM对象；

2. $(dom对象) 就可以转化为jQuery对象

2.jQuery对象转化为dom对象

1.先有jQuery对象；

2.jQuery对象[下标] 取出相应的dom对象；

泡老师大迷弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // window.onload=function (){ // var btnObj = document.getElemen.
复制链接

扫一扫

专栏目录