Lyrelion
Lyrelion

JavaScript 网页编程（四）——JQuery 快速开发

一.JQuery 简介

1.JQuery 概述

  • JavaScript库：一个 对 原生JS代码 进行封装 的 JS 文件，快速高效的使用封装好的功能
  • 常见的 JavaScript库 ：JQuery 、Prototype 、YUI 、Dojo 、Ext JS 、移动端的 zepto
  • JQuery：封装了 JavaScript 常用的功能代码，优化 DOM 操作、事件处理、动画设计 和 Ajax 交互
  • J：JavaScript； Query：查询JS
  • 优点：轻量级、速度快、兼容主流浏览器、链式编程、隐式迭代、简化 DOM 操作、支持各种插件
  • 版本介绍：
  1. 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
  2. 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
  3. 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本

2.JQuery 的基本使用

2.1 JQuery 入口函数：$(function(){ ... });

  • 相当于原生 JS 中的 DOMContentLoaded：不必等 外部的 js 文件、css文件、图片加载完毕 就执行内部代码
  • ① $(function(){ ... });（推荐！！）        ②$(document.ready(function(){ ... }));

2.2 JQuery 的顶级对象 $

  • $ 是 JQuery 的别称，代码中可用 JQuery 代替 $
  • $ 是 JQuery 的顶级对象， 相当于 原生JS 中的 window
  • DOM 对象：用 原生JS 获取的对象，DOM 对象用 原生JS 方法
  • JQuery 对象：用 JQuery 获取的对象，只有 JQuery 对象才能用 JQuery 方法
  • JQuery 对象本质： 伪数组形式存储， 利用 $ 对 DOM对象 包装后产生的对象 
// 1. DOM 对象：  用原生js获取的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
// 2. jQuery对象： 用jquery方式获取的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        $('div'); // $('div')是一个jQuery 对象
  • DOM 对象 与 JQuery 对象 可以相互转换
  • DOM 对象 转换为 JQuery 对象： $('DOM对象')，如：$('div')
  • JQuery 对象 转换为 DOM 对象（两种方式）
  1. $('div')[index]
  2. $('div').get(index) 
        // ...
        $('video')[0].play()    // jquery里面没有play 这个方法，需要转换为 DOM 元素
        $('video').get(0).play()

二.JQuery 常用 API

1.JQuery 选择器

  • 原生 JS 获取元素，方式多，且容性不一致，因此 JQuery 做了封装，使 获取元素 统一标准

1.1 选择器、筛选方法

  • JQuery 选择器： $(“CSS选择器”) ：一定要加 "引号"！
  1. 基础选择器：JavaScript 网页编程（四）——JQuery 快速开发_第1张图片
  2. 层级选择器：JavaScript 网页编程（四）——JQuery 快速开发_第2张图片
  3. 筛选选择器：JavaScript 网页编程（四）——JQuery 快速开发_第3张图片
// 新浪下拉菜单 ul>4li li>ul>3li>a       
 $(function() {
            $(".nav>li").mousenter(function() {    // 给nav 亲儿子li 添加鼠标经过事件
                $(this).children("ul").show();    // this 不要加引号 表示选取 li的亲儿子ul
            });
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })                                    })
  • JQuery 筛选方法（重点）：parent() children() find() siblings() eq()
  • JavaScript 网页编程（四）——JQuery 快速开发_第4张图片

1.2 隐式迭代、排他思想、链式编程

  • 隐式迭代：遍历内部 DOM 元素（伪数组形式存储）的过程
  • JQuery 排他思想：多选一效果，当前元素设置样式，兄弟元素清除样式
  • 链式编程（以排他思想为例）：$(this).css('color', 'red').sibling().css('color', ''); 
        $(function() {
            $("button").click(function() {    // 1. 隐式迭代 给所有的按钮都绑定了点击事件       
                $(this).css("background", "pink");    // 2. 当前的元素变化背景颜色   
                $(this).siblings("button").css("background", "");    // 3. 其余兄弟去掉背景颜色 隐式迭代
            });        
        })

1.3 淘宝精品案例分析

  1. 核心原理：鼠标经过 左侧盒子 某个 li，就让 内容区盒子 相对应图片 显示，其余图片隐藏
  2. 需要当前 li 的索引号，JQuery 得到当前元素索引号： $(this).index()
  3. 对应的图片盒子，可用 eq(index) 方法选择 
   

    

        
    
            
  • 女靴
    •   // 此处是不同的导航栏按钮
            // ...
        

        
    // 此处是不同的图片内容盒子
            
    
                
            

            // ...

2.JQuery 样式操作

