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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
React Native 通告消息竖向轮播组件的封装
Aug 25 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
Jan 10 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 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中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
yii数据库的查询方法
2015/12/28 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP中上传文件打印错误错误类型分析
2019/04/14 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
javascript编程起步(第六课)
2007/01/10 Javascript
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
2010/05/10 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
如何利用python进行时间序列分析
2020/08/04 Python
python装饰器代码深入讲解
2021/03/01 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
2019/07/18 HTML / CSS
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
中软Java笔试题
2012/11/11 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
会计自我鉴定
2014/02/04 职场文书
2014企业年终工作总结
2014/12/23 职场文书
入党现实表现材料
2014/12/23 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL