py fullstack 3-43 js jquery练习

 

js onsubmit事件

复制代码
<!DOCTYPE html>
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Title</title>-->
<!--</head>-->


<!--<body>-->

<!--&lt;!&ndash;如果form表单标签里面的action属性为空，则向当前的页面提交数据&ndash;&gt;-->

<!--<form action="" id="form1">-->
    <!--<input type="text" name="username">-->
    <!--<input type="submit" value="提交">-->
<!--</form>-->

    <!--<script>-->
        <!--var ele=document.getElementById("form1");-->
        <!--ele.onsubmit=function () {-->
            <!--alert("提交前先检测数据格式");-->
            <!--return false;-->
        <!--}-->
    <!--</script>-->


<!--</body>-->
<!--</html>-->


<!--要注意的时候，虽然submit属性在input标签，但是form表单才真正向后端发送数据，上面2个提交事件会先执行onsubmit事件-->
<!--应用场景就是前段代码可以先检测用户输入的内容格式是否正确，当已提交的时候是先执行onsubmit事件函数的内容，可以在
这个函数里面写检测格式条件，通过后再执行默认的submit事件向后端发数据，如果想检测失败就不要向后端发送数据，
有2种方式阻止这种行为
1、就在onsubmit函数里面return false即可
2、在ele.onsubmit=function () 中的参数里面加个"event"参数，然后在函数体内调用event.preventDefault()方法也可以阻止-->

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>

<!--如果form表单标签里面的action属性为空，则向当前的页面提交数据-->

<form action="" id="form1">
    <input type="text" name="username">
    <input type="submit" value="提交">
</form>

    <script>
        var ele=document.getElementById("form1");
        ele.onsubmit=function (event) {
            alert("提交前先检测数据格式");
            // return false;
            event.preventDefault()
        }
    </script>


</body>
</html>
复制代码

 

js 事件传播

复制代码
<!DOCTYPE html>
<!--<html lang="en">-->
<!--<head>-->
    <!--<meta charset="UTF-8">-->
    <!--<title>Title</title>-->

    <!--<style>-->
        <!--.outer{-->
            <!--width: 100px;-->
            <!--height: 100px;-->
            <!--background-color: #00FF00;-->
        <!--}-->

        <!--.inner{-->
            <!--width: 50px;-->
            <!--height: 50px;-->
            <!--background-color: red;-->
        <!--}-->
    <!--</style>-->
<!--</head>-->


<!--<body>-->

<!--<div class="outer">-->
    <!--<div class="inner"></div>-->
<!--</div>-->


<!--<script>-->
    <!--var outer_ele=document.getElementsByClassName("outer")[0];-->
    <!--outer_ele.onclick=function () {-->
        <!--alert("i'm outer");-->
    <!--};-->

    <!--var inner_ele=document.getElementsByClassName("inner")[0];-->
    <!--inner_ele.onclick=function () {-->
        <!--alert("i'm inner");-->
    <!--};-->
<!--</script>-->

<!--</body>-->
<!--</html>-->

