jquery事件

关于jquery某一元素重复绑定的问题

故事扮演 提交于 2020-01-26 14:40:04
某天晚上写代码的时候,突然出了bug,想了很久都不知道问题出在哪里(其实是很简单的问题,但由于我还是个菜鸟,所以不知道)。几经周折,这中间的过程就不提了,终于让我在快崩溃的时候,发现了原因。原来是因为同一jquery元素可以重复绑定,当使用了嵌套绑定的时候,就容易出错。如代码: $('.test').bind('click',function(){ $('.last').bind('click',function(){ alert('nihao'); }); }); <button class="test">上一级绑定</button> <button class="last">下一级绑定</button> 当我点击第一个button时,再点击第二个button,是没有问题的。可如果在页面刷新之前,点击了多次(n次)第一个button的话,此时再点击第二个button,就出问题了,就会弹出(n个)alert对话框。 解决办法:在会重复绑定的元素上执行解绑,即unbind(),如: $('.test').bind('click',function(){ $('.last').unbind('click').bind('click',function(){ alert('nihao'); }); }); 这样,不管点击多少次第一个button,再点击第二个时

juery笔记1

落花浮王杯 提交于 2020-01-26 03:35:32
1. $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数,隐藏 id="test" 的元素。 $("p").hide() 演示 jQuery hide() 函数,隐藏所有 <p> 元素。 $(".test").hide() 演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。 2.请注意,<script> 标签应该位于页面的 <head> 部分。 3. 如果不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。 谷歌和微软的服务器都存有 jQuery 。 如需从谷歌或微软引用 jQuery,可使用以下代码之一: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script> </head> or <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script> </head> 4. jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。 基础语法是:

使用jquery和使用框架的区别

99封情书 提交于 2020-01-26 03:18:09
<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <meta http-equiv="X-UA-Compatible" content="ie=edge">   <title>Document</title> </head> <body>   <div>     <input type="text" name="" id="txt-title"/>     <button id="btn-submit">submit</button>   </div>   <div>     <ul id="ul-list"></ul>   </div>   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>   <script>     var $txtTitle = $('#txt-title');     var $ulList = $('#ul-list');     var $btnSubmit = $('#btn-submit');     $btnSubmit.click

2015年7月之15个jQuery插件

房东的猫 提交于 2020-01-26 00:26:19
Hello,一个激动人心的好消息,现在我为大家整理最近7月发布的jQuery插件。 如果你熟悉任何下面列出的插件,请分享你的反馈与我们的读者,或如果你知道哪一个我们没有收录,那么请与我们分享在下面的评论部分。 我们希望你会发现这个列表下面这个列表对您很有用。 1. 固定表头 固定表头是一个jQuery塞进任何有效的表创建固定表头表标记了。 2. Stackgrid.adem.js stackgrid.adem.js 是一个非常快速和简单的JavaScript插件,帮助你创建一个动态级联网格 3. MakeFixed.js MakeFixed.js 是一个jQuery插件来动态地设置元素被固定在滚动。它的重量轻,并允许回调函数。 4. jPicture jPicture 是一个jQuery插件加载图片的右视图。jpicture加载图片的版本只有最合适的图片为视图页面上显示。 5. jQuery Scrollstop ScrollStop 是一个jQuery插件,开启两事件窗口滚动时的启动和停止:scrollstart和scrollstop。 6. jQuery Bloodforge 烟雾效果 jQuery Bloodforge 这个插件可以让你页面上的HTML元素添加烟雾效果的背景。 7. Combo Select Combo Select 是一个jQuery插件

day01 jQuery 介绍 jQuery的操作 事件三步走 入口函数 动画

佐手、 提交于 2020-01-25 23:29:44
day01 jQuery 介绍 jQuery的操作 事件三步走 入口函数 动画 一.jQuery的介绍 1.jQuery的概念 全称: JavaScript query 简称: jq,是库,对部分js功能的封装: 封装了入口函数带来的问题, 兼容性问题, DOM操作, 事件, ajax等 js的思想: 写的多做的少, 兼容性也没做 jQuery的核心思想: write less, do more 使用时: jQuery中不要出现js的操作, 不通用 2.npm 包管理器 (node package manager) 这个工具在哪: 前端的后台语言nodesjs会带来npm 使用npm安装包: npm install jquery -S 3.jquery的下载安装 下载地址: 官网下载 https://jquery.com/ 下载地址: 也可在 https://www.bootcdn.cn/ 下载 文件说明: jquery.js 未压缩的, 我们可以看懂的,开发环境的 几百KB jquery.min.js 压缩过的, 混淆过的,生产环境的 几十KB 二.jQuery的操作 1.jQuery对DOM的操作 1.1.jquery.js文件解析 文件开头定义jQuery: 是一个函数对象 文件末尾: 把jQuery赋值给了 $ 变量,方便使用时书写 var version = "3.4.6

