JS之jQuery

jQuery

文章目录

  • jQuery
    • jQuery介绍
    • jQuery入门
    • jQuery的核心函数
    • 如何区分DOM对象和jQuery对象
    • jQuery选择器(重点中的重点
      • 基本选择器
      • 层级选择器
      • 过滤选择器

jQuery介绍

  1. 什么是jQuery:
    jQuery,顾名思义就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。
  2. jQuery核心思想:
    “write less,do more”(写的更少,做的更多),所以它实现了很多浏览器的兼容问题
  3. jQuery的流行程度
    jQuery现在已经成为最流行的JavaScript类库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。
  4. jQuery优点:
    jQuery是免费的、开源的,jQuery的语法设计可以使开发更加敏捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

jQuery入门

使用jQuery给一个按钮绑定单击事件
引入jQuery文件,可以到jQuery官网去下载然后使用<script>标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
    <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script> //引入jQuery文件,现在是3.6.1 version 
    <script type="text/javascript">
        /*
        //JS原生的单击事件
        window.onload = function (){
            var but01 = document.getElementById("btn01");//dom对象
            but01.onclick = function (){
                alert("Hello World!");
            }
        }
         */
        $(function (){//表示页面加载完成之后,相当于onload事件(window.onload = function (){})
            var $but01 = $("#btn01");//表示按id查询标签对象,等价于 var but01 = document.getElementById("btn01");//dom对象
            $but01.click(function (){
                alert("jQuery的单击事件-Hello World!");
            });
        });
    </script>
</head>
<body>
<button id="btn01">SayHello</button>
</body>
</html>

使用jQuery的常见问题:

  1. 使用jQuery一定要引入jQuery库吗?
    是的,必须要引入才能使用
  2. jQuery中的$到底是什么?
    是一个函数—— window.jQuery = window.$ = jQuery;
  3. 怎么为按钮添加点击响应函数的?
    也是分两步:
    使用jQuery查询到标签对象
    使用标签对象.click((){});

jQuery的核心函数

$是jQuery的核心函数,能完成jQuery的很多功能。$()就是调用$这个函数

  1. 传入参数为[函数]时:
    表示页面加载完成之后。相当于window.onload = function(){}
    <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        $(function (){
            alert("页面加载完成之后,自动调用");
        });
    </script>
  1. 传入参数为[HTML字符串]时:
    会自动创建这个HTML标签对象
 <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        $(function (){
            alert("页面加载完成之后,自动调用");
            $("<div><span>span-01</span><br>" +
                "<span>span-02</span></div>").appendTo("body");
        });
    </script>
</head>
<body>

</body>
</html>

按F12调出浏览器开发工具可以看到运行后在body标签里面已经生成了div和span标签
在这里插入图片描述

  1. 传入参数为[选择器字符串]时:
    $("#id属性值"); ——id选择器,根据id查询标签对象
    $(“标签名”);——标签选择器,根据指定的标签名查询标签对象
    $(".class属性值");——类选择器,根据指定的class属性查询标签对象
        $(function (){//表示页面加载完成之后,相当于onload事件(window.onload = function (){})
            var $but01 = $("#btn01");//表示按id查询标签对象,等价于 var but01 = document.getElementById("btn01");//dom对象
            $but01.click(function (){
                alert("jQuery的单击事件-Hello World!");
            });
            alert($("button").length); //2
            var $bye = $(".bye");
            $bye.click(function (){
                alert("jQuery的单击事件-Say Good Bye!");
            });
        });

    </script>
</head>
<body>
<button id="btn01">SayHello</button><br><br>
<button class="bye">SayBye</button>
</body>
  1. 传入参数为[DOM对象]时:
    会把这个dom对象转换成jQuery对象
  var btn02 = document.getElementById("btn02"); // dom对象
            alert(btn02); //[object HTMLButtonElement]
            alert($(btn02)); //[object Object]
        });

如何区分DOM对象和jQuery对象

dom对象

  1. 通过getElementById()查询出来的标签对象是Dom对象
  2. 通过getElementsByName()查询出来的标签对象是Dom对象
  3. 通过getElementsByTagName()查询出来的标签对象是Dom对象
  4. 通过createElement()方法创建出来的对象是Dom对象

    DOM对象alert出来的效果是: alert(btn02); //[object HTMLButtonElement]

jQuery对象

  1. 通过jQuery提供的API创建的对象,是jQuery对象
  2. 通过jQuery包装的DOM对象,是jQuery对象
  3. 通过jQuery提供的API查询到的对象,是jQuery对象

    jQuery对象alert出来的效果是:alert($(btn02)); //[object Object]

jQuery对象的本质:
jQuery对象是Dom对象的数组 + jQuery提供的一系列功能函数

