JQuery的使用案例

(一)利用JQuery完成省市二级联动

第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份

第二步:创建二维数组来存储省份和城市

第三步:遍历二维数组中的省份(与用户选择的省份进行比较)【使用JQ的遍历操作】

第四步:接着遍历数组中的城市

第五步:创建一个城市文本节点

第六步:创建option元素节点

第七步:将文本节点添加到元素节点中【使用JQ的文档操作方法】

第八步:获取第二个下拉列表并将option元素节点添加进去

第九步:清除第二个下拉列表的option内容

代码实现:

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function(){
//2.创建二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); $("#province").change(function(){
//9.清除第二个下拉框里的内容
$("#city").empty();
//1.获取选择的省份
var val=this.value;
//3.进行省份的遍历,找出其下标
$.each(cities,function(i,n) {
if(val==i)
{
//4.遍历数组中的城市
$.each(cities[i],function (j,m) {
//5.创建城市文本节点
var t=document.createTextNode(m);
//6.创建option元素节点
var x=document.createElement("option");
//7.将文本节点添加到元素节点中
$(x).append(t);
//8.将元素节点添加到第二个下拉框下
$(x).appendTo($("#city")); });
}
});
});
});
</script>

html代码:

<div id="contanier">
<div id="content">
<table border="1" align="center" cellpadding="0" cellspacing="0" width="70%" height="70%" bgcolor="white">
<form method="get" action="#" onsubmit="return checkForm()">
<tr>
<td colspan="2" align="center">
<font size="5">会员注册</font>
</td> </tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="username" id="username" onfocus="showTips('username','必须以字母开头')" onblur="check('username','用户名不能为空')" /><span id="usernamespan"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" id="password" onfocus="showTips('password','密码长度不能低于6位!')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="password" name="repassword" />
</td>
</tr>
<tr>
<td>email</td>
<td>
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" />
</td>
</tr>
<!--1.编写HTML文件部分的内容-->
<tr>
<td>籍贯</td>
<td>
<!--2.确定事件,通过函数传参的方式拿到改变后的城市-->
<select id="province">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">河北</option>
<option value="3">河南</option>
</select>
<select id="city"> </select>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>出生日期</td>
<td>
<input type="text" name="birthday" />
</td>
</tr>
<tr>
<td>验证码</td>
<td>
<input type="text" name="yanzhengma" />
<img src="img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</form>
</table>
</div>
</div>

成功的截图:

当选择省份后:

(二)利用JQuery来实现表格隔行换色和全选操作

隔行换色的实现:

第一步:引入jquery的类库

第二步:直接写页面加载函数

第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

全选操作:

第一步:引入jquery文件

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

第三步:为上面的复选框绑定单击事件

第四步:将下面所有的复选框的选中状态设置成跟上面的一致!(attr)

上代码:

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
//1.页面加载
$(function(){
//第一种方法实现隔行换色
/*$("tbody tr:even").css("background-color","yellow");
$("tbody tr:odd").css("background-color","pink");*/ //第二种方法利用写好的css实现隔行换色
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
//实现全选
$("#check").click(function(){
$(".checkOne").attr("checked",this.checked);
});
});
</script>

html代码:

<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
<thead>
<tr>
<th>
<input type="checkbox" id="check" />
</th>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<input type="checkbox" class="checkOne"/>
</td>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr >
<td>
<input type="checkbox" class="checkOne"/>
</td>
<td>2</td>
<td>李四</td>
<td>25</td>
</tr>
<tr >
<td>
<input type="checkbox" class="checkOne"/>
</td>
<td>3</td>
<td>王五</td>
<td>27</td>
</tr>
<tr >
<td>
<input type="checkbox" class="checkOne"/>
</td>
<td>4</td>
<td>赵六</td>
<td>29</td>
</tr>
<tr >
<td>
<input type="checkbox" class="checkOne"/>
</td>
<td>5</td>
<td>田七</td>
<td>30</td>
</tr>
<tr >
<td>
<input type="checkbox" class="checkOne"/>
</td>
<td>6</td>
<td>汾九</td>
<td>20</td>
</tr>
</tbody>
</table>

