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 getElementsByTagName的简写方式
Jun 27 Javascript
js获取图片大小的函数代码
Sep 20 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
百度地图自定义控件分享
Mar 04 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
AngularJS 中的事件详解
Jul 28 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
Sep 09 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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函数代码
2013/08/29 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
PHP实现简易图形计算器
2020/08/28 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
javascript 静态对象和构造函数的使用和公私问题
2010/03/02 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
2015/02/24 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
2015/03/13 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[01:29:42]Liquid vs VP Supermajor决赛 BO 第一场 6.10
2018/07/05 DOTA
python 保存float类型的小数的位数方法
2018/10/17 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
Python 经典算法100及解析(小结)
2019/09/13 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
巴西Bo.Bô官方在线商店:经营奢侈品时尚业务
2020/03/16 全球购物
《故乡》教学反思
2014/04/10 职场文书
优秀语文教师事迹
2014/05/18 职场文书
咖啡店创业计划书
2014/08/15 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
2014年班长个人工作总结
2014/11/14 职场文书
《月光曲》教学反思
2016/02/16 职场文书
因个人工作失误检讨书
2019/06/21 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python