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

2020-05-27 18:14:11易采站长站整理

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;