前端学习 DAY07

已于 2022-07-22 20:21:57 修改
阅读量212 收藏
点赞数
分类专栏： 前端学习 文章标签： 前端 javascript css
于 2022-07-22 20:15:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Nancyuojuiivk/article/details/125797134
版权

JQuery

JQuery引用
辅助开发javaScript的库
方便处理HTML， 事件， 动画，异步交互
1.本地引用

<head>
    <title>Document</title>
    <script  src="js/jquery-3.6.0.,im.js"></script>
</head>
<body> 
</body>

2.cdn引用
百度 新浪 谷歌

JQuery语法
基础语法

$(selector).action()

美元符号定义JQuery
选择符(selection)查询html页面元素
action()执行对查询的元素操作

文档就绪
作用:文档完全加载完毕以后，在执行JQuer代码
写法:

$(document).ready(funtion(){
           //写JQuery代码
});

$(function(){
       //写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>元素选择器</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // 元素选择器
            // 点击按钮实现 p元素隐藏
            $("button").click(function(){
                $("p").hide();
            });
        });
    </script>
</head>
<body>
    <h1>标题</h1>
    <p>段落1</p>
    <p>段落2</p>
    <button>点击一下</button>
</body>
</html>

id选择器

<!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>id选择器</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // id选择器
            // 点击按钮实现 p元素隐藏
            $("button").click(function(){
                $("#p2").hide();
            });
        });
    </script>
</head>
<body>
    <h1>标题</h1>
    <p>段落1</p>
    <p id="p2">段落2</p>
    <button>点击一下</button>
</body>
</html>

类选择器

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            // 类选择器
            // 点击按钮实现 p元素隐藏
            $("button").click(function(){
                $(".test").hide();
                
                // CSS选择器
                // $("p").css("color", "blue");
                $("p").css({
                    "color":"red",
                    "font-size":"50px"
                })
            });
        });
    </script>
</head>
<body>
    <h1>标题</h1>
    <p>段落1</p>
    <p class="test">段落2</p>
    <p class="test">段落3</p>
    <p>段落4</p>
    <button>点击一下</button>
</body>
</html>

选择器用法

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
          $(document).ready(function(){
            $("button").click(function(){
                // 全元素选择器
                // $("*").hide();

                // 当前元素选择器
                // $(this).hide();

                // 选取第一个p元素
                // $("p:first").hide();

                // 选取具有某个属性的元素
                // $("[href]").hide();
                
            });
        });
    </script>
</head>
<body>
    <h1>标题</h1>
    <p>段落1</p>
    <p class="test">段落2</p>
    <p class="test">段落3</p>
    <p>段落4</p>
    <a href="https://www.baidu.com">百度一下</a>
    <button>点击一下</button>
</body>
</html>

事件

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            // 鼠标穿过元素触发
            // $("#p1").mouseenter(function(){
            //     console.log("1234");
            // });

            // 鼠标离开元素触发 mouseleave

            // 鼠标悬停
            $("#p1").hover(function(){
                alert("悬停在p元素上！");
            });  

            // jquery设置监听的时候 只需要在选择的元素后直接调用相应的监听方法即可。

        });
    </script>
</head>
<body>
    <p id="p1">我是段落、、、</p>
</body>
</html>

隐藏和显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>隐藏和显示</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("#p").hide();
            });
            $("#show").click(function(){
                $("#p").show();
            });
            // 两个方法的合体 toggle
            $("#toggle").click(function(){
                // 显示隐藏的元素，隐藏显示的元素
                $("#p").toggle();
            });
        });
    </script>
</head>
<body>
    <p id="p">点击按钮显示或隐藏</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="toggle">隐藏和显示</button>
</body>
</html>

