学习笔记——JQuery

一、学习重点

二、学习内容

案例一

<!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>Document</title>
    </head>
    <body>
        你爱好的运动是？
        <input type="checkbox" id="checkAllBox">全选 / 全不选
        <br>
        <br>
        <input type="checkbox" class="item" value="足球">足球
        <input type="checkbox" class="item" value="篮球">篮球
        <input type="checkbox" class="item" value="羽毛球">羽毛球
        <input type="checkbox" class="item" value="乒乓球">乒乓球
        <br>
        <br>
        <input type="button" value="全选" id="checkedAllBtn">
        <input type="button" value="全不选" id="checkedNoBtn">
        <input type="button" value="反选" id="checkedReverseBtn">


        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=>{
                // 给全选按钮绑定事件
                $("#checkedAllBtn").click(()=>{
                    // 选取所有带有checkbox这个属性的值的元素们
                    $(":checkbox").prop("checked",true);
                });
                // 全不选绑定事件
                $("#checkedNoBtn").click(()=>{
                    // 选取所有带有checkbox这个属性的值的元素们
                    $(":checkbox").prop("checked",false);
                });
                // 反选
                $("#checkedReverseBtn").click(()=>{
                    // 获取全部的复选框
                    // 遍历复选框
                    // 
                    // for(let i = 0;i < $(".item").length;i++) {
                    //     $(".item:eq("+i+")").prop("checked",!$(".item:eq("+i+")").prop("checked"));
                    // }
                    // JQuery的遍历操作
                    /*
                        参数1：index---遍历元素的下标
                        参数2：item----当前正在遍历的项，这个item是一个DOM对象
                    */
                    $(".item").each((index,item) => {
                        // 在each遍历的function中，有一个this对象，this就是当前正在遍历的dom对象（JS对象）
                        /* this指向的问题？如果使用ES6箭头函数，
                            this指向不是DOM，指向的是当前函数的调用者。
                        */
                        item.checked = !item.checked;
                    });
                     // 检查是否满选
                    // 获取全部的选项的个数
                    let allCount = $(".item").length;
                    // 在获取选中的个数
                    let checkedCount = $(".item:checked").length;
                        $("#checkAllBox").prop("checked",allCount == checkedCount);
                });

                
                // if(allCount == checkedCount) {
                //     $("#checkAllBox").prop("checked",true);
                // }else {
                //     $("#checkAllBox").prop("checked",false);
                // }
                
                $("#checkAllBox").click(() => {
                    $(".item").prop("checked",$("#checkAllBox").prop("checked"));
                });

                // 获取所有样式为.item的元素
                // 可以直接绑定事件
                $(".item").click(()=> {
                    
                    // 检查是否满选
                    // 获取全部的选项的个数
                    let allCount = $(".item").length;
                    // 在获取选中的个数
                    let checkedCount = $(".item:checked").length;
                        $("#checkAllBox").prop("checked",allCount == checkedCount);
                });
            })
        </script>
    </body>
</html>

案例二：

需求：

每隔1s钟，切换颜色，

当切换到第四种颜色时，再切换回第1个

我们可以给HTML添加我们自定义的属性

a="1"

原则：

div id="div1"

