JavaScript-⑨（jQuery）

其他 2018-11-10 20:14:55 阅读次数: 0
版权声明：本文为博主原创文章，转载时请标明出处 https://blog.csdn.net/weixin_41056807/article/details/83755416

正选&反选


jquery是帮助查找节点，属性操作，节点插入，事件绑定。做DOM不好用的功能。过滤节点，做常用slidedown动画。ajax封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
    // $(document).ready(function(){
    //     let $items=$("input[name=item]");
    //     let $all=$("#all");
    //     let $reverse=$("#reverse");
    //     $all.on("click",function(){
    //         $items.prop("checked",true);
    //     })
    //      $reverse.on("click",function(){
    //         $items.each(function(idx,ele){
    //          ele.checked=!ele.checked
    //      })
    //      })
         
    // })
    $(()=>{
        let $items=$("input[name=item]");
        let $all=$("#all"); //全选
        let $reverse=$("#reverse");//反选
        $all.on("click",function(){
            $items.prop("checked",true);
        });
         $reverse.on("click",function(){
            $items.each(function(idx,ele){
             ele.checked=!ele.checked
         });
         });
    })
    </script>
</head>
<body>
      <input type="button" value="反选" id="reverse"><br>
    <input type="checkbox" name="item" id="">
    选项1
    <br>
    <input type="checkbox" name="item" id="">
    选项2
    <br>
    <input type="checkbox" name="item" id="">
    选项3
    <br>
    <input type="checkbox" name="item" id="">
    选项4
    <br>
    <input type="checkbox" name="item" id="">
    选项5
    <br>
    <input type="checkbox" name="item" id="">
    选项6
    <br>
    <input type="checkbox" name="item" id="">
    选项7
    <br>
    <input type="checkbox" name="item" id="">
    选项8
    <br>
    <input type="checkbox" name="item" id="">
    选项9
    <br>
    <input type="checkbox" name="item" id="">
    选项10
    <br>
    <input type="button" value="全选" id="all">
</body>
</body>
</html>

在这里插入图片描述

增加全选的动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
    $(document).ready(function(){
        let $items=$("input[name=item]");
        console.log($items);
        let $all=$("#all");
        let $reverse=$("#reverse");
        $all.on("click",function(){
            $items.prop("checked",true)
            .css("border","1px solid red")
            .hide()
            .show(3000);

        })
         $reverse.on("click",function(){
            $items.each(function(idx,ele){
             ele.checked=!ele.checked
         })
         })
         
    })
    </script>
</head>
<body>
      <input type="button" value="反选" id="reverse"><br>
    <input type="checkbox" name="item" id="">
    选项1
    <br>
    <input type="checkbox" name="item" id="">
    选项2
    <br>
    <input type="checkbox" name="item" id="">
    选项3
    <br>
    <input type="checkbox" name="item" id="">
    选项4
    <br>
    <input type="checkbox" name="item" id="">
    选项5
    <br>
    <input type="checkbox" name="item" id="">
    选项6
    <br>
    <input type="checkbox" name="item" id="">
    选项7
    <br>
    <input type="checkbox" name="item" id="">
    选项8
    <br>
    <input type="checkbox" name="item" id="">
    选项9
    <br>
    <input type="checkbox" name="item" id="">
    选项10
    <br>
    <input type="button" value="全选" id="all">
</body>
</body>
</html>

方格选中的地方会不断从隐藏到出现
在这里插入图片描述

认识选择符（struct_selector）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
    $(()=>{
    //  $("div button").css("color","red")
      $("div> #btn").css("color","red");
      $("div+p").css("color","red");
      $("div~p").css("color","red");
    })
    </script>
</head>
<body>
    <p>红吗？</p>
    <div>
        <p><button>点我1</button></p>
    </div>
    <div><button id="btn">点我2</button></div>
    <div>div</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</body>
</html>

在这里插入图片描述

attribute_selector

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
    $(()=>{
       $("input[name=user]").css("border","2px solid red");//name是user的文本框
       $("input[name^=us]").css("border","2px solid red");//以us开头的
       $("input[name$=er]").css("border","2px solid red");//以er结尾的
      $("input[name*=e]").css("border","2px solid red");//所有包含e的
     $("input[name=user][value=chen]").css("border","2px solid red");
    })
    </script>
</head>
<body>
    <input type="text" name="user" id="" value="chen">
    <input type="text" name="user" id="" value="">
    <input type="text" name="us" id="" value="">
    <input type="text" name="er" id="" value="">
    <input type="text" name="se" id="" value="">
</body>
</html>

index_selector

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
        $(()=>{
        $("p:odd").css("color","red");//奇数,但是列表中数组下标是从0开始
         // $("p:eq(0)").css("color","red");
         // $("p:gt(1)").css("color","red");
        })
    </script>