通过浏览器(F12打开)开发者工具我们可以对前端代码进行调试:
Elemects:对标签和JS代码等的可视化浏览
Console:即控制台,可以查看通过console.log方法输出的结果
Sources:查看源代码,可以进行断点调试
在这里插入图片描述
jQuery对象和Dom对象的使用区别
  jQuery对象不能使用DOM对象的属性和方法
  DOM对象也不能使用jQuery对象的属性和方法

            document.getElementById("btn02").innerHTML = "It is not Hello!";
            // $("#btn02").innerHTML = "It is Hello now!"; //无效果
            document.getElementById("btn02").click(function (){
                alert("无效果");
            });
            // 要使用如下的onclick
            // document.getElementById("btn02").onclick = function (){
            //     alert("正确的效果");
            // }

             $("#btn02").click(function (){
                alert("click()是jQuery对象的方法");
             });
        });

    </script>
</head>
<body>
<button id="btn02">Hello</button>
</body>
</html>

Dom对象和jQuery对象互相转换

  1. Dom对象转化为jQuery对象(重点
    1. 先有dom对象
    2. $(DOM对象)
  2. jQuery对象转化为Dom对象(重点
    1. 现有jQuery对象
    2. jQuery对象[下标]取出相应的DOM对象
      在这里插入图片描述

jQuery选择器(重点中的重点

基本选择器

  1. #id选择器:根据id查找标签对象
    在这里插入图片描述
  2. .class选择器:根据class查找标签对象
    在这里插入图片描述
  3. element选择器:根据标签名查找标签对象
    在这里插入图片描述
  4. * 选择器:表示任意的,所有的元素
    在这里插入图片描述
  5. selector1,selector2,…,selectorN组合选择器:合并选择器 selector1,selector2,…,selectorN的结果并返回
    在这里插入图片描述在这里插入图片描述
    结果顺序就是标签在HTML页面中的顺序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Selector</title>
    <style type="text/css">
        div,span,p {
            width :140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.tit{
            width: 1000px;
            height: 70px;
            background-color: #aaa;
            font-size: 20px;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaaaaa;
            font-size: 12px;
        }

        div.hide{
            display: none;
        }
    </style>
    <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        //1. 选择id为one的元素设置”background-color“,#bbffaa”
        $( function (){
            $("#btn1").click(function (){
                //css()方法可以设置和获取样式
                $("#one").css("background-color","#bbffaa");
            });

        //2.选择class为mini的所有元素
        $("#btn2").click(function (){
            $(".mini").css("background-color","#AAFFDAFF");
        });
        //3.选择元素名是div的所有元素
            $("#btn3").click(function (){
                $("div").css("background-color","#aadcff");
            });
        //4. 选择所有的元素
            $("#btn4").click(function (){
                $("*").css("background-color","#fcffaa")
            });
        //5.选择所有的span元素和id为two的元素
            $("#btn5").click(function (){
                $("span,#two").css("background-color","#e7aaff")
            });
        //6.选择点亮标题
            $("#btn0").click(function (){
                $(".tit").css("background-color","red")
            });
        });
    </script>
</head>
<body>
    <div class="tit">
        <h1 align="center">基本选择器</h1>
    </div><br>
    <br>
    <br>
    <br>
    <br>

    &emsp;<input type="button"value="点亮标题" id="btn0">
    <input type="button" value="选择id为one的元素" id="btn1">
    <input type="button" value="选择class为mini的所有元素" id="btn2">
    <input type="button" value="选择元素名是div的所有元素" id="btn3">
    <input type="button" value="选择所有的元素" id="btn4">
    <input type="button" value="选择所有的span元素和id为two的元素" id="btn5">

    <br>
    <div class="one" id="one">
        id为one,class为one的div
        <div class="mini">class为mini</div>
    </div>
    <div class="one" id="two" title="test">
        id为two,class为one,title为test的div
        <div class="mini" title="other">class为mini,title为other</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini"></div>
    </div>
    <div class="one">
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini">class为mini</div>
        <div class="mini" title="test">class为mini,title为test</div>
    </div>
    <div style="..." class="none">style的display为“none”的div</div>
    <div class="hide">class为“hide”的div</div>
    <div>
        包含input的type为“hidden”的div<input type="hidden" size="8">
    </div>
    <span class="one" id="span">^^span元素^^</span>
</body>
</html>

层级选择器

  1. ancestor descendant 后代选择器:在给定的祖先元素下匹配所有的后代元素
    在这里插入图片描述
  2. parent>child 子元素选择器:在给定的父元素下匹配所有的元素
    在这里插入图片描述
  3. prev+next 相邻元素选择器:匹配所有紧接在prev元素后的next元素
    在这里插入图片描述
  4. prev~siblings 之后的兄弟元素选择器:匹配prev元素之后的所有siblings元素
    在这里插入图片描述
//使用基本选择器的HTML代码
 $(document).ready(function (){ //$( function(){});的全写
            //1. 选择body内的所有div元素
            $("#btn1").click( function (){
                $("body div").css("background-color","#fcffaa")
            });

            //2. 在body内选择div子元素
            $("#btn2").click( function (){
                $("body>div").css("background-color","#fcffaa")
            });

            //3. 选择id为one的下一个div元素
            $("#btn3").click( function (){
                $("#one+div").css("background-color","#fcffaa")
            });

            //4. 选择id为two的元素后面的所有div兄弟元素
            $("#btn4").click( function (){
                $("#two~div").css("background-color","#fcffaa")
            });
        });

过滤选择器

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值