event

jquery知识点复习

為{幸葍}努か 提交于 2020-02-08 01:01:17
一、 基本概念 jQuery 简介 jQuery 是一个基于 javascript 的框架。它提供了丰富的选择器和大量的函数,可以方便的实现网页中各种动态的效果。迄今为止,已经有大量的 jquery 插件和基于 jQuery 的 UI 框架( miniui 、 easyui 、 ligerui )。 jQuery 的宗旨是: write less,do more! 文档加载完毕函数 常规形式:$(document).ready(function(){… …}); 简写形式:$(function(){… …}); jquery 对象和 js 对象的相互转化 jquery 对象不等同于 js 对象 ! js 对象的属性和方法 ,jquery 对象不能调用 ;jquery 对象的属性和方法, js 对象也不能调用。 js转jquery : $(js 对象 ) jquery转js : $( “#box1”).get(0) 或者 $(“.box”)[0] 二、 选择器 jquery 的基石就是选择, jquery 提供了大量的选择器。 建议在不同的业务场景下使用不同的选择器。 注意:通过任何一个选择器筛选到的结果都是一个数组,所以要判断通过选择器是否筛选到了元素,可以通过 length 属性进行判断。 基本选择器 n ID 选择器 $(“#ID 值 ”) 例如: $( “#txt1”) n

JS阻止事件冒泡的3种方法之间的不同

你。 提交于 2020-02-07 09:50:13
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs"Inherits="Default5"%><!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"><head runat="server"><title>Porschev---Jquery 事件冒泡</title><script src="jquery-1.3.2-vsdoc.js" type="text/javascript"></script>

js实现div拖动

不羁岁月 提交于 2020-02-07 08:37:41
这里对于鼠标经过input时,使得拖动失效,因此通过对input绑定onmouseover事件,获取鼠标经过的标签name var inputName; boxid.onmouseover = function (event) { inputName = event.target.name;//鼠标每经过一个元素,获取name } 获取所需拖动的div var div=document.getElementById("divId"); 对div绑定点击事件,在绑定鼠标移动事件时,判断鼠标经过的元素是否为当前所需要排除的input元素(这里通过设置元素的name进行判断) draggableBox(div, "name") function draggableBox(boxid, name) {//拖动事件 var draggable = true; var inputName; boxid.onmouseover = function (event) { inputName = event.target.name;//鼠标每经过一个元素,就把该元素赋值给变量el } boxid.onmousedown = function (evt) { var oEvent = evt || event; //获取事件对象,兼容写法 var disX = oEvent.clientX -

商品图片放大镜效果

安稳与你 提交于 2020-02-07 04:12:06
京东商品页面中的放大镜效果实现 技术::html+ css + js 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>商品图片放大镜</title> <style> * { padding: 0; margin: 0; } img { vertical-align: top; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { position: absolute; width: 450px; height: 450px; top: 0; left: 355px; border: 1px solid #ccc; overflow: hidden; display: none; } .small { position: relative; } .mask { width: 100px; height: 100px; background-color: rgba(255, 255, 0, 0.4); position: absolute; top: 0; left: 0; cursor: move; display:

jQuery事件处理

强颜欢笑 提交于 2020-02-07 01:42:47
浏览器的事件模型 DOM第0级事件模型 Event实例 他的属性提供了关于当前正被处理的已触发事件的大量信息。这包括一些细节,比如在哪个元素上触发的事件、鼠标事件的坐标以及键盘事件中单击了哪个键。 事件冒泡 当触发 dom 树中一个元素上的事件时,事件模型会检查这个元素是否已经创建了特定的事件处理器。如果是,就会调用已创建的事件处理器。然后,事件模型会检查目标元素的父元素,看其是否已经为此事件类型创建了处理器。如果是,就调用已创建的处理器,之后检查它的父元素,以及父元素的父元素,以此类推,直到 dom 树的顶部。 DOM第2级事件模型 IE事件模型 jQuery事件模型 使用jQuery绑定事件处理器 <html> <head> <title>jQuery Events Example</title> <script type="text/javascript" src="../scripts/jquery-1.7.1.js"></script> <script type="text/javascript"> $(function () { $('#example') .bind('click', function (event) { alert('BOOM once!'); }) .bind('click', function (event) { alert('BOOM

解决org.hibernate.HibernateException: identifier of an instance of com.ahd.entity.Order was altered from2 to 0

允我心安 提交于 2020-02-06 22:40:21
错误信息 严重: Servlet.service() for servlet [springmvc] in context with path [/order] threw exception [Request processing failed; nested exception is org.hibernate.HibernateException: identifier of an instance of com.ahd.entity.Order was altered from 6 to 0] with root cause org.hibernate.HibernateException: identifier of an instance of com.ahd.entity.Order was altered from 6 to 0 at org.hibernate.event.def.DefaultFlushEntityEventListener.checkId(DefaultFlushEntityEventListener.java:85) at org.hibernate.event.def.DefaultFlushEntityEventListener.getValues(DefaultFlushEntityEventListener.java:190) at

微信小程序开发笔记⑦——form组件、表单控件、navigator(跳转)组件和camera(相机)组件

☆樱花仙子☆ 提交于 2020-02-06 01:03:47
form组件 官方描述 https://developers.weixin.qq.com/miniprogram/dev/component/form.html 下面是一个简单的表单 < form bindsubmit = " formsubmit " bindreset = " formreset " > < input name = " inputValue " placeholder = " 请输入 " > </ input > < button form-type = " submit " > 提交 </ button > < button form-type = " reset " > 重写 </ button > </ form > formsubmit : function ( event ) { console . log ( event ) console . log ( event . detail . value . inputValue ) } , 提交事件触发,可以发现这个是根据input的name属性取的值 表单控件 表单中存在许多控件帮助我们实现多种形式的表单填写。 官方描述 https://developers.weixin.qq.com/miniprogram/dev/component/button.html 下面是简单的示例

js基础知识点总结

房东的猫 提交于 2020-02-05 17:31:12
如何在一个网站或者一个页面,去书写你的js代码: 1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs) 2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性 HTML:属性.HTML属性="值"; CSS:对象.style.CSS属性="值"; class和float 1.class:className 2.float:cssFloat 获取对象 id:document.getElementById("id 名") 事件:用户的动作 鼠标事件: onclick:点击 onmouseover: 鼠标放上 onmouseout:鼠标离开 ondbclick:双击事件 onmousedown:鼠标按下 onmouseup:鼠标抬起 onmousemove鼠标移动 表单事件: onfocus:获取焦点 onblur:失去焦点 onsubmit:提交事件 onchange:当发生改变的时候 onreset:重置事件 键盘事件: onkeyup:键盘抬起 onkeydown:键盘按下 onkeypress:键盘按键一次 窗口时间:onload事件 页面加载完成之后立刻执行的事件 两种方式: 1.

js的event对象

99封情书 提交于 2020-02-05 07:50:47
一个完整的事件系统,通常存在以下三个角色: 事件对象,用于储存事件的状态。 event || window.event 事件源对象,当前事件在操作的对象,如元素节点,文档对象,window对象,XMLHttpRequest对象等。 event.target || window.event.srcElement 事件监听器,当一个事件源生成一个事件对象时,它会调用相应的回调函数进行操作。在IE中,事件对象恒为全局属性window.event的分身。 1. event事件对象 1.1 event代表事件的状态。例如触发event对象的元素、鼠标的位置及状态、按下的键等等; 1.2. event对象只在事件发生的过程中才有效。 firefox里的event跟IE里的不同,IE里的是全局变量,随时可用;firefox里的要用参数引导才能用,是运行时的临时变量。 事件对象:IE/Opera:window.event,Firefox:event; 而事件源对象,IE:window.event.srcElement,Firefox:event.target,Opera中两者都可用。 2.事件流 2.1事件冒泡 意思就是说,假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡。 2.2事件捕获

js基础知识点总结

心已入冬 提交于 2020-02-05 07:32:09
js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码: 1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs) 2.js的规划():避免全局变量和方法(命名空间,闭包,面向对象),模块化(seaJs,requireJs) 常用内部类:Data Array Math String HTML属性,CSS属性 HTML:属性.HTML属性="值"; CSS:对象.style.CSS属性="值"; class和float 1.class:className 2.float:cssFloat 获取对象 id:document.getElementById("id 名") 事件:用户的动作 鼠标事件: onclick:点击 onmouseover: 鼠标放上 onmouseout:鼠标离开 ondbclick:双击事件 onmousedown:鼠标按下 onmouseup:鼠标抬起 onmousemove鼠标移动 表单事件: onfocus:获取焦点 onblur:失去焦点 onsubmit:提交事件 onchange:当发生改变的时候 onreset:重置事件 键盘事件: onkeyup:键盘抬起 onkeydown:键盘按下 onkeypress:键盘按键一次 窗口时间:onload事件 页面加载完成之后立刻执行的事件