<!--按上面这种写法的话点击里面的那个盒子也会触发外面这个执行，因为outer标签包含了inner标签，所以也会触发外面的事件发生，
避免这种方式的话在inner的onclick函数传递个evnent参数，在函数里面通过event.stopPropagation()方法来避免传播-->


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            width: 100px;
            height: 100px;
            background-color: #00FF00;
        }

        .inner{
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>


<body>

<div class="outer">
    <div class="inner"></div>
</div>


<script>
    var outer_ele=document.getElementsByClassName("outer")[0];
    outer_ele.onclick=function () {
        alert("i'm outer");
    };

    var inner_ele=document.getElementsByClassName("inner")[0];
    inner_ele.onclick=function (e) {
        alert("i'm inner");
        e.stopPropagation();
    };
</script>

</body>
</html>
复制代码

 

 

js DOM_增删改查

 

 

 

js class属性

 

 

js class属性示例  模态对话框

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .content{
            height: 1800px;
            background-color: white;
        }

        .shade{
            position: fixed;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            background-color: darkgrey;
            opacity: 0.3;
        }


        .model{
            width: 400px;
            height: 400px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
        }

        .hide{
            display: none;
        }
    </style>

</head>


<body>

    <!--原始内容层-->
    <div class="content">
        <button onclick="show()">show</button>
        hello,world  hello,world  hello,world  hello,world  hello,world
    </div>

    <!--灰色遮罩层-->
    <div class="shade hide"></div>

    <!--弹出来的框-->
    <div class="model hide">
        <button onclick="cancel()">cancel</button>
    </div>


    <script>
        function show() {
            var ele_shade=document.getElementsByClassName("shade")[0];
            var ele_mode=document.getElementsByClassName("model")[0];
            ele_shade.classList.remove("hide");
            ele_mode.classList.remove("hide");
        }

        function cancel() {
            var ele_shade=document.getElementsByClassName("shade")[0];
            var ele_mode=document.getElementsByClassName("model")[0];
            ele_shade.classList.add("hide");
            ele_mode.classList.add("hide");
        }
    </script>
</body>
</html>
复制代码

 

js 正反选

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

    <button onclick="selectAll()">全选</button>
    <button onclick="cancel()">取消</button>
    <button onclick="reverse()">反选</button>

    <hr>

    <table border="1px">
        <tr>
            <td><input type="checkbox"></td>
            <td>111</td>
            <td>111</td>
            <td>111</td>
        </tr>

        <tr>
            <td><input type="checkbox"></td>
            <td>222</td>
            <td>222</td>
            <td>222</td>
        </tr>

        <tr>
            <td><input type="checkbox"></td>
            <td>333</td>
            <td>333</td>
            <td>333</td>
        </tr>
    </table>


<script>
    function selectAll() {
        var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++) {
            var input=inputs[i];
            input.checked=true;
        }
    }

    function cancel() {
        var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++) {
            var input=inputs[i];
            input.checked=false;
        }
    }

    function reverse() {
        var inputs=document.getElementsByTagName("input");

        for (var i=0;i<inputs.length;i++) {
            var input=inputs[i];
            input.checked=!input.checked;   // ! 对input.checked值取反，js 取反特性详见 https://www.cnblogs.com/chenjinxi/articles/9317861.html
        }
    }
</script>

</body>

</html>
复制代码

 

js 动态添加 二级联动

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<select name="" id="province">
    <option value="">请选择省份</option>
    <!--<option value="">广东省</option>-->
    <!--<option value="">湖南省</option>-->
    <!--<option value="">河北省</option>-->

</select>


<select name="" id="citys">
    <option value="">请选择城市</option>
</select>


