jQuery快速高效制作网页交互特效


Posted in Javascript onFebruary 24, 2017

jQuery中的事件

1,基础事件

基础事件又包括 

a:window事件

在javaScript中的window事件又  window onload = fn(); 和onclick  在jQuery中常用的事件有文档就绪事件,对应的方法ready()

$(document).ready(fn(){}); 

b:鼠标事件

常用的鼠标事件有:

      click(fn);         单机鼠标时发生,fn表示绑定的函数

      keydown(fn);  鼠标指针移过时,fn表示绑定函数

      blur(fn)          鼠标指针移出时,失去焦点时,所执行的函数

      比如  最常见的光棒事件

$(function () {
   //获取所有的li元素
   $("li").mouseover(function () {
    $(this).css("background", "pink");
   });
   //注册事件
   $("li").mouseout(function () {
    $(this).css("background", "");
   });
 });
<ul>
  <li>一个示例</li>
  <li>二个示例</li>
  <li>三个示例</li>
 </ul>

 c:键盘事件

键盘事件指当键盘聚焦到Web浏览器时,用户每次按下或者释放按键时所产生的事件常用的键盘有keydown(),keyup(),keypress()

//键盘事件
  $("input").keyup(function(event) {
   var s =event.keyCode;
   alert(s);
//打印键盘的keycode值
}); <h2>键盘事件</h2><br>  --<br>  <body>
 <input /><span id="first">注意用词</span>  <br>  --

d:表单事件

表单事件是所有事件中最稳定,且支持最稳定的事件之一,除了用户选取单选框,复选框等产生的click事件外,当元素获得焦点时触发focus事件,失去焦点时触发blur事件

//表单事件
   $("input").focus(function () {
    $("#first").addClass("a");
   })
   $("input").blur(function () {
    $("#first").removeClass("a");
   });
  });
---
 <h2>键盘事件</h2>
 <input /><span id="first">注意用词</span>

e:绑定事件

绑定事件是指为匹配到的元素同事绑定一个或者多个事件,使用bind()方法

语法:bind(type,[data],,fn)

对应的unbind() 解除事件

例如:为一个无序列表绑定光棒效果

$("li").bind({
    "mousemove": function () {
     $(this).css("background", "blue");
    },  //鼠标移过 获得焦点
    "mouseout": function () {
     $(this).css("background", "");
    }, //鼠标移出失去焦点
    click: function () {
     alert(this.innerHTML);
    }
   }).unbind("mouseout mousemove");
      //解除事件
  });
--<body>
 <ul>
  <li>一个示例</li>
  <li>二个示例</li>
  <li>三个示例</li>
 </ul>
 </body>

2,复合事件

hover()和toggle()方法,这两个方法和 ready()方法相似都是jQuery自定义的方法。

a:hover()方法用于模拟鼠标指针悬停事件

<script src="js/jQuery1.11.1.js" type="text/javascript"></script>
<script>
 $(function () {
  $("#menu").hover(function () {     //鼠标悬停事件 改变元素css样式
   $("#myacc").css("display", "block");
  }, function () {
   $("#myacc").css("display", "none");
  });
 });
</script>

通常用在网站导航栏下拉的隐藏效果,相当于鼠标事件的mouseover 和mouseout事件

b:toggle()方法 在1.9以上的jquery都删除了这个事件。

toggle()方法相当于鼠标连续单击事件,执行的fn

$(function () {
   $("#one").toggle(
    function () {
     $("#two").show(); //控制元素显示
    }, function () {
     $("#two").hide(); //控制元素隐藏
    }
    );
  });
 //产生类似于 导航栏的单击出现再次单击关闭的效果-

3,

a:控制 元素的显示与隐藏

在jQuery中,可以使用【show() hide()】控制元素的的显示和隐藏

属性:【speed】[callback]

speed的默认的值有slow(0.6s) normal(0.4s) fast(0.2s)

前者控制元素显示或隐藏的速度,后者是指元素执行完方法后callback的自定义函数

----
$(function () {
   $("body").click(function () {
    $("img").show("slow");   //单击窗体 一图片以slow方式显现出来
   });
  });
----
--省略部分代码
<img src="1.jpg">

b:相似的方法还有控制元素的淡入淡出分别对应fadein()和fadeout()

对应语法是$(selector).fadein([speed],[callback])   --以淡出的方法控制元素

$(selector).fadeout([speed],[callback])--控制元素淡出

c:改变元素高度的方法

slideDown(),slideUp(),

语法类似

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
详解javascript数组去重问题
Nov 06 Javascript
javascript倒计时效果实现
Nov 12 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
Vue组件通信的几种实现方法
Apr 25 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 #Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 #Javascript
JavaScript和jQuery制作光棒效果
Feb 24 #Javascript
微信小程序 动态的设置图片的高度和宽度详解及实例代码
Feb 24 #Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 #Javascript
JavaScript中三种常见的排序方法
Feb 24 #Javascript
Angular2 Service实现简单音乐播放器服务
Feb 24 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
js与jquery回车提交的方法
2015/02/03 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
python实现simhash算法实例
2014/04/25 Python
python 重命名轴索引的方法
2018/11/10 Python
python3下载抖音视频的完整代码
2019/06/05 Python
使用Python opencv实现视频与图片的相互转换
2019/07/08 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python str字符串转uuid实例
2020/03/03 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
Python 爬取淘宝商品信息栏目的实现
2021/02/06 Python
模具专业毕业生自荐书范文
2014/02/19 职场文书
GMP办公室主任岗位职责
2014/03/14 职场文书
闭幕式主持词
2014/04/02 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
销售经理岗位职责
2015/01/31 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
早安问候语大全
2015/11/10 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Python实现生成bmp图像的方法
2021/06/13 Python