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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
jQuery对Select的操作大集合(收藏)
Dec 28 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
javascript中数组方法汇总
Jul 07 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 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
分享PHP入门的学习方法
2007/01/02 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php mysql 判断update之后是否更新了的方法
2012/01/10 PHP
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP7常量数组用法分析
2016/09/26 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
再谈Yii Framework框架中的事件event原理与应用
2020/04/07 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
JavaScript 字符串处理函数使用小结
2010/12/02 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
js实现纯前端的图片预览
2016/04/27 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
Vue中保存数据到磁盘文件的方法
2018/09/06 Javascript
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
Selenium启动Chrome时配置选项详解
2020/03/18 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
社区志愿者心得体会
2014/01/03 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
团代会宣传工作方案
2014/05/08 职场文书
法定代表人身份证明书
2014/09/10 职场文书
2014年庆祝国庆65周年演讲稿
2014/09/21 职场文书
重阳节标语大全
2014/10/07 职场文书
安全保证书怎么写
2015/02/28 职场文书
少年雷锋观后感
2015/06/10 职场文书