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 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
随机推荐
- Centos YUM 升级PHP
升级到5.3.3 1.删除已安装文件 yum remove php-* 2.安装 PHP 5.3 yum -y install php53* 升级到5.6 1.删除已安装文件 ...
- 使用Fiddler关于“由于目标计算机积极拒绝，无法连接。”的解决方案
今天使用Fiddler的时候遇到下面这个问题:在地址栏想打开个一般处理程序,出现连接本机失败的提示,如下图: 而这在我没打开Fiddler的时候是显示正常的. 查看Fiddler,在嗅探 -> ...
- 【Java EE 学习 80 下】【调用WebService服务的四种方式】【WebService中的注解】
不考虑第三方框架,如果只使用JDK提供的API,那么可以使用三种方式调用WebService服务:另外还可以使用Ajax调用WebService服务. 预备工作:开启WebService服务,使用jd ...
- 剑指Offer-【面试题02：实现Singleton 模式——七种实现方式】
题目:设计一个类,我们只能生成该类的一个实例 package com.cxz.demo02; /** * Created by CXZ on 2016/9/13. */ public class Si ...
- Problem with "AnyConnect was not able to establish connection to the specified secure gateway."
Cisco的VPN客户端最近报"AnyConnect was not able to establish connection to the specified secure gateway ...
- XmlValidationHelper XSD、Schema(XmlSchemaSet)、XmlReader(XmlValidationSettings)、XmlDocument、XDocument Validate
namespace Test { using Microshaoft; using System; using System.Xml; using System.Xml.Linq; class Pro ...
- F#之旅6 - 简单AV推荐系统
上回说到用F#来写爬虫,这只是F#学习第一阶段的第一步.最开始,就对第一阶段做了这样的安排: 1.爬虫爬取AV数据 2.数据处理和挖掘 3.数据可视化(使用ECharts) 4.推荐系统 第一步很快就 ...
- flume+kafka+spark streaming整合
1.安装好flume2.安装好kafka3.安装好spark4.流程说明: 日志文件->flume->kafka->spark streaming flume输入:文件 flume输 ...
- 使用git grep进行git搜索
1.git grep foo 会自动map所有包含foo的文件 2.git grep -n foo 显示行号 3.git grep --name-only foo 只显示文件名 4.git grep ...
- PowerDesigner修改生成mysql视图
今天遇到了个问题,就是有PowerDesigner的设计图,能生成oracle的视图,不能生成mysql,在网上找到了解决方案, 非常感谢各位网友的分享,这个不是抄袭,主要是为了让更多的人知道这种解决 ...