韩曙亮
韩曙亮

【Web APIs】JavaScript 操作多个元素 ③ ( 鼠标经过高亮显示 | onmouseover 事件设置 | onmouseout 事件设置 )

文章目录

  • 一、核心要点解析 - 鼠标经过高亮显示
    • 1、案例需求
    • 2、获取高亮显示的 列表行
    • 3、鼠标经过 onmouseover 事件设置
    • 4、鼠标离开 onmouseout 事件设置
    • 5、设置高亮方式
  • 二、完整代码示例
    • 1、完整代码示例
    • 2、执行结果






一、核心要点解析 - 鼠标经过高亮显示



1、案例需求


案例需求 : 给出一个学生列表 , 鼠标 经过列表 , 对应的 列表行 高亮 显示 , 鼠标 离开 列表行 , 背景 高亮 效果取消 ;

效果如下图所示 :

【Web APIs】JavaScript 操作多个元素 ③ ( 鼠标经过高亮显示 | onmouseover 事件设置 | onmouseout 事件设置 )_第1张图片

实现思路 :

  • 鼠标经过状态 可以通过 设置 标签元素的 onmouseover 触发事件 设置 ;
  • 鼠标离开状态 可以通过 设置 比钱元素的 onmouseout 触发事件 设置 ;
  • 鼠标经过 table 表格的 tr 行标签时 , 设置高亮背景颜色 , 鼠标离开时 设置 默认颜色 ;

2、获取高亮显示的 列表行


列表的 HTML 架构如下 :

    <table>
        <thead>
            <tr>
                <th>姓名th>
                <th>年龄th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>Tomtd>
                <td>18td>
            tr>
            <tr>
                <td>Jerrytd>
                <td>12td>
            tr>
            <tr>
                <td>Trumptd>
                <td>74td>
            tr>
        tbody>
    table>

要改变背景的 列表行 在 标签下的 标签中 ;

注意 : 不要选中 标签下的 标签 ;

在 JavaScript 中 调用 document.querySelector('tbody') 代码获取 标签元素 , 然后在 标签 元素上 调用 querySelectorAll('tr') 代码 , 获取 标签下的多个 标签 ;


代码如下 :

var trs = document.querySelector('tbody').querySelectorAll('tr');

3、鼠标经过 onmouseover 事件设置


Element.onmouseover 事件 在 鼠标指针 首次移动到 某个元素 或 其子元素 上方时 触发 , 常用于实现 悬停效果 , 如 : 高亮、提示框等效果 ;

直接在 HTML 标签中 , 使用 HTML 内联属性定义 :

<img onmouseover="bigImg(this)" src="smiley.gif" alt="图片">

在 JavaScript 代码中 , 通过 addEventListener 方式 设置 事件监听器 , 推荐使用这种方式设置 , addEventListener 支持多个监听器 , 而 mouseover 属性赋值 会覆盖已有处理器 ;

// addEventListener 方式（推荐）
element.addEventListener('mouseover', function(event) {
  this.style.backgroundColor = 'red';
});

属性赋值方式 , 直接对 标签元素的 onmouseover 属性进行赋值 , 这种方式会 覆盖已有处理器 ;

// 属性赋值方式
element.onmouseover = function() { 
  // 处理逻辑
};

4、鼠标离开 onmouseout 事件设置


Element.onmouseout 事件 在 鼠标指针 移出 元素或其子元素的边界时 触发 , 常用于 悬停交互后的状态恢复 , 如 : 隐藏提示框、恢复默认样式等 ;

当鼠标从 目标元素 或子元素 移动到其他区域时触发 , 若元素包含子元素 , 鼠标在 父元素 与 子元素 之间移动时可能多次触发该事件 ;


直接在 HTML 标签中 , 使用 HTML 内联属性定义 :

<img onmouseout="resetStyle(this)" src="image.jpg" alt="示例">

在 JavaScript 代码中 , 通过 addEventListener 方式 设置 事件监听器 , 推荐使用这种方式设置 , addEventListener 支持多个监听器 , 而 mouseout 属性赋值会覆盖已有处理器 ;

// addEventListener 方式（推荐）
element.addEventListener("mouseout", handlerFunction);