<script>

    data={"广东省":["深圳市", "株洲市", "东莞市"], "湖南省":["长沙市", "岳阳市","常德市"]};
    // console.log(data);
    // console.log(typeof data);
    // console.log(data["湖南省"]);
    // console.log(data.广东省);

    // 获取所有省份信息
    // for (var i in data) {
    //     console.log(i)
    // }

    var pro_ele=document.getElementById("province");
    var citys_ele=document.getElementById("citys");

    for (var i in data) {
        var ele=document.createElement("option");
        ele.innerHTML=i;

        pro_ele.appendChild(ele);
    }

    // 注意，js 对象 {} 里面的key可以不用加双引号

    // a={name: "alex"};
    // b={"name": "alex"};
    //
    // console.log(a.name);
    // console.log(a["name"]);
    // console.log(b["name"]);
    // console.log(b.name);

    // 如何确定第一级标签用户选择了那个选项？

    // 方式一
    // option标签有个属性 selected, 当用户选择了某个标签时，那它的selected属性的值一定是selected=selected或等于true，
    // 因此只要循环一级标签，判断selected=true的标签就可以获取到对应的二级标签

    // 方式二
    // 用this的特性，在province的select标签里面加上事件属性 onchange，如下
    // pro_ele.onchange=function () {
    //     console.log(this);  // 这里输出this表示了select标签
    //     console.log(this.selectedIndex);  // 选择select标签下某个option的时候，这个option的索引值就会获取到
    //     console.log(this.options); // 一个所有option的数组，还显示了当前选择的option索引值
    //     console.log(this.options.length);
    //     console.log(this.options[this.selectedIndex]);
    // }

    pro_ele.onchange=function () {
        // console.log(this.options[this.selectedIndex]);
        var citys=data[this.options[this.selectedIndex].innerHTML];
        console.log(citys);


        citys_ele.options.length=1;

        for (var i=0; i<citys.length; i++) {
            ele2=document.createElement("option");
            ele2.innerHTML=citys[i];

            citys_ele.appendChild(ele2);


            // citys_ele.removeChild("option");
        }

        // console.log(citys_ele.childElementCount);

        // 到目前有个问题，就是每次选择一级option里面的一个内容是，二级option都会累加，因此要在每次点击一级后先清理掉二级的option
        // 方式1
        // citys_ele.options.length=1; // 这里1是为了默认显示option的"请选择城市"，设置为0的话这个就显示了

        // 方式2
        // 在添加city的opthon时先把所有已存在的option从索引 1到最后全部删除掉



        // 注意，下面这种方式循环只是拿到了数组的索引值
        // for (var i in citys) {
        //     ele2=document.createElement("option");
        //     ele2.innerHTML=i;
        //
        //     citys_ele.appendChild(ele2);
        // }

    }

</script>

</body>
</html>
复制代码

 

 

jQuery 

老师地址：http://www.cnblogs.com/yuanchenqi/articles/6070667.html

 

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>

<div>hello</div>

<p id="p1">ppp</p>
<a href="">click</a>
<p id="p2">pppaaaa</p>
<div class="outer">outer
    <div class="inner">inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>

<!--<p>egon</p>-->

<span class="outer2">span</span>
<p>egon</p>


<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>


<script>

    // jquery 是js的一个库，在使用是需要引入jquery库文件
    // 浏览器只识别 html，css, js代码，不会识别jquery
    // jquery 这个对象封装了它所有的语法，功能


    // 两种引入方式 $ 或 jQuery 都可以
    // $("div").css("color", "red");
    // jQuery("div").css("color", "red");

    // jquery的基础语法：$(selector).action()  // 第一步：找到要操作的标签对象  第二部：操作的效果

    // 基本选择器
    // $("*").css("color", "green");
    // $("#p1").css("color", "red");
    // $(".inner").css("color", "red");
    // $(".outer").css("color", "red");
    // console.log($(".outer"));  // jquery 也会把所有的同一个名字的类做成一个数组，只是jquery帮我们取循环了里面的每个元素

    // $(".inner,p,a").css("color", "red");  // 并列批量操作多个标签


    // 层级选择器
    // $(".outer p").css("color","red");
    // $(".outer>p").css("color","red");  // 只是.outer下一级别的 p 标签被应用到
    // $(".outer+p").css("color","red");  // 只是.outer同级别的相邻的 p 标签,而且是向下相邻的
    // $(".outer~p").css("color","red");  // 只是.outer同级别的 p 标签就行，不需要相邻，还是向下的
    // $(".outer div p").css("color","red");

    // 基本筛选器
    // $("li:first").css("color", "red");  // 应用li标签里面的第一个标签对象
    // $("li:last").css("color", "red");  // 应用li标签里面的最后一个标签对象

    $("li:eq(2)").css("color", "red");  // 指定应用li标签里面的第三个标签对象，索引是从0开始的


</script>

</body>
</html>
复制代码

 

js 选择器

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>

<div>hello</div>

<p id="p1" alex="sb">ppp</p>
<p id="p4" alex="sb">ppp</p>
<p id="p3" alex="bb">ppp</p>
<a href="">click</a>
<p id="p2">pppaaaa</p>
<div class="outer">outer
    <div class="inner">inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>

<!--<p>egon</p>-->

<span class="outer2">span</span>
<p>egon</p>


