<!DOCTYPE html>

<html lang="zh">

	<head>

		<meta charset="UTF-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<meta http-equiv="X-UA-Compatible" content="ie=edge" />

		<title>JQuery应用</title>

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

		<script>

			$(function() {

				$("table").attr("bgcolor", "red"); //设置表格的背景颜色

				$("tr").attr("bgcolor", "#3366CC"); //为单数行表格设置背景颜色

				$("tr:even").css("background-color", "#CC0000"); //为双数行表格设置背颜色素

				$("table").css("width", "300px"); //为表格添加样式，设置表格长度为300像素

			});

			// 复选框的全选和全不选

			$(function() {

				// 获得上面的复选框

				var $selAll = $("#selAll");

				$selAll.click(function() {

					if($selAll.prop("checked") == true) {

						// 上面的复选框已被选中

						$(":checkbox[name='selone']").prop("checked", true);

					} else {

						// 上面的复选框没被选中

						$(":checkbox[name='selone']").prop("checked", false);

					}

				});

			});

			//3、使用JQ实现省市联动

			$(function() {

			var i = 0;

			var arr = new Array(3);

			arr[0] = new Array("增城", "新塘", "长安");

			arr[1] = new Array("玉林", "容县", "博白");

			arr[2] = new Array("成都", "广元", "攀枝花");

			$("[name='pro']").change(function() {

				//获取省的下拉选的值

				var $pro = $("[name='pro']").val();

				//获取市的下拉选

				var $citys = $("[name='city']");

				//初始化 用一种创建标签增加内容的方式

				$citys.html($("<option>").html("-请选择-"));

				//遍历数组

				$(arr[$pro]).each(function() {

					//把二维数组增加到下拉选框内

					$citys.append("<option>" + arr[$pro][i] + "</option>");

					i++;

					if(i >= 3) {

						i = 0;

					}

				});

			});

		});

		</script>

	</head>

	<body>

		<!--1、使用JQ实现表格隔行换色

        2、使用JQ的表格全选和全不选

        3、使用JQ实现省市联动

    -->

		<div class="d1">

			<table border="1" cellspacing="0" cellpadding="0" id="tb">

				<tr>

					<td><input type="checkbox" name="selone" id="selAll" value="" />1</td>

					<th colspan="2">使用JQ实现表格隔行换色</th>

				</tr>

				<tr>

					<td><input type="checkbox" name="selone" id="sel" value="" />1</td>

					<td colspan="2">Data</td>

				</tr>

				<tr>

					<td><input type="checkbox" name="selone" id="sel" value="" />1</td>

					<td colspan="2">Data</td>

				</tr>

				<tr>

					<td><input type="checkbox" name="selone" id="sel" value="sel" />1</td>

					<td colspan="2">Data</td>

				</tr>

				<tr>

					<td><input type="checkbox" name="selone" id="sel" value="" />1</td>

					<td colspan="2">Data</td>

				</tr>

			</table>

		</div>

		<div class="d2">

			<h1>省级二级联动</h1>

			<select name="pro">

			<option selected="selected">---请选择---</option>

			<option value="0">广东省</option>

			<option value="1">广西省</option>

			<option value="2">四川省</option>

		</select>

		<select name="city">

			<option selected="selected">---请选择---</option>

		</select>

		</div>

	</body>

</html>

2018.7.5 jQuery学习的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jquery学习（一）

    简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  6. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  7. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  8. jquery学习以及下载链接

    jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...

  9. 转载最佳JQuery学习网站

    转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript    ...

随机推荐

  1. python解决excel工作薄合并处理（openpyxl处理excel2010以上版本）

    前段时间使用xlrd.xlwt对文件进行处理(https://www.cnblogs.com/pinpin/p/10287491.html),但是只能处理excel2010以下版本,所以又写了个处理e ...

  2. Linux下Java环境安装配置记录

    下载jdk http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 两种安装方式: 第一 ...

  3. 《mac的git安装手册-1》

    <mac的git安装手册-1> 下载地址 https://git-scm.com/downloads 如果遇到上面这个问题打开系统偏好设置: OK,这样就能安装了

  4. swagger demo code

    //Application 开启注解 @EnableSwagger2public class Application { public static void main(String[] args) ...

  5. swiper控件（回调函数）

    来源 属性: swiper.slides.length 1.onInit(swiper): function(){...} swiper初始化完成,会调回调  onInit 方法 获取当前swiper ...

  6. iframe高度自适应，自适应子页面高度

    html <iframe id="mainFrame" name="mainFrame" scrolling="no" src=&qu ...

  7. LeetCode 860.柠檬水找零（C++）

    在柠檬水摊上,每一杯柠檬水的售价为 5 美元. 顾客排队购买你的产品,(按账单 bills 支付的顺序)一次购买一杯. 每位顾客只买一杯柠檬水,然后向你付 5 美元.10 美元或 20 美元.你必须给 ...

  8. HDU 5532——Almost Sorted Array——————【技巧】

    Almost Sorted Array Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Ot ...

  9. C# 和 Linux 时间戳转换

            /// <summary>         /// 时间戳转为C#格式时间         /// </summary>         /// <par ...

  10. csdn下载

    按次收费: http://www.itziy.com/