</head>
<body>
    <div>d1</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <span>sp1</span>
    <div>d2</div>
    <p>p4</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
        $(()=>{
        // $("p:odd").css("color","red");
         $("p:eq(0)").css("color","red");
         // $("p:gt(1)").css("color","red");
        })
    </script>
</head>
<body>
    <div>d1</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <span>sp1</span>
    <div>d2</div>
    <p>p4</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
        $(()=>{
        // $("p:odd").css("color","red");
        //  $("p:eq(0)").css("color","red");
         $("p:gt(1)").css("color","red");//大于1
        })
    </script>
</head>
<body>
    <div>d1</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <span>sp1</span>
    <div>d2</div>
    <p>p4</p>
</body>
</html>

在这里插入图片描述

nth-of-type和nth-child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
        $(()=>{
            // 全部
          //  $("p").css("border","1px solid red");
            // 找p2作为p标签，第一个div中第二个子元素
            // first-of-type是第几个子元素（）从一开始
            // $("p:nth-child(2n)").css("border","1px solid red");//2的整数倍。所有的元素放到一起
            // $("p:only-child").css("border","1px solid red");//唯一的p，唯一子标签
            $("p:nth-of-type(2n)").css("color","red");

        })
    </script>
</head>
<body>
        <!-- div>(p>{p$})*6 -->
        <div>
            <p>p1</p>
            <p>p2</p>
            <p>p3</p>
            <p>p4</p>
            <p>p5</p>     
            <p>p6</p>
        </div>
    <div>
        <p>p21</p>
        <span>sp1</span>
        <p>p22</p>
        <p>p23</p>
        <p>p24</p>
        <p>p25</p>
        <span>sp2</span>
        <p>p26</p>
    </div>
    <div>
        <p>haha</p>
    </div>
    <div>
        <span>hahahahah</span>
        <p>haha</p>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
        $(()=>{
            // 全部
          //  $("p").css("border","1px solid red");
            // 找p2作为p标签，第一个div中第二个子元素
            // first-of-type是第几个子元素（）从一开始
            // $("p:nth-child(2n)").css("border","1px solid red");//2的整数倍。所有的元素放到一起
            $("p:only-child").css("border","1px solid red");//唯一的p，唯一子标签
            // $("p:nth-of-type(2n)").css("color","red");

        })
    </script>
</head>
<body>
        <!-- div>(p>{p$})*6 -->
        <div>
            <p>p1</p>
            <p>p2</p>
            <p>p3</p>
            <p>p4</p>
            <p>p5</p>     
            <p>p6</p>
        </div>
    <div>
        <p>p21</p>
        <span>sp1</span>
        <p>p22</p>
        <p>p23</p>
        <p>p24</p>
        <p>p25</p>
        <span>sp2</span>
        <p>p26</p>
    </div>
    <div>
        <p>haha</p>
    </div>
    <div>
        <span>hahahahah</span>
        <p>haha</p>
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
        $(()=>{
            // 全部
          //  $("p").css("border","1px solid red");
            // 找p2作为p标签，第一个div中第二个子元素
            // first-of-type是第几个子元素（）从一开始
            $("p:nth-child(2n)").css("border","1px solid red");//2的整数倍。所有的元素放到一起
            // $("p:only-child").css("border","1px solid red");//唯一的p，唯一子标签
            // $("p:nth-of-type(2n)").css("color","red");

        })
    </script>
</head>
<body>
        <!-- div>(p>{p$})*6 -->
        <div>
            <p>p1</p>
            <p>p2</p>
            <p>p3</p>
            <p>p4</p>
            <p>p5</p>     
            <p>p6</p>
        </div>
    <div>
        <p>p21</p>
        <span>sp1</span>
        <p>p22</p>
        <p>p23</p>
        <p>p24</p>
        <p>p25</p>
        <span>sp2</span>
        <p>p26</p>
    </div>
    <div>
        <p>haha</p>
    </div>
    <div>
        <span>hahahahah</span>
        <p>haha</p>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

empty

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            // $("p:empty").remove();
            // $("p:has(span)").remove();
            // $("p:parent").remove();
        })
    </script>
</head>
<body>
    <p>p1</p>
    <p id="p1">p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5 <span>1233</span></p>
</body>
</html>

disabled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>

    <script>
        //加载之后不能输入
        $(()=>{
            console.log($("input:enabled"));
            $("input:enabled").prop("disabled",true);
            // $("input:disabled").removeAttr("disabled");//让不可用的可用
        })
    </script>
</head>
<body>
    <input type="text" name="user" id="">
    <!-- //不可以用 -->
    <input type="text" name="age" disabled id="">
</body>
</html>

