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")[];
//然后才能调用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 = ;
function myimg() {
//通过i改变图片的名称从而实现图片自动切换
if (i < ) {
i++;
} else {
i = ; //当i超出是重新赋值使其实现循环切换图片
}
//通过id获取图片并给它的src属性重新赋值
var dom = document.getElementById("id");
dom.src = 'image/'+i+'.jpg';
}
//启动定时器，给它一定的时间（毫秒）
setInterval(myimg,);
</script>
</head>
<body>
<img id="id" src="data: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,);
}
//获取停止按钮的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>) {
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"></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()', )
}
// 在小于10的数字前面加一个0
function checkTime(i) {
if (i < )
{ i = "" + i }
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
jQuery基础的工厂函数以及定时器的经典案例的更多相关文章
- php中foreach()函数与Array数组经典案例讲解
//php中foreach()函数与Array数组经典案例讲解 function getVal($v) { return $v; //可以加任意检查代码,列入要求$v必须是数字,或过滤非法字符串等.} ...
- jQuery分析(2) - $工厂函数分析
前言 从这节进入jQuery的世界,首先从jQuery的入口函数开始了解jQuery()或$是如何运作的,这里我给出了一个最小的例子来分析. 回忆 在进入分析代码前我们回想下jQuery的使用方法有哪 ...
- jQuery基础（工具函数，浏览器信息，检测节点，字符串，$.extend()）
1.获取浏览器的名称与版本信息 在jQuery中,通过$.browser对象可以获取浏览器的名称和版本信息 如$.browser.chrome为true,表示当前为Chrome浏览器, $.bro ...
- 【前端】之jQuery基础知识
jQuery 简介 在项目中引入jQuery: 去jQuery官网下载jQuery包:jquery-3.2.1.min.js 将下载的jQuery包添加到项目目录中 在标签下添加jQuery引用:&l ...
- jQuery基础，定时器，工厂函数
这个星期刚刚学的JQuery,下面我来说说我学的这几个例子 jQuery是JavaScript的一个程序库. Jquery的工厂函数$(): 在Jquery中 $符号等价于jquery,作用是将DOM ...
- jQuery基础之（三）jQuery功能函数前缀及与window.onload冲突
1.jQuery功能函数前缀 在javascript中,开发者通常会编写一些小函数来处理各种操作细节,例如在用户提交表单时,要将文本框最前端和最末端的空格内容清理掉.而javascript中没有类似t ...
- golang 基础 map及工厂函数
Map是一种数据结构,是一个集合,用于存储一系列无序的键值对.它基于键存储的,键就像一个索引一样,这也是Map强大的地方,可以快速快速检索数据,键指向与该键关联的值. 内部实现 Map是基于 散列表 ...
- 使用JavaScript闭包，以工厂模式实现定时器对象
原始对象写法 一般工作中写Javascript代码,主要写全局函数,并组织函数之间的调用,确实比较低级, 于是想利用面向对象的思想应用到JS编码中. 在火狐浏览器开发者网站上,看到一个实例利用对象技术 ...
- jQuery 使用 jQuery UI 部件工厂编写带状态的插件（翻译）
首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
随机推荐
- windows
1.拷贝远程文件 net use \\10.130.80.62\ipc$ 密码 /user:用户名 xcopy "\\10.130.80.62\G$\yt\apache-tomcat-7.0 ...
- C 标准库系列之locale.h
locale.h 区域设置相关,主要针对时间日期.货币格式.字符控制.数字格式等以满足某区域的设置需要. locale设置类别主要包括以下几个宏定义的类别: LC_ALL:设置所有的类别: LC_CO ...
- dbca建库sys用户被锁
奇怪问题:dbca建库sys用户被锁, 点击密码管理报账户被锁 而且在服务器上无法进行操作系统验证登陆,经过一番检查发现oracle用户和grid用户没有在dba组里 解决: 1.把oracle用户和 ...
- Oracle 11203 + ASM安装 for HP UX
一,安装前准备 1.创建所需组和用户 /usr/sbin/groupadd -g 1000 oinstall/usr/sbin/groupadd -g 1020 asmadmin/usr/sbin/g ...
- 使用Lucene索引和检索POI数据
1.简介 关于空间数据搜索,以前写过<使用Solr进行空间搜索>这篇文章,是基于Solr的GIS数据的索引和检索. Solr和ElasticSearch这两者都是基于Lucene实现的,两 ...
- Redis3重建Cluster
1.关闭cluster全部节点2.删除所有nodes.conf文件3.开启全部节点4.依次flushall5.重建集群即可 Share the post "Redis3重建Cluster&q ...
- 信鸽推送 .NET (C#) 服务端 SDK rest api 调用库(v1.2)
信鸽推送 .NET 服务端 SDK rest api 调用库-介绍 该版本是基于信鸽推送v2版本的时候封装的,先拿出来与大家分享,封装还还凑合,不依赖其他http调用件,唯一依赖json序列化dll ...
- HDU 4467 分块
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4467 题意:给定n个点m条边的无向图,点被染色(黑0/白1),边带边权.然后q个询问.询问分为两种: ...
- 【Python装饰者】在函数测试的作用
[引言] 我们经常需要多函数进行耗时测试,测试方法有许多,这里介绍装饰者的方法,提高耗时测试代码的可复用性,在其他方面的应用也是如此. [设计原则] 类应该对扩展开放,对修改关闭. [代码] (1)定 ...
- java 通过jdbc连接MySQL数据库
先了解下JDBC的常用接口 1.驱动程序接口Driver 每种数据库的驱动程序都应该提供一个实现java.sql.Driver接口的类,简称Driver类.通常情况下,通过java.lang.Clas ...