JQuery基本语法

最新推荐文章于 2024-07-11 20:55:36 发布

程序员小成在线买房

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量77

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_40432598/article/details/126006454

版权

笔记专栏收录该内容

118 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象转换</title>
</head>

<body>
    <div id="div">我是div</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    ///JS方式 通过id属性值获取div
    let jsdiv = document.getElementById("div");
    alert(jsdiv.innerHTML);
    ///alert(jsdiv.html()); js对象无法使用jQuery里面的功能
    //将js对象转换为JQuery对象
    let jq = $(jsdiv);
    alert(jq.html());
    ///jQuery方式
    let jqDiv = $("#div");
    alert(jqDiv.html());
    ///alert(jqDiv.innerHTML);  jQuery对象无法使用js里面功能
    /// 将jQuery对象转换为JS对象
    let js = jqDiv[0];
    alert(js.innerHTML);
</script>

</html>

事件的使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的使用</title>
</head>
<body>
    <input type="button" id="btn" value="点我">
    <br>
    <input type="text" id="input">
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    /// 单击事件
    $("#btn").click(function(){
        alert("点我干嘛"); /// 获得焦点
    });
    /// 获取焦点事件
    // $("#input").focus(function(){
    //     alert("你要输入数据了");
    // });
    
    ///失去焦点
    $("#input").blur(function(){
        alert("你输入完成了");
    });
</script>
</html>

事件的绑定和解绑

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定和解绑</title>
</head>
<body>
    <input type="button" id="btn1" value="点我">
    <input type="button" id="btn2" value="解绑">
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    /// 给btn1按钮绑定单击事件
    $("#btn1").on("click",function(){
        alert("就点你");
    });

    /// 通过btn2解绑btn1单击事件
    $("#btn2").on("click",function(){
        $("#btn1").off("click");
    });
</script>
</html>

事件切换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的切换</title>
    <style>
        #div {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="div">我是div</div>
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    //    /// 方式一 单独定义
    //    $("#div").mouseover(function(){
    //     /// 背景色 红色 鼠标移动
    //     $("#div").css("background","red");
    //     // 可以这样写
    //     $(this).css("background","red");
    //    });

    //    $("#div").mouseout(function(){
    //        //$("#div").css("background","blue");
    //        $(this).css("background","blue");
    //    })

    /// 方式二 链式定义
    $("#div").mouseover(function () {
        $(this).css("background", "red");
    }).mouseout(function () {
        $(this).css("background", "blue");
    });
</script>

</html>

遍历操作

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遍历</title>

</head>

<body>
    <input type="button" id="btn" value="遍历列表项">
    <ul>
        <li>牛B博客</li>
        <li>牛B黑客程序员</li>
        <li>牛B的大神程序员</li>
    </ul>
</body>

<script src="jquery-3.3.1.min.js"></script>
<script>
    ///方式一 传统方式
    /*
    $("#btn").click(function(){
        let lis = $("li");/// 获取数组
        for (let i = 0; i < lis.length; i++) {
            alert(i+":"+lis[i].innerHTML);
            
        }
    });
    */
    /*
    /// 方式二 对象.each()
    $("#btn").click(function(){
        let lis = $("li");/// 获取数组
        lis.each(function(index,ele){
            alert(index+"a:"+ele.innerHTML);
        });
    });*/

    // 方式三
    /*
    $("#btn").click(function(){
        let lis = $("li");/// 获取数组
        $.each(lis,function(index,ele){
            alert(index+"b:"+ele.innerHTML);
        });
    });*/

    /// 方式四
    $("#btn").click(function () {
        let lis = $("li");/// 获取数组
        for (ele of lis) {
            alert(ele.innerHTML);
        }
    });
</script>

</html>