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 加载和执行-性能提高篇
Dec 28 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
jQuery选择器全面总结
Jan 06 Javascript
JS中操作JSON总结
Dec 06 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Javascript Worker子线程代码实例
Feb 20 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初学者头疼问题总结
2006/10/09 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
商城常用滚动的焦点图效果代码简单实用
2013/03/28 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
jquery获取链接地址和跳转详解(推荐)
2017/08/15 jQuery
ReactJs实现树形结构的数据显示的组件的示例
2017/08/18 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
详解python调度框架APScheduler使用
2017/03/28 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
python有序查找算法 二分法实例解析
2020/02/18 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
浅谈Keras中shuffle和validation_split的顺序
2020/06/19 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
幼教求职信
2014/03/12 职场文书
我的大学生活演讲稿
2014/04/25 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
给领导敬酒词
2015/08/12 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
Python实现8种常用抽样方法
2021/06/27 Python
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
如何利用golang运用mysql数据库
2022/03/13 Golang
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记