jQuery的代码总结

最新推荐文章于 2024-05-08 02:39:14 发布

金色的果实

最新推荐文章于 2024-05-08 02:39:14 发布

阅读量549

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/l10711097061/article/details/129728726

版权

jQuery的代码总结

1

<!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>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
</head>
<body>

    <p>古诗词第1行</p>
    <p>古诗词第2行</p>
    <p>古诗词第3行</p>
    <p>古诗词第4行</p>

    <button id="btn">隐藏按钮</button>
    <button id="btn2">显示按钮</button>

    <button id="btn3">显示隐藏按钮</button>
    <script>



        $(function(){
            // js代码放到这个位置
            $("#btn").click(function(){
                $("p").hide();
            });
           
            $("#btn2").click(function(){
                $("p").show();
            });

            $("#btn3").click(function(){
                $("p").toggle();
            });
        });
        // 比onload加载时间早 bom加载时执行
        // $();这个函数表示页面加载完成的时候执行括号内的代码
        // $(function(){
        //     // js代码放到这个位置
        //     alert("页面加载完成");
        // });

        // document.onload() 页面图片加载后执行
    </script>






    <!-- <div>div的内容</div> -->
    <!-- <div id="div1">div1的内容</div> -->
    <!-- 页面操作 -->
    <!-- $("#div") -->
    <!-- $("#div1").html("aaaa") -->
</body>
</html>

2鼠标点击事件

<!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>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
</head>
<body>

    <p>古诗词第1行</p>
    <p>古诗词第2行</p>
    <p>古诗词第3行</p>
    <p id="p4">古诗词第4行</p>

    <button id="btn">隐藏按钮</button>
    <button id="btn2">显示按钮</button>

    <button id="btn3">显示隐藏按钮</button>
    <script>



        $(function(){
            // js代码放到这个位置
            $("#btn").click(function(){
                $("p").hide();
            });
           
            $("#btn2").click(function(){
                $("p").show();
            });

            $("#btn3").click(function(){
                $("p").toggle();
            });

            $("#p4").toggle();
        });
        // 比onload加载时间早 bom加载时执行
        // $();这个函数表示页面加载完成的时候执行括号内的代码
        // $(function(){
        //     // js代码放到这个位置
        //     alert("页面加载完成");
        // });

        // document.onload() 页面图片加载后执行
    </script>






    <!-- <div>div的内容</div> -->
    <!-- <div id="div1">div1的内容</div> -->
    <!-- 页面操作 -->
    <!-- $("#div") -->
    <!-- $("#div1").html("aaaa") -->
</body>
</html>

3获取焦点和失去焦点

<!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>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
</head>
<body>

    <input id="input1" type="text">

    <script>



        $(function(){
        //    1 文本框获取焦点的时候改变背景颜色
            $("#input1").focus(function(){
                $("#input1").css("background-color","pink");
                $("#input1").css("width","200px");
                $("#input1").css("height","100px");
            });
              // 2 失去焦点 去除背景颜色
              $("#input1").blur(function(){
                $("#input1").css("background-color","white");
                $("#input1").css("width","");
                $("#input1").css("height","");
            });



            // 鼠标悬停事件
            $("#input1").hover(function(){
                alert("鼠标悬停事件");
            });
        });
       
    </script>






    <!-- <div>div的内容</div> -->
    <!-- <div id="div1">div1的内容</div> -->
    <!-- 页面操作 -->
    <!-- $("#div") -->
    <!-- $("#div1").html("aaaa") -->
</body>
</html>

4淡入淡出的效果

<!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>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
</head>
<body>
    <p>古诗词第1行</p>
    <p>古诗词第2行</p>
    <p>古诗词第3行</p>
    <p>古诗词第4行</p>

    <input id="fadenInBtn" type="button" value="淡入">
    <input id="fadenOutBtn" type="button" value="淡出">
    <input id="fadenInOutBtn" type="button" value="淡入淡出">
    <input id="fadento" type="button" value="淡出20">
    <script>
         $(function(){
            $("#fadenInBtn").click(function(){
                $("p").fadeIn(5000);
            });
            $("#fadenOutBtn").click(function(){
                $("p").fadeOut(5000);
            });
            $("#fadenInOutBtn").click(function(){
                $("p").fadeToggle(3000);
            });
            $("#fadento").click(function(){
                $("p").fadeTo(3000,0.5);
            });
         });
    </script>
</body>
</html>

5滑动效果

<!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>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
</head>
<body>
    <p>古诗词第1行</p>
    <p>古诗词第2行</p>
    <p>古诗词第3行</p>
    <p>古诗词第4行</p>
    <p>古诗词第5行</p>

    <input id="slidedownBtn" type="button" value="下划">
    <input id="slideupBtn" type="button" value="上滑">
    <input id="slidetoggleBtn" type="button" value="开关">
    <script>
        $(function(){
           $("#slidedownBtn").click(function(){
               $("p").slideDown();
           });
           $("#slideupBtn").click(function(){
               $("p").slideUp();
           });
           $("#slidetoggleBtn").click(function(){
               $("p").slideToggle(3000);
           });
          
        });
   </script>
