你的位置:首页 > Java教程

[Java教程]jQuery基础的工厂函数以及定时器的经典案例


   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 "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 "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>