Hope°
Hope°

观察者（IntersectionObserver API）的基本使用（入门篇）

用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

介绍

一般情况下监听可视区域或者几个元素的相对可视区域状态都不是很容易，传统方式也特别消耗性能，此时就可以使用到IntersectionObserver。

操作

操作为监听一个列表的首尾是否进入视窗。
定义一个new IntersectionObserver（callback,option）
注意：此文档只使用到了callback

观察者建造

 //观察者建造
 var observer = new IntersectionObserver((entries, observe) => {
  })

监听观察对象

可以监听指定的元素，也可以监听所有元素.
遍历所有的话就可以监听所有元素。

	//获取所有li
    var lis = document.querySelectorAll('li')
   // 监听第一个
    observer.observe(document.querySelectorAll('li')[0])
    // 监听最后一个
    observer.observe(lis[lis.length - 1])

补充：监听所有元素

    // 遍历所有的
    document.querySelectorAll("li").forEach(i=>{
      observer.observe(i)
    })

开始监听

  var observer = new IntersectionObserver((entries, observe) => {
      entries.forEach((i) => {
        // 通过滚动判断是否是当前的监听对象
        if (i.isIntersecting) {
          if (i.target.id == 'first') {
            first(i)
          } else if (i.target.id == 'last') {
            last(i)
          }
        }
      })
    })
    
    function first(val) {
      console.log('first')
    }
    function last() {
      console.log('last')
    }

完整代码

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 200px;
        height: 200px;
        background: red;
        overflow-y: scroll;
        margin: 20px auto;
      }
      #box li {
        height: 30px;
        list-style: none;
        border-bottom: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <ul id="box">
      <li id="first">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li id="last">20</li>
    </ul>
  </body>
  <script>
    var lis = document.querySelectorAll('li')
    var observer = new IntersectionObserver((entries, observe) => {
      entries.forEach((i) => {
        // 通过滚动判断是否是当前的监听对象
        if (i.isIntersecting) {
          if (i.target.id == 'first') {
            first(i)
          } else if (i.target.id == 'last') {
            last(i)
          }
        }
      })
    })

    // 监听第一个
    observer.observe(document.querySelectorAll('li')[0])
    // 监听最后一个
    observer.observe(lis[lis.length - 1])

    function first(val) {
      console.log('first')
    }
    function last() {
      console.log('last')
    }
  </script>
</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>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 200px;
        height: 200px;
        overflow-y: scroll;
        margin: 20px auto;
      }
      #box li {
        height: 30px;
        width: 100%;
        list-style: none;
        background-image: linear-gradient(#73ffa0, #73ffa0);
        background-repeat: no-repeat;
        background-size: 0% 38%;
        background-position: 0 70%;
      }
      #box li.animate {
        animation: changeBg 1s ease-in-out forwards;
      }
      @keyframes changeBg {
        to {
          background-size: 100% 38%;
        }
      }
    </style>
  </head>
  <body>
    <ul id="box">
      <li id="first">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li id="last">20</li>
    </ul>
  </body>
  <script>
    var lis = document.querySelectorAll('li')
    var observer = new IntersectionObserver((entries, observe) => {
      entries.forEach((i) => {
        // 通过滚动判断是否是当前的监听对象
        if (i.isIntersecting) {
          i.target.classList.add('animate')
          observer.unobserve(i.target)
        }
      })
    })
    // 遍历所有的
    document.querySelectorAll('li').forEach((i) => {
      observer.observe(i)
    })
  </script>
</html>

希望阅读完之后对您有所帮助。

