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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
vue.js如何将echarts封装为组件一键使用详解
Oct 10 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
原生JavaScript实现随机点名表
Jan 14 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
php 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
给WordPress的编辑后台添加提示框的代码实例分享
2015/12/25 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
激活 ActiveX 控件
2006/10/09 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
JS实现简易计算器
2020/02/14 Javascript
python开发中range()函数用法实例分析
2015/11/12 Python
python调用fortran模块
2016/04/08 Python
Django自定义manage命令实例代码
2018/02/11 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python调用c++ ctype list传数组或者返回数组的方法
2019/02/13 Python
python利用re,bs4,requests模块获取股票数据
2019/07/29 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
python中的django是做什么的
2020/07/31 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
vue实现倒计时功能
2021/03/24 Vue.js
法院先进个人事迹材料
2014/05/04 职场文书
小区文明倡议书
2014/05/16 职场文书
学校端午节活动方案
2014/08/23 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
八年级作文之友情
2019/11/25 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android