<!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. idea进行断点快捷键

    快捷键 功能描述 F8 单步调试,不进入函数内部 F7 单步调试,进入函数内部 Shift+F7 选择要进入的函数 Shift+F8 跳出函数 Alt+F9 运行到断点 Alt+F8 执行表达式查看结 ...

  2. vscode写vue模板--代码片段

    Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...

  3. Typora中给代码块设置快捷键

    Tpyore中大部分的操作都是有快捷键的.但是有那么几个常用的却没有快捷键.就比如代码块,这个常用的操作,还有有序无需列表. 下边教会你怎么设置快捷键,打开设置,Preferences[偏好设置],然 ...

  4. Jmeter录制pc脚本

    1.打开jmeter后可以看到左边窗口有个“测试计划”和“工作台”,右键“测试计划”,添加 Threads(Users) →线程组,再右键 线程组→添加 配置元件→Http请求默认值 Http请求默认 ...

  5. jmeter-集合点---学习笔记

    集合点: 简单来理解一下,虽然我们的“性能测试”理解为“多用户并发测试”,但真正的并发是不存在的,为了更真实的实现并发这感念,我们可以在需要压力的地方设置集合点,每到输入用户名和密码登录时,所有的虚拟 ...

  6. 【密码学】RSA密钥长度、明文长度和密文长度

    本文介绍RSA加解密中必须考虑到的密钥长度.明文长度和密文长度问题,对第一次接触RSA的开发人员来说,RSA算是比较复杂的算法,天缘以后还会补充几篇RSA基础知识专题文章,用最简单最通俗的语言描述RS ...

  7. Spring Boot实战(2) Spring常用配置

    1. Bean的Scope scope描述Spring容器如何新建Bean的实例.通过注解@Scope实现,取值有: a. Singleton:一个Spring容器中只有一个Bean的实例.此为Spr ...

  8. 查看SQL Server中的锁表及解锁

    有时候系统很慢,有可能是SQL Server数据库中某些表被锁定 --查看被锁表(需查多几次,有些临时锁很快会自动解锁): SELECT request_session_id AS spid, OBJ ...

  9. vue的ajax

    vue的ajax常见的有两种 ,一种是 vue-resource,一种是axios vue-resource: 是vue的插件,非官方库, vue1.x 使用广泛 如何使用: 先在vue的脚本架上安装 ...

  10. RequestMapping的使用

    1.RequestMapping的作用就是 配置url 2.实现功能: 可以在不同的url访问同一个方法.