属性赋值方式 , 直接对 标签元素的 onmouseout 属性进行赋值 , 这种方式会 覆盖已有处理器 ;

element.onmouseout = function(event) { 
  // 恢复元素样式或执行其他操作
};

5、设置高亮方式


设置一个 css 样式 , .bg 类选择器 , 当 鼠标经过 表格行时 , 为该行设置 bg 类名 , 鼠标移开时 取消 bg 类名 ;

        .bg {
            background-color: pink;
        }

循环设置 表格中的 tr 行标签元素 的 鼠标 经过 和 离开 的 样式 :

        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }




二、完整代码示例



1、完整代码示例


DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Style Operation Exampletitle>
    <style>
        * {
            /* 取消默认内外边距样式 */
            margin: 0;
            padding: 0;
        }
        
        table {
            width: 400px;
            margin: 50px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: pink;
        }
    style>
head>

<body>
    <table>
        <thead>
            <tr>
                <th>姓名th>
                <th>年龄th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>Tomtd>
                <td>18td>
            tr>
            <tr>
                <td>Jerrytd>
                <td>12td>
            tr>
            <tr>
                <td>Trumptd>
                <td>74td>
            tr>
        tbody>
    table>

    <script>
        // 1.获取元素 获取的是 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');
        // 2. 利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件 onmouseover
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4. 鼠标离开事件 onmouseout
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    script>
body>

html>

2、执行结果


静态效果 :
【Web APIs】JavaScript 操作多个元素 ③ ( 鼠标经过高亮显示 | onmouseover 事件设置 | onmouseout 事件设置 )_第2张图片

动态效果如下 :

