1 概念
jQuery 是一个广泛使用的 JavaScript 库，它简化了在网页中处理 HTML 文档、处理事件、执行动画和使用 AJAX 等常见任务的过程。
jQuery 库包含的主要功能：
- DOM 操作：jQuery 提供了简洁易用的 API，使得对 DOM 元素的选择、创建、删除、修改等操作变得更加方便。可以使用选择器、添加/删除/修改元素的属性和样式、操作元素的内容等。
- 事件处理：jQuery 简化了事件处理的过程，可以方便地绑定和触发事件，并且支持多种事件类型，如点击、键盘按下、鼠标移动等。可以通过事件处理函数来响应用户的交互。
- AJAX：jQuery 提供了强大的 AJAX 功能，可以轻松地进行异步数据交互。可以发送 HTTP 请求、获取服务器返回的数据，并在页面中展示或处理。支持各种类型的请求，如 GET、POST，以及 JSONP、跨域请求等。
- 动画效果和过渡效果：jQuery 内置了丰富的动画和过渡效果，可以通过简单的方法调用实现元素的平滑过渡、淡入淡出、滑动等效果。可以控制动画的持续时间、缓动效果等。
- 链式操作：jQuery 的方法通常支持链式操作，可以连续调用多个方法来完成复杂的操作，代码更加简洁、可读性更高。
- AJAX 功能：jQuery 提供了丰富的 AJAX 相关方法，如 .ajax()、.get()、.post()，以及用于处理 JSON 数据的 .getJSON() 方法等。
- 表单操作：jQuery 提供了方便的表单操作方法，如表单验证、表单提交、表单序列化等。可以对表单元素进行获取、设置值、验证等操作。
- 插件扩展：jQuery 拥有庞大的插件生态系统，有很多开发者编写了各种强大的插件，用于扩展 jQuery 的功能。这些插件可以实现诸如图表绘制、日期选择器、图片轮播等功能。
2 jQuery的安装
2.1 jQuery的版本
- 1.x 版本：这个版本是最早发布的 jQuery 版本，适用于旧版浏览器，包括 Internet Explorer 6/7/8。这个版本有很好的兼容性，运行速度较快，但功能相对较为简单。
- 2.x 版本：这个版本是在 1.x 版本基础上进行了改进，去除了一些不兼容的部分，提高了性能。这个版本适用于现代浏览器，不再支持 Internet Explorer 6/7/8。
- 3.x 版本：这个版本是最新的 jQuery 版本，适用于现代浏览器，并支持 ES6+ 语法。这个版本在 2.x 版本的基础上进行了改进，修复了一些 Bug，并且添加了新的特性和方法。
- jQuery 3.x 版本已经不再支持 Internet Explorer 6/7/8 浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
2.2 jQuery的下载
jQuery官网地址： https://jquery.com/
打开官网，即可看到jQuery的下载按钮，点击进入下载页面。有两个版本的jQuery可以下载：
- Production version - 用于实际的网站中，是已经被精简和压缩过的jQuery文件。
- Development version - 用于测试和开发中，是未压缩的jQuery文件，可以方便阅读源码。
2.3 jQuery的使用
引入 jQuery：在 HTML 文件中使用 <script> 标签将 jQuery 引入到你的页面中。你可以将 jQuery 文件下载到本地并使用相对路径引入，或者使用 CDN（内容分发网络）引入 jQuery。
2.3.1 本地引入
<head>
<script src="jquery-1.11.1.js"></script>
</head>
2.3.2 使用CDN引入
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
3 jQuery的语法结构
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）。
3.1 基础语法
<!-- 语法-->
<script>
$(selector).action()
<!--
说明：美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
-->
</script>
<!-- 示例-->
<script>
$("p").hide() // 隐藏所有 <p> 元素
$(".my-class").addClass("highlight") // 给所有类名为 "my-class" 的元素添加 "highlight" 类
$("#my-id").text("Hello, jQuery!") // 设置 ID 为 "my-id" 的元素的文本内容为 "Hello, jQuery!"
$("input").val() // 获取第一个 input 元素的值
</script>
3.2 文档就绪事件
在 jQuery 中，文档就绪事件被称为 ready 或者 DOMContentLoaded。
文档就绪事件，实际就是文件加载事件，是指在浏览器完全加载和解析 HTML 文档后执行的事件。
- 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
- 如果在文档没有完全加载之前就运行函数，操作可能失败。
- 所以我们尽可能将所有的操作都在文档加载完毕之后实现。
/* 语法一 */
$(document).ready(function() {
// 在文档就绪时执行的代码
// 这里可以编写你的逻辑
});
/* 语法二 */
$(function(){
// 开始写 jQuery 代码...
});
jQuery的ready方法与JavaScript中的onload相似，但是也有区别：
| window.onload | $(document).ready() | |
|---|---|---|
| 执行次数 | 只能执行一次，如果执行第二次，第一次的执行会被覆盖 | 可用执行多次，不会覆盖之前的执行 |
| 执行时机 | 必须等待网易全部加载挖完毕（包括图片等），然后再执行包裹的代码 | 只需要等待网页中的DOM结果加载完毕就可以执行包裹的代码 |
| 简写方式 | 无 | $(function(){ }); |
4 jQuery选择器
4.1 元素/标签选择器（Element Selector）
使用 HTML 元素的标签名作为选择器
/* 语法 */
$("标签名称")
/* 示例 */
$("p") // 选择所有 <p> 元素
4.2 ID 选择器（ID Selector）
使用元素的 ID 属性作为选择器，在 ID 前加上 # 字符
/* 语法 */
$("#id")
/* 示例 */
$("#my-id") // 选择 ID 为 "my-id" 的元素
4.3 类选择器（Class Selector）
使用类名作为选择器，在类名前加上 . 字符
/* 语法 */
$(".class")
/* 示例 */
$(".my-class") // 选择所有类名为 "my-class" 的元素
4.4 全局选择器
// * 通配选择器（Wildcard Selector）
$("*") // 选择所有元素
// document 全局对象选择器（Document Object Selector）
$(document) // 选择整个文档对象
// window 全局对象选择器（Window Object Selector）
$(window) // 选择整个窗口对象
4.5 并集选择器
用于选择多个选择器的并集结果。
并集选择器使用逗号（,）将多个选择器分隔开。
- 使用并集选择器可以同时选取多个不同类型的元素。
$("p, .my-class") // 选择所有 <p> 元素和所有类名为 "my-class" 的元素
$("#my-id, input[type='text']") // 选择 ID 为 "my-id" 的元素和所有 type 属性为 "text" 的 input 元素
4.6 后代选择器
用于选择指定元素的后代元素。
后代选择器使用空格（``）来表示父元素和子元素之间的关系。
- 后代元素是指嵌套在另一个元素内部的元素。
$("parent descendant") // 选择父元素内部的所有后代元素
$(".parent .child") // 选择类名为 "parent" 的元素内部的类名为 "child" 的后代元素
$("#parentID > .child") // 选择 ID 为 "parentID" 的元素直接子级中类名为 "child" 的元素
4.7 子选择器
用于选择指定元素的直接子元素。
子选择器使用大于号（>）表示父元素和子元素之间的关系。
$("parent > child") // 选择父元素的直接子元素
$(".parent > .child") // 选择类名为 "parent" 的元素的直接子元素中类名为 "child" 的元素
$("#parentID > span") // 选择 ID 为 "parentID" 的元素的直接子元素中的所有 <span> 元素
4.8 相邻选择器
用于选择紧接在另一个元素后面的元素。
相邻选择器使用加号（+）表示两个元素之间的关系。
$("element1 + element2") // 选择紧接在 element1 后面的 element2 元素
$(".sibling + .sibling") // 选择类名为 "sibling" 的元素后面紧接着的同级类名为 "sibling" 的元素
$("#siblingID + p") // 选择 ID 为 "siblingID" 的元素后面紧接着的同级 <p> 元素
4.9 同辈选择器
用于选择与指定元素在同一层级的其他元素。
同辈选择器使用波浪号（~）表示两个元素之间的关系。
$("element1 ~ element2") // 选择与 element1 在同一层级的所有 element2 元素
$(".sibling ~ .sibling") // 选择类名为 "sibling" 的元素后面所有同级的类名为 "sibling" 的元素
$("#siblingID ~ p") // 选择 ID 为 "siblingID" 的元素后面所有同级的 <p> 元素
4.10 属性选择器
用于选择具有特定属性和属性值的元素。
属性选择器使用方括号（[]）表示属性名称和属性值。
$("[attribute]") // 选择具有指定 attribute 属性的元素
$("[attribute=value]") // 选择 attribute 属性值等于 value 的所有元素
$("[attribute!=value]") // 选择 attribute 属性值不等于 value 的所有元素
$("[attribute^=value]") // 选择 attribute 属性值以 value 开头的所有元素
$("[attribute$=value]") // 选择 attribute 属性值以 value 结尾的所有元素
$("[attribute*=value]") // 选择 attribute 属性值包含 value 的所有元素
4.11 可见性选择器
用于选择在页面上可见或隐藏的元素。
常用的可见性选择器：
- :visible：选择所有当前可见的元素。
- :hidden：选择所有当前隐藏的元素。
- :eq(index)：选择在匹配集合中指定索引位置的元素。索引从0开始。
- :first：选择匹配集合中的第一个元素。
- :last：选择匹配集合中的最后一个元素。
- :not(selector)：选择与给定的选择器不匹配的元素。
$(":visible") // 选择所有当前可见的元素
$(":hidden") // 选择所有当前隐藏的元素
$("div:eq(2)") // 选择匹配集合中索引为2的div元素
$("p:first") // 选择匹配集合中的第一个<p>元素
$("span:last") // 选择匹配集合中的最后一个<span>元素
$("ul li:not(.selected)") // 选择ul中除了具有.selected类的li元素
其余更多选择器参考jQuery选择器参考手册
5 jQuery常用函数
| 函数 | 作用 | 描述 |
|---|---|---|
| $() | 选取元素 | 通过选择器获取所需的元素，例如$(‘div’)将选取所有的<div>元素。 |
| click() | 绑定点击事件 | 可以通过$(‘selector’).click(function(){})来给指定的元素绑定点击事件。 |
| hide()和show() | 隐藏和显示元素 | $(‘selector’).hide()可以将指定元素隐藏，而$(‘selector’).show()可以将已经隐藏的元素显示出来。 |
| addClass()和removeClass() | 添加和删除类名 | $(‘selector’).addClass(‘className’)可以为指定元素添加类名，而$(‘selector’).removeClass(‘className’)可以将指定元素中的类名删除。 |
| html()和text() | 操作HTML文本 | $(‘selector’).html()可以获取指定元素的HTML文本，而$(‘selector’).text()则可以获取指定元素的文本内容。另外，两者也可以用于设置元素的HTML或文本内容。 |
| attr() | 设置或获取元素的属性值 | 可以使用$(‘selector’).attr(‘attrName’)获取指定元素的属性值，也可以使用$(‘selector’).attr(‘attrName’, ‘attrValue’)设置指定元素的属性值。 |
| each() | 遍历元素 | 可以使用$(‘selector’).each(function(){})遍历指定元素，类似于for循环遍历数组。 |
| css() | 修改元素的样式 | $(‘selector’).css(‘属性名’, ‘属性值’)可以为指定元素设置任何CSS样式。 |
| fadeIn()和fadeOut() | 淡入淡出元素 | $(‘selector’).fadeIn()可以使指定元素以逐渐增加的透明度显示，而$(‘selector’).fadeOut()则可以使其以逐渐减小的透明度隐藏。 |
| animate() | 使用动画效果改变元素的样式 | $(‘selector’).animate({‘属性1’:‘属性值1’, ‘属性2’:‘属性值2’}, duration)函数可以改变指定元素的多个样式属性，并以动画效果实现。 |
6 jQuery与js对象的转换
- 将jQuery对象转换为JavaScript对象：
- 使用get()函数：将jQuery对象转换为一个包含原生JavaScript对象的数组。例如：var jsObj = $(‘selector’).get();。
- 使用索引访问元素：如果你确定只有一个元素匹配选择器，也可以直接通过索引来访问。例如：var jsObj = $(‘selector’)[0];。
- 将JavaScript对象转换为jQuery对象：
- 使用$()函数：将原生JavaScript对象包装成一个jQuery对象。例如：var jqObj = $(jsObj);。
// jQuery对象转换为JavaScript对象
var jqObj = $('.className');
var jsObj1 = jqObj.get(); // 使用get()函数
var jsObj2 = jqObj[0]; // 通过索引
// JavaScript对象转换为jQuery对象
var jsObj3 = document.getElementById('idName');
var jqObj2 = $(jsObj3);
7 jQuery中的事件
7.1 常用DOM事件列表
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keydown | submit | load |
| dblclick | keyup | change | |
| mouseover | focus | ||
| mouseout | blur | ||
| hover |
7.2 click()
当元素被点击时触发
$('selector').click(function(){
// 处理点击事件的代码
});
7.3 mouseenter()和mouseleave()
当鼠标进入或离开元素时触发
$('selector').mouseenter(function(){
// 处理鼠标进入事件的代码
});
$('selector').mouseleave(function(){
// 处理鼠标离开事件的代码
});
7.4 keydown()和keyup()
当按键按下或释放时触发
$(document).keydown(function(event){
// 处理按键按下事件的代码
});
$(document).keyup(function(event){
// 处理按键释放事件的代码
});
7.5 submit()
当表单提交时触发
加粗样式
$('form').submit(function(event){
event.preventDefault(); // 阻止表单默认提交行为
// 处理表单提交事件的代码
});
7.6 focus()和blur()
当元素获得或失去焦点时触发
$('input').focus(function(){
// 处理元素获得焦点事件的代码
});
$('input').blur(function(){
// 处理元素失去焦点事件的代码
});
7.7 scroll()
当滚动条滚动时触发
$(window).scroll(function(){
// 处理滚动事件的代码
});
7.8 load()
加载远程内容并将其插入到选定的元素中
//加载静态内容
$(selector).load("url", function(responseTxt, statusTxt, xhr){
// 处理加载完成后的回调函数
});
//加载HTML片段
$(selector).load("url #elementId", function(responseTxt, statusTxt, xhr){
// 处理加载完成后的回调函数
});
//加载数据传递参数
$(selector).load("url", {param1: value1, param2: value2}, function(responseTxt, statusTxt, xhr){
// 处理加载完成后的回调函数
});
8 jQuery操作DOM
8.1 元素的增加
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
$('selector').append(content) // 在元素内部末尾添加内容
$('selector').prepend(content) // 在元素内部开头添加内容
$('selector').after(content) // 在被选元素之后插入指定内容
$('selector').before(content) // 在被选元素之前插入指定内容
8.2 元素的克隆
clone(boolean)-创建一个指定元素的副本，并返回这个副本的jQuery对象
// 克隆id为"myElement"的元素，并将其插入到id为"container"的元素内部
var $originalElement = $("#myElement");
var $clonedElement = $originalElement.clone();
$("#container").append($clonedElement);
注意：
- 使用clone()方法默认只会克隆被选元素本身，而不会克隆它的事件处理程序或其他数据。
- 如果需要连同事件处理程序一起克隆，可以传递一个布尔值参数给clone()方法，设置为true，即可进行深度克隆。
- 例如：var $clonedElement = $originalElement.clone(true);
8.3 元素的替换
- replaceWith(content)：将所有匹配的元素替换为指定的HTML字符串、DOM元素或jQuery对象。
- content可以是HTML字符串、DOM元素或jQuery对象
- replaceAll(selector)：用匹配的元素替换所有与选择器匹配的元素。
- selector是一个选择器字符串
// 将class为"oldElement"的元素替换为新内容content
$(".oldElement").replaceWith(content);
// 将id为"newElement"的元素替换掉所有class为"oldElement"的元素
$("newElement").replaceAll(".oldElement");
8.4 元素的删除
- remove()：删除被选元素及其子元素，同时也会删除事件处理程序和 jQuery 数据对象。
- empty()：从被选元素中删除子元素，保留被选元素本身。
// 删除id为"myElement"的元素及其子元素
$("#myElement").remove();
// 删除id为"myElement"的元素的所有子元素
$("#myElement").empty();
9 jQuery效果
9.1 隐藏和显示
9.1.1 隐藏
- hide()：隐藏被选元素。
// 隐藏id为"myElement"的元素
$("#myElement").hide();
9.1.2 显示
- show()：显示被选元素。
// 显示id为"myElement"的元素
$("#myElement").show();
9.1.3 参数：控制动画效果的速度、时间以及回调函数
- hide(speed, easing, callback)：指定隐藏动画的速度、缓动效果和完成后的回调函数。
- show(speed, easing, callback)：指定显示动画的速度、缓动效果和完成后的回调函数。
// 使用隐藏动画隐藏id为"myElement"的元素，并在动画完成后执行回调函数
$("#myElement").hide("slow", "swing", function() {
console.log("元素已隐藏");
});
// 使用显示动画显示id为"myElement"的元素，并在动画完成后执行回调函数
$("#myElement").show(1000, "linear", function() {
console.log("元素已显示");
});
9.2 淡入和淡出
9.2 淡入
- fadeIn()：将元素以淡入的方式显示出来。
// 以淡入的方式显示id为"myElement"的元素
$("#myElement").fadeIn();
9.2 淡出
- fadeOut()：将元素以淡出的方式隐藏起来。
// 以淡出的方式隐藏id为"myElement"的元素
$("#myElement").fadeOut();
9.3 参数：控制淡入淡出的速度、缓动效果以及完成后的回调函数
- fadeIn(speed, easing, callback)：指定淡入动画的速度、缓动效果和完成后的回调函数。
- fadeOut(speed, easing, callback)：指定淡出动画的速度、缓动效果和完成后的回调函数。
// 使用淡入动画将id为"myElement"的元素显示出来，并在动画完成后执行回调函数
$("#myElement").fadeIn("slow", "swing", function() {
console.log("元素已淡入");
});
// 使用淡出动画将id为"myElement"的元素隐藏起来，并在动画完成后执行回调函数
$("#myElement").fadeOut(1000, "linear", function() {
console.log("元素已淡出");
});
10 基于jQuery实现表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
<script>
function isUserName(){
var val=$("input[name='userName']").val();
if(val==""){
$("span[id='userNameMsg']").html("用户名不能为空！").css("color","red");
return false;
}else if(/^[a-zA-z]\w{5,}/.test(val)==false){
$("span[id='userNameMsg']").html("用户名不合法！").css("color","red");
return false;
}
$("span[id='userNameMsg']").html("用户名可用！").css("color","green");
return true;
}
function isPwd(){
var val=$("input[name='pwd1']").val();
if(val==""){
$("span[id='pwd1Msg']").html("密码不能为空！").css("color","red");
return false;
}else if(val.length<8){
$("span[id='pwd1Msg']").html("密码长度不合法！").css("color","red");
return false;
}
$("span[id='pwd1Msg']").html("密码格式正确！").css("color","green");
return true;
}
function isPwd2(){
if($("input[name='pwd1']").val()!=$("input[name='pwd2']").val()){
$("span[id='pwd2Msg']").html("两次密码不一致！").css("color","red");
return false;
}
$("span[id='pwd2Msg']").html("OK！").css("color","green");
return true;
}
/*校验电话码格式-座机或者手机 */
function isTelCode(str) {
var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/;
if(reg.test(str)){
$("span[id='phoneMsg']").html("OK！").css("color","green");
return true;
}
$("span[id='phoneMsg']").html("电话格式不合法！").css("color","red");
return false;
}
/*校验邮件地址是否合法 */
function IsEmail(str) {
var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
if(reg.test(str)){
$("span[id='emailMsg']").html("OK！").css("color","green");
return true;
}
$("span[id='emailMsg']").html("邮箱地址不合法！").css("color","red");
return false;
}
/*校验是否选择了性别*/
function isGender(){
var val=$("select[name='gender']").val();
if(val==-1){
alert("请选择性别！");
return false;
}
return true;
}
//页面加载事件
$(function(){
$("input[name='userName']").blur(function(){
isUserName();
});
$("input[name='pwd1']").blur(function(){
isPwd();
});
$("input[name='pwd2']").blur(function(){
isPwd2();
});
$("input[name='phone']").blur(function(){
isTelCode();
});
$("input[name='email']").blur(function(){
IsEmail();
});
$("#myForm").submit(function(){
return
isUserName()&&isPwd()&&isPwd2()&&isGender()&&isTelCode()&&IsEmail();
});
});
</script>
</head>
<body>
<h1>英雄会注册</h1>
<form id="myForm" action="提交.html" method="get" >
*用户名:<input type="text" name="userName" placeholder="请输入用户名"/>
<span id="userNameMsg">用户名长度至少6位,只能包含数字、字母、下划线，必须以字母开头</span><br />
*密码：
<input type="password" name="pwd1" placeholder="请输入密码"
required/>
<span id="pwd1Msg">密码长度至少8位</span><br />
*确认密码：
<input type="password" name="pwd2" placeholder="请确认密码"
required/>
<span id="pwd2Msg">确认密码与密码一致</span><br />
*性别：
<select id="gender">
<option value="-1">请选择性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br />
*电话号码：<input name="phone" required/><span id="phoneMsg">
</span><br />
*邮箱：<input name="email" type="email" required/><span
id="emailMsg"></span><br />
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
11 jQuery案例
11.1 全选/全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function () {
$("#check1").change(function () {
$(":checkbox[name='checkone']").prop("checked", $(this).prop("checked"));
});
});
</script>
</head>
<body >
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" id="check1" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkone"/>
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
11.2 动态时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态时间</title>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script>
function showTime() {
var time = new Date();
var y = time.getFullYear();
var mon = time.getMonth() + 1;//0-11
var d = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
$("#myTime").html(y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s);
}
function showTime2() {
var time = new Date();
var y = time.getFullYear();
var mon = time.getMonth() + 1;//0-11
var d = time.getDate();
var h = time.getHours();
var m = time.getMinutes();
var s = time.getSeconds();
$("#myTime2").html(y + "年" + mon + "月" + d + "日 " + h + ":" + m + ":" + s);
clock2 = window.setTimeout("showTime2()", 1000);
}
//变量定义的位置：两个函数中都调用了，所以需要定义成全局变量
var clock2 = window.setTimeout("showTime2()", 1000);
//页面加载事件
$(function () {
//定时器
var clock1 = window.setInterval("showTime()", 1000);
$("#btn1").click(function () {
window.clearInterval(clock1);
});
$("#btn2").click(function () {
window.clearTimeout(clock2);
});
});
</script>
</head>
<body>
<button id="btn1">停止</button>
<div id="myTime">
</div>
<button id="btn2">停止2</button>
<div id="myTime2">
</div>
</body>
</html>
11.3 动态表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" >
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" id="a1"> >> </a> <br />
<a href="#" id="a2"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
<script>
$(function () {
$("#a1").click(function () {
$("#leftSelect option:selected").appendTo($("#rightSelect"));
});
$("#a2").click(function () {
$("#leftSelect option").appendTo($("#rightSelect"));
});
});
</script>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
</html>
11.4 省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery-1.12.4.js"></script>
</head>
<body>
<!--选择省份-->
<select id="province" >
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
<script>
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
$("#province").change(function () {
var v = $("#province option:selected").attr("value");
var citys = provinces[v];
$("#city").html("");
for (var i = 0; i < citys.length; i++) {
$("#city").append("<option>" + citys[i] + "</option>")
}
});
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