<input type="text">
<input type="checkbox">
<input type="radio">
<input type="submit">

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ul>


<script>

    // jquery 是js的一个库，在使用是需要引入jquery库文件
    // 浏览器只识别 html，css, js代码，不会识别jquery
    // jquery 这个对象封装了它所有的语法，功能


    // 两种引入方式 $ 或 jQuery 都可以
    // $("div").css("color", "red");
    // jQuery("div").css("color", "red");

    // jquery的基础语法：$(selector).action()  // 第一步：找到要操作的标签对象  第二部：操作的效果

    // 基本选择器
    // $("*").css("color", "green");
    // $("#p1").css("color", "red");
    // $(".inner").css("color", "red");
    // $(".outer").css("color", "red");
    // console.log($(".outer"));  // jquery 也会把所有的同一个名字的类做成一个数组，只是jquery帮我们取循环了里面的每个元素

    // $(".inner,p,a").css("color", "red");  // 并列批量操作多个标签


    // 层级选择器
    // $(".outer p").css("color","red");
    // $(".outer>p").css("color","red");  // 只是.outer下一级别的 p 标签被应用到
    // $(".outer+p").css("color","red");  // 只是.outer同级别的相邻的 p 标签,而且是向下相邻的
    // $(".outer~p").css("color","red");  // 只是.outer同级别的 p 标签就行，不需要相邻，还是向下的
    // $(".outer div p").css("color","red");

    // 基本筛选器
    // $("li:first").css("color", "red");  // 应用li标签里面的第一个标签对象
    // $("li:last").css("color", "red");  // 应用li标签里面的最后一个标签对象

    // $("li:eq(2)").css("color", "red");  // 指定应用li标签里面的第三个标签对象，索引是从0开始的
    // $("li:even").css("color", "red");  // 指定应用li标签里面的 奇数 标签对象
    // $("li:odd").css("color", "red");  // 指定应用li标签里面的 偶数 标签对象
    // $("li:gt(2)").css("color", "red");  // 指定应用li标签里面的 大于指定索引 标签对象
    // $("li:lt(3)").css("color", "red");  // 指定应用li标签里面的 小于指定索引 标签对象

    // 属性选择器,根据属性名应用，括号内一定要有引号
    // $('[alex]').css("color", "red");  // 应用所有属性名字为 alex 的标签对象  注意语法
    // $('[alex="sb"]').css("color", "red");  // 应用属性名字为 alex 并且值是 sb 的标签对象  注意语法
    // $('[alex="sb"][id="p4"]').css("color", "red");  // 双层属性选择  应用属性名字为 alex 并且值是 sb 的标签对象  注意两个中括号之间没有空格


    // 表单选择器
    // $("[type='text']").css("height", "200px");  // 按属性选择
    $(":text").css("height", "200px");  // 表单方式选择器，只能是input标签的type属性才能这样选择

</script>

</body>
</html>
复制代码

 

jquery 查找、过滤筛选器

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.3.1.js"></script>
</head>
<body>

<div>hello</div>

<p id="p1" alex="sb">ppp</p>
<p id="p4" alex="sb">ppp</p>
<p id="p3" alex="bb">ppp</p>
<a href="">click</a>
<p id="p2">pppaaaa</p>
<div class="outer">outer
    <div class="inner">inner
        <p>inner p</p>
    </div>
    <p>alex</p>
</div>

<!--<p>egon</p>-->

<span class="outer2">span</span>
<p>egon</p>


<input type="text">
<input type="checkbox">
<input type="radio">
<input type="submit">

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ul>