淡入和淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>淡入和淡出</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
        div{
            width: 80px;
            height: 80px;
            background-color: aqua;
            display: none;
        }
    </style>
    <script>
        $(document).ready(function(){
            $("#fadein").click(function(){
                // 淡入元素
                $("#div1").fadeIn(1000);
            });
            $("#fadeout").click(function(){
                // 淡出元素
                $("#div1").fadeOut(1000);
            });
            // 结合上面两个方法  淡入或淡出
            $("#fadetoggle").click(function(){
                // 淡出元素
                $("#div1").fadeToggle(1000);
            });
        });
    </script>
</head>
<body>
    <button id="fadein">点击淡入元素</button>
    <button id="fadeout">点击淡出元素</button>
    <button id="fadetoggle">点击淡入/淡出元素</button>
    <div id="div1"></div>
</body>
</html>

滑动

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

    <script>
      $(function(){
        $("#btn1").click(function(){
            $("#div1").slideDown("slow");
        });
        $("#btn2").click(function(){
            $("#div1").slideUp("fast");
        });
        // 结合上面两种方式 滑下和滑上
        $("#btn3").click(function(){
            $("#div1").slideToggle(1000);
        });
      });
    </script>

    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: blue;
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn1">点击一下</button>
    <button id="btn2">点击一下</button>
    <button id="btn3">点击一下</button>
    <div id="div1"></div>
</body>
</html>

动画

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        // 设置动画的元素 需要css中设定position属性
        $(function(){
            $("#btnstart").click(function(){
                // 使用多个animate  逐一执行
                $("div").animate({
                    left:'250px',
                    opacity:"0.3",
                    height:"200px",
                    width:"200px"
                });
                $("div").animate({
                    left:'8px',
                    opacity:"1",
                    height:"100px",
                    width:"100px"
                });
            });
            // 停止动画
            $("#btnstop").click(function(){
                // 默认是false 后续队列动画还会执行
                $("div").stop(true);
            });
        })
    </script>

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>

<body>
    <button id="btnstart">开始动画</button>
    <button id="btnstop">停止动画</button>
    <div></div>
</body>
</html>

方法链接

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").css("color", "red").fadeOut(1000).fadeIn(1000);
            });
        });
    </script>
</head>
<body>
    <p>我是一个段落！</p>
    <button>点击一下</button>
</body>
</html>

设置内容

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
            // 设置内容
            $("#btn1").click(function(){
                $("#p1").text("<b>今天天气晴朗！</b>");
            });
            $("#btn2").click(function(){
                $("#p2").html("<b>今天天气晴朗！</b>");
            });
            $("#btn3").click(function(){
                $("input").val("今天天气晴朗！");
            });
            // 设置属性 可同时修改多个属性
            $("#btn4").click(function(){
                $("a").attr({
                    "href":"https://www.taobao.com"
                });
            });
        });
    </script>
</head>
<body>
    <p id="p1">这是段落1</p>
    <p id="p2">这是段落2</p>
    姓名：<input type="text" value="张三">
    <br>
    <a href="https://www.baidu.com">百度一下</a>
    <br>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置html</button>
    <button id="btn3">设置值</button>
    <button id="btn4">设置属性</button>
</body>
</html>

添加元素

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
           $("#btn1").click(function(){
                // 添加元素 追加 从末尾位置添加
                // $("ol").append("<li>西瓜</li>");

                // 从头部开始添加
                // $("ol").prepend("<li>西瓜</li>");

                // before 元素前添加
                $("ol").before("<b>之前添加</b>");
                // after 元素后添加
                $("ol").after("<b>之后添加</b>");
           });
        });
    </script>
</head>
<body>
    
    <ol>
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
    </ol>
    <button id="btn1">添加元素</button>
</body>
</html>

删除元素

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        $(function(){
           $("#btn1").click(function(){
                // 删除被选元素及其子元素 
                // 可以添加过滤条件
                 $("li").remove(".li");

                // 删除被选元素的子元素
                // $("ol").empty();
           });  
        });
    </script>
</head>
<body>
    
    <ol>
        <li id="li1">苹果</li>
        <li class="li">香蕉</li>
        <li>橘子</li>
    </ol>
    <button id="btn1">删除元素</button>
