<!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. 手工安装XDB 组件in oracle 11g

    #############. sample 1 install guide below step is only for oracle 11g database installation, 10g d ...

  2. ST-LINK接口定义

    ST-LINKIII管脚定义及接法:     ST-LINK IIILED灯三种状态含义: 常亮:目标板与ST-LINK在SWIM模式或者JTAG/SWD模式下已经通讯初始化. 闪烁:目标板与ST-L ...

  3. window对象的事件：onresize、onpageshow、onload

    onresize事件非常容易理解: 即当窗口或者框架的大小发生变化时,就会触发此事件. 实例demo onpageshow事件是当用户浏览网页时触发的. onpageshow 事件类似于 onload ...

  4. Kure讲HTML_列表标签及表单标签

    首先我上个图来告诉大家什么是列表 左侧的这一部分就可以称为是列表或者叫树,其实我们可以通过div+css实现列表,可是考虑语义化的问题,我们还是看看html提供好的列表标签,html提供了两种列表,一 ...

  5. .NET控制台程序监听程序退出

    There are mainly 2 types of Win32 applications, console application and window application. They hav ...

  6. HDU——Cover——————【技巧】

    Cover Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  7. 修改jar包bug的方式

    第一种方式 1. 直接在项目同样的包名里面新建同样的class,会优先jar包的class加载,等同于覆盖. 第二种方式 2. 拿到第一步打包后的jar或者war,找到相应的java类的.class文 ...

  8. 实现多ComboBox复杂查询 使用ComboBoxDisplay Value属性

    首先创建一个类 class ComboBoxItem { public string Text { get; set; } public object Value { get; set; } //这个 ...

  9. maven课程 项目管理利器-maven 3-10 maven聚合和继承 4星

    本节主要讲了以下内容: 1 maven聚合 2 maven继承 1 maven聚合 <!-- 聚合特有标签 --> <groupId>com.hongxing</grou ...

  10. Javascript的map与forEach的区别

    原理: 高级浏览器支持forEach方法语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没 ...