欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery(一)

程序员文章站 2024-03-18 21:54:40
...

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>