</body>
</html>

操作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>操作css</title>
    <script src="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#add").click(function(){
                // 添加css样式
                $("div").addClass("col");
                $("div").addClass("col2");
                // 移除css样式
                
            });

            $("#remove").click(function(){
                // 移除css样式
                $("div").removeClass("col2");
                
            });

            // toggleClass 结合上面两种方式 
            $("#toggle").click(function(){
                // 移除css样式
                $("div").toggleClass("col2");
                
            });


        });
    </script>

    <style>
        .col{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        .col2{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>div</div>
    <button id="add">点击一下</button>
    <button id="remove">移除css样式</button>
    <button id="toggle">移除css样式</button>
</body>
</html>

尺寸信息

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
          var d = $("div");  
          // 元素的宽和高
          console.log(d.width());
          console.log(d.height());
          // 包含内边距的宽和高
          console.log(d.innerWidth());
          console.log(d.innerHeight());
         // 包含内边距和边框的 宽和高
          console.log(d.outerWidth());
          console.log(d.outerHeight());
        });
    </script>
</head>
<body>
   <div style="height: 200px;width:100px;background-color: aqua; padding: 10px; margin: 20px;border: 5px solid black;"></div>
</body>
</html>

遍历

<!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="js/jquery-3.6.0.min.js"></script>
    <style>
        .div2{
           border: 2px solid lightgray;
           padding: 10px;
           margin: 10px;
           display: block;
           width: 500px;
       }
       
       
   </style>

    <script>
        $(document).ready(function(){
            // 获取选中元素的父元素
            // $("span").parent().css({"color":"red","border":"2px solid red"});

            // 获取选中元素的父元素 所有祖先全部获取到 一直到根元素
          //  $("span").parents().css({"color":"red","border":"2px solid red"});
            // 添加过滤条件 不仅是祖先元素并且是ul元素
            //$("span").parents("ul").css({"color":"red","border":"2px solid red"});

            // parentsUntil 返回的是两个元素之间的所有祖先元素
            // $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

            // 获取选中元素的子元素
           //$("#div").children().css({"color":"red","border":"2px solid red"});
           // 选取选中元素后代元素   * 所有后代元素
           //$("#div").find("span").css({"color":"red","border":"2px solid red"});

           // 获取兄弟元素 返回所有被选元素的兄弟元素
            // $("p").siblings().css({"color":"red","border":"2px solid red"});
            // 添加过滤条件
            //$("p").siblings("h2").css({"color":"red","border":"2px solid red"});

            // 被选元素的下一个兄弟元素
            // $("h2").next().css({"color":"red","border":"2px solid red"});
            // nextall 被选元素的所有跟随的兄弟元素
            //$("p").nextAll().css({"color":"red","border":"2px solid red"});

            // nextUntil  介于两个元素之间的所有兄弟元素
            // $("p").nextUntil("h3").css({"color":"red","border":"2px solid red"});

            // first 被选元素的第一个元素
            // div内部的第一个p元素
            //$("div p").first().css({"color":"red","border":"2px solid red"});
            // div内部的最后一个p元素
            //$("div p").last().css({"color":"red","border":"2px solid red"});

            // 返回指定索引的元素 下标从0开始
            // $("p").eq(2).css({"color":"red","border":"2px solid red"});

            // filter
            // $("p").filter(".p").css({"color":"red","border":"2px solid red"});

            // not 与 filter正好相反的
            $("p").not(".p").css({"color":"red","border":"2px solid red"});
        });
    </script>

   
</head>
<body>

    <div class="div2" id="div">div祖父元素
        <p id="p1">p父元素
            <span>span</span>
        </p>
        <p class="p">p父元素
            <span>span</span>
        </p>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <p class="p">p父元素
            <span>span</span>
        </p>
    </div>

   
</body>
</html>

HTML

<!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="js/jquery-3.6.0.min.js"></script>
    <script>
          $(document).ready(function(){
         
        });
    </script>