你可能感兴趣的:(JavaScript,前端,javascript,Web,APIs,onmouseout,onmouseover,Element)

  • Android Gantt View 安卓实现项目甘特图 netkiller-BG7NYT Android手札android甘特图
    需要做一个项目管理工具，其中使用到了甘特图。发现全网甘特图解决方案比较少，于是自动动手丰衣足食。前面我用Python和Node.js前端都做过，这次仅仅是移植到Android上面。其实甘特图非常简单，开发也不难，如果我专职去做，能做出一个非常棒产品。我写这个只是消遣，玩玩，闲的蛋痛，所以不怎么上心，就搞成下面这德行吧。仅仅供大家学习，参考。那天心情好了，完善一下。屏幕布局文件
  • 卡片区样式，按钮样式，运营模块 哎呦你好 CSS+HTML案例java前端javascriptcss3csshtml
    最近写了一个卡片区的样式，效果如下，HBuilder编辑器，样式代码使用scss语法编写。在Vue组件的标签中添加lang="scss"属性后，Vue（以及构建工具如Webpack）会识别这个属性，并使用相应的预处理器（如‌sass-loader‌）将SCSS代码编译成普通的CSS代码，这样浏览器才能识别和执行它。页面中的其他样式如：flex，wrap，ustify-between是flex布局的
  • 每天一个前端小知识 Day 16 - 前端性能优化全流程指南 蓝婷儿 前端面试前端性能优化
    前端性能优化全流程指南（从加载到交互）目标概览：前端性能优化四大核心维度阶段优化目标加载阶段首屏速度、资源压缩、请求优化渲染阶段减少回流重绘、避免布局抖动交互阶段保持高帧率、避免卡顿持久运行阶段内存泄露处理、缓存命中策略一、加载性能优化（首屏速度为王）✅核心策略：资源体积优化JS/CSS/图片压缩（如gzip,brotli）Tree-shaking（去除无用代码）图片压缩（webp优先）合理拆包（
  • JAVA：常见 JSON 库的技术详解 拾荒的小海螺 JAVAjavajson开发语言
    1、简述在现代应用开发中，JSON（JavaScriptObjectNotation）已成为数据交换的标准格式。Java提供了多种方式将对象转换为JSON或从JSON转换为对象，常见的库包括Jackson、Gson和org.json。本文将介绍几种常用的JSON处理方式，并通过简单示例展示其应用。2、什么是JSON？JSON是一种轻量级的数据交换格式，使用键值对来表示数据。它易于人阅读和编写，同时
  • 使用 Vue3-Ace-Editor 在 Vue3 项目中集成代码编辑器 bigHead- 工具插件编辑器vue.js前端ace.jsvue3-ace-editor
    在现代Web开发中，集成一个功能强大的代码编辑器能够大大提高应用的互动性和用户体验。AceEditor是一个流行的开源代码编辑器，支持多种编程语言的语法高亮、代码自动补全等功能。而vue3-ace-editor是一个基于AceEditor的Vue组件，方便在Vue3项目中使用AceEditor。下面将介绍如何在Vue3项目中集成和使用vue3-ace-editor。一、安装vue3-ace-edi
  • TruenNAS配置 zz960226 truenas
    一.安装系统官网镜像下载https://www.truenas.com/truenas-community-edition/制作U盘镜像->安装系统开机启动项选择U盘启动——>选择安装系统Install——>选择安装硬盘安装——>完成选择重启——>命令界面配置或查看网络接口ip地址登录系统取消root登录WEB，localadministrator为truenas_admin可登录WEBUI二.系
  • Web Components 与 Shadow DOM 的样式隔离 海派程序猿 前端
    WebComponents和ShadowDOM：一墙之隔，天下太平？各位看官，咱们今天聊聊WebComponents里面一个挺有意思的概念——ShadowDOM。别被这名字吓到，什么“影子”，什么“领域”，听起来玄乎，其实它就是WebComponents实现样式隔离的一把利器。想象一下，你写了一个非常炫酷的日期选择器，用了自定义的颜色、字体，各种动画效果，简直完美！然后你把它扔到你的项目里，结果…
  • JS 与 CSS 的交互式开发：打造灵动的网页体验 维他奶糖61 pandas数据库前端
    在当今的网页开发领域，静态的网页早已无法满足用户日益增长的交互需求。JavaScript（JS）和层叠样式表（CSS）作为前端开发的两大支柱，它们的强强联合能够创造出令人惊叹的交互式网页效果。从简单的按钮点击变色，到复杂的动画过渡和动态页面布局变换，JS与CSS的交互式开发赋予了网页生命与活力。接下来，就让我们深入探索这一奇妙的领域。理解JS与CSS的分工与协作在开始交互式开发之前，我们需要明确J
  • 一文读懂Kubernetes之 K8s 概述 野熊佩骑 Linux系统应用运维kubernetes容器云原生docker微服务kubeletdevops
    目录一、Kubernetes集群组件(一)、控制平面组件(ControlPlaneComponents)1、kube-apiserver2、etcd3、kube-scheduler4、kube-controller-manager5、cloud-controller-manager(可选的)(二)、节点组件1、kubelet2、kube-proxy(可选的)3、容器运行时(Containerrun
  • GORM 更新操作：深入探索 Go 语言中的数据库记录修改 code--cat jvmoraclegolanggo数据库
    在Go语言的Web开发中，GORM是一个广泛使用的ORM(Object-RelationalMapping)框架。它提供了一种流畅的方式来处理数据库的交互，其中包括记录的更新操作。在本篇博客中，我们将一起探索GORM的更新操作，了解如何使用GORM来修改数据库中的记录。一、基础概念：更新操作的准备在GORM中，更新操作是通过Model接口的Update方法来实现的。这个方法接受一个指针，该指针指向
  • Day32 Web自动化进阶 lookout99 软件测试python自动化测试工具
    系列文章目录Day01软件测试基础总结Day02测试用例知识点总结（上）Day03测试用例知识点总结（下）Day04禅道-从安装到卸载Day05MySql的基础使用Day06MySql知识点总结Day07MySql知识点再总结与多表查询Day08redis的基础知识Day08VMware的安装、Linux系统安装和Linux基础命令Day09Linux常用命令总结Day10Linux环境部署和项目
  • day03 链表part01 hwt819 链表数据结构
    203.移除链表元素使用dummy辅助，使用cur来遍历cur遍历到要操作节点的前一个节点。classSolution{publicListNoderemoveElements(ListNodehead,intval){ListNodedummy=newListNode(0);dummy.next=head;ListNodecur=dummy;//循环到链表结束while(cur.next!=nu
  • js代码开发
    当然可以！为你说明在VSCode中进行JavaScript开发的环境配置，这是一个非常普遍且高效的组合。别担心，配置过程非常直接。JS开发环境的核心主要包括两大部分：运行时(Runtime)：即能够执行JavaScript代码的环境。开发工具(Tooling)：即让编码过程更高效、更不容易出错的工具，这部分主要通过VSCode扩展来实现。下面我为你分解成清晰的步骤，跟着做就行。第一步：安装Node
  • FineWeb数据集 frostmelody 人工智能
    FineWeb数据集根据您提供的文档链接，我将对FineWeb数据集进行全面解析。FineWeb是HuggingFace在2024年发布的一项革命性开源AI训练数据集，它通过提供高质量、大规模的数据，打破了AI训练数据的垄断局面。以下解析基于文档内容，分为几个核心部分：FineWeb的定义与规模、其重要性、主要突破点，以及制作过程的全貌。我会在相关部分嵌入文档中的图片，以增强理解。所有图片均来自文
  • HTML前端的自动化构建工具使用 前端视界 前端艺匠馆前端html自动化ai
    HTML前端的自动化构建工具使用：从手工作坊到智能工厂的蜕变关键词：前端构建工具、自动化流程、Gulp、Webpack、前端工程化摘要：本文将带你从前端开发的“手工作坊时代”出发，一步步理解为什么需要自动化构建工具，揭秘核心概念和工作原理，并通过实战案例教你用Gulp和Webpack搭建高效的前端工作流。无论你是刚入门的前端新手，还是想优化现有项目的开发者，都能在这里找到从“手动劳动”到“智能生产
  • Node.js 中的 JWT 认证：从生成到验证的完整指南 盛夏绽放 node.js有问必答后端
    文章目录Node.js中的JWT认证：从生成到验证的完整指南一、JWT是什么？为什么需要它？传统session与JWT对比二、JWT的结构解析三、Node.js中实现JWT1.安装jsonwebtoken包2.生成JWT3.验证JWT4.错误处理大全四、高级应用场景1.刷新令牌机制2.在不同路由中的验证中间件五、安全最佳实践六、常见问题解答七、完整示例代码结语主要内容包括：使用jsonwebtok
  • 用Pytorch训练手写签名模型并进行签名识别 TBM矩阵 #AI体系学习pytorch人工智能python
    整体思路收集至少两个人的手写签名图片，每个人至少20张使用Pytorch进行模型训练使用Flask搭建Web服务使用Html/JavaScript实现前端调用进行签名识别项目结构signature-systemdatatrainuser001001.png...user002001.png...templatesindex.htmlapp.pymodel.pytrain.py建模：model.py
  • Node.js特训专栏-实战进阶：7.Express模板引擎选型与使用 爱分享的程序员 Node.jsnode.js前端javascript
    欢迎来到Node.js实战专栏！在这里，每一行代码都是解锁高性能应用的钥匙，让我们一起开启Node.js的奇妙开发之旅！Node.js特训专栏主页专栏内容规划详情Express模板引擎选型与使用全解析：打造动态Web页面的利器在基于Express构建Web应用时，模板引擎是生成动态页面的核心组件。它允许开发者将数据与HTML结构分离，通过简单的语法将后端数据动态填充到页面中。市面上存在多种模板引擎
  • FlatBuffers（概念、原理及优势、在TS中的使用） 前端杂货铺 TodoList100个小知识FlatBuffersJSON序列化反序列化
    个人简介个人主页：前端杂货铺‍♂️学习方向：主攻前端方向，正逐渐往全干发展个人状态：研发工程师，现效力于中国工业软件事业人生格言：积跬步至千里，积小流成江海推荐学习：前端面试宝典100个小功能Vue2Vue3Vue2/3项目实战Node.js实战Three.js个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧文章目录介绍在Vue中使用FlatBuffersFlatBuff
  • 语法糖：编程中的甜蜜简化 (附 Vue 3 & Javascript 实战示例) Pu_Nine_9 前端学习javascriptvue.js前端语法糖
    什么是语法糖？语法糖（SyntacticSugar）是编程语言中一种特殊的语法结构，它不引入新的功能，而是提供一种更简洁、更易读的方式来表达已有功能。就像给咖啡加糖一样，它让代码"更甜"——更易于理解和编写。语法糖的四大核心价值可读性提升：让代码更接近自然语言表达开发效率：减少样板代码，专注业务逻辑错误预防：通过标准化模式减少人为失误维护便捷：简洁的代码结构更易于后期维护经典语法糖示例深度解析示例
  • Node.js 后端开发：与前端的完美结合
    Node.js后端开发：与前端的完美结合关键词：Node.js、后端开发、前后端分离、RESTfulAPI、Express、性能优化、全栈开发摘要：本文深入探讨Node.js在后端开发中的优势及其与前端的完美结合方式。我们将从Node.js的核心特性出发，分析其适合后端开发的原因，详细介绍如何构建高性能的RESTfulAPI服务，探讨前后端分离架构的最佳实践，并通过实际项目案例展示Node.js如
  • React用户交互事件
    在React中处理用户交互事件（如点击、输入、提交等）的方式与原生JavaScript类似，但有一些语法差异和最佳实践。以下是常见交互事件的处理方法及代码示例：一、基本事件处理（点击、输入等）1.点击事件（onClick）importReact,{useState}from'react';constButtonExample=()=>{const[count,setCount]=useState(
  • 前端React和Vue框架的区别
    React和Vue作为前端Web开发的两大主流框架，虽然都用于构建用户界面，但在设计理念、语法风格、生态系统等方面存在显著差异。以下从多个维度对比两者的核心区别，帮助你在技术选型时做出更合适的决策。一、设计理念与架构1.数据流控制React：强制单向数据流（One-WayDataFlow），状态变化只能通过父组件→子组件传递，如需反向通信（如子组件修改父组件状态），需通过回调函数实现。复杂应用中需
  • 【JS-6-ES6中的let和const】深入理解ES6中的let和const：块级作用域与变量声明的新范式 AllenBright #JSjavascriptes6开发语言
    在ES6(ECMAScript2015)之前，JavaScript中只有var一种变量声明方式，这导致了许多作用域相关的问题。ES6引入了let和const两种新的变量声明方式，彻底改变了JavaScript的作用域规则。本文将深入探讨let和const的特性、优势以及它们与var的区别。1.var的问题与ES6的解决方案1.1var的局限性在ES5及之前版本中，var声明存在几个主要问题：函数作
  • 让你彻底了解 JavaScript 解构赋值 前端 贾公子 前端基础javascript前端开发语言
    JavaScript解构赋值详解1.解构赋值简介解构赋值（Destructuringassignment）是JavaScriptES6引入的一种语法特性，它使得我们可以从数组和对象中提取值，并以一种更便捷的方式赋值给变量。这种语法可以大大减少代码量，提高代码的可读性和维护性。1.1为什么使用解构赋值？代码更简洁，减少重复的赋值语句提高代码可读性，使变量的来源更清晰方便地处理嵌套数据结构在函数参数中
  • 前端基础知识JavaScript系列 - 25（Javascript本地存储） 前端小白从0开始 前端javascript开发语言
    一、方式javaScript本地缓存的方法我们主要讲述以下四种：cookiesessionStoragelocalStorageindexedDBcookieCookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决HTTP无状态导致的问题作为一段一般不超过4KB的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制cooki
  • 实时股票API接口的调用方法 (原创教程) kk_stoper python开发语言javajavascript数据结构
    1.准备工作接口类型：实时综合行情接口支持品种：贵金属，商品期货，外汇，A股，港股，美股查询方式：HTTP,WebSocket申请密钥：https://infoway.io官方对接文档：https://infoway.readme.io/reference/ws-subscription2.获取股票清单这个接口用来查询股票的名单，比如我可以获取美股清单：importrequestsurl="htt
  • 前端vue2 报错不是一个函数 怎么解决？ 突然暴富的我 || 比较富的我 vue.js前端javascript
    检查函数定义确保报错的函数确实在对应的组件或模块中正确定义。函数需要在methods对象中声明，或在混合（mixins）、插件中正确引入。例如：methods:{myFunction(){//函数逻辑}}检查函数调用方式确认函数调用时没有拼写错误，且调用方式正确。在模板中调用需使用@click="myFunction"，在脚本中调用需使用this.myFunction()。注意避免直接调用未绑定的
  • JavaScript性能优化代码示例 突然暴富的我 || 比较富的我 javascript
    JavaScript性能优化实战大纲性能优化的核心目标减少加载时间、提升渲染效率、降低内存占用、优化交互响应代码层面的优化实践避免全局变量污染，使用局部变量和模块化开发减少DOM操作频率，批量处理DOM更新使用事件委托替代大量事件监听器优化循环结构，减少不必要的计算使用WebWorkers处理密集型计算任务内存管理策略及时清除不再使用的对象引用避免内存泄漏，注意闭包使用场景使用弱引用（WeakMa
  • 疏通经脉: Bridge 联通逻辑层和渲染层 风铃喵游 从零搭建小程序框架架构前端小程序架构
    本节概述经过前面两节的开发，我们已经完成了小程序逻辑线程和UI线程的启动引擎准备，这节开始，我们将完善nativebridge层的搭建，构建起逻辑线程和UI线程之间的桥梁。开始之前我们先来回顾一下逻辑引擎小节相关的流程图:一次小程序的启动过程，我们在创建好小程序的逻辑引擎worker和绘制引擎webview之后，从启动到渲染依次会经过:通知webview加载小程序资源，如果是首次启动，还需要通知逻
  • 戴尔笔记本win8系统改装win7系统 sophia天雪 win7戴尔改装系统win8
    戴尔win8 系统改装win7 系统详述 第一步：使用U盘制作虚拟光驱：         1）下载安装UltraISO：注册码可以在网上搜索。         2）启动UltraISO，点击“文件”—》“打开”按钮，打开已经准备好的ISO镜像文
  • BeanUtils.copyProperties使用笔记 bylijinnan java
    BeanUtils.copyProperties VS PropertyUtils.copyProperties 两者最大的区别是： BeanUtils.copyProperties会进行类型转换，而PropertyUtils.copyProperties不会。 既然进行了类型转换，那BeanUtils.copyProperties的速度比不上PropertyUtils.copyProp
  • MyEclipse中文乱码问题 0624chenhong MyEclipse
    一、设置新建常见文件的默认编码格式，也就是文件保存的格式。 在不对MyEclipse进行设置的时候，默认保存文件的编码，一般跟简体中文操作系统（如windows2000，windowsXP）的编码一致，即GBK。 在简体中文系统下，ANSI 编码代表 GBK编码;在日文操作系统下，ANSI 编码代表 JIS 编码。 Window-->Preferences-->General -
  • 发送邮件 不懂事的小屁孩 send email
    import org.apache.commons.mail.EmailAttachment; import org.apache.commons.mail.EmailException; import org.apache.commons.mail.HtmlEmail; import org.apache.commons.mail.MultiPartEmail;
  • 动画合集 换个号韩国红果果 htmlcss
    动画 指一种样式变为另一种样式 keyframes应当始终定义0 100 过程 1 transition  制作鼠标滑过图片时的放大效果 css .wrap{ width: 340px;height: 340px; position: absolute; top: 30%; left: 20%; overflow: hidden; bor
  • 网络最常见的攻击方式竟然是SQL注入 蓝儿唯美 sql注入
    NTT研究表明，尽管SQL注入（SQLi）型攻击记录详尽且为人熟知，但目前网络应用程序仍然是SQLi攻击的重灾区。 信息安全和风险管理公司NTTCom Security发布的《2015全球智能威胁风险报告》表明，目前黑客攻击网络应用程序方式中最流行的，要数SQLi攻击。报告对去年发生的60亿攻击 行为进行分析，指出SQLi攻击是最常见的网络应用程序攻击方式。全球网络应用程序攻击中，SQLi攻击占
  • java笔记2 a-john java
    类的封装： 1，java中，对象就是一个封装体。封装是把对象的属性和服务结合成一个独立的的单位。并尽可能隐藏对象的内部细节（尤其是私有数据） 2，目的：使对象以外的部分不能随意存取对象的内部数据（如属性），从而使软件错误能够局部化，减少差错和排错的难度。 3，简单来说，“隐藏属性、方法或实现细节的过程”称为——封装。 4，封装的特性：       4.1设置
  • [Andengine]Error：can't creat bitmap form path “gfx/xxx.xxx” aijuans 学习Android遇到的错误
            最开始遇到这个错误是很早以前了，以前也没注意，只当是一个不理解的bug，因为所有的texture，textureregion都没有问题，但是就是提示错误。 昨天和美工要图片，本来是要背景透明的png格式，可是她却给了我一个jpg的。说明了之后她说没法改，因为没有png这个保存选项。 我就看了一下，和她要了psd的文件，还好我有一点
  • 自己写的一个繁体到简体的转换程序 asialee java转换繁体filter简体
              今天调研一个任务，基于java的filter实现繁体到简体的转换，于是写了一个demo，给各位博友奉上，欢迎批评指正。          实现的思路是重载request的调取参数的几个方法，然后做下转换。          
  • android意图和意图监听器技术 百合不是茶 android显示意图隐式意图意图监听器
    Intent是在activity之间传递数据;Intent的传递分为显示传递和隐式传递   显式意图：调用Intent.setComponent() 或 Intent.setClassName() 或 Intent.setClass()方法明确指定了组件名的Intent为显式意图，显式意图明确指定了Intent应该传递给哪个组件。   隐式意图;不指明调用的名称,根据设
  • spring3中新增的@value注解 bijian1013 javaspring@Value
            在spring 3.0中，可以通过使用@value，对一些如xxx.properties文件中的文件，进行键值对的注入，例子如下： 1.首先在applicationContext.xml中加入：  <beans xmlns="http://www.springframework.
  • Jboss启用CXF日志 sunjing logjbossCXF
    1. 在standalone.xml配置文件中添加system-properties：     <system-properties>        <property name="org.apache.cxf.logging.enabled" value=&
  • 【Hadoop三】Centos7_x86_64部署Hadoop集群之编译Hadoop源代码 bit1129 centos
      编译必需的软件 Firebugs3.0.0 Maven3.2.3 Ant JDK1.7.0_67 protobuf-2.5.0 Hadoop 2.5.2源码包       Firebugs3.0.0   http://sourceforge.jp/projects/sfnet_findbug
  • struts2验证框架的使用和扩展 白糖_ 框架xmlbeanstruts正则表达式
    struts2能够对前台提交的表单数据进行输入有效性校验，通常有两种方式： 1、在Action类中通过validatexx方法验证，这种方式很简单，在此不再赘述； 2、通过编写xx-validation.xml文件执行表单验证，当用户提交表单请求后，struts会优先执行xml文件，如果校验不通过是不会让请求访问指定action的。 本文介绍一下struts2通过xml文件进行校验的方法并说
  • 记录-感悟 braveCS 感悟
    再翻翻以前写的感悟，有时会发现自己很幼稚，也会让自己找回初心。   2015-1-11 1. 能在工作之余学习感兴趣的东西已经很幸福了； 2. 要改变自己，不能这样一直在原来区域，要突破安全区舒适区，才能提高自己，往好的方面发展； 3. 多反省多思考；要会用工具，而不是变成工具的奴隶； 4. 一天内集中一个定长时间段看最新资讯和偏流式博
  • 编程之美-数组中最长递增子序列 bylijinnan 编程之美
    import java.util.Arrays; import java.util.Random; public class LongestAccendingSubSequence { /** * 编程之美 数组中最长递增子序列 * 书上的解法容易理解 * 另一方法书上没有提到的是，可以将数组排序（由小到大）得到新的数组， * 然后求排序后的数组与原数
  • 读书笔记5 chengxuyuancsdn 重复提交struts2的token验证
    1、重复提交 2、struts2的token验证 3、用response返回xml时的注意 1、重复提交 (1)应用场景 (1-1)点击提交按钮两次。 (1-2)使用浏览器后退按钮重复之前的操作，导致重复提交表单。 (1-3)刷新页面 (1-4)使用浏览器历史记录重复提交表单。 (1-5)浏览器重复的 HTTP 请求。 (2)解决方法 (2-1)禁掉提交按钮 (2-2)
  • [时空与探索]全球联合进行第二次费城实验的可能性 comsci
         二次世界大战前后,由爱因斯坦参加的一次在海军舰艇上进行的物理学实验 -费城实验   至今给我们大家留下很多迷团.....      关于费城实验的详细过程,大家可以在网络上搜索一下,我这里就不详细描述了      在这里,我的意思是,现在
  • easy connect 之 ORA-12154: TNS: 无法解析指定的连接标识符 daizj oracleORA-12154
    用easy connect连接出现“tns无法解析指定的连接标示符”的错误，如下： C:\Users\Administrator>sqlplus username/[email protected]:1521/orcl SQL*Plus: Release 10.2.0.1.0 – Production on 星期一 5月 21 18:16:20 2012 Copyright (c) 198
  • 简单排序:归并排序 dieslrae 归并排序
    public void mergeSort(int[] array){ int temp = array.length/2; if(temp == 0){ return; } int[] a = new int[temp]; int
  • C语言中字符串的\0和空格 dcj3sjt126com c
       \0 为字符串结束符，比如说：                       abcd (空格)cdefg； 存入数组时，空格作为一个字符占有一个字节的空间，我们
  • 解决Composer国内速度慢的办法 dcj3sjt126com Composer
    用法： 有两种方式启用本镜像服务： 1 将以下配置信息添加到 Composer 的配置文件 config.json 中（系统全局配置）。见“例1” 2 将以下配置信息添加到你的项目的 composer.json 文件中（针对单个项目配置）。见“例2” 为了避免安装包的时候都要执行两次查询，切记要添加禁用 packagist 的设置，如下 1 2 3 4 5
  • 高效可伸缩的结果缓存 shuizhaosi888 高效可伸缩的结果缓存
    /** * 要执行的算法，返回结果v */ public interface Computable<A, V> { public V comput(final A arg); }   /** * 用于缓存数据 */ public class Memoizer<A, V> implements Computable<A,
  • 三点定位的算法 haoningabc c算法
    三点定位， 已知a,b,c三个顶点的x,y坐标 和三个点都z坐标的距离，la，lb,lc 求z点的坐标 原理就是围绕a,b,c 三个点画圆，三个圆焦点的部分就是所求 但是，由于三个点的距离可能不准，不一定会有结果， 所以是三个圆环的焦点，环的宽度开始为0，没有取到则加1 运行 gcc -lm test.c test.c代码如下 #include "stdi
  • epoll使用详解 jimmee clinux服务端编程epoll
    epoll - I/O event notification facility在linux的网络编程中，很长的时间都在使用select来做事件触发。在linux新的内核中，有了一种替换它的机制，就是epoll。相比于select，epoll最大的好处在于它不会随着监听fd数目的增长而降低效率。因为在内核中的select实现中，它是采用轮询来处理的，轮询的fd数目越多，自然耗时越多。并且，在linu
  • Hibernate对Enum的映射的基本使用方法 linzx0212 enumHibernate
      枚举   /** * 性别枚举 */ public enum Gender { MALE(0), FEMALE(1), OTHER(2); private Gender(int i) { this.i = i; } private int i; public int getI
  • 第10章 高级事件（下） onestopweb 事件
    index.html <!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/
  • 孙子兵法 roadrunners 孙子兵法
    始计第一 孙子曰： 兵者，国之大事，死生之地，存亡之道，不可不察也。 故经之以五事，校之以计，而索其情：一曰道，二曰天，三曰地，四曰将，五 曰法。道者，令民于上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑 、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法 者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校 之以计，而索其情，曰
  • MySQL双向复制 tomcat_oracle mysql
    本文包括: 主机配置 从机配置 建立主-从复制 建立双向复制   背景 按照以下简单的步骤: 参考一下： 在机器A配置主机(192.168.1.30) 在机器B配置从机(192.168.1.29) 我们可以使用下面的步骤来实现这一点   步骤1：机器A设置主机 在主机中打开配置文件 ,
  • zoj 3822 Domination(dp) 阿尔萨斯 Mina
    题目链接：zoj 3822 Domination 题目大意：给定一个N∗M的棋盘，每次任选一个位置放置一枚棋子，直到每行每列上都至少有一枚棋子，问放置棋子个数的期望。 解题思路：大白书上概率那一张有一道类似的题目，但是因为时间比较久了，还是稍微想了一下。dp[i][j][k]表示i行j列上均有至少一枚棋子，并且消耗k步的概率（k≤i∗j）,因为放置在i+1~n上等价与放在i+1行上，同理
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他