jq hover 动态绑定

jQuery中事情的动态绑定

在jQuery的开发过程中,我们往往需要处理各种事件,例如click(),hover()等.在jQuery的API中,我们可以使用不同的方法来将这些事件绑定到特定的元素中.今天这篇文章中,我们将要介绍如何使用bind(),on()方法来绑定特定的事件,什么情况下使用,什么情况下不适用它们.希望能够帮助大家更好的了解和使用jQuery的时间处理方法. 一.bind()方法使用较早版本jQuery的教程或者应用中,我们往往使用bind()方法来将事件绑定到特定的元素上,如下: <section id

jq hover方法用法例子

鼠标经过导航中li时，一个彩色模块跟着鼠标移动

1.鼠标经过导航中li时,一个活动的li跟随鼠标移动,最终移动到鼠标的停留的位置.(如需鼠标离开后让活动的li回到初始位置,则用jq hover事件,当鼠标离开时,给活动的li设置left是0) 2.鼠标经过div时,图片放大,layer层出现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title&g

easyui源码翻译1.32--Calendar(日历)

前言前几天加班比较忙未能及时更新翻译的今天多发布几篇..下载该插件翻译源码日历控件显示一个月的日历,允许用户选择日期和移动到下一个或上一个月.默认情况下,一周的第一天是周日.它可以通过设置'firstDay'属性的值来更改设置源码 /** * jQuery EasyUI 1.3.2 * *翻译:qq 1364386878 */ (function ($) { //调整日历大小 function _resize(jq) { var opts = $.data(jq, "calendar&

Raphael Js矢量库API简介：

Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQTouch,以及SVG.VML处理库Raphael合并,形成新的库Sencha.主要应对HTML5等新趋势,加强丰富图形和触摸屏功能的重要举措. Raphael Javascript 的创始人 Dmitry Baranovskiy也加入ExtJS. ExtJS 是一个强大的Javascript 框架,

05: jQuery

目录: jQuery参考网站 W3school 1.1 JQuery作用 1.2 jQuery与DOM比较与相互转换 1.3 jQuery选择器 1.4 jQuery筛选与过滤 1.5 jQuery表单 1.6 补充 JQuery常用查找方法补充 1.7 jQuery文本与属性操作 1.8 CSS操作 1.9 文档处理 1.10 JQuery事件绑定的四种方式 1.11 jQuery使用 1.1 JQuery作用返回顶部简介:jQuery库为Web脚本编程提供了通用的抽象层,使得它几乎适用

响应式移动端去除css的hover和jq的hover还有input在苹果下的默认样式

去除css的hover: /*直接给body添加ontouchstart*/ <body ontouchstart> 去除jq的hover: var winW01 = $(window).width();/*获取屏幕宽度*/ /*判断屏幕宽度下雨880让元素去除绑定的hover事件*/ if(winW01<=880){ $(".menu3").unbind('mouseenter').unbind('mouseleave'); } 去除safari浏览器下input的

【JQ】jq动态绑定事件.on()、解绑事件off()

#JQ 绑定与解绑事件的方法的历史演变 1. jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM元素并不能响应之前绑定的事件!解绑事件使用.unbind()方法: 旧版本的处理方法是使用.live()方法来代替事件绑定.bind(),使得绑定的事件能适用脚本创建的新元素,从而实现事件的动态绑定:解绑事件使用.unlive()方法: <html> <head> <script

jq修改hover样式

$("#resTree").hover(function(){ $(this).css("background-color","yellow");//hover时效果 },function(){ $(this)css("background-color","pink");//非 hover时效果 }); 可以参考w3c里的使用 http://www.runoob.com/jquery/event-hover

jquery动态绑定hover没有效果

在JQuery中,hover()函数本身是对 mouseenter && mouseleave 的封装,然而在原生event中,并没有hover这一事件,所以在传递参数hover时,并不会有任何的效果. 所以将代码换成这样 $(obj).on("mouseover mouseout",function(event){ if(event.type == "mouseover"){ //鼠标悬浮 }else if(event.type == "

JQ取消hover事件

$('a').unbind('mouseenter').unbind('mouseleave');

js,jq,css选择器

js获取节点: var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得s的下一个兄弟节点 var ps=s.previousSbiling; //得到s的上一个兄弟节点 var fc=s.firstChild; //获得s的第一个子节点 var lc=s.lastChile; //获得s的最后一个子节点 css选择器: 基础选择器 * 通用元素选择器,匹配页面任

jq仿淘宝放大镜插件

html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" height="400"> <div id="dow"></div> </div> //大图 <div id="bigPhotoBox"></div> css部分 #photoBox {

jq倾斜的动画导航菜单

效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器完整源代码,保存到HTML文件打开也可查看效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

【笔记】css hover 伪类控制其他元素

最近在模仿一个网站的项目当中有一个效果需要利用到hover效果因为不太想写jq脚本所以百度了一下css hover的运用发现原来hover也可以控制其他元素的变化的但是这有一个要求就是添加hover伪类的元素必须是被改变的元素的父类所以,看看一下代码你就会明白的了 html代码 <body> <div class="hover"> <a href="#">滑动</a> <img src="im

ie6对hover兼容性问题的解决：

ie6对hover兼容性问题的解决: 1,在body里添加以下样式: behavior:url(../scripts/csshover.htc); csshover.htc可直接在网上下载 2,js解决判断是否为ie6 window.onload=function(){ var isIE=!!window.ActiveXobject: var is IE6=isIE&&XMLHttpRequest; if(isIE6){} } 3,jq解决 $(function(){ if($.brow

html/京东项目/京东网页高仿/js/jq/css/java web/

登录部分HTML+CSS: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>京东-欢迎登录</title> <link rel="shortcut icon" href="favicon.ico"/> <style type=

用JQ仿造礼德财富网的图片查看器

现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互.滥用插件,像今天要仿造的图片查看器,礼德财富也是直接套用的一款叫fancybox的插件: 个人觉得一名合格的前端还是要少用外部插件,减少代码冗余,也方便自己维护(毕竟自己的代码自己一清二楚). 今天咱用JQ来做个属于我们自己的图片查看器,刚好我项目也要用到. 还是老样子,大家可以到我的Github

jQ插件--时间线插件和拖拽API

这个时间轴是工作上用到的,自己写了一个, qq空间有时间轴的控件, 百度文库也有时间轴的控件: 百度的时间轴大概是这样的: 用户点击对应的锚链接, 那个三角会滚动, 然后左侧的界面也会滚动: 实际的效果如下图,用户点击左侧的按钮或者右侧的input,滚动条都会主动滚动, 这里有个小技巧就是用after和before伪类生成三角形, 用户点击按钮的滚动效果直接用jq的animate方法: 点击查看DEMO:打开 <!-- //设置内容; window.onWebMessage( '{"ty

jq图片切换特效

首先引入js,内容如下: (function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option);return this.each(function(){$('.'+option.container,$(this)).children().wrapAll('<div class="slides_control"/>');var elem=$(this),control=$

hover事件优化（延时操作）

JQ的hover事件拓展编写原因:当鼠标滑过某个带有hover事件的元素,但是仅仅是路过,并不是希望查看此部分内容的时候,效果不理想 $.fn.extend({ delayed : function(fn1,fn2,time){ time = time || 150 var _this = this; _this.delayedTimer = null; return $(this).mouseenter(function(){ clearTimeout(_this.delayedTimer)

jq hover 动态绑定

热门专题