jQuery学习 （页面加载 和 dom与jquery对象的相互转换）

 

1：页面加载的几种写法  $(function(){}),  jQuery(function(){}),  $(document).ready(function(){}), $().ready(function(){})　　

 $(document).ready(function () {
            console.log("ready 所有的内容加载完触发")
        });

        $().ready(function () {
            console.log("22222 所有的内容加载完触发")
        })


        jQuery(function () {
            console.log("3333 所有的内容加载完触发")
        });

        $(function () {
            console.log("匿名 所有的内容加载完触发")

        })　　　

2.Dom对象 与 jQuery对象的相互转换

           //此时的obj就是Dom对象
            var obj = document.getElementById("d1");

            //转换为JQuery对象    格式：$(需要转换的对象）
            var $obj = $(obj);


            //Jquery对象转Dom对象    格式: jQuery对象.get(0) 或者 JQuery对象.[0]

            var obj =$obj[0];  //方式1
            var obj = $obj.get(0); //方式2

 

3.小案例：网页的开关灯....

 

<script>
        $(function () {
            $("#bt").click(function () {
                if($(this).val() == '开灯'){
                    $('body').css("backgroundColor","black");
                    $(this).val("关灯");
                }else{
                    $('body').css("backgroundColor","");
                    $(this).val("开灯");
                }
            });
        })


    </script>
</head>
<body>
    <input type="button" value="开灯" id="bt"/>
</body>

 

posted @ 2020-04-21 09:19  gaoshengjun  阅读(176)  评论(0)  编辑  收藏  举报