</body>
</html>

6动画效果

<!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>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>

    <style>
        div{
            width: 100px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <button id="btn">执行动画</button>
    <script>
        $(function() {
            $("#btn").click(function(){
               $("#div1").animate({
                left: '100px'
               });
           });
        })
    </script>
</body>
</html>

7操作DOM-获取元素的内容和属性

<!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>操作DOM-获取元素的内容和属性</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
</head>

<body>
    <div id="div1" >
        <font color="red">DIV的文本内容</font>
    </div>
    <input id="input1" type="text" >

    <a href="http://www.baidu.com">超链接</a><br />

    <button id="btn">获取TEXT内容</button>
    <button id="btn2">设置内容</button>
    <button id="btn3">获取和设置属性</button>

    <script>
        $(function () {
            // DOM元素加载完成在执行
            $("#btn").click(function () {
                alert("text():"+$("#div1").text());
                alert("html():"+$("#div1").html());
                alert("获取输入框的value():"+$("#input1").val());
            });

            // 设置内容
            $("#btn2").click(function () {
                // $("#div1").text("新内容");
                // $("#div1").html("<font size=\"50px\">新的HTML内容</font>");
                $("#input1").val("张三");
            });

            // 获取和设置属性
            $("#btn3").click(function () {
                // 获取元素属性的方法
                // alert($("a").attr("href"));
                $("a").attr("href","http://www.163.com");
            });

        });
    </script>

</body>

</html>

8操作DOM-获取元素的内容和属性

<!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>操作DOM-获取元素的内容和属性</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
</head>
<body>
    <div id="div1" >
        <font color="red">DIV的文本内容</font>
    </div>

    <button id="btn">获取TEXT内容,可以获取到原先的内容</button>

    <script>
        $(function () {
            // DOM元素加载完成在执行
            $("#btn").click(function () {
                // 第一个下表 二是文本内容
                $("#div1").text(function(idx,old){
                    console.log("原先的文本内容"+ old);
                    // 不 return 的不会追加
                    return old+"12345678";
                });

                
            });
            

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

9DOM操作-添加元素

<!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>DOM操作-添加元素</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
</head>
<body>
    <button id="btn1">到页面初始化内容</button><br/>

    <button id="btn2">图片后面添加文字</button><br/>

    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">

    <script>
        $(function(){
            // 到页面初始化内容
            $("#btn1").click(function(){
                var txt1 = "<p>文本1</p>";
                var txt2 = $("<p></p>").text("文本2");
                var txt3 = document.createElement("p");
                txt3.innerHTML = "文本3";

                // $("body").append(txt1,txt2,txt3);
                $("body").prepend(txt1,txt2,txt3);
            });

            // 图片后面添加文字
            $("#btn2").click(function(){
                var txt1 = "<b>文本1</b>";
                var txt2 = "<i>文本2</i>";
                $("img").before(txt1,txt2);
                // $("img").after(txt1,txt2);
            });
        });
    </script>
</body>
</html>

10DOM操作-删除元素

<!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>DOM操作-删除元素</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #div2 {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>

    <div id="div1">外部DIV
        <div id="div2">内部DIV</div>
    </div>

    <button id="btn1">删除元素</button><br/>


    
    <script>
        $(function(){
            // 到页面初始化内容
            $("#btn1").click(function(){
                // $("#div1").empty();
                // 删除id是div2的所有div
                $("div").remove("#div2");
            });
        });
    </script>
</body>
</html>

11DOM操作-CSS类

<!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>DOM操作-CSS类</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
    <style>
        .important {
            font-weight: bold;
            font-size: xx-large;
        }

        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <p>新的段落</p>
    <div>DIV的内容</div>
    <button id="btn1">添加CSS样式</button><br />
    <button id="btn2">删除CSS样式</button><br />

    <button id="btn3">添加或删除</button><br />

    <button id="btn4">获取指定元素的css样式</button><br />
    <script>
        $(function () {
            // addClass removeClass toggleClass 参数是样式的名称，不包含.点
            // 如果同时操作多个样式的话 中间空格隔开
            $("#btn1").click(function () {
                $("h1,h2,p").addClass("blue");
                $("div").addClass("important");
                // $("div").addClass("important blue");
            });
            
            $("#btn2").click(function () {
                $("h1,h2,p").removeClass("blue");
            });
            
            $("#btn3").click(function () {
                $("h1,h2,p").toggleClass("blue");
            });

            $("#btn4").click(function () {
                // 使用css方法可以获取指定的属性
                alert($("div").css("font-size"));
                alert($("div").css("font-family"));
                $("div").css("font-size","32px");
            });

            
        });
    </script>
</body>

</html>

12DOM操作-尺寸

<!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>DOM操作-尺寸</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
    <style type="text/css">
        #d1 {
            width: 200px;
            height: 200px;
            border: solid 10px #f00;
            padding-left: 100px;
            padding-top: 100px;
            margin-left: 100px;
            margin-top: 100px;
        }

        #d2 {
            width: 100px;
            height: 100px;
            background-color: rgb(44, 31, 31);
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d2"></div>
    </div>
    <div id="res"></div>
</body>

</html>

13遍历

<!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>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
    <style type="text/css">
        #d1 {
            width: 300px;
            height: 300px;
            border: solid 10px #f00;
        }

        #d21 {
            width: 300px;
            height: 100px;
            background-color: #ff0;
        }

        #d22 {
            width: 300px;
            height: 100px;
            background-color: #00f;
        }

        #d23 {
            width: 300px;
            height: 100px;
            background-color: #0f0;
        }

        #d3 {
            width: 100px;
            height: 100px;
            background-color: #999;
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div id="d1">
        <div id="d21">
            <div id="d3"></div>
        </div>
        <div id="d22"></div>
        <div id="d23"></div>
    </div>

    <script>
        // $(function(){
        //     var my = $("#d22");
        //     alert(my.get(0).tagName);
        //     alert(my.get(0).getAttribute("id"));
        //     alert(("父级元素是"+ my.parent().get(0).tagName+ ",id="+ my.parent().get(0).getAttribute("id")));
        //     alert(("前一个元素是"+ my.prev().get(0).tagName+ ",id="+ my.prev().get(0).getAttribute("id")));
        //     alert(("前面所有元素是"+ my.prevAll().get(0).tagName+ ",id="+ my.prevAll().get(0).getAttribute("id")));
        //     alert(("上级元素到h2之间的元素是"+ my.prevUntil("h2").get(0).tagName+ ",id="+ my.prevUntil("h2").get(0).getAttribute("id")));
        // })

        $(function(){
            var my = $("#d1");
            my.first();
        })
    </script>
