精华内容
下载资源
问答
  • JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + ....

    JQuery hover toggle事件使用:

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <!DOCTYPE html>
    <html>
    <head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>b index</title>
    <link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>
    <style type="text/css">
        .s1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .s2{
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
    </head>
    <body style="margin:1px;">
        <div id="div001">div001</div>
        <div id='div002'>div002</div>
        <div id='div003'>div003</div>
        <div>
            <button id="btn001">click me to div003 toggle </button>
            <button id="btn002">click me to div003 toggle(fn1,fn2,fn3) </button>
        </div>
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
        <script type="text/javascript" src="b/js/bootstrap.js"></script>
        <script type="text/javascript" src="js/index038.js"></script>
    </body>
    </html>
    $(function() {
        $('#div001').hover(div001in, div001out);
        // 这种情况下,mouseenter和mouseleave事件都是执行这个div001in函数;
        $('#div002').hover(div001in);
        $('#btn001').click(btn001Click);
        $('#btn002').click(btn002Click);
    });
    function div001in(e) {
        $(this).addClass('s1');
        console.log(e.target.id + "---" + e.type);
    }
    function div001out() {
        $(this).removeClass();
    }
    function btn001Click() {
        $('#div003').toggle();
    }
    function btn002Click() {
        // 只能传入一个函数,传入两个以上就会报错;可以使用'fast'参数,如果不使用,默认会是slow;
        // 当前效果是显示/隐藏之后执行function函数;
        $('#div003').toggle('fast', function() {
            console.log('fn1');
        });
    }

     

    转载于:https://www.cnblogs.com/stono/p/4961495.html

    展开全文
  • 5.hover(over, out)  注:两个参数为鼠标盘旋在对象上方和离开时调用的函数 $("div" ).hover( function (){ ... }, function (){ ... } ) 6.toogle(function1, function2, ...)  ...

    事件绑定方法:

    1.<type>(function)

    $("button").click(function(){
        ...
    });

    2.bind(map)

    复制代码
    $("input[type='text']").bind({
        focus: function(){
            ...
        },
        blur: function(){
            ...
        }
    })
    复制代码

    3.bind(type, [data,] function)

      注:如果没有第二个参数,则与第一个绑定事件方法相同

    复制代码
    $("button").bind(
        "click",
        {
             arg1: "2012"
             arg2: "07"
        },
        function(event){
            ...
            event.data.arg1
            ...
        }
    )
    复制代码

    4.one(type, [data,] function)

      绑定事件只执行一次,执行完之后绑定失效

    5.hover(over, out)

      注:两个参数为鼠标盘旋在对象上方和离开时调用的函数

    复制代码
    $("div").hover(
        function(){
            ...
        },
        function(){
            ...
        }
    )
    复制代码

    6.toogle(function1, function2, ...)

      该方法作用是单击对象时循环调用函数列表中的函数

    7.live(type, function)

      该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序

     

    事件删除方法:

    1.unbind([type] [,data])

      该方法删除匹配对象的事件处理程序,与bind方法对应,可以删除所有以bind方式绑定的自定义事件处理程序。如果所有参数都省略,将删除匹配对象的所有事件及事件处理程序;如果只有第一个type参数,将删除指定事件类型的时间处理程序。如:

    $("#btn").unbind("click");

      如果同时指定两个参数,将删除指定事件类型的指定事件处理程序。如,btn绑定以下函数:

      var btnClick = function(){...};

      则删除btn的该事件处理程序的代码为:

    $("#btn").unbind("click", btnClick);

    2.die([tyoe] [,function])
      该方法与live方法对应,用于解除live注册的自定义事件。参数与unbind方法类似。

     

    模拟操作:

      模拟操作就是模拟用户触发相应的事件,如一个事件触发另一个事件。

    1.<type>()

      如触发一个按钮的单击事件:

    $("button").click();

    2.trigger(type [,data])

      如触发一个按钮的单击事件:

    $("button").trigger("click");

    3.triggerHandler(type [,data])

      与 trigger 方法不同:

      该方法只触发对象集合中的第一个元素的事件处理程序。且返回的是事件处理程序的返回值,而不是可链接的jQuery对象。该方法不会触发事件冒泡

     

    jQuery事件对象:

    1.事件对象的属性

      type:获得该对象的事件类型,如click, focus, mouseover等

      target:获得事件触发者(DOM对象)

      data:获得调用事件时传入的额外参数集合

      relatedTarget:获得触发鼠标事件的DOM元素

      currentTarget:获得当前DOM元素(等同于this关键字)

      pageX/pageY:获得鼠标事件中,鼠标光标相对于页面左上角的位置

      result:获得上一个事件处理函数返回的值

      timeStamp:获得事件发生的时间戳

    2.事件对象的方法

    函数名

    说明 例子
    preventDefault() 取消元素事件的默认动作
    例如:
    对于超级链接a来说,有href属性,那么在点击a的时候就会导航至href所指向位置.我们在a的click事件中,调用本方法,就不会导航到指定位置
    //取消事件默认动作
    $("a").bind("click", function (e) {
        e.preventDefault(); 
    });
    isDefaultPrevented() 是否调用过preventDefault()方法
    e.isDefaultPrevented()
    stopPropagation() 取消事件冒泡
    e.stopPropgation();
    isPropagationStopped() 是否调用过stopPropagation()方法
    e.isPropagationStopped()
    stopImmediatePropagation() 取消执行该元素该事件处理函数的后续事件处理函数,
    并取消事件冒泡
    $("a").bind("click", function (e) {
        e.stopImmediatePropagation();
    });
    
    //不会被执行到
    $("a").click(function () {
        alert("我被点击了");
    });
    isImmediatePropagationStopped() 是否调用过stopImmediatePropagation()方法
    $("a").bind("click", function (e) {
        e.stopImmediatePropagation();
        alert(e.isImmediatePropagationStopped());
    });

    例如:要在鼠标移动时获取鼠标的位置:

    $(document).mouseover(function(event){
        var msg = event.pageX + " " + event.pageY;
        alert(msg);
    });
    展开全文
  • 5.hover(over, out)  注:两个参数为鼠标盘旋在对象上方和离开时调用的函数 $("div" ).hover( function (){ ... }, function (){ ... } ) 6.toogle(function1, function2, ...)  该方法作用是...

    事件绑定方法:

    1.<type>(function)

    $("button").click(function(){
        ...
    });

    2.bind(map)

    $("input[type='text']").bind({
        focus: function(){
            ...
        },
        blur: function(){
            ...
        }
    })

    3.bind(type, [data,] function)

      注:如果没有第二个参数,则与第一个绑定事件方法相同

    $("button").bind(
        "click",
        {
             arg1: "2012"
             arg2: "07"
        },
        function(event){
            ...
            event.data.arg1
            ...
        }
    )

    4.one(type, [data,] function)

      绑定事件只执行一次,执行完之后绑定失效

    5.hover(over, out)

      注:两个参数为鼠标盘旋在对象上方和离开时调用的函数

    $("div").hover(
        function(){
            ...
        },
        function(){
            ...
        }
    )

    6.toogle(function1, function2, ...)

      该方法作用是单击对象时循环调用函数列表中的函数

    7.live(type, function)

      该方法为整个页面生命周期内的某一类对象绑定一个事件处理程序

     

    事件删除方法:

    1.unbind([type] [,data])

      该方法删除匹配对象的事件处理程序,与bind方法对应,可以删除所有以bind方式绑定的自定义事件处理程序。如果所有参数都省略,将删除匹配对象的所有事件及事件处理程序;如果只有第一个type参数,将删除指定事件类型的时间处理程序。如:

    $("#btn").unbind("click");

      如果同时指定两个参数,将删除指定事件类型的指定事件处理程序。如,btn绑定以下函数:

      var btnClick = function(){...};

      则删除btn的该事件处理程序的代码为:

    $("#btn").unbind("click", btnClick);

    2.die([tyoe] [,function])
      该方法与live方法对应,用于解除live注册的自定义事件。参数与unbind方法类似。

     

    模拟操作:

      模拟操作就是模拟用户触发相应的事件,如一个事件触发另一个事件。

    1.<type>()

      如触发一个按钮的单击事件:

    $("button").click();

    2.trigger(type [,data])

      如触发一个按钮的单击事件:

    $("button").trigger("click");

    3.triggerHandler(type [,data])

      与 trigger 方法不同:

      该方法只触发对象集合中的第一个元素的事件处理程序。且返回的是事件处理程序的返回值,而不是可链接的jQuery对象。该方法不会触发事件冒泡

     

    jQuery事件对象:

    1.事件对象的属性

      type:获得该对象的事件类型,如click, focus, mouseover等

      target:获得事件触发者(DOM对象)

      data:获得调用事件时传入的额外参数集合

      relatedTarget:获得触发鼠标事件的DOM元素

      currentTarget:获得当前DOM元素(等同于this关键字)

      pageX/pageY:获得鼠标事件中,鼠标光标相对于页面左上角的位置

      result:获得上一个事件处理函数返回的值

      timeStamp:获得事件发生的时间戳

    2.事件对象的方法

    函数名

    说明 例子
    preventDefault() 取消元素事件的默认动作
    例如:
    对于超级链接a来说,有href属性,那么在点击a的时候就会导航至href所指向位置.我们在a的click事件中,调用本方法,就不会导航到指定位置
    //取消事件默认动作
    $("a").bind("click", function (e) {
        e.preventDefault(); 
    });
    isDefaultPrevented() 是否调用过preventDefault()方法
    e.isDefaultPrevented()
    stopPropagation() 取消事件冒泡
    e.stopPropgation();
    isPropagationStopped() 是否调用过stopPropagation()方法
    e.isPropagationStopped()
    stopImmediatePropagation() 取消执行该元素该事件处理函数的后续事件处理函数,
    并取消事件冒泡
    $("a").bind("click", function (e) {
        e.stopImmediatePropagation();
    });
    
    //不会被执行到
    $("a").click(function () {
        alert("我被点击了");
    });
    isImmediatePropagationStopped() 是否调用过stopImmediatePropagation()方法
    $("a").bind("click", function (e) {
        e.stopImmediatePropagation();
        alert(e.isImmediatePropagationStopped());
    });

    例如:要在鼠标移动时获取鼠标的位置:

    $(document).mouseover(function(event){
        var msg = event.pageX + " " + event.pageY;
        alert(msg);
    });

     

    转载于:https://www.cnblogs.com/lihuiyy/archive/2012/07/17/2595357.html

    展开全文
  • 这篇文章主要介绍了 jquery 中常用的事件 比如 (document.ready) bind hover toggle click 等等并有示例易于学习 1(document.ready) (document.ready) 是 jQuery 中响应 JavaScript 内置的 onload 事件并执行任务的...
  • hovertoggle合成事件

    2017-04-29 20:48:24
    hovertoggle合成事件 $(function(){ //获取图片的宽度 var width = $("img:eq(0)").width(); console.log(typeof(width));//number类型 $("img:eq(0)").hover( function(){ $(this).width(300).height...
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>hover与toggle合成事件</title>
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
      $(function(){
    	//获取图片的宽度
    	var width = $("img:eq(0)").width();
    	console.log(typeof(width));//number类型
    	$("img:eq(0)").hover(
    	  function(){
    		$(this).width(300).height(300);  
    	  },
    	  function(){
    	    $(this).width(width).height(width);  
    	  }
    	);  
      });
      
      $(function(){
    	$("button:eq(0)").click(function(){
    	  $("img:eq(0)").toggle();//显示与影藏	
    	});
      });
    </script>
    </head>
    <body>
      <p><button>按钮</button></p>
      <img src="../images/02.jpg" />
    </body>
    </html>

    展开全文
  • hovertoggle合并事件

    2018-09-10 14:47:44
    1、hover(enter,leave)实现鼠标滑入、滑出效果 2、toggle(fn1,fn2,fnN)模拟鼠标连续点击事件,第一次单击触发事件fn1,第二次触发fn2,以此类推... 3、toggle()切换元素的可见状态,如果元素是可见的,单击切换后...
  • Jquery——hovertoggle

    2019-10-01 08:30:19
    hover方法的语法结构为:hover(enter,leave) hover()当鼠标移动到元素上时,会触发第一个方法,当鼠标移开的时候会触发第二个方法 复制代码 ...
  • removeClass、hovertoggle

    2013-12-19 11:38:38
    removeClass当省略参数时,该方法移除元素所有的类。 先执行移除类,再执行添加类,以便它不会撤销几乎同时执行的添加类。  hovertoggle是复合事件处理程序,接受两个参数。
  • Toggle Hover Visibility

    2020-12-08 23:47:51
    <div><h3>Bug <p>When hovering over an element that also toggles the ... but the tooltip continues to show regardless of hover</p><p>该提问来源于开源项目:hekigan/vue-directive-tooltip</p></div>
  • 主要介绍了jquery中常用的事件,比如$(document).ready()、bind、hovertoggle、click等等,并有示例,易于学习
  • 1.hover([over,]out)  一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素上面时,...
  • 本文重点给大家介绍了jQuery中的2个函数hovertoggle的使用方法和示例,非常的简单实用,推荐给小伙伴们参考下。
  • <p>When you hover over either a thumbnail or label for a line, the line on the graph glows (with a drop-shadow), and you can toggle a line's visibility by clicking its label/thumbnail in the ...
  • 1.hover:(鼠标悬停与离开事件) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。 当鼠标移动到一个匹配的元素...
  • 这篇文章主要介绍了 jquery中常用的事件比如(docume nt.ready)bi ndhover > toggle click等等并有示例易于学习 (docume nt.ready) (docume nt.ready)是jQuery中响应JavaScript内置的on load事件并执行任务的一种典 ...
  • Show sub menus on hover.</code>. This is <code>false</code> (unchecked) by default, so sites that are currently using the theme will see no changes. New users, or those who want to show submenus on ...
  • hover()功能是当鼠标移动到所选的元素上面时,执行指定的第一个函数;...toggle()方法的功能是每次单击后依次调用函数,请注意“依次”这两个字,说明该方法在调用函数时并非随机或指定调用,而是通过函数设

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 850
精华内容 340
关键字:

hovertoggle