此时不能使用
在这里插入图片描述
现在让可以输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>

    <script>
        //加载之后不能输入
        $(()=>{
            console.log($("input:enabled"));
            // $("input:enabled").prop("disabled",true);
            $("input:disabled").removeAttr("disabled");//让不可用的可用
        })
    </script>
</head>
<body>
    <input type="text" name="user" id="">
    <!-- //不可以用 -->
    <input type="text" name="age" disabled id="">
</body>
</html>

在这里插入图片描述

全选和反选 修订版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
    // $(document).ready(function(){
    //     let $items=$("input[name=item]");
    //     let $all=$("#all");
    //     let $reverse=$("#reverse");
    //     $all.on("click",function(){
    //         $items.prop("checked",true);
    //     })
    //      $reverse.on("click",function(){
    //         $items.each(function(idx,ele){
    //          ele.checked=!ele.checked
    //      })
    //      })
         
    // })

    $(function(){
        $("#all").click(function(){
            $("input[name=item]").prop("checked",true);
        })
        $("#reverse").click(function(event){
            $("input[name=item]").each(function(idx,ele){
                //ele是DOM对象
                //ele需要转换为jQuery使用
                // let value=$(ele.prop("checked"));
                // $(ele).attr("checked",!value);
                ele.checked=!ele.checked;
            })
        })
    })
    
    </script>
</head>
<body>
    <input type="button" value="反选" id="reverse"><br>
    <input type="checkbox" name="item" id="">
    选项1
    <br>
    <input type="checkbox" name="item" id="">
    选项2
    <br>
    <input type="checkbox" name="item" id="">
    选项3
    <br>
    <input type="checkbox" name="item" id="">
    选项4
    <br>
    <input type="checkbox" name="item" id="">
    选项5
    <br>
    <input type="checkbox" name="item" id="">
    选项6
    <br>
    <input type="checkbox" name="item" id="">
    选项7
    <br>
    <input type="checkbox" name="item" id="">
    选项8
    <br>
    <input type="checkbox" name="item" id="">
    选项9
    <br>
    <input type="checkbox" name="item" id="">
    选项10
    <br>
    <input type="button" value="全选" id="all">

</body>
</html>

在这里插入图片描述

鼠标悬停效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: aquamarine;

        }
        .glad{
            /* //鼠标悬停 */
            background-color: red;
        }
    </style>
    <script>
        $(()=>{
            $("div").mouseover(function(){
                // console.log(this);
                // $(this).addClass("glad");
                $(this).toggleClass("glad");
                $(this).css("boxShadow","5px 5px 5px black");
            }).mouseout(function(){
                // $(this).removeClass("glad");
                $(this).toggleClass("glad");
                $(this).css("boxShadow","");
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

效果：
静态
在这里插入图片描述
鼠标在div上的时候
在这里插入图片描述

筛选（content—selector）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/jquery.js"></script>
    <script>
        $(function(){
            $("#search").keyup(function(event){
                // if(event.keyCode==13){
                //     let selector="p:contains('"
                //            +event.target.value+"')";
              //  $("p").css("backgroundColor","")
                // $(selector).css("backgroundColor","gray")
                // }
                let timeout;
                if(!timeout){
                    timeout=setTimeout(function(){
                        if(event.target.value.trim()!=""){
                        let selector="p:contains('"
                           +event.target.value+"')";
                           $("p").css("backgroundColor","")
                       $(selector).css("backgroundColor","gray")
                    }
                    },1000)
                }else{
                    clearInterval(timeout);
                    timeout=undefined;
                }

                
            })
        })
    </script>
</head>
<body>
    <input type="text" name="search" id="search">
    <p>chengzixiang</p>
    <p>raojingjing</p>
    <p>yangchao</p>
    <p>suishicai</p>
    <p>linghuchong</p>
    <p>xiaofeng</p>
</body>
</html>

在这里插入图片描述

animate动画效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script>
        // $(function(){

        // })
        $(()=>{
            //动画
            //显示隐藏的div
            // $("div:hidden").removeClass("hide");
            // $("div:hidden").show(2000);//缓慢显示
            // $("div:hidden").slideDown(2000);//缓慢
            // $("div:hidden").fadeIn(2000);
            // $("div:hidden").fadeOut(2000);
            // $("div:visible").addClass("hide");
            // $("div:visible").hide(1000);//大小透明度都改变
            // $("div:visible").slideUp(2000);//改高度
            // $("div:visible").fadeOut(2000);//透明度消失

            //指定要达到效果——自定义
            //左边——向右平移
            $("div:visible").animate({
                left:"600px"
            },2000)

        })
    </script>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: rgba(0, 255, 255, 0.534);
            margin: 10px;
            position: absolute;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div class="hide"></div>
    <div></div>
</body>
</html>

效果：向右移动
注意：注释的动画效果也是可以使用的
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_41056807/article/details/83755416
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022