<!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>Document</title>
        <style>
            .container {
                width: 500px;
                height: 150px;
                position: relative;
                margin: auto;
            }
            .item {
                width: 500px;
                height: 500px;
                position: absolute;
            }
            .item:nth-child(1) {
                background-color: yellow;
            }
            .item:nth-child(2) {
                background-color: red;
            }
            .item:nth-child(3) {
                background-color: green;
            }
            .item:nth-child(4) {
                background-color: blue;
            }
            .active {
                z-index: 10;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div data-index="1" class="item active"></div>
            <div data-index="2" class="item"></div>
            <div data-index="3" class="item"></div>
            <div data-index="4" class="item"></div>
        </div>

        <script src="js/jquery-1.9.1.js"></script>
        <script>

            function next(index) {
                index = parseInt(index);

                if(index == $(".item").length) {
                    return 1;
                }

                return index + 1;
            }

            setInterval(() => {
                // 我要先知道现在是谁在上面
                // 我要获取现在在最上面的div
                let active = $(".active");
                // 接住我们获取到的最上面的div的自定义的索引值属性
                let index = active.attr("data-index");
                // 现在最上面的div删除激活样式
                active.removeClass("active");

                $(".item[data-index="+ next(index) +"]").addClass("active");

            },500);
            
        </script>
    </body>
</html>

三、笔记内容

JS库：别人写好的JS文件，我们拿来直接用

开发中，会引入很多的.js文件

JQuery.js------濒临淘汰，经典。10%以下

css库，bootstrap，layui，easyui。

React.js-------30%市场

Angular.js-----10%以下，最难

Vue.js---------50%以上，简单。最主流。

文档就绪函数：当页面的文档部分加载完毕之后，要执行的函数

$(document).ready(function(){
    alert("文档就绪函数");
});
$(function(){
    alert("111");
})

选择器

基本选择器

id选择器---返回值是固定的一个

class选择器---返回值是一堆

标签选择器---返回值是一堆

*号选择器---返回值是所有标签

层级选择器

div p---div里的p，后代

div>p---直接子元素

div+p---相邻

过滤选择器

:first---获取第一个元素

:last---获取最后一个元素

:eq(index)---给定位置的元素

:gt(index)---大于给定位置

:lt(index)---小于给定位置

:not(selector)---除了selector以外的所有选择器

内容选择器

:empty---匹配所有不包含子元素的选择器

:parent---含有子元素的父元素

属性选择器

[name]---包含name属性的元素

input[type=text]---文本框

input[type!=text]---除文本框的其他

            <div id="div1" class="aaa">
            <p></p>
            </div>
            $(()=>{
               let div = $("div");
               console.log(div);
            })

事件

他们分别在什么时候触发？

1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签

window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象

2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次

   <body>

        <div></div>

        <script src="js/jquery-3.0.0.min.js"></script>
        <script>

           $(function(){
                alert("JQuery1");
           })
           window.onload = function() {
                alert("window1");
           }
        //    $(function(){
        //         alert("JQuery2");
        //    })
        //    window.onload = function() {
        //         alert("window2");
        //    }
        </script>
    </body>

click-------------单击事件

blur()-----------失去焦点

mouseover()---鼠标悬停

change()-------改变事件

live()-----------它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的

....

常规的添加事件

addEventListener

$().click()

前提条件：

标签必须原原本本存在于HTML页面上

    <body>
        <button id="btn1">按钮1</button>
        <button id="btn2" onclick="fun()">按钮2</button>
        <div id="btns"></div>
        <script src="js/jquery-3.0.0.min.js"></script>
        <script>

            $(() => {
                $("#btn1").click(() => {
                    $("<button id='cr'>创建</button>").appendTo($("#btns"));
                });
                
            })
            function fun() {
                    $("#cr").click(()=>{
                        alert("cr");
                    });
                };
        </script>
    </body>

        <style>
            div {
                width: 600px;
                height: 600px;
                border: 1px solid;
            }
            p {
                background-color: yellow;
            }
        </style>
    </head>

    <body>

        <div id="container">
            <p id="p123">123</p>
        </div>

        <!-- 
            script标签：只可以做一件事情
            要么是导入js文件，要么是写js代码
         -->
        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(() => {
                /*
                    appendTo()：参数是一个JQuery元素，追加到xxx
                    prepareTo()：在之前追加
                */
                $("<p>546</p>").appendTo($("#container"));
                $("<p>999</p>").prependTo($("#container"));
                $("<p>888</p>").insertAfter($("#container"));
                $("<p>777</p>").insertBefore($("#container"));

                $("#p123").replaceWith($("<p>666</p>"));
                // $("<span>000</span>").replaceAll($("p"));

                // 在内部的后面追加
                $("#container").append($("<p>100</p>"));
                $("#container").prepend($("<p>200</p>"));

                $("#container").after($("<p>5000</p>"));
                $("#container").before($("<p>6000</p>"));

                // 清空标签内的所有内容
                // $("#container").empty();
                $("p:gt(5)").remove();

            })
        </script>
    </body>

        <style>
            div {
                width: 600px;
                height: 600px;
                border: 1px solid;
            }
            p {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <input type="text" id="username">

            <input type="checkbox" value="swimming" id="swimming"
                readonly required>游泳


            <select name="" id="sheng">
                <option value="jl">吉林省</option>
                <option value="ln">=辽宁省</option>
            </select>

            <button id="checkAll">全选</button>
        </div>


        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(() => {
                // $("#div1").text("<p>123</p>");
                $("#username").val("666");
                /*
                    属性操作：
                    html() ===== innerHTML
                    text() ===== innerText
                    val() ====== input.value
                    val()函数：可以给文本框赋值，
                        可以操作单选框，复选框，下拉菜单的选中状态
                */
               $("#checkAll").click(()=> {
                    // $("#swimming").val("swimming");
                    // 相当于setAttribute
                    // getAttribute
                    // alert($("input[type=checkbox]").attr("value","sss"));
                    // alert($("input[type=checkbox]").attr("checked"));
                    alert($("input[type=checkbox]").prop("checked",true));
                    alert($("#sheng").prop("selected"));
               })
            })
        </script>
    </body>

样式添加，删除，添加/删除：

        <style>
            .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
            .f {
                color: red;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <button id="addStyle">添加样式</button>
        <button id="delStyle">删除样式</button>
        <button id="toggleStyle">添加 / 删除样式</button>
        <div id="div1">123123</div>


        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=> {
                $("#addStyle").click(() => {
                    $("#div1").addClass("a f");
                });
                $("#delStyle").click(() => {
                    $("#div1").removeClass("a f");
                });
                $("#toggleStyle").click(() => {
                    $("#div1").toggleClass("a f");
                });
            })
        </script>
    </body>

隐藏、显示、隐藏/显示（透明）

        <style>
            .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>

        <button id="btn1">隐藏</button>
        <button id="btn2">显示</button>
        <button id="btn3">隐藏 / 显示</button>

        <div class="a" id="div1"></div>

        <hr>
        <button id="btn4">隐藏</button>
        <button id="btn5">显示</button>
        <button id="btn6">隐藏 / 显示</button>
        <button id="btn7">透明</button>

        <div class="a" id="div2"></div>

        <hr>
        <button id="btn8">隐藏</button>
        <button id="btn9">显示</button>
        <button id="btn10">隐藏 / 显示</button>

        <div class="a" id="div3"></div>

        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=>{

                $("#btn8").click(() => {
                    $("#div3").slideUp(5000);
                });
                $("#btn9").click(() => {
                    $("#div3").slideDown(5000);
                });
                $("#btn10").click(() => {
                    $("#div3").slideToggle();
                });

                $("#btn4").click(() => {
                    $("#div2").fadeOut(5000);
                });
                $("#btn5").click(() => {
                    $("#div2").fadeIn(5000);
                });
                $("#btn6").click(() => {
                    $("#div2").fadeToggle();
                });
                $("#btn7").click(() => {
                    $("#div2").fadeTo(1000,0.2);
                });


                $("#btn1").click(() => {
                    $("#div1").hide(5000,() => {
                        alert("div已经隐藏了");
                    });
                });
                $("#btn2").click(() => {
                    $("#div1").show(5000);
                });
                $("#btn3").click(() => {
                    $("#div1").toggle();
                });
            });
        </script>
    </body>

posted @ 2022-08-26 22:10 LJMMJL 阅读(27) 评论(0) 收藏举报

ljmskipper

学习笔记——JQuery

一、学习重点

二、学习内容

三、笔记内容

公告