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

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

  • 政务大屏项目 Vue + DataV + Echarts 使用教程 苏鹃咪Healthy
    政务大屏项目Vue+DataV+Echarts使用教程Big-Screen-Vue-Datav-Echarts政务大屏-前端(VUE+DataV+Echarts)项目地址:https://gitcode.com/gh_mirrors/bi/Big-Screen-Vue-Datav-Echarts1.项目目录结构及介绍此项目是基于Vue.js、DataV和Echarts的政务大屏可视化模板。以下是主
  • AI写代码新姿势：一个截图，代替千行代码 量子位
    原创关注前沿科技量子位现在写代码，最fashion的“姿势”应该是什么？答案或许就是：截图。没错，就像这样，先随便找个网页，截取想要的那部分界面，然后“喂”给AI，并附上一句Prompt：参考这个页面，生成一个类似的HTML页面。只是一张图和一句话，AI就“唰唰唰”的把代码给写出来了。有了这个功能，前端程序员搞简单的页面代码可就方便太多了（甚至编程小白都可以尝试做网页）~而且这个AI啊，还不是国外
  • 你曾经star学习的项目现在能看懂了吗？ github阅读
    前言我有随时翻看GitHubStar的习惯，尤其是下载了GitHubApp后更加方便我查看了，后来我偶然翻到了自己曾经折腾过的项目LiteWebChat_Frame看了看文档忽然一个问题映入了我的脑海自己曾经因为没看懂而star的项目现在看懂了吗这也是我写文的缘由且也想和大家聊聊这件事三个阶段我又重新看了一遍我的Star，发现可分为三个阶段1.Minecraft及相关启动器2.命令行及后端3.前端
  • Python web基础知识，后端服务器开发，观点还停留在Java上吗！ 道-闇影 pythonjavaweb开发
    极简生活，极简编程，简到极致，就是完美！在写CSDN的Python技能树体验五(web应用开发:Djiago、Tornado、Flask)—终于可以写点能看的了！之前，wc，提前剧透了！先对web开发做一个简要的说明，话不多说，往下看！web应用开发的含义web应用开发分为：前端网页开发，后端服务器开发，还有前后端的一个通信技术！各个部分需要哪些基础前端开发基础：HTML,CSS，JavaScti
  • 深度优先和广度优先【栈、堆前端举例】 幸运小圣 JavaScript前端算法数据结构
    深度优先和广度优先：深度优先搜索（DFS）和广度优先搜索（BFS）是两种用于图和树遍历的算法，它们各自有不同的应用场景和特点。深度优先DFS：‌深度优先搜索（DFS）‌的核心思想是“深入探索，直至无路可走，然后再回溯”。它从起始节点开始，沿着一条路径一直遍历到最后一个节点，然后回溯到上一个节点继续遍历其他路径。DFS适合用于查找目标节点在深度较大的情况下，可以节省存储空间，但可能导致无限循环。DF
  • 【学习笔记】Kubernetes 还没入门的大菜狗 笔记
    一、概览Kubernetes提供了一个抽象层，是用户可以在屋里或虚拟环境中部署容器化应用，提供以容器为中心的基础架构。Kubernetes的控制平面和工作节点都有什么组建？分别有什么作用？1.1Kubernetes控制平面和工作节点的组件及其作用控制平面组件控制平面组件负责管理集群的全局决策（如调度），以及检测和响应集群事件。kube-apiserverKubernetesAPI的前端，所有组件通
  • 深度学习-【完整代码+数据集】逻辑回归预测乳腺癌检测案例 编程千纸鹤 人工智能学习专栏深度学习逻辑回归人工智能癌症预测
    作者主页：编程千纸鹤作者简介：Java、前端、Python开发多年，做过高程，项目经理，架构师主要内容：Java项目开发、Python项目开发、大学数据和AI项目开发、单片机项目设计、面试技术整理、最新技术分享收藏点赞不迷路关注作者有好处文末获得源码机器学习分为：有监督学习：数据带有标签无监督学习：数据没有标签，根据属性聚类在机器学习有监督学习中大致可以分为两大任务，一种是回归任务，一种是分类任务
  • 基于web在线餐饮网站的设计与实现——蛋糕甜品店铺(HTML+CSS+JavaScript) html网页制作 网页设计前端javascripthtmldreamweaver网页设计web网页设计期末课程大作业
    ‍静态网站的编写主要是用HTMLDIV+CSSJS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。精彩专栏推荐❤
  • 如何在简历中巧妙展现你的兴趣爱好 贵州数擎科技有限公司 面试跳槽
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：智简未来、晓智元宇宙、数字孪生引擎在简历中展
  • 使用 Three.js 转换 GLSL 粒子效果着色器 贵州数擎科技有限公司 javascript着色器开发语言
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：AI简历、元宇宙、数字孪生在这篇博客中，我们
  • php 与 html 的混合编程 hjjdebug #php
    所谓混合编程,实际上是php文件输出html内容的过程,看起来像html文件包含php语句,但实际上是php文件输出html内容.结合一个小例子,体会一下php是如何把非php语句原样输出或不输出的.cat3.php,有如下代码显示.注意:文件后缀必须是.php文件,不能是.html文件,因为php文件可以输出html内容,而html文件却不能包含php语言,这是因为html是firefox等前端
  • 面试之《前端开发者如何优化页面的加载时间？》 只会写Bug的程序员 面试面试前端
    前端开发者可以从多个方面入手优化页面的加载时间，以下是一些常见且有效的方法：优化资源加载压缩资源文件：对HTML、CSS、JavaScript文件进行压缩，去除不必要的空格、注释等，减小文件体积，加快下载速度。例如使用uglify-js压缩JavaScript文件，cssnano压缩CSS文件。优化图片：对图片进行压缩处理，降低图片的分辨率、色彩深度或采用更高效的图片格式（如WebP）。同时，根据
  • 从Hello Vue到构建未来：探索渐进式框架的无限可能 skyksksksksks 综合个人杂记vue.js前端开发语言前端框架
    一、当代码遇见人性：Vue的诞生故事2013年某个深夜，谷歌前员工尤雨溪在键盘前陷入沉思。当时的前端框架要么像Angular般庞大复杂，要么如React般需要哲学思考。他想创造一种更"人性化"的工具——就像用铅笔素描般自然，却能画出数字油画般精致的作品。于是，Vue.js这个融合东方设计美学的框架悄然诞生。这个轻量级的框架最初只有运行时库，却像一粒精心培育的种子。尤雨溪将"渐进式"理念注入DNA：
  • 计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档 双双科技 java数据库开发语言
    计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档计算机毕业设计Java-ssm餐厅线上点菜系统源码+系统+数据库+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：htt
  • 前端杂学录（七） 真的不想学习啦 前端前端html5javascriptcss
    1.响应式布局方案1.媒体查询特点媒体查询是CSS的一部分，可以根据设备的特性（如宽度、高度、分辨率等）应用不同的样式。示例body{font-size:16px;}@media(max-width:768px){body{font-size:14px;}}@media(max-width:480px){body{font-size:12px;}}2.弹性布局（Flexbox）特点Flexbox是
  • Vue.js 实战：开发动态日历式待办事项管理页面」 「从零开始：用 Vue2 实现一个直观的任务日程管理系统」 「前端新手项目：基于 Vue.js 的待办事项与日程管理页面」 「Vue.js 教程： 南北极之间 web前端特效源码前端vue.jscss网页设计javascript日历待办事项
    效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：2351598671@qq.com完整代码
  • 【Cherry Studio】是什么？怎样使用？ 南北极之间 学习
    CherryStudio：可视化前端开发工具详解1.CherryStudio是什么？CherryStudio是一款可视化前端开发工具，它的核心理念是：可视化编程：抛弃或减少手写代码，通过拖拽、配置等可视化方式构建用户界面。组件化开发：将页面拆分成独立的、可复用的组件，提高开发效率和代码质量。所见即所得：实时预览设计效果，方便调整和优化。简单来说，CherryStudio就像一个前端开发的“乐高积木
  • Webpack、Vite区别知多少？ m0_74824044 面试学习路线阿里巴巴webpack前端node.js
    前端的项目打包，我们常用的构建工具有Webpack和Vite，那么Webpack和Vite是两种不同的前端构建工具,那么你们又是否了解它们的区别呢？我们在做项目时要如何选择呢？一、工具定义1、Webpack：是一个强大的静态模块打包工具，它可以将各种类型的文件，如JavaScript、CSS、图片等，作为模块进行打包，并生成最终的静态资源文件。Webpack使用各种loader和plugin来处理
  • 前端或者后端通常用到数组使用方式 Mrzheng168 前端
    第一个是:Array.from()将具有length属性或者可迭代的对象转化为数组Array.from('abcdef')//返回值['a1','b1','c1','d1','e1','f1']Array.from(newMap([['b1',1],['a1',2]]))Array.from(newSet([1,2,3]))第二个是:Array.reduce()遍历数组,将函数的返回值,存储到累加
  • 深入剖析 Vue 的响应式原理：构建高效 Web 应用的基石 东锋1.3 vue.jsvue.js前端javascript
    深入剖析Vue的响应式原理：构建高效Web应用的基石在前端开发的广阔天地里，Vue.js凭借其简洁易用的特性和强大的功能，成为众多开发者的心头好。其中，响应式原理作为Vue的核心亮点之一，让数据与视图之间实现了高效的自动同步，极大地提升了开发体验和应用性能。今天，就让我们深入探究Vue响应式原理背后的奥秘。一、什么是响应式编程在前端领域，响应式编程是一种编程范式，它赋予程序对数据变化做出自动反应的
  • 深入理解 Vue 的异步更新机制：原理、应用与最佳实践 东锋1.3 vue.jsvue.js前端javascript
    深入理解Vue的异步更新机制：原理、应用与最佳实践在前端开发领域，Vue.js凭借其简洁易用、性能卓越的特点，成为众多开发者构建用户界面的首选框架。其中，异步更新机制作为Vue的核心特性之一，对提升应用性能和优化开发体验起着至关重要的作用。本文将深入探讨Vue的异步更新机制，从其基础概念、工作原理，到实际应用中的注意事项与最佳实践，全方位剖析这一特性。Vue的响应式系统：异步更新的基石在深入了解异
  • java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw 练练科技 数据库javamybatis
    java毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lwjava毕业设计家教管理系统mybatis+源码+调试部署+系统+数据库+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址
  • java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw 你眼里的星星 javamysql宠物
    java毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lwjava毕业生设计宠物领养管理系统计算机源码+系统+mysql+调试部署+lw本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址
  • 太强了！测试 Claude 3.7 Sonnet 模型前端代码能力提示词及Claude Code 系统提示词 技术程序猿华锋 AIGC资讯前端人工智能
    Claude3.7Sonnet测试模型的前端代码能力提示词；CreateasingleHTMLfilecontainingCSSandJavaScripttogenerateananimatedweathercard.Thecardshouldvisuallyrepresentthefollowingweatherconditionswithdistinctanimations:Wind:(e.g
  • ThreeJS入门（036）：THREE.RawShaderMaterial 知识详解，示例代码 还是大剑师兰特 #ThreeJS中文API全解大剑师threejs教程threejs示例
    作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第036篇入门文章文章目录构造函数常用属性示例使用统一变量使用宏定义使用扩展使
  • 【Java】@JsonFormat和@DateTimeFormat注解区别 Alkaid: SpringBootJavajava
    注解@JsonFormat主要是后端到前端的时间格式的转换注解@DateTimeFormat主要是前端到后端的时间格式的转换
  • electron 的原理，使用场景，简单用法 学会了没 electronjavascript前端
    一、核心原理架构组成Chromium渲染引擎：负责界面渲染，每个窗口都是一个独立的Chromium实例。Node.js运行时：提供对系统底层API的访问（如文件系统、网络等）。主进程与渲染进程：主进程：应用程序的入口，管理窗口生命周期和原生API（如菜单、对话框）。渲染进程：每个窗口对应一个渲染进程，运行前端代码，通过preload脚本安全地桥接Node.js功能。进程间通信（IPC）ipcMai
  • Maven+SSM+SpringBoot+Mybatis-Plus 五月茶 mavenspringbootmybatis
    SSM技术栈：spring6、springmvc、mybatis、springboot3、mybatis-plus、druid；前端:node、npm、vue快速掌握：全新SSM+SpringBoot+MyBatis-Plus实战精讲
  • 【商城系统部署到上线】 启山智软 商城 源码 小程序微信小程序java
    商城系统开发是一个复杂的过程，涉及多种技能。以下是一些关键技能：一、前端开发技能HTML/CSS页面结构搭建：HTML用于构建网页的基本结构，如头部、导航栏、商品展示区、购物车等各个功能区域的框架。开发者要熟练掌握各种HTML标签，以创建语义化和结构化良好的页面。样式设计与美化：CSS能够控制网页的布局、字体、颜色、背景等外观效果。通过CSS，可以使页面更加美观、易用，并且适应不同的屏幕尺寸（响应
  • 什么是Restful风格以及它的四种具体实现形式 咕噜咕噜超。 Springrestfuljava后端
    一、背景在之前我们进行项目开发时，我们一般不注重区分前端向后端请求数据的方式，不管你前端传过来的是get请求还是post请求，即不管是哪一种请求，我们都可以用@RequestMapping注解来处理。但是如果在进行项目开发时，组里老大规定我们必须明确处理我们前端到底是哪一种请求，是get还是post?是put还是delete？那这时候其实我们就要以restful风格来处理我们的前端请求了。即res
  • 对于规范和实现，你会混淆吗？ 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