jQuery（一）

DOM对象与jQuery对象的互转问题

DOM对象转jQuery对象

//此时btn为DOM对象，不能调用jQuery方法
    var btn=document.getElementById("btn");
    //DOM对象转jQuery对象
    $("btn").click=function () {
        console.log("小仙女");
    };

jQuery对象转DOM对象

var $li = $("li");
    //jQuery对象转DOM对象
    //第一种方法（推荐使用）
    $li[0];
    //第二种方法
    $li.get(0)

jQuery网页开关灯

第一种：通过现在网页状态实现

<script src="jquery-1.12.4.js"></script>
<script>
    $("#btn").click(function () {
        //判断有没有css样式
        if ($("body").hasClass("cls")){
            //如果有，就移除样式
            $("body").removeClass("cls");
        }else {
            //如果没有，就添加样式
            $("body").addClass("cls");
            
        }
    });
</script>

第二种：获取按钮value值实现

<script src="jquery-1.12.4.js"></script>
<script>
    //获取按钮id
    $("#btn").click(function () {
        if ($(this).val()=="关灯"){//获取按钮value值
            //下面这两行代码都可以实现改变网页状态
            $('body').css("backgroundColor","black");
            // $("body").addClass("cls");

            $(this).val("开灯");
        }else {
            //下面这两行代码都可以实现改变网页状态
            $('body').css("backgroundColor","");
            // $("body").removeClass("cls");
            $(this).val("关灯");
        }
    });
</script>

jQuery网页加载事件

在DOM中，网页加载事件只能进行一次（因为DOM中的网页加载事件是采用“=”的方式），后面的网页加载事件会覆盖掉前面的网页加载事件。

而在jQuery中，网页加载事件可以进行很多次，不会被覆盖掉

在DOM中的网页加载事件代码

<script>
    window.onload=function (ev) {
        console.log("东方不败");
    };
    window.onload=function (ev) {
        console.log("梦婉是可甜可盐的仙女");
    };
//输出结果为“梦婉是可甜可盐的仙女”
</script>

在jQuery中的网页加载事件：

第一种写法：$(window).load();(页面中所有元素加载完毕后触发)

<script src="jquery-1.12.4.js"></script>
<script>
    $(window).load(function (ev) {
        console.log("东方不败");
    });
    $(window).load(function (ev) {
        console.log("梦婉是可甜可盐的仙女");
    });

</script>

第二种写法：$(document).ready();（页面中基本元素加载后触发，比第一种加载方式块）

<script src="jquery-1.12.4.js"></script>
<script>
    $(document).ready(function (ev) {
        console.log("东方不败");
    });
    $(document).ready(function (ev) {
        console.log("梦婉是可甜可盐的仙女");
    });

</script>

第三种写法：(真正的jQuery写法)

<script src="jquery-1.12.4.js"></script>
<script>
    jQuery(function () {
        console.log("东方不败");
    });
    jQuery(function () {
        console.log("梦婉是可甜可盐的仙女");
    });

</script>

第四种写法:(终极版)

<script src="jquery-1.12.4.js"></script>
//第四种（终极版）
<script>
    $(function () {
        console.log("东方不败");
    });
    $(function () {
        console.log("梦婉是可甜可盐的仙女");
    });
</script>