jQuery基础的工厂函数以及定时器的经典实例分析


Posted in Javascript onMay 20, 2016

1. jQuery的基本信息:

1.1 定义: jQuery是JavaScript的程序库之一,它是JavaScript对象和实用函数的封装,

1.2 作用: 许多使用JavaScript能实现的交互特效,使用jQuery都能完美地实现,下面通过五个用途来更多的了解。

1.2.1 访问和操作DOM元素

1.2.2 制作页面样式

1.2.3 对页面时间的处理

1.2.4 方便地使用jQuery插件

1.2.5 与Ajax的完美结合

1.3 优势: 想必有人就会问了:为什么人们会更多的选择jQuery呢?因为jQuery的主旨就是wrute less,do more(以更少的代码,实现更多的功能),

它拥有着独特的选择器、链式操作、事件处理机制和封装、以及完善的Ajax都是其他JavaScript哭望成莫及的。

2.jQuery的相关应用:

2.1 如果想在页面中引用jQuery库,只需要将下载好的jQuery库放在目录js下即可,一般引用时都使用的相对路径。jQuery的关键字"$"

2.2 相关函数的语法与案例

2.2.1 等待html页面所有的文档解析完毕后在运行的函数模块

$(document).ready(function(){
   
    alert(message); //函数、事件模块

  });


//简写版

$(function(){

   alert(message); //函数、事件模块

});

2.2.2 工厂函数$()

$()作用1:是将DOM对象转化为jQuery对象,因为只有将DOM对象转化为jQuery对象后,才能使用jQuery的方法(jQuery的方法都是特有的)

$(function () {
      //将jQuery转化为DOM对象
      var dom = $("#mli")[0];
      //然后才能调用DOM的属性
      dom.innerText;
      //将DOM对象转化为jQuery对象
      var $dom = $(dom);
      //用jQuery对象调用它的jQuerry的方法
      $dom.text();

$()作用2:通过获取选择器名,然后给选择器对应的内容注册事件

//鼠标移到标签上和移开的两个事件
//jQuery独有的连缀效果
  $(function () {
      $("li").mouseover(function () {      
        $(this).css("background", "green");
      }).mouseout(function() {
        //this.style.background = "";
        this.style.cssText = "background:";
      });
    });

//单击事件

 $(function () {
      $("h2").click(function () {
        $("h2").css({ "font-size": "50px", "color": "red" });
        $("p").css({ "font-size": "30px", "color": "red","padding-left":"1px","line-height":"30px" });
      });
    });

3. 定时器的几个经典案例

3.1 图片自动切换

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>背景图片轮换</title>
  <script type="text/javascript">
    var i = 1;
    function myimg() {
       //通过i改变图片的名称从而实现图片自动切换
      if (i < 5) {
        i++;
      } else {
        i = 1; //当i超出是重新赋值使其实现循环切换图片
      }
      //通过id获取图片并给它的src属性重新赋值
      var dom = document.getElementById("id");
      dom.src = 'image/'+i+'.jpg';
    }
    //启动定时器,给它一定的时间(毫秒)
    setInterval(myimg,500);
  </script>
</head>
<body>
  <img id="id" src="image/1.jpg" width="1000px" height="600px"/>
</body>
</html>

3.2 倒计时(可以开始、停止、继续)

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>倒计时</title>
  <script type="text/javascript">
    //默认定义一个匿名函数
    window.onload = function () {
      //定义一个定时器
      var t1;
      //获取开始按钮的value值
      var btnstart = document.getElementById("btnstart");
      //给开始按钮注册一个事件
      btnstart.onclick = function () {
        //每1秒实现一次step函数
        t1=setInterval(step,1000);
      }
      //获取停止按钮的value值
      var btnstop = document.getElementById("btnstop");
      //给停止注册一个事件
      btnstop.onclick = function () {
        //停止定时器
        clearInterval(t1);
      }
    }
    function step() {
      //1.1 取出div中的变量值
      var dom = document.getElementById("msg");
      //1.2 将值赋给num变量
      var num = dom.innerText;
      if (num>0) {
        num--;
      }
      dom.innerText = num;
    }
  </script>
</head>
<body>
  <input type="button" name="btn" value="开始" id="btnstart"/>
  <input type="button" name="btn" value="停止" id="btnstop" />
  <div id="msg">10</div>
</body>
</html>

3.3 获取当前时间 并启动定时器运行

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script type="text/javascript">
    function startTime() {
      var today = new Date()
      var h = today.getHours()
      var m = today.getMinutes()
      var s = today.getSeconds()
      //add a zero in front of numbers<10
      m = checkTime(m)
      s = checkTime(s)
      document.getElementById('txt').innerHTML = "当前时间:"+h + ":" + m + ":" + s
      t = setTimeout('startTime()', 500)
    }
    // 在小于10的数字前面加一个0
    function checkTime(i) {
      if (i < 10)
      { i = "0" + i }
      return i
    }
  </script>
</head>   
 <body onload="startTime()">
    <div id="txt"></div>
</body>
</html>

以上这篇jQuery基础的工厂函数以及定时器的经典实例分析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
JavaScript中的Object对象学习教程
May 20 #Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 #Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 #Javascript
深入理解setTimeout函数和setInterval函数
May 20 #Javascript
JavaScript基础教程——入门必看篇
May 20 #Javascript
jQuery选择器及jquery案例详解(必看)
May 20 #Javascript
Jquery $when done then的用法详解
May 20 #Javascript
You might like
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
AngularJS 与百度地图的结合实例
2016/10/20 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
如何在vue 中引入使用jquery
2020/11/10 jQuery
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python求解任意闭区间的所有素数
2018/06/10 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python_mask_array的用法
2020/02/18 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
基于Python制作一副扑克牌过程详解
2020/10/19 Python
Python命令行参数定义及需要注意的地方
2020/11/30 Python
Otel.com:折扣酒店预订
2017/08/24 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
早晨薰衣草在线女性精品店:Morning Lavender
2021/01/04 全球购物
数据库方面面试题
2012/04/22 面试题
params有什么用
2016/03/01 面试题
单位提档介绍信
2014/01/17 职场文书
运动会解说词100字
2014/01/31 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python