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 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
随机推荐
- tomcat端口被占用问题完美解决方案！
启动Tomcat服务器报错:Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are alrea ...
- 最终版的Web（Python实现）
天啦,要考试了,要期末考试了,今天把最终版的Python搭建Web代码先写这里记下了.详细的过程先不写了. 这次是在前面的基础上重写 HTTPServer 与 BaseHTTPRequestHandl ...
- 定时器setInterval 开始、暂停、继续！
活不多说,最近写这个定时器,,遇到了一些问题.然后上网百度.避免以后朋友遇到类似问题.贴出代码.... 最主要就是定义全局变量. 下面重要的我红色 标注出来. 批注:如 赋值代码,请给出源码地址.O( ...
- 【Django】--ModelForm组件
ModelForm a.class Meta: model,#对应Model的 fields=None,#字段 exclude=None,#排除字段 labels=None,#提示信息 help_te ...
- 6. UIImageView 的使用
1. UIImageView 的认识 QQ:853740091 UIImageView 继承UIView,通过他的名字我们也可以看出这个是用来显示图片的 2. 使用方法 UIImageView *im ...
- Linux下的DOS攻击
Linux下的DOS攻击 DOS是Denial of service的简称,即拒绝服务,造成Dos攻击行为被称为Dos攻击,其目的是使计算机或网络无法提供正常的服务.最常见的Dos攻击有计算机带宽攻击 ...
- Sublime Text 基础配置
作为一个码农,总有一款自己喜爱的编辑器.现今,我最喜欢的编辑器便是Sublime Text 3.其实很早便用了这款编辑器,大概是在两年前就开始用了吧.可总没有好好去学习下,很多很多功能不知道.今天下午 ...
- C++开始前篇，深入编译链接（补充1）
针对这些问题,这次做一个补充: 一,可重定位文件的格式是什么,以main.o为例, 格式为ELF ,包括:{1,ELF Header 它描述了整个文件的文件属性,包括文件是否可以执行,是静态链接还是动 ...
- 先定一个小目标，自己封装个ajax
你是否发现项目中有很多页面只用到了框架不到十分之一的内容,还引了压缩后还有70多kb的jquery库 你是否发现项目中就用了两三个underscore提供的方法,其他大部分的你方法你甚至从来没有看过 ...
- MVC 解决 readonly 问题
<input type="text" class="form-control" name="UR_UserName" value=&q ...