<!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. SElinux学习记录

    1.SELinux:是一种基于域类型模型的强制访问控制安全系统,由NSA编写设计成内核模块包含到内核中,相应的某些安全相关的应用也被打了SE Linux补丁 查看Selinux: ps -Z #查看S ...

  2. java——arr == null || arr.length == 0

    这两者是不同的: arr == null; int[] arr = null; arr.length == 0; int[] arr =new int[0];

  3. python 安装 第三方包

    ########1 (python 虚拟环境(如pycharm 中的 project )是一个独立的环境,所以也要重新安装一次第三方包) 上官网搜索 包 https://pypi.org/projec ...

  4. 输入http://localhost/，apache出现You don't have permission to access/on this server.的提示，如何解决？

    本地搭建wamp,输入http://127.0.0.1访问正常,当输入http://localhost/,apache出现You don't have permission to access/on ...

  5. PIXI 写一个字及图片保存（2）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. TestNG的testng.xml配置概述

    TestNG提供的annotaions用来辅助定义测试类. TestNG的testng.xml配置文件用来辅助定义执行什么样的测试,即testng.xml更像是一个测试规划. testng.xml配置 ...

  7. Android官方架构组件介绍之LiveData(二)

    LiveData LiveData是一个用于持有数据并支持数据可被监听(观察).和传统的观察者模式中的被观察者不一样,LiveData是一个生命周期感知组件,因此观察者可以指定某一个LifeCycle ...

  8. day06 - Python - 面向对象

    本节内容: 引子 面向对象 v.s. 面向过程 面向对象编程介绍 面向对象的特性:       封装       继承       多态 类.方法   1.引子 假设你现在是一家游戏公司的开发人员,现 ...

  9. java多线程通过管道流实现不同线程之间的通信

    java中的管道流(pipeStream)是一种特殊的流,用于在不同线程间直接传送数据.一个线程发送数据到输出管道,另外一个线程从输入管道中读取数据.通过使用管道,实现不同线程间的通信,而不必借助类似 ...

  10. nginx+keepalived主辅切换（监控脚本在keepalived.conf中执行）

    以前写过一篇,nginx+keepalived 双机互备的文章,写那篇文章的时候没有想过如果apache或者nginx 挂了,而 keepalived 或者 机器没有死,那么主辅是不会切换的,今天就研 ...