jQuery 事件方法

独自空忆成欢 提交于 2020-01-25 10:37:33
事件方法触发器或添加一个函数到被选元素的事件处理程序。 下面的表格列出了所有用于处理事件的 jQuery 方法。 方法 描述 bind() 向匹配元素附加一个或更多事件处理器 blur() 触发、或将函数绑定到指定元素的 blur 事件 change() 触发、或将函数绑定到指定元素的 change 事件 click() 触发、或将函数绑定到指定元素的 click 事件 dblclick() 触发、或将函数绑定到指定元素的 double click 事件 delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die() 移除所有通过 live() 函数添加的事件处理程序。 error() 触发、或将函数绑定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault()。 event.pageX 相对于文档左边缘的鼠标位置。 event.pageY 相对于文档上边缘的鼠标位置。 event.preventDefault() 阻止事件的默认动作。 event.result 包含由被指定事件触发的事件处理器返回的最后一个值。 event.target 触发该事件的 DOM 元素。 event.timeStamp 该属性返回从 1970 年 1 月 1

纯净版crud

删除回忆录丶 提交于 2020-01-25 10:00:45
首先给出数据库表,很简单只是一张后台数据字典表 分页存储过程 USE [ECLProduct] GO /****** Object: StoredProcedure [dbo].[UP_GetRecordByPage] Script Date: 07/06/2013 12:04:55 ******/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: <Author,,Name> -- Create date: <Create Date,,> -- Description: <Description,,> -- ============================================= ALTER PROCEDURE [dbo].[UP_GetRecordByPage] -- Add the parameters for the stored procedure here @tblName varchar(255), ------表名 @fldName varchar(255), -- 排序的字段名 @PageSize int , @PageIndex int , @IsReCount bit, --

自动完成插件 autocomplete

空扰寡人 提交于 2020-01-25 09:24:54
四.自动完成插件 autocomplete autocomplete插件能帮助我们实现类似于Google Suggest的效果: 插件首页: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ 插件文档: http://docs.jquery.com/Plugins/Autocomplete 配置说明: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#toptions 1.应用实例 本实例演示的是使用autocomplete完成对输入城市的自动提示效果,如图: 实例代码: <% @ Page Language = " C# " %> <! 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 id ="Head1" runat ="server" > < title > jQuery PlugIn - 自动完成插件实例 AutoComplete </

jquery事件重复绑定的几种解决方法 (二)

橙三吉。 提交于 2020-01-24 08:57:10
防止事件重复绑定共有4种方法: bind()、unbind()方法 live()、die()方法 off()、on()方法 one()方法    一、bind()、unbind()方法    bind();绑定事件   为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。   从某种角度上讲,bind("click",function(){})与click(function(){})是等价的。    unbind();移除通过bind()方法添加的事件   不仅仅对于bind()方法有效,它对于click()方法同样有效。 $("#btn1").unbind("click").bind("click",function(){   alert("我是btn1!");   });  $("#btn1").unbind().click(function(){ alert("我是btn1!"); }); 二、live()、die()方法    live();   jQuery1.3增加了一个live()方法,给所有当前以及将来会匹配的元素绑定一个事件处理函数。   支持:click,dblclick, mousedown, mouseup等。   不支持 :blur, focus, mouseenter, mouseleave, change, submit。   live(

jQuery设计思想

老子叫甜甜 提交于 2020-01-24 06:41:24
【目录】   一、选择网页元素   二、改变结果集   三、链式操作   四、元素的操作:取值和赋值   五、元素的操作:移动   六、元素的操作:复制、删除和创建   七、工具方法   八、事件操作   九、特殊效果 【正文】 一、选择网页元素 jQuery的基本设计思想和主要用法,就是 "选择某个网页元素,然后对其进行某种操作" 。这是它区别于其他Javascript库的根本特点。 使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。 选择表达式可以是 CSS选择器 :   $(document) //选择整个文档对象   $('#myId') //选择ID为myId的网页元素   $('div.myClass') // 选择class为myClass的div元素   $('input[name=first]') // 选择name属性等于first的input元素 也可以是jQuery 特有的表达式 :   $('a:first') //选择网页中第一个a元素   $('tr:odd') //选择表格的奇数行   $('#myForm :input') // 选择表单中的input元素   $('div:visible') //选择可见的div元素   $('div:gt(2)') // 选择所有的div元素