</head>
<body>
</body>
</html>
Nancy在努力
关注
专栏目录
前端学习Day03
qq_52912951的博客
02-24 276
day03
前端学习day15
m0_46896340的博客
03-31 130
开始APIs
前端学习Day40
2401_83657100的博客
08-31 118
Day40:跟着视频教程进行网站设计的收尾工作，并尝试运行。
前端学习Day38
2401_83657100的博客
08-31 127
Day38:跟着视频教程进行网站设计。
前端学习Day37
2401_83657100的博客
08-31 91
Day37:规划最终作品。
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
06day_前端学习资料_
09-30
【前端学习资料】是针对...这些知识点构成了一个完整的前端学习路径，通过【06day】的学习资源，你可以逐步深入每个主题，从基础到高级，系统地提升自己的前端技能。记住，持续学习和实践是成为优秀前端开发者的关键。
vito的Web前端学习_JavaScript_Day1
03-04
在“vito的Web前端学习_JavaScript_Day1”这个课程中，我们将会深入探讨JavaScript的基础概念和核心特性，为日后的Web开发打下坚实的基础。 首先，我们要理解JavaScript与ECMAScript的关系。JavaScript是基于...
【前端学习笔记day13】2.9. html表格
01-08
文章目录2.9.... ...1、 标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing属性 定义单元格与单元格之间的...
苍穹外卖前端课程 day03-套餐管理
03-09
### 苍穹外卖前端课程 Day03 - 套餐管理知识点详解 #### 一、套餐分页查询 ##### 1.1 需求分析与接口设计 ...通过对这些知识点的学习和实践，学员能够掌握前端开发中常见的业务逻辑和技术实现方式。
-webkit-box-reflect属性与倒影效果的实现
最新发布
读心悦
09-13 269
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
qq_39969848的博客
09-09 992
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
（微服务项目）新闻头条——Day1
weixin_73253843的博客
09-13 682
（微服务项目）新闻头条——Day1
2024伊语IM即时通讯源码/im商城系统/纯源码IM通讯系统安卓+IOS前端纯原生源码
翎风世界
09-10 637
2.4 node安装wget "https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz"资料参考地址：https://www.1234f.com/sj/GitHub/qtym/20240910/677.html。源码下载地址：https://www.123pan.com/s/LA1bVv-5l5Vv。备用下载地址：http://pan.1234f.com:5212/s/5PrS4。api.xxx.com接口。im.xxx.com通讯。
react 基础语法
小白小白从不日别的博客
09-13 1320
React 官方中文文档目前前端最流行的是三大框架：Vue、React、Angularreact是一个用于构建用户界面的 JavaScript 库react官网(Reactreact中文网(React 官方中文文档React 是一个用于构建用户界面（UI，对咱们前端来说，简单理解为：HTML 页面）的 JavaScript 库Vue 是一个渐进式的 JavaScript 框架如果从mvc的角度来看，React仅仅是视图层（V）的解决方案。也就是只负责视图的渲染，并非提供了完整了M和C的功能。
【前端】vue+html+js 实现table表格展示，以及分页按钮添加
weixin_43872912的博客
09-09 497
数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
在子组件中使用props用于在父组件中给子组件变量设置值
ithongchou的博客
09-13 47
/传给父组件传值到此组件。
项目中遇到的问题
qiao
09-12 349
文件列表中有文件上传功能，点击上传按钮，弹出模态框，在模态框的形式选择文件，进行上传。
JavaScript web API part1
wozhaonue_w的博客
09-09 1679
本文主要总结了JavaScript的webAPI的DOM对象，获取，修改属性，以及事件监听的一部分
前端学习日记： Day5 - 简单计算与二级联动
"零基础学习前端的第五天，涵盖了HTML元素、JavaScript基础以及事件处理的实践应用。" 在前端开发的学习过程中，HTML和JavaScript是两个核心的组成部分。在这一天的学习中，我们将通过两个实例来深入理解这两个语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值