【前端基础】4、jQuery

浮生146

于 2024-08-07 21:59:47 发布

阅读量315

点赞数 2

分类专栏： JavaWeb学习文章标签：前端 jquery

本文链接：https://blog.csdn.net/qq_56040271/article/details/141002224

版权

JavaWeb学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

4. jQuery

4.1 jQuery 的各种选择器

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
</head>  
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>桔子</li>
        <li><span>菠萝</span></li>
        <li>西瓜</li>
        <li>梨子</li>
        <li>哈密瓜</li>
        <li>葡萄</li>
    </ul>

    <form action="a.jsp">
        姓名：<input type="text" id="username" class="t" name="username" /> <br />
        密码：<input type="password" name="password" id="password" class="t" />
        <br />
        简介：<input type="text" name="intro" /> <br />
        爱好：<input type="checkbox" name="habby" value="ball" checked />打球
        <input type="checkbox" name="habby" value="swim" />游泳
        <input type="checkbox" name="habby" value="game" />游戏 <br />
        <input type="button" value="查看" />
    </form>
</body>

$(function () {
    // 1. 各种选择器使用
    func01();
});
function func01() {
    // 第一部分：基本选择器
    // 1.1 id选择器
    //$("#username").css("background-color","pink")                 // 一次可以设置一个样式
    $("#username").css({ "background-color": "pink", color: "blue" }); // 一次可以设置多个样式
    // 1.2 类别选择器
    $(".t").css({ "text-decoration": "underline" });
    // 1.3 直接后代选择器
    $("li>span").css("color", "orange");

    // 第二部分：表单元素（属性）选择器
    // 1.4 表单的属性选择器
    // 1.4.1 选择单个的表单元素
    $('input[name="username"]').css("font-size", "25px");
    // 1.4.2 选择表单元素的某个属性中包含有指定字符
    $("input[name*=a]").css("padding-left", "15px");
    // 1.4.3 选择元素中name属性以i开头
    $("input[name^=i]").css({ background: "lightyellow" });
    // 1.4.4 选择元素中name属性以o结束
    $("input[name$=o]").css({ color: "red" });

    // 第三部分：根据序号选择器
    // 3.1 选择第一个元素
    // $("li:first").css("color","green")
    // 也可以（通用性更强） (序号从0开始)
    $("li:eq(0)").css("color", "green");
    $("li:eq(1)").css("color", "yellow");
    // 3.2 选择最后一个
    $("li:last").css("color", "purple");
    // 3.3 选择奇数个
    $("li:even").css("background", "lightyellow");
    // 3.4 选择偶数个
    $("li:odd").css("background", "lightblue");
    // 3.5 选择大于指定索引号的元素(序号从0开始)
    $("li:gt(2)").css("color", "red"); // gt: greate than: 大于
    // 3.6 选择小于指定索引号的元素(序号从0开始)
    $("li:lt(3)").css("color", "blue");
    // 3.7 选择指定序号的元素(序号从1开始)
    $("li:nth-child(3)").css({ "font-weight": "bold", color: "orange" });

    // 第四部分：处理表单选择项问题
    $("input[name=habby]:eq(2)").prop("checked", true);

    // 案例：得到默认的兴趣爱好？
    let habby = $(":checked"); // 选择页面中默认被选择的项的值
    let arr = [];
    for (const k in habby) {
        if (!isNaN(k)) {
            // 处理方式一【转换为jquery对象】：$(habby[k]): 将dom对象habby[k]转换为jquery对象
            // arr.push($(habby[k]).val())
            // 处理方式二【直接使用dom对象】：
            arr.push(habby[k].value);
        }
    }

    // 重要知识点：jquery对象与dom对象之间的互相转换？
    // jquery对象：$("#username")
    // dom对象： document.querySelector("#username")
    // 1. 将dom对象转换为jquery对象,语法为：$(dom对象)
    $(document.querySelector("#username")).css("color","purple")
    // 2. 将jquery对象转换为dom对象,语法为：jquery对象[0]或jquery对象.get(0)
    $("#username")[0].style.color = "blue";
    console.log("你的爱好：", arr);
}

