<!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文件处理

    假设要读取number.txt文件中内容,code.txt文件内容如下 [ [1,2,3], [4,5,6], [7,8,9] ] 数据写入表格,如图 写文件(如果有文件,那直接调用就行,我这里自己先 ...

  2. Should I buy Auro OtoSys IM600 or Obdstar X300 DP?

    Auro OtoSys IM600 and Obdstar X300 DP – What’s the difference & Which better? This is for those ...

  3. 转 Django中的Form

    https://www.cnblogs.com/chenchao1990/p/5284237.html Form 一.使用Form Django中的Form使用时一般有两种功能: 1.生成html标签 ...

  4. 将个人博客与github关联

    目录 将个人博客与github关联 将个人博客与github关联 #基于svg <a href="https://github.com/chatlotte" class=&q ...

  5. xml和json互转

    开发过程中有些时候需要把xml和json互转,如某钱X接口入参和出参都是xml格式的,十分蛋疼.特写下面工具类,以留用. 需要引用jar: <!-- https://mvnrepository. ...

  6. Windows屏幕模糊，图片打开慢等解决方案

    百度经验

  7. HBase学习（二）

    HBase安装说明: HBase下载地址: http://archive.apache.org/dist/hbase/ 更新比较多的版本是比较稳定,使用周期比较长的版本 HBase表操作命令:http ...

  8. vue-cli构建项目在index.html中使用静态文件

    在vue-cli构建的项目中,且使用在移动端,我们希望每一个页面加载时都可以使用flexible.js来适配手机. 那么这个flexible.js被import到每一个组件中就不合适了. 好的方法是直 ...

  9. Kudu安装前的建议说明（博主推荐）

    不多说,直接上干货! 能点击进来看我写的这篇博文的朋友,肯定是刚入门的你. 其实以下是我从官网翻译过来的. http://kudu.apache.org/docs/installation.html# ...

  10. linux 下库的深入调研

    linux操作系统中,linux库文件路径还是比较常用的,于是我研究了一下linux库文件路径,在这里拿出来和大家分享一下,希望对大家有用. 库文件在连接(静态库和共享库)和运行(仅限于使用共享库的程 ...