2.1 操作 css 方法

  • 返回属性值："属性名"
  • 设置一组样式：“属性名”,“属性值”，逗号分隔，值 如果是 数字 可不跟 单位引号
  • 设置多组样式：{"属性名"："属性值","属性名"："属性值"}，参数是对象，属性可不加引号
            $("div").css("width", 300);    // 可以不写单位 那就不要加引号
            $("div").css(height, "300px");    // 这个写法不对 因为属性名一定要加引号
            $("div").css({
                width: 400,
                height: 400,
                backgroundColor: "red"    // 复合属性须采取 驼峰命名法，值不是数字，则加引号
            })

2.2 设置类样式方法

  • 操作类样式：作用 =  classList，注意 操作类 里面的参数 不要加点！
  • 添加类：$(“div”).addClass(''current'');
  • 移除类：$(“div”).removeClass(''current'');
  • 切换类： $(“div”).toggleClass(''current'');
  • 类操作 VS className：原生 JS 中 className 覆盖原类名；JQuery 类操作 不影响原类名效果
            $("div").click(function() {
                $(this).toggleClass("current");    // 这里的参数类不要加点
            });

2.3 tab 栏切换分析

  1. 点击上部 li，当前 li 添加 current类，兄弟移除 current类
  2. 点击的同时，得到当前 li 的索引号
  3. 让下部相应索引号的 item 显示，其余 item 隐藏
    

        
    // 导航栏
            
    
                
  •  商品介绍 
    •     // 被选中后 改变背景颜色
                // 
  •  ...
            

        

        
    // 导航栏具体内容
            

                商品介绍模块内容
            

            // 
 ...
        

    

        // ...
        $(function() {
            $(".tab_list li").click(function() {    // 点击导航栏li 触发事件
                // 当前被点击的li 添加被选中的类样式 他的兄弟 移除被选中的类样式
                $(this).addClass("current").siblings().removeClass("current");
                var index = $(this).index();    // 获得被点击 li 的索引号
                // 让相应索引号的 导航栏具体内容 显示，其余m隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })

3.JQuery 效果

  • JavaScript 网页编程（四）——JQuery 快速开发_第5张图片

3.1 显示隐藏效果

  • show([speed,[easing],[fn]]) 显示
  • hide([speed,[easing],[fn]]) 隐藏
  • toggle([speed,[easing],[fn]]) 切换
  1. 参数都可省略，平时一般不带参数，直接显示隐藏
  2. speed：速度(“slow”,“normal”, or “fast”) 或 毫秒数
  3. easing：指切换效果，默认是“swing”，可用参数“linear”
  4. fn: 回调函数，动画完成时执行的函数，每个元素执行一次

 

            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
                    $("div").toggle(1000);    // 切换效果 一般不加参数 直接显示隐藏
                })

3.2 滑动效果

  • slideDown([speed,[easing],[fn]]) 下滑效果
  • slideUp([speed,[easing],[fn]]) 上滑效果
  • slideToggle([speed,[easing],[fn]]) 滑动切换
            $("button").eq(2).click(function() {          
                $("div").slideToggle(500);
            });

3.3 事件切换

  • hover([over,]out)
  1. over：鼠标移到元素上触发的函数（相当于mouseenter）
  2. out：鼠标移出元素要触发的函数（相当于mouseleave）
  3. 只写一个函数，则 鼠标 经过和离开 都会触发
            // 事件切换 hover 鼠标经过和离开的复合写法
            // $(".nav>li").hover(function() {    // 鼠标经过的函数
            //     $(this).children("ul").slideDown(200);    // 向下滑出
            // }, function() {    // 鼠标离开的函数
            //     $(this).children("ul").slideUp(200);    // 向上滑动
            // });
            // 事件切换 hover  只写一个函数，那么鼠标经过和离开都会触发这个函数
            $(".nav>li").hover(function() {
                $(this).children("ul").stop().slideToggle();    // 滑动切换
            });

3.4 动画队列 / 停止排队

  • 动画队列：多次触发 造成 多个动画排队执行

  • stop() 停止排队：写到动画的 前面，立刻开始当前操作，忽略之前操作

3.5 淡入淡出效果

  • fadeIn([speed,[easing],[fn]]) 淡入效果
  • fadeOut([speed,[easing],[fn]]) 淡出效果
  • fadeToggle([speed,[easing],[fn]]) 淡入淡出切换效果
  • fadeTo([[speed],opacity,[easing],[fn]]) 渐进调整到 指定的不透明度
  • 渐进调整到 指定的不透明度的参数 opacity（0-1） 透明度、speed 必须写
  • 高亮显示分析：JavaScript 网页编程（四）——JQuery 快速开发_第6张图片
            $(".wrap li").hover(function() {   //鼠标经过时,其他li 透明度：0.5
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {   // 鼠标离开，其他li 透明度改为 1     
                $(this).siblings().stop().fadeTo(400, 1);
            })

3.6 自定义动画 animate

  • animate(params,[speed],[easing],[fn]) 
  1. params：想要更改的样式属性，以 对象形式 传递，必写，其余参数可省略
  2. speed：速度(“slow”,“normal”, or “fast”) 或 毫秒数
  3. easing：指切换效果，默认是“swing”，可用参数“linear”
  4. fn: 回调函数，动画完成时执行的函数，每个元素执行一次
            $("button").click(function() {
                $("div").animate({    // 想要更改的样式属性 用对象存储 必写
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);    // 速度
            }))

3.7 王者手风琴效果分析

  • 鼠标经过某个 li 有两步操作：
  1. 当前小 li 宽度变为 224px，同时里面的小图片淡出，大图片淡入
  2. 兄弟小 li 宽度变为 69px，小图片淡入， 大图片淡出

    

        
    
            
  • 
                
                    
                    
                
            
    •             // ...

JavaScript 网页编程（四）——JQuery 快速开发_第7张图片

4.JQuery 属性操作

4.1 元素固有属性值 prop()

            $("a").prop("title", "特特喜欢茶茶");    // 修改元素固有属性
            $("input").change(function() {    // input框 内容改变事件
                console.log($(this).prop("checked"));    // 获取元素固有属性（获取选中状态）
            });

4.2 元素自定义属性值 attr()

  • 元素自定义属性：用户自己添加的属性，比如给 div 添加 index =“1”
  • 获取属性：attr(''属性'')，类似原生 getAttribute()，如果获取 H5自定义属性 需要添加 data-
  • 设置属性：attr(''属性'', ''属性值'')，类似原生 setAttribute() 
$("div").attr("index", 4);    // 设置自定义属性的值
console.log($("div").attr("data-index"));    // 获取自定义属性的值 如果获取 H5自定义属性 需要添加 data-

4.3 数据缓存 data()

  • data() ：在指定元素上存取数据，不会修改 DOM 元素结构，一旦页面刷新，之前的数据将被移除
  • data("index") 可以读取 HTML5 自定义属性 data-index ，可以不加"data-"，且得到的是 数字型
  • 获取数据：date(''name'')
  • 附加数据：data(''name'',''value'') 
            $("span").data("uname", "meow");    // 设置数据缓存 刷新后消失
            console.log($("span").data("uname"));    // 读取数据缓存

5.JQuery 文本属性值

5.1 针对 元素的内容 / 表单的值 操作 

  • 普通元素内容 html()（ 相当于原生 innerHTML)
  • 普通元素文本内容 text() (相当于原生 innerText)
  • 表单的值 val()（ 相当于原生 value)

6.JQuery 元素操作

  • 遍历、创建、添加、删除元素操作

6.1 遍历元素

  • 隐式迭代是对 相同元素 做 相同操作，想要给 相同元素 做 不同操作，需要 遍历
  • $("div").each(function (index, domEle) {...}）
  • each() 方法用于遍历元素，用 DOM 处理
  • 回调函数有 2 个参数： index 是元素索引号; demEle 是 DOM元素对象，不是 JQuery对象，只能用 DOM 方法
  • 要想使用 JQuery方法，需要转换为 JQuery对象： $(domEle)
    
1

    
2

    
3

6.2.3 删除元素：

  1. element.remove()：删除元素本身

  2. element.empty()：删除元素内容（子节点）
  3. element.html('''')：清空元素内容（子节点）
  • empt() 和 html('''') 作用等价，都可删除元素内容，只不过 html 还可以设置内容
    
    
        
  •  原先的li 
    • 
    

    
 原先的div

你可能感兴趣的:(前端)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • 【前端】vue 报错:The template root requires exactly one element 程序员-张师傅 前端前端vue.jsjavascript
    【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
  • 从单体到微服务：FastAPI ‘挂载’子应用程序的转变 黑金IT fastapi微服务fastapi架构
    在现代Web应用开发中，模块化架构是一种常见的设计模式，它有助于将大型应用程序分解为更小、更易于管理的部分。FastAPI，作为一个高性能的PythonWeb框架，提供了强大的支持来实现这种模块化设计。通过“挂载”子应用程序，我们可以为不同的功能区域（如前端接口、管理员接口和用户中心）创建独立的应用程序，并将它们整合到一个主应用程序中。本文将详细介绍如何在FastAPI中使用“挂载”子应用程序的方
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 前端three.js的Sprite模拟下雪动画效果 qq_35430208 three.js前端javascript三维场景中下雪效果threejs实现下雪效果
    一、效果如图所示：二、原理同下雨一样三、完整代码：index.jsimport*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importmodelfrom'./model.js';//模型对象//场景constscene=newTHREE.Scene();scene.add
  • 系列3：【深入】qiankun动态与按需加载子应用—像电影一样控制出现时机 rabbit_it qiankun学习前端框架前端阿里云
    一、引言：为何需要动态加载在现代前端开发中，性能优化始终是一个关键问题。对于微前端架构而言，管理多个子应用带来了前所未有的灵活性，但也对资源的加载和使用效率提出了更高要求。假设你的微前端项目就像一场电影，而子应用是场景或演员。在不同的情节中，我们只需要特定的场景和演员出现，而不需要所有场景和演员一开始就站在舞台上等待。这时，动态加载和按需加载就成为了关键工具——让需要的内容在正确的时机上场，节省性
  • ODOO不同版本与平台选择 chouchengyin2080 c#操作系统运维
    1.10.0vs11.0vs8.0截至2017年底，最新的ODOO发布版为ODOO11.0，但功能上有一定精简（去除财务模块，去除工作流支持），技术上变动较大（代码逐步迁移至Python3，前端框架改写得抽象）。所以如果是从生产使用的角度来讲，ODOO10.0是当前最好选择，因为其更稳定，第三方模块也更多更全面。而如果是ODOO技术爱好从业者，则逐步迁移至ODOO11.0也有必要，因为其底层技术架
  • Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 qcidyu 好用的工具集合代码效率前端技巧Vue开发组合式函数模块管理自动导入NuxtKit
    title:NuxtKit自动导入功能：高效管理你的模块和组合式函数date:2024/9/14updated:2024/9/14author:cmdragonexcerpt:通过使用NuxtKit的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和VueAPI。无论是单个导入、目录导入还是从第三方模块导入，您都可以通过简单的API调用轻松实现。categories:前端开发tags:N
  • 对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
    昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
  • android 网络 百合不是茶 网络
    android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
  • [读书笔记]读法拉第传 comsci 读书笔记
          1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
  • 随机数的产生 沐刃青蛟 随机数
    c++中阐述随机数的方法有两种：   一是产生假随机数（不管操作多少次，所产生的数都不会改变）          这类随机数是使用了默认的种子值产生的，所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<
  • PHP检测函数所在的文件名 IT独行者 PHP函数
    很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码：   [php]   view plain copy // Filename: functions.php    <?php&nbs
  • 银行各系统功能简介 文强chu 金融
    银行各系统功能简介 　 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系
  • Python学习1(pip django 安装以及第一个project) 小桔子 pythondjangopip
        最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
  • php 数组 aichenglong PHP排序数组循环多维数组
    1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
  • 安装python2.7 AILIKES python
    安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2
  • java异常的处理探讨 百合不是茶 JAVA异常
    //java异常  /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常   */   //2，学会使用try-catch-finally来处理异常  
  • getElementsByName实例 bijian1013 element
    实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
  • 探索JUnit4扩展：Runner bijian1013 java单元测试JUnit
            参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。         文章地址：http://www.blogjava.net/jiangshachina/archive/20
  • [MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
    1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2
  • 【Spark八十一】Hive in the spark assembly bit1129 assembly
    Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
  • Nginx问题定位之监控进程异常退出 ronin47
    nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
  • No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
    方法一：常用方法   关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=
  • Netty源码学习-DefaultChannelPipeline bylijinnan netty
    package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
  • MYSQL数据库常用备份及恢复语句 chicony mysql
    备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
  • 小白谈谈云计算--基于Google三大论文 CrazyMizzz Google云计算GFS
        之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n
  • hadoop 平衡空间设置方法 daizj hadoopbalancer
    在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g
  • Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
  • Android学习之路 dcj3sjt126com Android学习
    转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视
  • java 遍历Map的四种方法 eksliang javaHashMapjava 遍历Map的四种方法
    转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
  • 【精典】数据库相关相关 gengzg 数据库
    package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
  • 自动补全 huyana_town 自动补全
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
  • jquery在线预览PDF文件，打开PDF文件 天梯梦 jquery
    最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
  • ViewPager刷新单个页面的方法 lovelease androidviewpagertag刷新
      使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
  • 利用按位取反（~）从复合枚举值里清除枚举值 草料场 enum
    以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果，
  • Linux系统新手学习的11点建议 刘星宇 编程工作linux脚本
    　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
  • hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAOHibernate
    /** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul