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 相关文章推荐
javascript语句中的CDATA标签的意义
May 09 Javascript
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
删除javascript中注释语句的正则表达式
Jun 11 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
js HTML5上传示例代码完整版
Oct 10 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
Dec 13 Javascript
axios对请求各种异常情况处理的封装方法
Sep 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
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Vue下的国际化处理方法
2017/12/18 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
windows下安装python paramiko模块的代码
2013/02/10 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
python加载自定义词典实例
2019/12/06 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
优秀大学生推荐信范文
2013/11/28 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
员工工作表现评语
2014/04/26 职场文书
活动总结书
2014/05/08 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers