使用JQuery完成定时弹出广告、表格的隔行换色、复选框全选、省市联动、下列列表左右选择、表单的校验

本文详细介绍了如何使用jQuery实现网页上的常见交互功能,包括定时弹出广告、表格隔行换色、复选框全选与全不选、省市二级联动以及下拉列表的选择操作,并提供了详细的步骤和代码实现。
摘要由CSDN通过智能技术生成

今日任务

使用JQuery完成页面定时弹出广告(DOM转换和选择器)

使用JQuery完成表格的隔行换色

使用JQuery完成复选框的全选效果(jQuery的属性操作)

使用JQuery完成省市联动效果(jQuery的遍历和DOM操作)

使用JQuery完成下列列表左右选择(jQuery的事件)

使用JQuery完成表单的校验.

一、使用JQ完成首页的定时广告弹出

1.需求分析

在首页中(logo的上方)显示一个广告图片(页面加载后,间隔3秒弹出广告图片,再间隔3秒后隐藏广告图片)。

【使用jQuery实现】

2.技术分析

2.1 jquery相关的知识

  • 什么是jquery

Jquery它是javascript的一个轻量级框架,对javascript进行封装,它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

  • 怎么使用jquery

Jquery它是一个库(框架),要想使用它,必须先引入!

jquery-1.8.3.js:一般用于学习阶段。

jquery-1.8.3.min.js:用于项目使用阶段

  • Jquery的简单入门

所有的jquery代码写在页面加载函数

$(function(){

Jquery代码

});

<html>

<head>

<meta charset="UTF-8">

<title>jquery入门</title>

<script src="../../js/jquery-1.8.3.js"></script>

<script>

//整个文档加载完毕后执行

/*function init(){

alert("张三");

}*/

 

/*window.οnlοad= function(){

alert("张三");

}

 

//整个文档加载完毕后(包括图片)执行

window.οnlοad= function(){

alert("老王");

} //传统的JavaScript页面加载函数是最后一个生效,它会覆盖之前的。它的加载顺序比jQuery的要慢。【它是整个文档加载完毕后才会执行】

 

//dom树绘制完毕后执行,可能DOM元素关联东西并没有加载完

jQuery(document).ready(function(){

alert("李四");

});  //jQuery的页面加载函数可以存在多个(不会发生覆盖),它会按照顺序进行执行。(dom数加载完成)

 

//jquery的简写方法(页面加载)

$(function(){

alert("王五");

});

*/

 

function init(){

document.getElementById("a1").onclick= function(){

location.href="";

}

}

 

$(function(){

document.getElementById("a1").onclick= function(){

location.href="";

}

});

 

$(function(){

document.getElementById("a2").onclick= function(){

location.href="";

}

});

 

</script>

 

</head>

<body onload="init()">

<a href="#" id="a1">ss</a>

<a href="#" id="a2"></a>

</body>

</html>

  • 获取元素

JS:document.getElementById();

JQ:$(“#id”);

  • Jquery对象与DOM对象转换

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>

<script>

function JSWrite(){

//document.getElementById("span1").innerHTML="美美哒!";

var spanEle = document.getElementById("span1");

$(spanEle).html("美美哒!");

}

 

$(function(){

/*document.getElementById("btn1").onclick = function(){

document.getElementById("span1").innerHTML="帅帅哒!";

}*/

$("#btn1").click(function(){

//JQ对象转换成DOM对象的第一种方式

//$("#span1")[0].innerHTML="呵呵哒!";

//JQ对象转换成DOM对象的第二种方式

$("#span1").get(0).innerHTML="呵呵哒!";

});

 

});

</script>

</head>

<body>

<input type="button" value="JS写入" onclick="JSWrite()"/>

<input type="button" value="JQ写入" id="btn1"/><br /><br />

<span id="span1">sssss</span>

</body>

</html>

 

注意:JQ对象只能操作JQ里面的属性和方法

  JS对象只能操作JS里面的属性和方法。

  • Jquery的效果

3.实现步骤

第一步:引入jQuery相关的文件

第二步:书写页面加载函数

第三步:在页面加载函数中,获取显示广告图片的元素。

第四步:设置定时操作(显示广告图片的函数)

第五步:在显示广告图片的函数中,使用jQuery的方法让广告图片显示(show())

第六步:清除显示广告图片的定时操作

第七步:设置定时操作(隐藏广告图片的函数)

第八步:在隐藏广告图片的函数中,使用jQuery的方法让广告图片隐藏(hide())

第九步:清除隐藏广告图片的定时操作

4.代码实现

<script type="text/javascript">

var time;

$(function(){

time=setInterval("showAd()",3000);

});

 

function showAd(){

//$("#img1").show();

//$("#img1").slideDown(3000);

$("#img1").fadeIn(3000);

clearInterval(time);

time = setInterval("hideAd()",5000);

}

 

function hideAd(){

//$("#img1").hide();

//$("#img1").slideUp(3000);

$("#img1").slideUp(3000);

clearInterval(time);

}

 

</script>

 

5.补充内

Toggle的使用

<html>

<head>

<meta charset

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值