文档章节

jQuery中的时间和动画

 墨冥
发布于 11/09 20:58
字数 809
阅读 5
收藏 0

1、加载DOM:以浏览器加载文档为例,在页面加载完成后,浏览器会通过JavaScript为DOM事件添加事件,在jQuery红使用$(document).ready()方法;

2、执行时机:jQuery中的$(document).ready()方法注册的事件处理程序在DOM完全就绪时就可以被调用;

3、jQuery中的$(document).ready()方法注册的事件,只要DOM完全就绪时就会被调用;

4、避免方法:为onload事件绑定一个处理函数

$(window).load(function() {
    //编写代码
}

5、多次使用:

function one() {
    alert("one");
}
function two() {
    alert("two");
}

$(document).ready(function() {
    one();
})
$(document).ready(function() {
    two();
}

6、简写方式:$(doxument)可以简写成$()。因为当$()没有参数时,默认参数就是“document”;

7、事件绑定:在文档加载完成后,如果打算为元素绑定事件来完成某些操作,可以使用bind()方法来对匹配元素来进行特定事件的绑定;

8、bind()有3个参数:(1)事件类型,可以使自定义名称;(2)可选参数,作为event.data属性值传递给事件对象的额外数据对象;(3)用来绑定的处理函数;

9、基本效果:

HTML代码:
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
      jQuery是一个优秀的JavaScript库。
    </div>
</div>


javascript代码:
$(function() {
    $("#panel h5.head").bind("click", function() {
         $(this).next().show();
    })
})

10、加强效果:

$(function() {
   $("#panel h5.head").bind("click", function() {
       var $content = $(this).next();
       if($content.is(":visible")) {
           $content.hide();
       } else {
            $content.show();
       }
   })
})

11、改变绑定事件的类型:

$(function() {
    $("#panel h5.head").bind("mouseover", function() {
        $(this).next().show();
    }).bind("mouseover", function() {
        $(this).next().hide();
    })
})

12、简写绑定时间:

$(function() {
    $("#panel h5.head").mouseover(function() {
        $(this).next().show();
    }).mouseover(function() {
        $(this).next().hide();
    })
})

13、合成事件:有两个,hover()方法和toggle()方法;

14、hover()方法:

$(function() {
    $("#panel h5.head").hover(function() {
        $(this).next().show();
    }.function() {
        $(this).next().hide();
    })
})

15、toogle方法:

$(function() {
    $("#panel h5.head").toggle(function() {
       $(this).next().show();
    }.function() {
       $(this).next().hide();
    })
});

16、再次加强事件:

$(function() {
$("#panel h5.head").toggle(function() {
$(this).addClass("highligt");
$(this).next().show();
}.function() {
$(this).removeClass("highhligt");
$(this).next().hide();
});
});

17、事件冒泡:在页面上可以有多个事件,也可以多个元素响应通一个事件:

HTML代码:
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
</body>




JavaScript代码:
$(function() {
	$('span').bind("click", function() {
		var txt = $('#msg').html() + "<p>内层span元素被单击.</p>";
		$('#msg').html(txt);
	})
    $('#content').bind("click", function() {
		var txt = $('#msg').html() + "<p>外层div元素被单击.</p>";
		$('#msg').html(txt);
	})
	$("body").bind("click", function() {
		var txt = $('#msg').html() + "<p>body元素被单击</p>.";
		$('#msg').html(txt);
	});
})

18、事件冒泡引发的问题:本来只想触发最内层元素的click事件,然后这个元素外层的元素也会被触发;

19、触发自定义事件:

为元素绑定一个“myClick”事件:
$('#btn').bind("myClick", function() {
$(‘#test’).append("<p>我的自定义事件.</p>");
})


想要触发:
$('#btn').trigger("myClick")

20、hide()方法:为一个元素调用hide()方法,会将该元素的display样式改为"none";

21、当调用show()方法时,就会根据hide()方法记住display属性值来显示元素;

© 著作权归作者所有

共有 人打赏支持
粉丝 1
博文 31
码字总数 11400
作品 0
合肥
私信 提问
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
8个jQuery方法,你应该知道!

jQuery已经成为最著名的JS框架了,因为它的简便。之前讨厌javascript繁琐的开发者,也应该因为jQuery而改变主意了。它节省了大量的时间。 jQuery文档有助于jQuery的成功,它真的有帮助和简洁...

老枪
2011/03/16
0
2
10个jquery动画菜单:插件和教程

jquery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。 插件...

晨曦之光
2012/03/09
0
0
前端(jQuery样式操作、特殊效果、动画......)

1、jQuery选择器 2、选择器转移 prev()是同级的上一个元素,prevAll()是同级的上面所有的元素 next()是同级的下一个元素,nextAll()是同级的下面所有的元素 3、样式操作 <...

埃菲尔上的铁塔梦i
08/27
0
0
一些必看的jQuery导航插件和教程

导航是一个网站最重要的元素之一,您必须遵循统一的风格来设计您的网站,特别是导航的风格,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网...

迷路的阿修罗
2010/12/30
0
1

没有更多内容

加载失败,请刷新页面

加载更多

Java 动态代理的实现

在Java中可以实现动态代理的方式有很多种:JDK方式、ASM字节码操控框架、开源的分析、编辑和创建Java字节码的类库Javassist、基于ASM框架实现的CGLIB JDK方式:通过Java反射的方式生成动态代...

我爱春天的毛毛雨
27分钟前
1
0
css 总结2

1、背景有关 (1)background-origin:border-box、padding-box、content-box //默认是padding-box(2)background-image: url(img_flwr.gif), url(paper.gif);(3)background-posi......

tianyawhl
28分钟前
1
0
java 每秒钟只允许十个线程同时并发

package com.qimh.thread.concurrent;import java.util.Date;import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;import java.util.concurren......

qimh
43分钟前
4
0
学习Hadoop大数据基础框架

什么是大数据?进入本世纪以来,尤其是2010年之后,随着互联网特别是移动互联网的发展,数据的增长呈爆炸趋势,已经很难估计全世界的电子设备中存储的数据到底有多少,描述数据系统的数据量的...

本宫没空2
45分钟前
2
0
redis

1,安装 sudo apt-get install redis-server 2,登录本地的 redis-cli 3,修改 .bashrc文件,连接其他线下数据库 vi .bashrc在最后增加alias redisa="redis-cli -h 10.15.100.134 -p 666...

鹏灬
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部