4.2 jQuery 的操作页面元素

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
</head>
<body>
    <form action="a.jsp">
        姓名：<input
                  type="text"
                  id="username"
                  class="t"
                  name="username"
                  value="zhangsan"
                  />
        <br />
        密码：<input type="password" name="password" id="password" class="t" />
        <br />
        简介：<input type="text" name="intro" /> <br />
        爱好：
        <input type="checkbox" name="habby" value="ball" checked />打球
        <input type="checkbox" name="habby" value="swim" />游泳
        <input type="checkbox" name="habby" value="game" />游戏 <br />
        <input type="button" value="添加类" onclick="func01()" />
        <input type="button" value="移除类" onclick="func02()" />
        <input type="button" value="添加/移除类" onclick="func03()" />
        <input type="button" value="添加属性" onclick="func04()" />
        <input type="button" value="删除属性" onclick="func05()" />
    </form>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>桔子</li>
        <li><span>菠萝</span></li>
        <li>西瓜</li>
        <li>梨子</li>
        <li>哈密瓜</li>
        <li>葡萄</li>
    </ul>
</body>

.t {
    background-color: pink;
}

$(function () {
    // func01();
    test01();
});
function test01() {
    let first = $("li:eq(0)").html(); // 查看值
    $("li:eq(0)").html("<h1>栗子</h1>"); // 相当于innerHTML，可以解析其中内容的html语法
    // $("li:eq(0)").text("<h1>栗子</h1>"); // 相当于innerText, 里面的内容原样显示，不解析html
    console.log("first:", first);
    let username = $("#username").val();
    console.log("修改前:", username);
    $("#username").val("李四");
    username = $("#username").val();
    console.log("修改后:", username);
}
//1.  添加类
function func01() {
    $("#username").addClass("t");
}
//2. 移除类
function func02() {
    $("#username").removeClass("t");
}
//3. 添加/移除类
function func03() {
    $("#username").toggleClass("t");
}
// 4. 添加属性
function func04() {
    $("input[name=habby]").eq(1).prop("aa", "123");
    console.log($("input[name=habby]").eq(1).prop("aa"));
}
// 5. 删除属性
function func05() {
    $("input[name=habby]").eq(1).removeProp("aa"); // 只能删除自定义属性，不能删除自带的属性，如：checked
    console.log($("input[name=habby]").eq(1).prop("aa"));
}

4.3 jQuery 的事件处理

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
</head>
<body>
    <form action="a.jsp">
        姓名：<input
                  type="text"
                  id="username"
                  class="t"
                  name="username"
                  value="zhangsan"
                  />
        <br />
        密码：<input type="password" name="password" id="password" class="t" />
        <br />
        简介：<input type="text" name="intro" /> <br />
        爱好：
        <input type="checkbox" name="habby" value="ball" checked />打球
        <input type="checkbox" name="habby" value="swim" />游泳
        <input type="checkbox" name="habby" value="game" />游戏 <br />
        <input type="button" value="on绑定事件" id="btn1" />
        <input type="button" value="bind绑定事件" id="btn2" />
        <input type="button" value="one绑定事件" id="btn3" />
        <input type="button" value="直接使用事件名" id="btn4" />
    </form>
</body>

$(function () {
    // 1. 使用on绑定事件
    $("#btn1").on("click", function () {
        console.log("[on绑定事件]：hello,btn1");
    });
    // 2. 使用bind来绑定事件
    $("#btn2").bind("click", function () {
        console.log("[bind绑定事件]：hello,btn2");
    });
    // 3. 使用one绑定事件，只执行一次
    $("#btn3").one("click", function () {
        console.log("[one绑定事件]：hello,btn3");
    });
    // 4. 可以使用事件名直接处理事件 （经常使用）
    $("#btn4").click(function () {
        console.log("[直接使用事件名处理]：hello,btn4");
    });
});