实现截图:

全选后:

(三)轮播图的设置与广告的定时播放与隐藏

广告的定时播放与隐藏

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

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

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

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

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

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

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

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

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

轮播图的设置

第一步:书写轮图片显示的定时操作

第二步:获取图片位置并设置src属性值

代码:

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
//广告的播放和隐藏
$(function(){
//1.书写广告的定时操作
time = setInterval("changeShow()",3000);
});
function changeShow()
{
//2.获取广告并让其显示
$("#img2").show(1000);
//3.清除显示图片定时操作
clearInterval(time);
//4.设置隐藏图片的定时操作
time = setInterval("hidden()",3000);
}
function hidden()
{
//5.获取图片并隐藏
$("#img2").hide();
//6.清楚隐藏的定时操作
clearInterval(time);
} function init(){
//1.书写轮图片显示的定时操作
setInterval("changeImg()",2000);
} //2.书写函数
var i=0
function changeImg(){
i++;
//3.获取图片位置并设置src属性值
document.getElementById("img1").src="img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

对于今天的JQuery的学习做个简要的总结:

首先其功能很强大,还有很多未知的东西值得探索,不过掌握最基本的语法后,再结合相关的操作,就可以按照自己的意图去实现一些东西

继续加油!!!!

JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)的更多相关文章

  1. jQuery应用实例2:表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  2. jQuery入门——实现列表的显示隐藏与实现轮播图

    列表的显示与隐藏 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  3. JavaScript的案例(数据校验,js轮播图,页面定时弹窗)

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  4. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  5. JS实现自定义工具类,隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  6. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  7. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  8. JQuery案例一:实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. jQuery实现表格隔行换色且感应鼠标高亮行变色

    jQuery插件实现表格隔行换色且感应鼠标高亮行变色 http://www.jb51.net/article/41568.htm jquery 操作DOM的基本用法分享http://www.jb51. ...

随机推荐

  1. rhel7 学习第二天

    参加<Linux就该这么学>在线培训的第二天,学习了虚拟环环境的搭建和红帽7的安装,同时也学习了rhel7的基本命令格式,以及systemctl的使用.

  2. 交叉编译用于生成aarch64指令的GCC (9.2)

    参考 Building GCC as a cross compiler for Raspberry Pi How to Build a GCC Cross-Compiler 环境 PC: ubuntu ...

  3. lua使用ffi调用c程序的函数

    参考: https://blog.csdn.net/weiwangchao_/article/details/16880401   http://luajit.org/ext_c_api.html h ...

  4. Kustomize安装配置入门文档

    一,简介 kustomize是sig-cli的一个子项目,它的设计目的是给kubernetes的用户提供一种可以重复使用同一套配置的声明式应用管理,从而在配置工作中用户只需要管理和维护kubernet ...

  5. nginx 缓存服务

    1.nginx 缓存 upstream imooc { server 116.62.103.228:8001; server 116.62.103.228:8002; server 116.62.10 ...

  6. springtask 基本使用和 cron 表达式

    springtask 的基本使用和 cron 表达式 spring 容器依赖 <dependency> <groupId>org.springframework</gro ...

  7. jQuery中关于Ajax的详解

    原文来自:http://developer.51cto.com/art/201205/335732.htm Ajax让用户页面丰富起来, 增强用户体验. Ajax是所有Web开发的必修课. 虽然Aja ...

  8. 9-3 deepsort在win10配置

    win10+python3.5+tensorflow https://blog.csdn.net/Draw_1999/article/details/79735677 deep-sort https: ...

  9. Pandas | 16 聚合

    当有了滚动,扩展和ewm对象创建了以后,就有几种方法可以对数据执行聚合. DataFrame应用聚合 可以通过向整个DataFrame传递一个函数来进行聚合,或者通过标准的获取项目方法来选择一个列. ...

  10. Pandas | 03 DataFrame 数据帧

    数据帧(DataFrame)是二维数据结构,即数据以行和列的表格方式排列. 数据帧(DataFrame)的功能特点: 潜在的列是不同的类型 大小可变 标记轴(行和列) 可以对行和列执行算术运算 结构体 ...