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

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

  • Java程序设计（三十九）：基于SSM框架的每日健康管理系统的实现与数据分析 人工智能_SYBH 2025年java程序设计java数据分析开发语言微信小程序notepad++程序设计数据挖掘
    目录引言系统需求分析2.1功能需求2.2非功能需求系统架构设计3.1技术栈3.2系统架构图数据库设计系统实现5.1后端实现5.1.1Spring配置5.1.2控制器实现5.1.3服务层与DAO层实现5.2前端实现5.2.1页面设计5.2.2AJAX请求实现数据分析与可视化创新点与未来展望总结引言随着社会的进步与人们健康意识的提升，健康管理成为了越来越重要的主题。本文介绍了一种基于SSM框架的每日健
  • React Compiler核心原理：新一代响应式引擎如何实现毫秒级热更新 威哥说编程 react.jsjavascript前端
    React在前端开发中已经成为构建用户界面的标准库，它的声明式编程模型和组件化设计为开发者提供了极大的灵活性和便利性。然而，随着React应用变得越来越复杂，性能成为了一个不可忽视的问题。特别是在大型应用中，如何实现快速的组件更新和响应式渲染，成为了提高开发体验和用户体验的关键。在过去几年中，React团队致力于改进React的更新机制，以解决性能瓶颈和提升开发体验。ReactCompiler（或
  • Spring Boot 2 快速教程：WebFlux处理流程（五） 星如雨ｸﾞｯ!(๑•̀ㅂ•́)و✧ javaspringboot后端java
    WebFlux请求处理流程下面是springmvc的请求处理流程具体步骤：第一步：发起请求到前端控制器(DispatcherServlet)第二步：前端控制器请求HandlerMapping查找Handler（可以根据xml配置、注解进行查找）匹配条件包括：请求路径、请求方法、header信息等第三步：处理器映射器HandlerMapping向前端控制器返回Handler，HandlerMappi
  • 七天速记前端八股文（重点） 秋の本名 前端前端笔记javascript
    forin和正常for循环的区别在遍历数组时，正常的for循环通常比for...in循环更适合。虽然for...in循环可以用于遍历数组，但它有一些潜在的问题和限制。下面是一些使用for循环相对于for...in循环的优势：顺序遍历：for循环可以按照数组元素的顺序进行迭代。而for...in循环在遍历数组时，并不能保证按照特定顺序遍历，因为它遍历的是对象的属性。不包含原型链上的属性：for循环仅
  • 前端知识速记--CSS篇：display 无限大. 前端知识速记前端css
    前端知识速记–CSS篇：display一、什么是display属性？display属性用于指定一个元素如何被显示在网页上。它不仅影响元素的显示形式，还对元素的布局、结构以及与其他元素之间的关系产生重要影响。二、常用display属性值1.blockblock级元素独占一行，宽度默认占满父容器。常见的block元素有、至、等。其特点是可以设置宽高，并且可以在上、下方添加外边距。实例：这是一个块级元素
  • 【前端】HTML 鸽鸽程序猿 前端前端html
    目录一、HTML结构1.1HTML标签1.2HTML文件基本结构1.3快速生成框架二、HTML常见标签2.1注释标签!----2.2标题标签h1到h62.3段落标签p2.4换行标签br2.5格式化标签2.6图片标签img2.7超链接标签a三、表格标签3.1常用标签3.2合并单元格四、列表标签五、表单标签5.1表单域:form标签5.2表单控件:input标签5.3label标签5.4select标
  • 前端导出Excel实践：探索xlsl的实现方式 linwu-hi 前端excel状态模式javascriptecmascripttypescript
    点击在线阅读，体验更好链接现代JavaScript高级小册链接深入浅出Dart链接现代TypeScript高级小册链接linwu的算法笔记链接前言最近写管理端的需求，发现有一个excel导出的需求，本来是后端同学负责，但是因为他们太忙了，把这块任务交给前端了，起初产品觉得前端实现不了，一听这话，这我哪里受得了，赶紧写了个demo给她看，前端是可以实现的。enen,产品看了直夸牛逼接下来，我来分享导
  • Vue前端 向 后端Flask 传文件数据并保存 battlestar Python学习vue.jsflask文件上传
    简介采用vue编写前端，上传图像文件，发送到后端flask，由后端保存前端代码exportdefault{methods:
  • Nginx作为前端web服务器和后端负载均衡器,两者在配置与调优方向有哪些不一样,请写出不一样地方和需要优化的内容 h韩 nginx前端服务器负载均衡架构运维
    在使用**Nginx**作为前端Web服务器和后端负载均衡器时，虽然它们都利用Nginx的强大功能，但配置和调优的方向有所不同。具体的优化内容也会根据其不同的用途而有所侧重。下面我将从配置和调优的不同之处，以及需要优化的具体内容进行分析。###一、Nginx作为前端Web服务器的配置与优化####配置方向1.**静态资源处理**：-**目的**：前端Web服务器主要处理静态资源请求，比如HTML、
  • Web3 黑客松组队报名 — 10000 美金奖池，新手友好，需要前后端，设计，产品，合约工程师 前端智能合约区块链以太坊
    Linea黑客松基本信息ℹ️报名截止6月30日10,000美金奖池在HackQuest平台举办，新手友好，适合Web2转型Web3的开发者参与需要前端，后端，设计，产品，合约工程师关于HackQuestHackQuest是一个充满活力的Web3开发者教育社区，我们的目标是培养下一代Web3开发者。黑客松要求✍️本次黑客松由HackQuest和Linea合作推，仅在HackQuest平台组织和举办不
  • 玩转Gin框架：Golang使用Gin完成登录流程 至尊丨楷君 gingolang开发语言
    文章目录背景基于Token认证机制简介常见的Token类型Token的生成和验证在项目工程里创建jwt.go文件根目录新建.env文件创建登录接口/loginToken认证机制的优点背景登录流程，相信大家都很熟悉的。传统网站采用session后端验证登录状态，大致流程如下：用户输入用户名和密码/手机号和验证码点击登录按钮提交表单。后端校验前端传递过来的信息，验证通过在缓存中存储用户信息。后续每次请
  • Nginx 运维开发高频面试题详解 千夜啊 nginx运维开发运维
    一、基础核心问题原文链接：https://blog.csdn.net/weixin_51146329/article/details/1429638531、什么是Nginx？Nginx是一个高性能的HTTP和反向代理服务器，它以轻量级和高并发处理能力而闻名。Nginx的反向代理功能允许它作为前端服务器，接收客户端的请求并将它们转发到后端服务器，这样可以隐藏后端服务器的细节，提高安全性Nginx也能
  • 鸿蒙开发在onPageShow中数据加载不完整的问题分析与解决 taopi2024 Harmonyharmonyos
    APIVersion121、onPageShow()作什么的首先说明下几个前端接口的区别：ArkUI-X的aboutToAppear()接口是一个生命周期接口，用于在页面即将显示之前调用。在ArkUI-X中，aboutToAppear()接口是一个重要的生命周期接口，它会在页面即将显示之前被调用。这个接口通常用于在页面显示之前进行一些准备工作，比如加载数据、初始化状态等。通过在aboutToApp
  • Web3 黑客松组队报名 — 30000 美金奖池，需要前后端，设计，产品，合约工程师 web3
    MantleAPACHackathon基本信息ℹ️项目提交截至12月15日30,000美金奖池三大赛道：DeFi、Infra&AI、Gaming&Meme需要前端，后端，设计，产品，合约工程师黑客松要求✍️本次黑客松由MantleFoundation联合Hackguest和OpenBuild共同打造，面向亚太地区开发者和区块链爱好者的线上黑客马拉松不限制主题部署在Mantle测试网上谁适合参加UI
  • NPDP第三章 新产品流程 钱包不紧张女士 产品运营
    什么是流程？流程描述多个人或团体经过一段时间的协作执行工作，流程所涉及的一些活动是由一连串的序列所连接，它具有可重复和可多个路径来完成。成功的新产品决策（决策的基本框架）（决策来源：知识、信息、数据具体来源：内部、外部）1.识别问题和机会2.收集信息3.分析情况4.提出备选解决方案5.评估备选解决方案6.优选解决方案7.基于决策而行动新产品开发成功的关键1.重视前端2.正确决策信息来源：内部、外部
  • Vue和Vue-Element-Admin（十）：HTML和CSS快速学习笔记 A叶子叶 #Vue与Web开发vue.jshtmlcss
    目录html标签分类网页布局盒子模型浮动定位css标签选择flex布局transform转换Vue开发tipsless和scssVScode常用插件后端语言框架很多，Java适合企业级应用（规范且稳定），Go适合高并发场景（比如云上产品），Python框架（bottle，tornado，django）简单且快速，也天然适合数据分析场景，PHP适合快速建站，前端变化小，所见即所得，因此抽空记录下学习
  • 敲黑板！如果使用lighthouse 遇到NO_FCP错误可能是前端安全策略导致的！ 测试开发Kevin 性能测试接口测试测试工具性能优化前端
    lighthouseNO_FCP使用lighthouse进行前端性能测试时发现一个问题：Thepagedidnotpaintanycontent.Pleaseensureyoukeepthebrowserwindowintheforegroundduringtheloadandtryagain.(NO_FCP)页面截图如下：刚开始以为是自己的lighthouse出了问题，然后找一个其他网页进行性能
  • Vue3 表单：全面解析与最佳实践 lly202406 开发语言
    Vue3表单：全面解析与最佳实践引言随着前端技术的发展，Vue.js已经成为最受欢迎的前端框架之一。Vue3作为Vue.js的最新版本，带来了许多改进和新的特性。其中，表单处理是Vue应用中不可或缺的一部分。本文将全面解析Vue3中的表单处理，包括基础用法、表单验证、双向绑定等，并提供一些最佳实践。Vue3表单基础1.1创建表单在Vue3中，创建表单非常简单。首先，我们需要定义一个元素，并为其绑定
  • 第28节课：前端项目实战—从需求分析到开发流程的全方位指南 学问小小谢 HTML学习笔记前端需求分析安全web安全网络性能优化html5
    目录项目需求分析与设计项目背景与目标项目背景项目目标需求收集与分析用户需求业务需求项目设计技术栈选择系统架构设计数据库设计项目开发流程环境搭建安装Node.js和npm初始化项目编码实践组件化开发状态管理测试与调试单元测试集成测试部署与维护部署维护结语在前端开发领域，将理论知识应用于实际项目是提升技能的关键。本节课将通过一个完整的前端项目实战案例，详细介绍项目需求分析与设计，以及项目开发流程，帮助
  • 前端——JS 逆风局？ 前端javascript开发语言
    目录什么是JS？JS引入方式JS基础语法输出语句变量常量数据类型函数自定义对象什么是JS？JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript:规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对
  • 基于Python的图书馆借阅记录管理系统设计与实现 IT实战课堂@白老师 Python项目python开发语言毕设指导推荐毕设选题推荐智能家居爬虫
    基于Python的图书馆借阅记录管理系统设计与实现|计算机毕业设计|毕设选题|选题推荐|答辩指导|课程设计|毕设答疑l论文降重该项目含有源码、文档、PPT、配套开发软件、软件安装教程、项目发布教程、包运行成功以及课程答疑与微信售后交流群、送查重系统不限次数免费查重等福利！技术路线：软件开发环境及开发工具：开发语言：python使用框架：Django前端技术：JavaScript、VUE.js（2.
  • HarmonyOS 开发实践——常见预置应用的跳转方式 六号嘉宾 HarmonyOS移动开发鸿蒙开发harmonyos鸿蒙开发ArkUI前端移动开发界面布局组件化
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……场景描述三方应用实际使用过程中，可能需要跳转到
  • AI智慧社区--百度地图 Y在努力学编程 项目vuespringbootjava百度地图
    数据库：前端实现页面代码import{getCommunityMap}from'@/api/sys/community'exportdefault{name:'Map',data(){return{listQuery:{gradeId:''},center:{lng:116.3755,lat:39.80896},zoom:12,mapData:[]}},mounted(){},methods:{i
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐） 无·糖 Web前端期末大作业html课程设计css大学生javascript美食大作业
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单
  • 大学生期末大作业|HTML+CSS+JavaScript 登录页面实例：超实用、新手友好、完整源码分享 从零开始：用原生 HTML、CSS 和 JS 打造简洁美观的登录页面（附完整代码） 新手必看：一 南北极之间 前端进阶练手实战htmlcss大学生期末大作业前端html5javascript
    效果图：目录一、新建一个HTML项目二、创建基本结构三、使用CSS美化页面四、添加交互功能五、完整代码六、结语步骤在Web开发中，登录页面是常见且重要的组件。一个设计良好的登录页面可以提升用户体验，并为网站留下良好的第一印象。今天，我们将一起学习如何使用HTML、CSS和JavaScript（不使用任何框架）来构建一个响应式的登录页面，实现基本的前端验证功能。一、新建一个HTML项目首先，创建一个
  • HTML5 技术深度解读：本地存储与地理定位的最佳实践 吴师兄大模型 html5前端html本地存储地理定位localStorageGeolocationAPI
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • HTML5 Canvas 与 SVG：让网页图形与动画活跃起来 吴师兄大模型 html5前端htmlCanvasSVG网页图形与动画HTML5
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • 前端表单验证终极指南：HTML5 内置验证 + JavaScript 自定义校验 吴师兄大模型 前端html5javascripthtml表单验证内置验证自定义校验
    系列文章目录01-从零开始学HTML：构建网页的基本框架与技巧02-HTML常见文本标签解析：从基础到进阶的全面指南03-HTML从入门到精通：链接与图像标签全解析04-HTML列表标签全解析：无序与有序列表的深度应用05-HTML表格标签全面解析：从基础到高级优化技巧06-HTML表单深度解析：GET和POST提交方法07-HTML表单控件类型大全：文本框、密码框、文件上传全掌握08-前端表单验
  • python dashboard django_Django + MySQL Dashboard 网页端数据库可视化 weixin_39639600 pythondashboarddjango
    1.OverviewPython+MySQL+Django,有些数据托管在MySQL的数据库，然后我们希望进行可视化，通过web的方式对数据库的信息去进行展示/检索/维护/..这个项目中，我们的数据托管在MySQL的数据库中，然后在Django中配置数据库信息，连接到数据库，在前端用Django-table2进行渲染;最终我们可以在web端看到如下所示效果，可以进行展示所有的数据，然后进行检索和过
  • Vue：前端体系、前后端分离 天宇阿 Vue前端vue.js
    文章目录一、前端核心分析1、概述2、前端知识体系2.1、前端三要素2.2、结构层（HTML）2.3、表现层（CSS）2.4、行为层（JavaScript）2.5、三端统一2.6、后端技术2.7、主流前端框架3、了解前后分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时代3.3、前端为主的MV*时代3.4、NodeJS带来的全栈时代3.5、总结学习视频来自于：秦疆（遇见狂神说
  • 对于规范和实现，你会混淆吗？ 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