4.4 jQuery 动画

#d1 {
    width: 200px;
    height: 200px;
    background-color: red;
}
#d2 {
    height: 100px;
    width: 100px;
    display: none;
    background-color: blue;
}
#d3 {
    height: 100px;
    width: 100px;
    display: none;
    background-color: orange;
}
#d4 {
    width: 10px;
    height: 10px;
    background-color: lightblue;
}

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
    <input type="button" value="显示动画" id="btn1" />
    <input type="button" value="隐藏动画" id="btn2" />
    <input type="button" value="向下滑动动画" id="btn3" />
    <input type="button" value="向上滑动动画" id="btn4" />
    <input type="button" value="上下滑动动画" id="btn5" />
    <br />
    <input type="button" value="渐进动画" id="btn6" />
    <input type="button" value="渐出动画" id="btn7" />
    <input type="button" value="渐进渐出动画" id="btn8" />
    <input type="button" value="渐进到指定不透明度动画" id="btn9" />
    <br />
    <input type="button" value="自定义动画" id="btn10" />
</body>

$(function () {
    // 1. 显示动画
    $("#btn1").click(function () {
        $("#d1").show();
    });
    // 2. 隐藏动画
    $("#btn2").click(function () {
        $("#d1").hide();
    });
    //3. 向下滑动动画
    $("#btn3").click(function () {
        $("#d2").slideDown();
    });
    // 4. 向上滑动动画
    $("#btn4").click(function () {
        $("#d2").slideUp();
    });
    // 5. 上下滑动动画
    $("#btn5").click(function () {
        $("#d2").slideToggle();
    });
    //6. 渐进动画
    $("#btn6").click(function () {
        $("#d3").fadeIn(3000);
    });
    //7. 渐出动画
    $("#btn7").click(function () {
        $("#d3").fadeOut(3000);
    });
    //8. 渐进渐出动画
    $("#btn8").click(function () {
        $("#d3").fadeToggle(3000);
    });
    //9. 渐进指定不透明动画
    $("#btn9").click(function () {
        $("#d3").fadeTo(3000, 0.5);
    });
    //10. 自定义动画
    $("#btn10").click(function () {
        $("#d4").animate({
            width: "200px",
            height: "200px",
        });
    });
});

4.5 Ajax

students.json

[
    {
        "sid": "1001",
        "sname": "张三",
        "sex": "男",
        "age": "20",
        "addr": "上海",
        "cid": "1"
    },
    {
        "sid": "1002",
        "sname": "李四",
        "sex": "男",
        "age": "22",
        "addr": "杭州",
        "cid": "2"
    },
    {
        "sid": "1003",
        "sname": "赵六",
        "sex": "男",
        "age": "23",
        "addr": "西安",
        "cid": "1"
    }
]

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
</head>
<body>
    <table id="tab">
        <tr>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>住址</td>
            <td>班级编号</td>
        </tr>
        <tbody id="tb"></tbody>
    </table>
</body>

table{
    border-collapse: collapse;
    width: 400px;
}
td{
    border:1px solid gray;
    text-align: center;
}

$(function () {
    //1. 窗体加载时，加载外部数据
    $.get("students.json",function(data){
        // 1.1 将得到的数据赋值给表格
        let info = ""
        $(data).each((k,v) => {
            info += "<tr>"
            info += "<td>" + v.sid + "</td>"
            info += "<td>" + v.sname + "</td>"
            info += "<td>" + v.sex + "</td>"
            info += "<td>" + v.age + "</td>"
            info += "<td>" + v.addr + "</td>"
            info += "<td>" + v.cid + "</td>"
            info += "</tr>"
        })
        $("#tb").html(info)

    },"json")
})

浮生146

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端基础】4、jQuery

4. jQuery4.1 jQuery 的各种选择器<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> </head> <body> <ul> <li>苹果</li> <li>香蕉</li>
复制链接

扫一扫