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 相关文章推荐
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
Promise扫盲贴
Jun 24 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 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
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
详解ECharts使用心得总结
2016/12/06 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
2017/02/12 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
Python爬取Coursera课程资源的详细过程
2014/11/04 Python
python追加元素到列表的方法
2015/07/28 Python
Python 对象中的数据类型
2017/05/13 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
python 列表推导式使用详解
2019/08/29 Python
Python3运算符常见用法分析
2020/02/14 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
远程教育心得体会
2014/01/03 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
农村婚庆主持词
2015/06/29 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python
Python数据结构之队列详解
2022/03/21 Python
MySQL 条件查询的常用操作
2022/04/28 MySQL