首页 > 编程学习 > Jquery对象和JS对象区别与转换和JQuery事件绑定入口函数样式控制

Jquery对象和JS对象区别与转换

  • JQuery对象在操作时更加方便。
  • JQuery对象和js对象的方法是不通用的
  • 两者相互转换
    • JQuery--->js:jquery对象[索引] 或者 jquery对象.get(索引)
    • js--->JQuery:$(js对象)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.6.0.min.js"></script>

</head>
<body>
    <div id="div1">div1.....</div>
    <div id="div2">div2.....</div>

    <script>
        // //1.通过js方式来获取名称叫div的所有html元素对象
        // var divs = document.getElementsByTagName("div");
        // // alert(divs);//可以将其当作数组来使用
        // //对divs中的所有div标签 让其标签体的内容变为 "aaa"
        // for (let i = 0; i < divs.length; i++) {
        //     // divs[i].innerHTML = "aaa";
        //     $(divs[i]).html("aaa");
        // }
        // alert(div1.innerHTML)
        // alert(div2.innerHTML)


        //2.通过JQuery方式来获取名称叫div的所有html元素对象
        var $divs = $("div");
        /*  alert($divs);//也可以当作数组来使用
          //对divs中的所有div标签 让其标签体的内容变为 "bbb"  使用JQuery的方式
          $divs.html("bbb");
  */

        $divs[0].innerHTML = "ddd";
        $divs[1].innerHTML = "fff";

    </script>
</body>
</html>

选择器:筛选具有相似特征的元素(标签)

  • 基本语法学习:
    • 事件绑定:
    • 入口函数:
    • 样式控制:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/jquery-3.6.0.min.js"></script>
</head>
    <script>
        //事件绑定
        //给b1按钮添加单机事件
        //获取b1按钮
        /*window.onload = function () {
            $("#b1").click(function () {
                alert("abc1");
            });
        };*/

        //JQuery入口函数(dom文档加载完成后执行入口函数)
        // $(function () {
        //     //获取b1按钮
        //     $("#b1").click(function () {
        //         alert("abc1");
        //     });
        // });

        /**
         * window.onload和$(function () {})区别
         * window.onload只可以定义一次,如果定义多次后边的会覆盖掉前面的
         * $(function () {})可以定义多次
         */



    </script>

<body>
    <div id="div1">div1.....</div>
    <div id="div2">div2.....</div>
    <input type="button" value="点我" id="b1">


    <script>
        $(function () {
            $("#div1").css("backgroundColor","blink");
            $("#div2").css("background-color","read");

        });
    </script>
</body>
</html>
Copyright © 2010-2022 mfbz.cn 版权所有 |关于我们| 联系方式|豫ICP备15888888号