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

最新推荐文章于 2022-11-24 16:12:11 发布
最新推荐文章于 2022-11-24 16:12:11 发布
阅读量343 收藏 1
点赞数 3
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Marmara01/article/details/88615441
版权
本文详细介绍了如何使用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
最低0.47元/天 解锁文章
使用JQuery完成页面定时弹出广告
qq_42675691的博客
08-21 830
使用JQuery完成页面定时弹出广告 1.1 需求分析： 当用户打开界面，3秒钟之后弹出广告，这个广告显示5秒钟，隐藏广告 1.2 技术分析 定时器: setTimeout 显示和隐藏: style.display = “block/none” 什么JQuery: jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或Java...
jQuery学习(二)——使用JQ完成页面定时弹出广告
anjiukonghe77852的博客
08-24 103
1、JQuery效果 2、步骤分析： 第一步：引入jQuery相关的文件 第二步：书写页面加载函数 第三步：在页面加载函数中，获取显示广告图片的元素。 第四步：设置定时操作(显示广告图片的函数) 第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show()) 第六步：清除显示广告图片的定时操作 第七步：设置定时操作(隐藏广告图片的函数) 第八步...
隔行换色、注册功能、全选反选、两级联动、删除、批量删除等（周考2）
陌默
02-24 306
1. 完成如图布局，要求展示数据每行变色（如图所示）。2. 完成用户注册功能。用户信息要求信息校验，姓名非空，只能由字母和数字构成，长度6-12个字符；性别单选按钮，爱好复选框实现；籍贯实现两级联动，住址城市默认为北京，市区默认为海淀区，当用户改变城市时市区随之联动。3. 用户点击注册按钮时，如果信息不符合要求则弹框提示用户输入信息有误；如果输入信息准确则将数据添加展示到下面的列表中。4. 列表展...
JS实现表格隔行变色以及复选框的全选和全不选
BullZeng的博客
05-07 399
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; //设置表格隔行换色 functio
jQuery实现的多选框多级联动插件
12-11
jQuery 实现的多选框联动插件 代码如下: // 使用：$(_event_src_).autoSelect(_reload_, reload_url); // 前台用get方法传输<select>标签的属性”name”和选中的属性”value” // 后台用json格式传输数据 // 格式: { value:的属性”value”, text:的显示文本 } (function($) { $.fn.extend({ autoSelect: function(dest, url) { return this.each(function() {
layui复选框限制选择个数的方法
10-16
Layui中的复选框（checkbox）是表单元素的一种，允许用户从一组选项中选择多个选项。在某些场景下，我们可能需要对复选框选择的数量进行限制，以满足特定的业务需求。 这篇分享的文章主要讲述的就是如何在Layui中...
WEB06-jQuery.rar
最新发布
08-19
使用JQuery完成页面定时弹出广告(DOM转换和选择器) 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果(jQuery的属性操作) 使用JQuery完成省市联动效果(jQuery的遍历和DOM操作) 使用JQuery完成下列列表...
jQuery-表单验证使用方法
weixin_66602553的博客
04-23 2521
目录一、表单验证单词二、思维导图三、表单验证的使用方法四、复选框全选和取消全选 一、表单验证单词 二、思维导图 三、表单验证的使用方法 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></s
WEB05-jQuery-源代码.rar
08-19
使用JQuery完成页面定时弹出广告(DOM转换和选择器) 使用JQuery完成表格的隔行换色 使用JQuery完成复选框的全选效果(jQuery的属性操作) 使用JQuery完成省市联动效果(jQuery的遍历和DOM操作) 使用JQuery完成下列列表...
jQuery实现多级联动下拉列表查询框
11-23
本文实例介绍了jQuery实现多级联动下拉列表查询框的详细代码，分享给大家供大家参考，具体内容如下  效果图： 具体代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <meta name="keywords" content=" keywords" /> <meta name="description" content="description" /> </head> <script src="http://upcd
Jquery中的表格换行颜色设置与复选框点击设置
探花博客
06-18 284
2020-6-18 养生这个东西，不要等到身体出问题了，或者是上年纪了再去，而是年轻的时候就要开始保养，就像汽车一样 Jq完成表单隔行换色问题 思路： 1.建立一个表格 三行四列 2.头部设置为单独的用tread 内容部分用 3.在script中写代码 用层级选择器获取行数（偶数）或奇数 如果在样式中已经设置了css 可以直接添加某个行的类或者id <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&gt
jquery实现复选框联动
daxiang的专栏
04-27 9266
input1 input2 input3 input4 $('input[type="checkbox"]').click(function(){ // 获取当前复选框在所有复选框中索引 var index = $('input[type="checkbox"]').index(this); var arrStage = ['input4','input3','inp
如何通过jQuery实现select下拉框的联动效果
热门推荐
Big Smile
12-10 2万+
由于项目需要，小编需要实现三个HTML的select下拉框联动的效果，如果考虑到实际用户体验的话，直接用异步刷新的方式操作DOM是最好的选择，这里小编直接使用了jQuery作为DOM操作的工具，直接操作，完成了对于下拉框的操作，下面是实现方法： 一、页面效果         如图，有这么两个下拉框，当选择上面的类型的时候，下面的动物种类就会跟着去变化： 这里是牛的分类这里是羊
jQuery购物车多选框三级联动
m0_66128306的博客
11-24 448
仿淘宝购物车 多选框三级联动 仅限于实现功能
用jQuery实现简单的二级联动
weixin_49758946的博客
05-17 1295
这是网页效果图当你选择第一个框时第二个框会改变为相应的城市; 因为我是用bootstrap 和jQuery写的所有在写代码之前请用script标签引入bootstrap和jQuery; HTML部分 <div class="container"> <div > <select id="mer" > <option>请选择</option> ..
点击修改表格背景色
weixin_45743799的博客
10-26 789
使用Jquery事件实现点击修改表格的背景颜色 每列表格之前都有一个多选按钮，当你点击按钮时，这一行所有内容的背景色会发生改变，当你再次点击该多选按钮的时候，取消背景色。 未点击之前的样式 点击时候的样式 程序解读：使用table表格，每一行表格的第一个单元格都有一个多选按钮， 后几个单元格是内容，添加自己想要的样式效果。 看代码（注意一定要导入js文件） <!DOCTYPE html&...
省市区信息的CheckBox选择
weixin_34116110的博客
11-08 615
2019独角兽企业重金招聘Python工程师标准>>> ...
jquery Html table 页 实现点击选中tr行 改变背景颜色
你好邱林和的专栏
04-09 6340
Html table 页 实现点击选中tr行 改变背景颜色,我的情况是: table表格是使用jquery动态生成的,使用博主的代码没有用:如下: $("#tbody tr").click(function(){ //给每个tr 绑定点击事件 主要锁定每个tr var trs = $(this).parent().find(‘tr’); //获取所有tr if(trs.hasClass(‘...
jQuery实现复选框全选与全不选功能详解
总结起来，本文主要讲解了如何使用jQuery处理多选框的全选、全不选功能，并强调了选择器的正确使用。同时，也提醒开发者注意代码的细节和规范性，确保在实际项目中的稳定性和可维护性。在实际应用中，可能还会涉及到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值