<script>

    // jquery 是js的一个库，在使用是需要引入jquery库文件
    // 浏览器只识别 html，css, js代码，不会识别jquery
    // jquery 这个对象封装了它所有的语法，功能


    // 两种引入方式 $ 或 jQuery 都可以
    // $("div").css("color", "red");
    // jQuery("div").css("color", "red");

    // jquery的基础语法：$(selector).action()  // 第一步：找到要操作的标签对象  第二部：操作的效果

    // 基本选择器
    // $("*").css("color", "green");
    // $("#p1").css("color", "red");
    // $(".inner").css("color", "red");
    // $(".outer").css("color", "red");
    // console.log($(".outer"));  // jquery 也会把所有的同一个名字的类做成一个数组，只是jquery帮我们取循环了里面的每个元素

    // $(".inner,p,a").css("color", "red");  // 并列批量操作多个标签


    // 层级选择器
    // $(".outer p").css("color","red");
    // $(".outer>p").css("color","red");  // 只是.outer下一级别的 p 标签被应用到
    // $(".outer+p").css("color","red");  // 只是.outer同级别的相邻的 p 标签,而且是向下相邻的
    // $(".outer~p").css("color","red");  // 只是.outer同级别的 p 标签就行，不需要相邻，还是向下的
    // $(".outer div p").css("color","red");

    // 基本筛选器
    // $("li:first").css("color", "red");  // 应用li标签里面的第一个标签对象
    // $("li:last").css("color", "red");  // 应用li标签里面的最后一个标签对象

    // $("li:eq(2)").css("color", "red");  // 指定应用li标签里面的第三个标签对象，索引是从0开始的
    // $("li:even").css("color", "red");  // 指定应用li标签里面的 奇数 标签对象
    // $("li:odd").css("color", "red");  // 指定应用li标签里面的 偶数 标签对象
    // $("li:gt(2)").css("color", "red");  // 指定应用li标签里面的 大于指定索引 标签对象
    // $("li:lt(3)").css("color", "red");  // 指定应用li标签里面的 小于指定索引 标签对象

    // 属性选择器,根据属性名应用，括号内一定要有引号
    // $('[alex]').css("color", "red");  // 应用所有属性名字为 alex 的标签对象  注意语法
    // $('[alex="sb"]').css("color", "red");  // 应用属性名字为 alex 并且值是 sb 的标签对象  注意语法
    // $('[alex="sb"][id="p4"]').css("color", "red");  // 双层属性选择  应用属性名字为 alex 并且值是 sb 的标签对象  注意两个中括号之间没有空格


    // 表单选择器
    // $("[type='text']").css("height", "200px");  // 按属性选择
    $(":text").css("height", "200px");  // 表单方式选择器，只能是input标签的type属性才能这样选择

</script>

</body>
</html>
复制代码

 

jquery 小练习，菜单隐藏于展示

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            height: 1000px;
            width: 100%;
        }

        .menu{
            height: 500px;
            width: 30%;
            background-color: burlywood;
            float: left;
        }

        .content{
            height: 500px;
            width: 70%;
            background-color: antiquewhite;
            float: left;
        }

        .title{
            line-height: 30px;
            background-color: blueviolet;
        }

        .hide{
            display: none;
        }
    </style>
</head>


<body>
    <div class="outer">
        <div class="menu">
            <!--this 表示当前标签-->
            <div class="item">
                <div class="title" onclick="show(this)">菜单1</div>
                <div class="con">
                    <div>111</div>
                    <div>111</div>
                    <div>111</div>
                </div>
            </div>

            <div class="item">
                <div class="title" onclick="show(this)">菜单2</div>
                <div class="con hide">
                    <div>222</div>
                    <div>222</div>
                    <div>222</div>
                </div>
            </div>

            <div class="item">
                <div class="title" onclick="show(this)">菜单3</div>
                <div class="con hide">
                    <div>333</div>
                    <div>333</div>
                    <div>333</div>
                </div>
            </div>
        </div>
        
        
        <div class="content"></div>
    </div>

    <script src="jquery-3.3.1.js"></script>
    <script>
        function show(self) {  // self 就是用户点击的那个标签对象，类似形参
            $(self).next().removeClass("hide");
            $(self).parent().siblings().children(".con").addClass("hide");  // 在添加class属性的时候，如果本来就有就不会添加，没有就会添加
        }
    </script>
</body>
</html>
复制代码

 

posted @   某某7  阅读(111)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
SQL AI 助手