jQuery基础的工厂函数以及定时器的经典实例分析

网络编程 2025/1/16 佚名

3 1 2

快活林资源网 Design By www.csstdc.com

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="/UploadFiles/2021-04-02/1.jpg">

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基础的工厂函数以及定时器的经典实例分析就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

jquery经典实例

快活林资源网 Design By www.csstdc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

快活林资源网 Design By www.csstdc.com

评论“jQuery基础的工厂函数以及定时器的经典实例分析”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2025年01月16日

jQuery基础的工厂函数以及定时器的经典实例分析

详解JavaScript中的事件流和事件处理程序

JavaScript中的Object对象学习教程

评论“jQuery基础的工厂函数以及定时器的经典实例分析”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接