</body>

</html>

14Ajax获取福利图片

<!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>Ajax获取福利图片</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
</head>
<body>
    <script>
        // 使用 sjsc 发送请求到网络服务器获取美女图片
        $(function(){
            var url = "";
            // get方式发送请求 第一个参数url地址 第二个参数是回调方法
            $.get(url,function(res){
                //获取图片数组
                //console.log(res.data);
                var imgs = res.data;
                for (const img of imgs) {
                    // 获取每个图片的地址 
                    var imgUrl = img.imageUrl;
                    // 创建图片元素
                    var imgs = $("<img></img>");
                    imgs.attr("src",imgUrl);
                    imgs.css({
                        "width":'100px',
                        "height":'100px',
                        "boder":'nlue dotted 1px',
                        "margin":'10px'
                    });
                    // 追加到body上
                    $("body").append(imgs);
                }
            });
        });

        // scrollHeight 网页的高度 innerHeight浏览器视口的高度 
        //pageXOffset 垂直方向滚动的距离
        if (document.body.scrollHeight <= window.innerHeight + window.pageXOffset){
            // 滚动条到页面底部了
        }
    </script>
</body>
</html>

15Ajax获取福利图片触底加载

<!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>Ajax获取福利图片 触底加载</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
    
</head>
<body>
    <script>
        // 使用 sjsc 发送请求到网络服务器获取美女图片
        $(function(){
            loadImg();
        });


        $(document).on("scroll",function(){
             // scrollHeight 网页的高度 innerHeight浏览器视口的高度 
        //pageXOffset 垂直方向滚动的距离
            if (document.body.scrollHeight <= window.innerHeight + window.pageXOffset){
            // 滚动条到页面底部了
            loadImg();
        }
        })
       
        // 抽取加载图片的方法
        function loadImg(){
            var url = "https://api.likepoems.com/img/mc";
            // get方式发送请求 第一个参数url地址 第二个参数是回调方法
            $.get(url,function(res){
                //获取图片数组
                //console.log(res.data);
                var imgs = res.data;
                for (const img of imgs) {
                    // 获取每个图片的地址 
                    var imgUrl = img.imageUrl;
                    // 创建图片元素
                    var imgs = $("<img></img>");
                    imgs.attr("src",imgUrl);
                    imgs.css({
                        "width":'100px',
                        "height":'100px',
                        "boder":'nlue dotted 1px',
                        "margin":'10px'
                    });
                    // 追加到body上
                    $("body").append(imgs);
                }
            });
        }
    </script>
</body>
</html>

16正则表达式

<!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>

    <!-- https://jquery.com/ 官网-->
    <style>
        .tip{
            width: 100px;
            background-color: pink;
            text-align: right;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="tip">用户名:</div><input type="text"><br />
    <div class="tip">密&nbsp;&nbsp;&nbsp;码:</div><input type="password"><br />
    <div><button id="btn">判断字串</button> </div>

    <script>
        // 为什么会出现jquery
        // 1 使用js怎么找到btn按钮
        // var btn = document.getElementById("btn");
        // var tips = document.getElementsByClassName("tip");
        
        
        // var btn = select("btn");



        function select(selector){
            // id # class . 元素 p  div
            if(selector.startswith("#")){
                return document.getElementById(selector.replace("#",""));
            }
            if(selector.startswith(".")){
                return document.getElementsByClassName(selector.replace(".",""));
            }
            return document.getElementsByTagName(selector);
        }
    </script>
</body>
</html>