你可能感兴趣的:(笔记,js,前端,javascript)

  • 『大模型笔记』KV缓存：Transformer中的内存使用！ AI大模型前沿研究 大模型笔记缓存transformerKVcache大模型LLM
    『大模型笔记』KV缓存：Transformer中的内存使用！文章目录一.KV缓存：Transformer中的内存使用！1.1.介绍1.2.自注意力机制回顾1.3.KV缓存的工作原理1.4.内存使用和示例1.4.1.存储键值缓存需要多少内存1.4.2.Example:OPT-30B（300亿参数）四.参考文献进一步阅读：加速GPT-KV缓存：https://www.dipkumar.dev/beco
  • 初学Spring AI 笔记 笑衬人心。 大模型学习spring人工智能笔记
    目录SpringAI简介依赖与环境配置基础概念集成OpenAI（或其他LLM提供商）Prompt模板引擎Embedding与向量数据库SpringAIChatClient使用SpringAI和LangChain对比常见问题与建议SpringAI简介SpringAI是Spring团队推出的人工智能集成框架，旨在简化AI模型（如OpenAI、HuggingFace、Mistral、AzureOpenA
  • 什么是脚本，脚本有什么用，如何调用脚本？ 诸葛务农 java编辑器
    1.什么是脚本（Script）？脚本是一种由解释器直接执行的代码文件，无需编译成二进制文件。它通常用于自动化任务、简化操作流程或控制软件行为。脚本语言（如Python、JavaScript、Bash）相比编译型语言（如C++、Java）更灵活，但执行效率较低。2.脚本的常见用途自动化重复任务：批量重命名文件、定期备份数据、自动发送邮件等。系统管理：配置服务器、监控系统资源（如通过Bash/Powe
  • vue+three.js 加载fbx动画模型 资深前端之路 threeJsjavascriptvue.js前端
    嗨，我是小路。今天主要和大家分享的主题是“vue+three.js加载fbx动画模型”。在现代网页开发中，3D图形和动画的应用越来越广泛，从产品展示、虚拟展厅到游戏、教育等领域，三维技术正在不断刷新用户体验。而作为前端开发者，如何将高性能的3D动画无缝集成到Vue项目中？今天从网上找了一个fbx动画模型，然后将其加载出来，并让模型动起来。项目示意图1.FBXLoader加载器定义：主要用来加载fb
  • RISC-V设计之Decoder的封装与函数(二)
    RISC-V设计之封装与函数(SV)写在前面：今天去见了导师，他强烈要求我把设计中的decoder删去，去掉宏定义引入局部变量，使用封装的函数来取而代之。并在其他运算模块调用函数的返回值，提高代码简洁度和清晰度，避免全局变量污染环境，下面是根据导师的主页总结的设计笔记。-----2025/7/1示例代码：这个opcodes包是为一个简单的处理器设计的辅助模块，作用是封装指令解析相关的功能，供CPU
  • windows11安装node.js，选择同时安装Chocolatey包管理工具 xinhuanjieyi node.js
    https://nodejs.org/dist/v21.1.0/node-v21.1.0-x64.msi下载，安装到D:\ide\node.js我勾选了安装Chocolatey包管理工具，默认没打勾弹出powershell命令窗口，安装过程中python程序安装报错实际上电脑里已经安装了python多个版本，环境变量都配好了，不知道为什么这个安装工具说没检测到python。以下是窗口信息：Forc
  • Python Json数据排序 weixin_33851177 pythonjsonjava
    importhashlib#recursivelycalculateeachelementblock'shashcode,andreorderthechildnodesinthelistbasingonthehashcode#finallywillgettheorderedjsonobjectandoverallhashcodedefordered(jsonNode):ifisinstance(j
  • Pydantic：拯救你的数据结构，让Python类型提示火力全开！（开发者血泪史终结者） syntaxseeker 数据结构python开发语言其他
    文章目录一、现实毒打：没有Pydantic的日子有多惨？二、Pydantic登场：你的数据守护神！三、动手！秒懂Pydantic魔法四、Pydantic的杀手锏：为什么它这么香？五、实战场景：Pydantic在哪里大放异彩？六、避坑指南&最佳实践（血泪教训！）七、结语：拥抱Pydantic，告别数据焦虑！还在为混乱的JSON数据抓狂？被API返回的诡异字段逼疯？深夜调试时因为一个None值崩溃砸键
  • Bootstrap 5 三种 JavaScript 版本的区别 中国lanwp javascriptbootstrap前端
    Bootstrap5三种JavaScript版本的区别Bootstrap5提供了三种不同的JavaScript版本：bootstrap.bundle.js、bootstrap.esm.js和bootstrap.js。以下是它们的区别：1.bootstrap.js(标准版)文件大小:最小包含内容:仅包含Bootstrap的核心JavaScript功能依赖关系:需要手动引入Popper.js(用于工具
  • canvas实现路段连通和路段效果
    源码//utils.js/***通过判断type返回目标图片的地址*@param{String}type图片类型*@returns{String}url目标图片的地址*/exportfunctionsetImgUrl(type){leturl;switch(type){case"track":url=require("./image/car.png");break;case"gantry":url
  • 前端大文件上传解决方案 诸葛亮的芭蕉扇 前端javascriptvue.js
    本文分享的内容是前端大文件上传的解决方案，文件上传是前端开发中常见的需求，特别是在处理视频、大型文档或数据集时。对于小文件上传不做详细介绍，在源码中已附带。大文件上传前置条件设置分片大小的值，即规定每个切片的大小设置文件大小阈值，即超过多少M判定为大文件大文件上传步骤计算文件md5的值前端对文件进行分割，每个切片中包含索引、切片内容、文件名称对切片集合进行遍历，按照顺序上传切片先校验切片是否已上传
  • StreamSaver实现大文件下载解决方案 诸葛亮的芭蕉扇 前端vue.jsjavascriptnode.js
    StreamSaver实现大文件下载解决方案web端安装StreamSaver.jsnpminstallstreamsaver#或yarnaddstreamsaver在Vue组件中导入importstreamSaverfrom"streamsaver";//确保导入名称正确完整代码修正下载大文件（带进度）0">下载进度:{{progress}}%importstreamSaverfrom"stre
  • Node.js特训专栏-实战进阶：11. Redis缓存策略与应用场景 爱分享的程序员 Node.js前端网络相关javascriptnode.js前端
    欢迎来到Node.js实战专栏！在这里，每一行代码都是解锁高性能应用的钥匙，让我们一起开启Node.js的奇妙开发之旅！Node.js特训专栏主页专栏内容规划详情Redis缓存策略与应用场景：从理论到实战的高性能解决方案一、Redis基础概述1.1Redis核心特性Redis作为高性能内存数据库，具备以下关键优势：1.1.1内存极速读写读写性能：基于纯内存操作，读写操作在微秒级完成，实测单节点QP
  • vue3 - 【完整源码】超详细实现网站 / H5 在线预览 pdf 文件功能，支持缩放、旋转、全屏预览、打印、下载、内容检索、主题色定制、侧边缩略图、页码跳转等等（最好用的pdf预览器，注释详细！） 十一猫咪爱养鱼 前端组件与功能(开箱即用)Vue组件与功能(工作经验)vue常见问题解决vue3pdf预览器vue3网页打开pdf文件vue3可自定义界面的pdfvue3pdf网页预览下载vue3项目预览PDF插件组件
    效果图在Vue3.js项目中，实现了快速高效的pdf预览器工具组件，附带详细的使用教程与详细的注释，保证一键复制轻松搞定！详细的注释很容易二次修改，很多实用功能，你也可以自定义界面上的样式、DIY一切！组件源码首先
  • LLM大语言模型学习笔记（1） Arixs666 大语言模型语言模型笔记人工智能
    1.概念大语言模型（LLM，LargeLanguageModel），也称大型语言模型，是一种旨在理解和生成人类语言的人工智能模型。LLM通常指包含数百亿（或更多）参数的语言模型，它们在海量的文本数据上进行训练，从而获得对语言深层次的理解。2.能力2.1涌现能力区分大语言模型（LLM）与以前的预训练语言模型（PLM）最显著的特征之一是它们的涌现能力。涌现能力是一种令人惊讶的能力，它在小型模型中不明显
  • $.post 上传文件_基于 Laravel + Vue 组件实现文件异步上传 Clever Liu $.post上传文件
    我们在上一篇教程中已经演示了如何通过Request请求实例获取各种文本输入数据，但是还有一种输入数据我们没有涉及到，那就是文件上传。我们可以通过Request请求实例提供的file方法获取用户上传文件，并将其保存到指定目录从而完成文件上传，接下来，我们将从前端到后端实现一个完整的用户上传文件功能，包括视图、路由、控制器部分代码。定义文件上传路由首先我们在routes/web.php中定义上传文件涉
  • 如何快速开发一个鸿蒙app 深山技术宅 鸿蒙harmonyos华为
    快速开发一个鸿蒙（HarmonyOS）App的关键在于利用好官方提供的工具链、模板和资源。以下是一个高效且实用的步骤指南，帮助你快速上手：核心步骤概览：环境搭建创建项目（选择模板）理解核心概念&编写UI实现基础功能预览&调试编译&运行（可选）发布到AppGallery1.环境搭建（基础，必须）操作系统：Windows10(64位)/macOS10.13或更高版本。安装Node.js(>=14.19
  • 大语言模型（LLM）笔记 笑衬人心。 大模型学习语言模型笔记人工智能
    一、什么是大语言模型（LLM）？LLM（LargeLanguageModel）是基于Transformer架构构建，并在海量文本语料上训练出的具备自然语言理解和生成能力的深度神经网络模型。其本质任务是**预测下一个token（词/字/符号）**的概率分布，但通过大规模参数和数据的支持，表现出类人智能的行为。二、核心架构：Transformer由Google在2017年提出，是目前LLM的主流架构。
  • Svelte学习笔记六：谈谈双向绑定的使用 月半叫做胖 Svelte前端学习svelte前端框架
    表单元素的双向绑定1.input受控绑定使用bind关键字进行绑定，svelte通过bind关键字来完成类似v-model的双向绑定textcheckboxnumberrangeselectletquestions=[{id:1,text:'question1'},{id:2,text:'question2'},{id:3,text:'question3'}];letselected=1;{#ea
  • svelte笔记 艾小逗 web笔记
    svelte特性编译过程使用场景创建项目问题1：build报错基本语法响应式变量if语句for循环await加载数据Event组件通信父子组件跨组件通信storeslot插槽生命周期tickonMountonDestroySvelteKit与Svelte的区别项目结构路由+page+page.svelte+page.js/ts+error+layout+layout.sveltelayout.se
  • 设置cursor、vscode的默认终端 啥都不会工程师 vscodeide编辑器
    一般来说设置为command会比较好，比较方便和anaconda连用。但是正常来说默认是powershel，参考了别的帖子先用ctrl+shift+p调出命令输入settingsjson进入修改为：{"terminal.integrated.profiles.windows":{"CommandPrompt":{"path":"C:\\Windows\\System32\\cmd.exe"},"P
  • js实现的前端水印 k0933 记录javascript前端开发语言
    效果vardefaultConfig={content:[],//水印内容数组fontSize:14,//字体大小(px)fontFamily:'sans-serif',//字体color:'rgba(255,255,255,.3)',//字体颜色rotate:-20,//旋转角度(度数)zIndex:2147483647,//层级globalAlpha:0.5,//透明度canvasWidth:
  • UI前端与大数据的深度融合：打造智慧应用的新生态 前端开发与ui设计的老司机 ui前端大数据
    hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!在数字化转型的浪潮中，UI前端与大数据正逐渐成为推动智慧应用发展的核心力量。UI前端作为用户与应用程序交互的直接界面，负责提供直观、便捷且吸引人的用户体验；而大数据则凭借其强大的数据收集、分析和预测能力，为应用程序
  • Django REST framework - 模式 djangopython
    模式机器可读的[模式]描述了通过API可用的资源、它们的URL、它们的表示方式以及它们支持的操作。—Heroku，Heroku平台API的JSON模式弃用通知：RESTframework内置的用于生成OpenAPI模式的支持已被弃用，转而支持第三方包来提供此功能。内置支持将被移到一个单独的包中，然后在后续版本中逐步淘汰。作为一个完整的替代方案，我们推荐drf-spectacular包。它广泛支持从
  • 【深度学习|学习笔记】如何在深度学习中使用 正则化技术 进行模型压缩、稀疏建模和迁移学习调优？ 努力毕业的小土博^_^ 机器学习基础算法优质笔记2深度学习学习笔记迁移学习人工智能机器学习
    【深度学习|学习笔记】如何在深度学习中使用正则化技术进行模型压缩、稀疏建模和迁移学习调优？【深度学习|学习笔记】如何在深度学习中使用正则化技术进行模型压缩、稀疏建模和迁移学习调优？文章目录【深度学习|学习笔记】如何在深度学习中使用正则化技术进行模型压缩、稀疏建模和迁移学习调优？✅一、使用正则化进行模型压缩（ModelCompression）目标：方法：L1正则化促使权重稀疏化代码示例：后续压缩步骤
  • python序列化工具_python_restframework(序列化) weixin_39623271 python序列化工具
    django自带的序列化工具serializers三步骤导入fromdjango.coreimportserializers生成对象并传参response=serializers.serialize('json',book_list)第一个json是解析器，说明要解析成json格式的字符串,第二个是queryset对象,最后返回结果returnJsonResponse(response,safe=
  • webpack使用详解 懒洋洋的华369 开发工具webpack前端node.js
    摘要：webpack作为一款主流的构建工具，对比后来者Vite虽然存在一些缺点，例如启动慢，配置复杂等。在很多项目中使用依然基于webpack构建，有必要掌握其概念、构建流程和配置方法。1webpack概述1.1基本概念webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模
  • PHP学习笔记（十二）
    访问控制（可见性）对属性或方法的访问控制（PHP7.1后支持常量），是通过在前面添加关键字public（公有）、protected、private来实现。公有的任意可见，受保护的可被自身及其子类和父类访问，私有的只能被其定义所在的类访问属性的访问控制类属性可以定义为public，private或者protected。在没有任何访问控制关键字的情况下，属性声明为public不对称属性可见性从PHP8
  • BpmnJs源码篇2：diagram.js 简介与EventBus全局事件总线 MiyueFE javascript前端vue
    ✨✨✨目前成都的"小学生"大佬和作者一起开发了Flowable流程引擎组件（包含前端设计器与后端流程引擎）详情请访问：https://www.bpmport.com/products。预览：Flowable编辑器：flowable-designer，Activiti编辑器：activiti-designer，预览与模拟：viewer，DMN决策设计器：dmndiagram.js简介作为bpmn.j
  • 深入浅出Babel插件开发：从AST到代码转换的完整指南 MiyueFE javascript前端
    嘿，各位前端小伙伴们！今天咱们来聊聊一个既神秘又强大的东西——Babel插件开发。别被"AST"、“代码转换"这些高大上的词汇吓到，其实Babel插件开发就像是给代码做"整容手术”，让老旧的代码变得年轻时尚，让复杂的语法变得简单易懂。什么是Babel插件？简单来说，Babel插件就是一个代码转换器。它能够：语法转换：把ES6+语法转换成ES5API填充：为新API添加polyfill代码优化：移除
  • 如何用ruby来写hadoop的mapreduce并生成jar包 wudixiaotie mapreduce
    ruby来写hadoop的mapreduce，我用的方法是rubydoop。怎么配置环境呢： 1.安装rvm：     不说了 网上有 2.安装ruby：     由于我以前是做ruby的，所以习惯性的先安装了ruby，起码调试起来比jruby快多了。 3.安装jruby：     rvm install jruby然后等待安
  • java编程思想 -- 访问控制权限 百合不是茶 java访问控制权限单例模式
    访问权限是java中一个比较中要的知识点,它规定者什么方法可以访问,什么不可以访问   一:包访问权限;   自定义包: package com.wj.control; //包 public class Demo { //定义一个无参的方法 public void DemoPackage(){ System.out.println("调用
  • [生物与医学]请审慎食用小龙虾 comsci 生物
         现在的餐馆里面出售的小龙虾,有一些是在野外捕捉的,这些小龙虾身体里面可能带有某些病毒和细菌,人食用以后可能会导致一些疾病,严重的甚至会死亡.....      所以,参加聚餐的时候,最好不要点小龙虾...就吃养殖的猪肉,牛肉,羊肉和鱼,等动物蛋白质     
  • org.apache.jasper.JasperException: Unable to compile class for JSP: 商人shang maven2.2jdk1.8
    环境： jdk1.8    maven  tomcat7-maven-plugin  2.0 原因： tomcat7-maven-plugin  2.0 不知吃 jdk 1.8，换成 tomcat7-maven-plugin  2.2就行，即     <plugin>
  • 你的垃圾你处理掉了吗?GC oloz GC
    前序:本人菜鸟，此文研究学习来自网络，各位牛牛多指教　 1.垃圾收集算法的核心思想 　　Java语言建立了垃圾收集机制，用以跟踪正在使用的对象和发现并回收不再使用(引用)的对象。该机制可以有效防范动态内存分配中可能发生的两个危险：因内存垃圾过多而引发的内存耗尽，以及不恰当的内存释放所造成的内存非法引用。 　　垃圾收集算法的核心思想是：对虚拟机可用内存空间，即堆空间中的对象进行识别
  • shiro 和 SESSSION 杨白白 shiro
    shiro 在web项目里默认使用的是web容器提供的session，也就是说shiro使用的session是web容器产生的，并不是自己产生的，在用于非web环境时可用其他来源代替。在web工程启动的时候它就和容器绑定在了一起，这是通过web.xml里面的shiroFilter实现的。通过session.getSession()方法会在浏览器cokkice产生JESSIONID，当关闭浏览器，此
  • 移动互联网终端 淘宝客如何实现盈利 小桔子 移動客戶端淘客淘寶App
           2012年淘宝联盟平台为站长和淘宝客带来的分成收入突破30亿元，同比增长100%。而来自移动端的分成达1亿元，其中美丽说、蘑菇街、果库、口袋购物等App运营商分成近5000万元。 可以看出，虽然目前阶段PC端对于淘客而言仍旧是盈利的大头，但移动端已经呈现出爆发之势。而且这个势头将随着智能终端(手机，平板)的加速普及而更加迅猛
  • wordpress小工具制作 aichenglong wordpress小工具
    wordpress 使用侧边栏的小工具，很方便调整页面结构 小工具的制作过程 1 在自己的主题文件中新建一个文件夹(如widget)，在文件夹中创建一个php(AWP_posts-category.php) 小工具是一个类,想侧边栏一样，还得使用代码注册，他才可以再后台使用，基本的代码一层不变 <?php class AWP_Post_Category extends WP_Wi
  • JS微信分享 AILIKES js
    // 所有功能必须包含在 WeixinApi.ready 中进行    WeixinApi.ready(function(Api) {        // 微信分享的数据            var wxData = {       &nb
  • 封装探讨 百合不是茶 JAVA面向对象 封装
    //封装   属性 方法 将某些东西包装在一起，通过创建对象或使用静态的方法来调用，称为封装；封装其实就是有选择性地公开或隐藏某些信息，它解决了数据的安全性问题，增加代码的可读性和可维护性   在 Aname类中申明三个属性，将其封装在一个类中：通过对象来调用   例如   1： //属性 将其设为私有 姓名 name 可以公开
  • jquery radio/checkbox change事件不能触发的问题 bijian1013 JavaScriptjquery
    我想让radio来控制当前我选择的是机动车还是特种车，如下所示：  <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"><
  • AngularJS中安全性措施 bijian1013 JavaScriptAngularJS安全性XSRFJSON漏洞
            在使用web应用中，安全性是应该首要考虑的一个问题。AngularJS提供了一些辅助机制，用来防护来自两个常见攻击方向的网络攻击。 一.JSON漏洞         当使用一个GET请求获取JSON数组信息的时候（尤其是当这一信息非常敏感，
  • [Maven学习笔记九]Maven发布web项目 bit1129 maven
    基于Maven的web项目的标准项目结构 user-project     user-core     user-service     user-web        src      
  • 【Hive七】Hive用户自定义聚合函数(UDAF) bit1129 hive
    用户自定义聚合函数，用户提供的多个入参通过聚合计算(求和、求最大值、求最小值)得到一个聚合计算结果的函数。 问题：UDF也可以提供输入多个参数然后输出一个结果的运算，比如加法运算add(3，5)，add这个UDF需要实现UDF的evaluate方法,那么UDF和UDAF的实质分别究竟是什么？   Double evaluate(Double a, Double b)  
  • 通过 nginx-lua 给 Nginx 增加 OAuth 支持 ronin47
    前言：我们使用Nginx的Lua中间件建立了OAuth2认证和授权层。如果你也有此打算，阅读下面的文档，实现自动化并获得收益。SeatGeek 在过去几年中取得了发展，我们已经积累了不少针对各种任务的不同管理接口。我们通常为新的展示需求创建新模块，比如我们自己的博客、图表等。我们还定期开发内部工具来处理诸如部署、可视化操作及事件处理等事务。在处理这些事务中，我们使用了几个不同的接口来认证： &n
  • 利用tomcat-redis-session-manager做session同步时自定义类对象属性保存不上的解决方法 bsr1983 session
    在利用tomcat-redis-session-manager做session同步时，遇到了在session保存一个自定义对象时，修改该对象中的某个属性，session未进行序列化，属性没有被存储到redis中。 在 tomcat-redis-session-manager的github上有如下说明： Session Change Tracking As noted in the &qu
  • 《代码大全》表驱动法-Table Driven Approach-1 bylijinnan java算法
    关于Table Driven Approach的一篇非常好的文章： http://www.codeproject.com/Articles/42732/Table-driven-Approach package com.ljn.base; import java.util.Random; public class TableDriven { public
  • Sybase封锁原理 chicony Sybase
           昨天在操作Sybase IQ12.7时意外操作造成了数据库表锁定，不能删除被锁定表数据也不能往其中写入数据。由于着急往该表抽入数据，因此立马着手解决该表的解锁问题。     无奈此前没有接触过Sybase IQ12.7这套数据库产品，加之当时已属于下班时间无法求助于支持人员支持，因此只有借助搜索引擎强大的
  • java异常处理机制 CrazyMizzz java
    java异常关键字有以下几个，分别为 try catch final throw throws 他们的定义分别为 try：    Opening exception-handling statement. catch：  Captures the exception. finally： Runs its code before terminating
  • hive 数据插入DML语法汇总 daizj hiveDML数据插入
    Hive的数据插入DML语法汇总1、Loading files into tables语法：1) LOAD DATA [LOCAL] INPATH 'filepath' [OVERWRITE] INTO TABLE tablename [PARTITION (partcol1=val1, partcol2=val2 ...)]解释：1)、上面命令执行环境为hive客户端环境下： hive>l
  • 工厂设计模式 dcj3sjt126com 设计模式
      使用设计模式是促进最佳实践和良好设计的好办法。设计模式可以提供针对常见的编程问题的灵活的解决方案。 工厂模式 工厂模式（Factory）允许你在代码执行时实例化对象。它之所以被称为工厂模式是因为它负责“生产”对象。工厂方法的参数是你要生成的对象对应的类名称。 Example #1 调用工厂方法（带参数） <?phpclass Example{ 
  • mysql字符串查找函数 dcj3sjt126com mysql
      FIND_IN_SET(str,strlist) 假如字符串str 在由N 子链组成的字符串列表strlist 中，则返回值的范围在1到 N 之间。一个字符串列表就是一个由一些被‘,’符号分开的自链组成的字符串。如果第一个参数是一个常数字符串，而第二个是type SET列，则   FIND_IN_SET() 函数被优化，使用比特计算。如果str不在strlist 或st
  • jvm内存管理 easterfly jvm
    一、JVM堆内存的划分 分为年轻代和年老代。年轻代又分为三部分：一个eden,两个survivor。 工作过程是这样的：e区空间满了后，执行minor gc，存活下来的对象放入s0, 对s0仍会进行minor gc，存活下来的的对象放入s1中，对s1同样执行minor gc，依旧存活的对象就放入年老代中； 年老代满了之后会执行major gc，这个是stop the word模式，执行
  • CentOS-6.3安装配置JDK-8 gengzg centos
    JAVA_HOME=/usr/java/jdk1.8.0_45 JRE_HOME=/usr/java/jdk1.8.0_45/jre PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar:$JRE_HOME/lib export JAVA_HOME
  • 【转】关于web路径的获取方法 huangyc1210 Web路径
    假定你的web application 名称为news,你在浏览器中输入请求路径：  http://localhost:8080/news/main/list.jsp  则执行下面向行代码后打印出如下结果：  1、 System.out.println(request.getContextPath()); //可返回站点的根路径。也就是项
  • php里获取第一个中文首字母并排序 远去的渡口 数据结构PHP
    很久没来更新博客了，还是觉得工作需要多总结的好。今天来更新一个自己认为比较有成就的问题吧。 最近在做储值结算，需求里结算首页需要按门店的首字母A-Z排序。我的数据结构原本是这样的： Array ( [0] => Array ( [sid] => 2885842 [recetcstoredpay] =&g
  • java内部类 hm4123660 java内部类匿名内部类成员内部类方法内部类
         　在Java中，可以将一个类定义在另一个类里面或者一个方法里面，这样的类称为内部类。内部类仍然是一个独立的类，在编译之后内部类会被编译成独立的.class文件，但是前面冠以外部类的类名和$符号。内部类可以间接解决多继承问题,可以使用内部类继承一个类，外部类继承一个类，实现多继承。      &nb
  • Caused by: java.lang.IncompatibleClassChangeError: class org.hibernate.cfg.Exten zhb8015
    maven pom.xml关于hibernate的配置和异常信息如下，查了好多资料，问题还是没有解决。只知道是包冲突，就是不知道是哪个包....遇到这个问题的分享下是怎么解决的。。   maven pom:   <dependency> <groupId>org.hibernate</groupId> <ar
  • Spark 性能相关参数配置详解－任务调度篇 Stark_Summer sparkcachecpu任务调度yarn
    随着Spark的逐渐成熟完善, 越来越多的可配置参数被添加到Spark中来, 本文试图通过阐述这其中部分参数的工作原理和配置思路, 和大家一起探讨一下如何根据实际场合对Spark进行配置优化。   由于篇幅较长，所以在这里分篇组织，如果要看最新完整的网页版内容，可以戳这里：http://spark-config.readthedocs.org/，主要是便
  • css3滤镜 wangkeheng htmlcss
    经常看到一些网站的底部有一些灰色的图标，鼠标移入的时候会变亮，开始以为是js操作src或者bg呢，搜索了一下，发现了一个更好的方法：通过css3的滤镜方法。 html代码： <a href='' class='icon'><img src='utv.jpg' /></a> css代码： .icon{-webkit-filter: graysc
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他