事件

  • 定义

即当HTML中发生某些事（点击、鼠标移过等）的时候调用的方法

$(selector).action()

  • 触发

事件的触发有两种方法：

1、直接将事件click写在<javascript>中

<head>

<script type = "text/javascript"src="/jquery/jquery.js"></script>

<script type="text/javascript">

 $(document).ready(function(){

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

 $("p").hide();

 });

 });

</script>

</head>

<body>

<button type="button">点击这里让文字消失</button><p>我会消失</p>

</body>

*各种Event函数的写法和作用：

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

2、在body标签中通过onclick引用已经写好的方法：

<script>

function visible1()

{

    $("p").hide();

};

</script>

</head>

<body>

<input type="button" onclick = "visible1()" value = "点这里让文字消失"/><p>我会消失。</p>
  • 常用的jQuery函数

1、隐藏/显示/隐藏显示切换：.hide()     .show()      .toggle()

2、淡入/淡出/淡入淡出切换/fadeTo：.fadeIn()    .fadeOut()    .fadeToggle()    .fadeTo("时间","透明度")

3、滑动：.slideDown()    .slideUp()    .slideToggle

4、动画效果：.animation({css样式表的属性值},"slow/fast/自定义时长（毫秒，去掉外面的双引号）")

5、停止动画：.stop() 适用于所有jQuery效果函数，包括以上列举的几种，停止正在执行的所有动画效果

6、Callback的用法：在动画执行完成后进行下一函数的执行，如下面用下划线标识出来的部分即为Callback：

<script type="text/javascript">

$(document).ready(function(){

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

  $("p").hide(1000,function(){

alert("The paragraph is now hidden");

    });

  });

});

</script>

7、Chaining:几种函数的链接，如：

<script>

$(document).ready(function()

  {

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

    $("#p1").css("color","red").slideUp(2000).slideDown(2000);

  });

});

</script>

8、当操作的元素是自动生成的元素时，jquery的写法要用on，如：$(document).on("事件", "所选元素", function () {方法……})

9、获取父元素的同级元素用$(this).parent().siblings("元素名")，如：$(this).parent().siblings(".Sign").css("display", "block");

jQuery的基础知识基本上就整理到这里，以后如果再深入学习还会再继续更新，希望能够对大家有用！

9、网页制作Dreamweaver（jQuery基础:事件）的更多相关文章

  1. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

  2. 7、网页制作Dreamweaver（悬浮动态分层导航）

    悬浮动态分层导航的制作: 1.首先在<head>里面引用一个JQUERY的文件以用来制作鼠标点击动画效果(从网站上下载即可) <script language="javas ...

  3. 网页制作之html基础学习1-简介

    学习网页制作主要分为三大块 1.HTML    超文本标记语言( 全称:Hyper Text  Markup Language) 专门编辑静态网页 2.CSS      网页美化:是HTML控制的样式 ...

  4. 10、网页制作Dreamweaver（扩展：各浏览器对 onunload 事件的支持与触发条件实现有差异）

    标准参考 在 HTML 4.01 规范中关于 onunload 事件的描述是:当 document 从 window 中移除时,触发 onunload 事件. 关于 HTML 4.01 规范中 onu ...

  5. jquery基础事件

    一.常用的事件有:click.dblclick. mousedown.mouseup.mousemove.mouseover.mouseout.change.select.submit.keydown ...

  6. 11、网页制作Dreamweaver（补充：JS零碎知识点&&正则表达式）

    JS知识点 回车符/r和换行符/n的区别:/r 相当于enter,是段落与段落之间的区别, /n 相当于shift+enter,是行与行之间距离,比较小 几种window操作方法: 1.获取当前窗口大 ...

  7. 5、网页制作Dreamweaver（JS的初步运用）

    JAVASCRIPT *放在头部也可以读取(最先读取头部) 表单提交时会自动刷新网页,最好关掉 写法: 1.输出 <script> document.write("hello w ...

  8. 4、网页制作Dreamweaver（样式表CSS）

    样式表style 制作一个风格统一的网页,需要样式表对颜色.字体等属性的规范,同时也省去在body中多次定义的麻烦,所以一个样式表是必不可少的. 样式表有两种引用的方法:一种是直接写在html的< ...

  9. Jquery | 基础 | 事件的链式写法

    $(".title").click(function () { $(this).addClass("curcol").next(".content&q ...

随机推荐

  1. 转 数据库中的 date datetime timestamp的区别

    转 数据库中的 date datetime timestamp的区别 DATETIME, DATE和TIMESTAMP类型是相关的.本文描述他们的特征,他们是如何类似的而又不同的. DATETIME类 ...

  2. 5月4日课堂内容：for循环的穷举、迭代

    一.for循环拥有两类: 1.穷举: 把所有可能的情况都走一遍,使用if条件筛选出来满足条件的情况. 2.迭代: 从初始情况按照规律不断求解中间情况,最终推导出结果. 二.穷举练习 1.单位给发了一张 ...

  3. 数据库与SQL语言

    数据库(DB) :长期储存在计算机中.有组织.可共享的数据的集合. 特点:(1)数据按一定的数据模型组织.描述和储存:(2)较小的冗余度:(3)数据独立性较高:(4)易扩展:(5)可共享(不同用户可按 ...

  4. linux在shell date获取时间的相关操作

    获得当天的日期 date +%Y-%m-%d 输出: 2011-07-28 将当前日期赋值给DATE变量DATE=$(date +%Y%m%d) 有时候我们需要使用今天之前或者往后的日期,这时可以使用 ...

  5. 菜鸟开始学习SSDT HOOK（(附带源码）

    看了梦无极的ssdt_hook教程,虽然大牛讲得很细,但是很多细节还是要自己去体会,才会更加深入.在这里我总结一下我的分析过程,若有不对的地方,希望大家指出来.首先我们应该认识 ssdt是什么?从梦无 ...

  6. struts2最新s2-016代码执行漏洞CVE-2013-2251

    这是一个代码执行漏洞,利用java代码来执行系统命令.   影响版本:Struts 2.0.0 – Struts 2.3.15   漏洞说明: The Struts 2 DefaultActionMa ...

  7. 完美实现自己的GetProcAddress函数(转载)

    我们知道kernel32.dll里有一个GetProcAddress函数,可以找到模块中的函数地址,函数原型是这样的: WINBASEAPI FARPROC WINAPI GetProcAddress ...

  8. POJ 2240 && ZOJ 1082 Arbitrage 最短路,c++ stl pass g++ tle 难度:0

    http://poj.org/problem?id=2240 用log化乘法为加法找正圈 c++ 110ms,g++tle #include <string> #include <m ...

  9. NOIP2005 等价表达式 解题报告

    明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代数表达式,然后列出了若干选项,每个选项也是一个代数表达式,题目的要求是判断选项中哪些代数表达式是和 ...

  10. 理解ROS rqt_console和 roslaunch

    1.使用rqt_console和roslaunch 这篇教程将介绍使用rqt_console和rqt_logger_level来调试以及使用roslaunch一次启动许多nodes.如果你使用ROS  ...