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 相关文章推荐
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
jQuery实现的五子棋游戏实例
Jun 13 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
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 eval函数使用介绍
2013/12/08 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
js静态作用域的功能。
2006/12/25 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
nodejs基础知识
2017/02/03 NodeJs
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
JavaScript递归函数定义与用法实例分析
2019/01/24 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
pm2启动ssr失败的解决方法
2019/06/29 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python实现的多进程和多线程功能示例
2018/05/29 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
德国在线购买葡萄酒网站:Geile Weine
2019/09/24 全球购物
物业管理大学生个人的自我评价
2013/10/10 职场文书
药学职务聘任书
2014/03/29 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
小学六一儿童节活动方案
2014/08/27 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
暂住证证明
2015/06/19 职场文书
队列队形口号
2015/12/25 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers