基础JavaScript知识，觉得比较特别的就整理下来，以供日后查询，内容如下：
Part One
indexOf:正序查找该字符串
lastIndexOf：逆序查找该字符串
match：用正则表达式查询匹配的字符串
replace：用正则表达式替换匹配的字符串
substring：自定义范围复制字符串
slice：自定义范围删除字符串
toFixed：设置精确到小数点后几位
浮点数计算错误修正
RegExp.test：RegExp类型的test方法，查询字符串中是否存在该字符，返回boolean类型
用JSON存储Object：可在JSON中存储Object类型
toString：Int、Float、Number的科学记数法类型转换为字符串类型
parseInt：字符串转换为Int类型
parseFloat:字符串转换为Float类型
Boolean:其他类型强制转换为Boolean类型（null和“”为false）
Number:其他类型强制转换为Number类型
String:其他类型强制转换为String类型（用String强制转换null成功，用toString转换null出错）
Part Two
==：等于，比较值是否相等，忽略类型
===：全等，比较值和类型是否相等
for in 循环：遍历数组的循环，简化的for循环
window对象的简单运用：获取浏览器可用宽高
screen对象的简单运用：获取屏幕可用宽高
location对象的简单运用：重定位URL
阻止页面后退
Part Three
设置元素可拖动（拖放到另一元素内部），并传递数值（可传递三种类型：纯文本、超链接、html）
自定义拖放图标
effectAllowed的应用
读取拖放的本地文件
Part Four
fieldset、legend：legend作为域标题标签和fieldset域标签一起使用（若无legend，则框起来的是一条无缺口实线）
oninput、output：output与oninput配合使用，下图中是用来动态输出range类型的input标签的值
autocomplete：当取值为on时，类似datalist标签一样提示输入过的字符
image：该属性的input标签可视作自定义图片的submit属性input标签
alt：作为图像没有加载出来时的提示文字
label：标记标签，当点击标签内的任意一个元素时，该标签会得到焦点，多于文本和input一起使用
list：该属性的值为datalist标签的id，输出样式为网页搜索框的提示框
autofocus：页面加载时拥有该属性的标签自动获取焦点，若有多个标签有该属性，则最后一个标签获得焦点
size：该属性在text类型的input标签中默认为20，在select标签中则只显示两个子列表选项
placeholder：该属性显示在input框中的淡灰色提示字符（如：请输入密码），文本框获得焦点后消失
pattern：该属性的值一般配合正则表达式来用，用来匹配合法字符，若不匹配正则表达式，则出现提示
required：拥有该属性的标签为必填标签
number：该类型的input标签可选属性有min、max、value、step，分别为允许最小值，最大值，当今的值和值之间的间隔
radio：该属性的input标签为单选按钮，name为分组属性，同组有且仅有一个标签可选中
checkbox：该类型的input为多选按钮，name为分组属性，同组可有多个标签被选中
checked：该属性的标签自动被选中，多用于checkbox、radio、select标签
option：该标签为选择标签，多于select标签和datalist标签配合使用，作为可选子列表
password：该类型的input标签输入密码时会被*覆盖真实字符
tel：该类型的input标签格式为电话号码
email：该类型的input标签格式为email电子邮箱地址
title：作为验证出错时的提示字符
url：该类型的input标签格式为URL
range：该类型的input标签样式为一个可拖动的进度条，可选属性有min、max、value、step，分别为允许最小值，最大值，当今的值和值之间的间隔
onchange：为range类型的input标签属性，当拖动小方块时，松开方块就会调用该属性里的函数，与output不同的是，output标签是拖动过程中动态的显示值，这个是松开后才改变值
date pickers:有datetime、datetime-local、time、date、week和month6种类型样式不同的时间日期选择器控件
color：该属性的input标签是一个颜色板
file：该属性的input标签是一个上传文件标签，accept属性有image，text，audio，video等取值，省略则无类型
hidden：该属性的input标签在页面中是隐藏的，多用于存储session的id
resize：为css选择器属性，禁止textarea等标签自由改变大小
readonly:有该属性的textarea或text类型的input为只读类型
disabled:有该属性的textarea或text类型的input不可编辑
-webkit-user-select:none :为css选择器属性，禁止用户选中此元素
multipe：该属性的select标签可多选
optgroup：该标签多于option标签一起使用，在select标签中为列表标题，不可选中
reset：该类型的input标签可重置所有填过的数值和选中的选项
formmethod、formaction、formtarget…：这些属性在submit类型的input标签将替换form标签中的method、action、target等属性
form：有该属性的input标签在form标签外使用时，可填入对应的form标签的id值，与form标签一起被提交
Part Five
canvas:创建画布，并在JavaScript中得到对象
canvas1：绘制路径
canvas2：自定义填充颜色，自定义阴影效果，填充
canvas3：绘制贝塞尔曲线、圆弧
canvas4：绘制矩形，填充矩形，清空矩形区域
canvas5：绘制图片、文字（镂空字为绘制路径），填充自定义不透明度/渐变色矩形
canvas6：自定义线条宽度、颜色，增加矩形阴影
canvas7：save()和restore()的应用（stack堆栈类型）
canvas8,9,10：translate()移动，scale()缩放，transform()变形
canvas11：clip（）裁剪，随机彩色发光小星星（0.2s出现一次）
Part Six
audio：播放音频标签，属性muted（初始音频静音）
source：音/视频源文件标签（当有多个source文件内嵌且浏览器不支持播放某些类型文件时，浏览器会自动向下寻找能播放的文件）
Object：浏览器内嵌播放器，为了解决某些播放器不被浏览器支持可以内嵌多个object，并在param标签中存路径（源代码中没有加入这个标签）
controls：音/视频控制栏
video：播放视频标签
!!document.createElement(“音/视频标签ID”).canPlayType：测试浏览器是否支持此标签，返回值为boolean类型。类似在audio/video标签对中写”哎哟，浏览器不支持这个标签哦！“
Tips：1.音频的按钮js代码是获取按钮文字来判断音频是否暂停，若audio标签有controls属性，通过音频控制栏点击播放后再点击按钮会出现错误。
2.myVideo.paused返回值为boolean类型，可判断视频是否暂停，myVideo.played返回值为Object TimeRanges类型，不可用在if条件中。
3.快进/倒退5秒按钮在edge浏览器中可以实现，其他浏览器没有测试成功过。
Part Seven
地理定位（PC端和Android端）
Part Eight
localStorage、sessionStorage的增删改查
Part Nine
noConflict（）：别名防冲突$
replace：字符串替换
slice、substring：获取字符串
toUpperCase、toLowerCase：大小写转换
match：匹配字符串
exec：顺序检索字符串
test：检索是否有该字符串
for-in循环
jquery基本选择器、过滤器
常用的几个：
空格——后代选择器
+——后兄弟选择器
~——兄弟选择器
selector:eq(number)——第几个selector
selector:contains(‘string’)——文本包含string的选择器
Part Ten
jQuery 键盘事件
jQuery 鼠标事件
jQuery 表单事件
jQuery 绑定、解绑、临时事件
Part Eleven
jQuery动画
Part Twelve
jQuery DOM
Part Thirteen
jQuery Traversal(若图片太高，按F11全屏浏览)
Part Fourteen
jQuery AJAX
Part One:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="json/test.json"></script>
<title></title>
</head>
<body>
<div id="content" style="width: 550px;height: 1000px;">
<span style="color: lightgray;">用于测试的字符串：</span><span id="out"></span>
</div>
<script>
var x = "我试一下!",
y = "另一个字符串 Hello JavaScript 2019!";
x = x.concat(y);
addElement(x);
var firstYi = x.indexOf("一"),
lastYi = x.lastIndexOf("一");
addElement("indexOf('一'): "+firstYi+"<br>lastIndexOf('一'): "+lastYi);
var matchNum = x.match(/\d/g);
var replaceStr=x.replace(/a/g,"A");
var substring5=x.substring(0,5);
var slice5=x.slice(0,-5);
var toFixedStr=3.1415926.toFixed(2);
var floatNum=0.7+0.1;
var floatNum2=(0.7*10+0.1*10)/10;
var pattern=new RegExp("e");
var patternResult=pattern.test(x);
var v1=50,v2=50.5,v3=5e5;
var s1=v1.toString(),s2=v2.toString(),s3=v3.toString();
var str1="3.14";
var boolean1=Boolean("555"),boolean2=Boolean("");
var number1=Number("3.14"),number2=Number(true);
var nul=null;
var strNull=String(nul);
addElement("match(/\d/g): "+matchNum);
addElement("replace(/a/g,'A'): "+replaceStr);
addElement("substring(0,5): "+substring5+"<br>slice(0,-5): "+slice5);
addElement("3.1415926.toFixed(2): "+toFixedStr);
addElement("浮点数计算错误修正:<br>0.7+0.1= "+floatNum+"<br>(0.7*10+0.1*10)/10= "+floatNum2);
addElement("new RegExp('e').test('我试一下!另一个字符串 Hello JavaScript 2019!'): "+patternResult);
var p=new Object();
p.name="zlm";
p.sex="male";
p.tel="911";
person[0]=p;
addElement("用JSON存储Object<br>"+person[0].name+"<br>"+person[0].sex+"<br>"+person[0].tel);
addElement("toString: "+v1+" "+v2+" "+v3);
addElement("parseInt('3.14'): "+parseInt(str1)+"<br>parseFloat('3.14'): "+parseFloat(str1));
addElement("Boolean('555'): "+boolean1+"<br>Boolean(''): "+boolean2);
addElement("Number('3.14'): "+number1+"<br>Number('true'): "+number2);
addElement("String(null)='null', null.toString()发生错误"+strNull);
function addElement(x) {
var content=document.getElementById("content");
var newP=document.createElement("p");
newP.innerHTML=x;
content.appendChild(newP);
}
</script>
</body>
</html>
页面显示:
Part Two:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<textarea id="out" style="width: 600px;height: 800px;border: 1px solid saddlebrown;"></textarea>
<script>
var o = document.getElementById("out");
var v1 = 123;
var v2 = "123";
var v3 = v1 == v2,
v4 = v1 === v2;
o.innerHTML += "v1==v2? " + v3;
o.innerHTML += "\n1v1===v2? " + v4;
var person = new Object();
person.name = "test";
person.sex = "male";
person.tel = "911";
for(i in person)
o.innerHTML += "\n" + person[i];
o.innerHTML += "\nBrowser available height: " + window.innerHeight + "\nBrowser available width: " + window.innerWidth;
o.innerHTML += "\nScreen available height:" + screen.availHeight + "\nScreen available width:" + screen.availWidth;
location.href = "http://www.baidu.com";
history.pushState(null, null, window.location.href)
window.onpopstate = function(event) {
history.go(1)
}
</script>
</body>
</html>
页面显示:
Part Three:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="ppp" draggable="true" ondragstart="drag(event)" style="width:140px;height:30px;border: 1px solid saddlebrown;background: cornflowerblue;">draggable true</p>
<p id="ppp" draggable="true" ondragstart="drag1(event)" style="width:140px;height:30px;border: 1px solid saddlebrown;background: cornflowerblue;">effectAllowed: move</p>
<p id="ppp" draggable="true" ondragstart="drag2(event)" style="width:140px;height:30px;border: 1px solid saddlebrown;background: cornflowerblue;">effectAllowed: copy</p>
<p id="ppp" draggable="true" ondragstart="drag3(event)" style="width:140px;height:30px;border: 1px solid saddlebrown;background: cornflowerblue;">effectAllowed: link</p>
<p ondragover="allowDrag(event)" ondrop="drop(event)" style="width:200px;height:400px;border: 1px solid saddlebrown;">accept area</p>
<textarea id="mess" style="width: 400px;height: 100px;border: 1px solid saddlebrown;"></textarea>
<script>
function drag(ev) {
var img = new Image();
img.src = "img/-1.png";
ev.dataTransfer.setDragImage(img, 0, 0);
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.setData("text/uri-list", "http://www.baidu.com");
ev.dataTransfer.setData("text/html", "<p>hhh</p>");
}
function drag1(ev) {
ev.dataTransfer.setData("text/plain", "move");
ev.dataTransfer.effectAllowed = "move";
}
function drag2(ev) {
ev.dataTransfer.setData("text/plain", "copy");
ev.dataTransfer.effectAllowed = "copy";
}
function drag3(ev) {
ev.dataTransfer.setData("text/plain", "link");
ev.dataTransfer.effectAllowed = "link";
}
function allowDrag(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
var plain = ev.dataTransfer.getData("text/plain");
var uriList = ev.dataTransfer.getData("text/uri-list");
var html = ev.dataTransfer.getData("text/html");
if(plain != "" && uriList != "" && html != "")
document.getElementById("mess").innerHTML = plain + "\n" + uriList + "\n" + html;
ev.target.appendChild(document.getElementById(plain));
}
function drop2(ev) {
ev.preventDefault();
var files = ev.dataTransfer.files;
var mess = "";
var mess = document.getElementById("mess");
for(var i = 0, f; i < files.length; i++) {
f = files[i];
var lastModifyTime = f.lastModifiedDate.toLocaleString();
mess.innerHTML += "name: " + f.name + "\ntype: " + f.type + "\nsize: " + f.size + "\nlast modify time: " + lastModifyTime + "\n";
}
}
</script>
</body>
</html>
网页效果：
Part Four:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form id="myForm" action="http://www.baidu.com" method="get" oninput="output2.innerHTML=range2.value" autocomplete="on" novalidate="novalidate" >
<fieldset>
<legend>Form API</legend>
<input type="image" src="img/i20.png" alt="nut" style="width: 80px;height: 80px;" />
<input type="image" src="img/i21.png" alt="nut" style="width: 80px;height: 80px;" />
<input type="image" src="img/i1.png" alt="nut" style="width: 80px;height: 80px;" />
<input type="image" src="img/i14.png" alt="nut" style="width: 80px;height: 80px;" /><br />
<label>username:<input type="text" name="username" list="myList" autofocus="autofocus" size="21" placeholder="Please enter your name" pattern="[A-z]+" required="required"/></label><br />
<datalist id="myList">
<option>test1</option>
<option>test2</option>
<option>test3</option>
</datalist>
<label>password:<input type="password" name="password" size="21" placeholder="Please enter password" required="required"/></label><br />
<label>age:<input type="number" min="0" max="100" step="20"/></label><br />
<label>male<input type="radio" name="sex" value="male" checked=""/></label>
<label>female<input type="radio" name="sex" value="female" /></label><br />
<label>invisible<input type="checkbox" name="superAbility" value="invisible" /></label>
<label>immortality<input type="checkbox" name="superAbility" value="immortality" /></label>
<label>flight<input type="checkbox" name="superAbility" value="flight" /></label><br />
<label>tel:<input type="tel" name="tel"/></label><br />
<label>email:<input type="email" name="email" /></label><br />
<label>postal code:<input type="text" pattern="[0-9]{6}" title="Please enter postal code!" /></label><br />
<label>url:<input type="url" /></label><br /> power:
<input id="power" type="range" min="0" max="100" step="5" value="0" onchange="powerValue()" /> <span id="powerValue">0</span><br />
mana:<input name="range2" type="range" min="0" max="100" value="0" step="1" />
<output name="output2" for="range2">0</output><br />
<label>start:<input type="week" /></label><br />
<label>date:<input type="date" /></label><br />
<label>time:<input type="time" /></label><br />
<label>search:<input type="search" /></label><br />
<label>color:<input type="color" /></label><br />
image type:<input type="file" accept="image/*" multiple="multiple"/><br />
text type:<input type="file" accept="text/*" /><br />
audio type:<input type="file" accept="audio/*" /><br />
<input type="hidden" name="hidden" value="hiddenValue" />
<textarea cols="8" rows="5" style="resize: none;">normal</textarea>
<textarea cols="8" rows="5" readonly="readonly" style="resize: none;">readOnly</textarea>
<textarea cols="8" rows="5" disabled="disabled" style="-webkit-user-select: none;" >disabled</textarea><br /> visible size: 2
<select size="2">
<option>red</option>
<option>orange</option>
<option>blue</option>
<option>purple</option>
<option>gray</option>
<option>black</option>
<option>white</option>
</select><br /> multiple
<select multiple="multiple">
<option>red</option>
<option>orange</option>
<option>blue</option>
<option>purple</option>
<option>gray</option>
<option>black</option>
<option>white</option>
</select><br />
<select>
<optgroup label="bright">
<option>red</option>
<option selected="selected">orange</option>
<option disabled="disabled">white</option>
</optgroup>
<optgroup label="dark" disabled="disabled">
<option>blue</option>
<option>purple</option>
<option>gray</option>
<option>black</option>
</optgroup>
</select><br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" formmethod="get" formaction="http://www.baidu.com" />
<input type="button" value="alert" onclick="alert('Everything normal!')" />
</fieldset>
</form>
addition:<input type="text" name="addition" form="myForm,myForm2" />
<form id="myForm2">
<input type="submit" />
</form>
<script>
function powerValue() {
var value = document.getElementById("power").value;
document.getElementById("powerValue").innerHTML = value;
}
</script>
</body>
</html>
网页效果：
动态演示：
Part Five
html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
function drawP() {
var img = new Image();
var img2 = new Image();
var c = document.getElementById("myCanvas");
var c2 = document.getElementById("myCanvas2");
var c3 = document.getElementById("myCanvas3");
var c4 = document.getElementById("myCanvas4");
var c5 = document.getElementById("myCanvas5");
var c6 = document.getElementById("myCanvas6");
var c7 = document.getElementById("myCanvas7");
var c8 = document.getElementById("myCanvas8");
var c9 = document.getElementById("myCanvas9");
var c10 = document.getElementById("myCanvas10");
var c11 = document.getElementById("myCanvas11");
var ctx = c.getContext("2d");
var ctx2 = c2.getContext("2d");
var ctx3 = c3.getContext("2d");
var ctx4 = c4.getContext("2d");
var ctx5 = c5.getContext("2d");
var ctx6 = c6.getContext("2d");
var ctx7 = c7.getContext("2d");
var ctx8 = c8.getContext("2d");
var ctx9 = c9.getContext("2d");
var ctx10 = c10.getContext("2d");
var ctx11 = c11.getContext("2d");
ctx.moveTo(10, 10);
ctx.lineTo(200, 10);
ctx.lineTo(10, 200);
ctx.lineTo(200, 200);
ctx.moveTo(210, 10);
ctx.lineTo(210, 200);
ctx.lineTo(410, 200);
ctx.moveTo(420, 200);
ctx.lineTo(470, 10);
ctx.lineTo(520, 200);
ctx.lineTo(570, 10);
ctx.lineTo(620, 200);
ctx.stroke();
ctx2.beginPath();
ctx2.moveTo(10, 10);
ctx2.lineTo(10, 200);
ctx2.lineTo(210, 200);
ctx2.closePath();
ctx2.stroke();
ctx2.fillStyle = "cornflowerblue";
ctx2.fill();
drawStar(3, 210, 10, 50, ctx2);
drawStar(5, 250, 10, 50, ctx2);
drawStar(7, 300, 10, 50, ctx2);
drawStar(9, 370, 10, 50, ctx2);
ctx3.beginPath();
ctx3.moveTo(10, 10);
ctx3.bezierCurveTo(10, 10, 60, 360, 310, 710);
ctx3.bezierCurveTo(310, 710, 550, 360, 610, 10);
ctx3.stroke();
ctx3.beginPath();
ctx3.moveTo(80, 40);
ctx3.lineTo(240, 80);
ctx3.moveTo(540, 40);
ctx3.lineTo(380, 80);
ctx3.stroke();
ctx3.beginPath();
ctx3.moveTo(80, 100);
ctx3.lineTo(80, 160);
ctx3.lineTo(250, 160);
ctx3.closePath();
ctx3.stroke();
ctx3.beginPath();
ctx3.moveTo(540, 100);
ctx3.lineTo(540, 160);
ctx3.lineTo(370, 160);
ctx3.closePath();
ctx3.stroke();
ctx3.beginPath();
ctx3.moveTo(280, 470);
ctx3.lineTo(310, 400);
ctx3.lineTo(340, 470);
ctx3.stroke();
ctx3.beginPath();
ctx3.arc(250, 160, 100, -Math.PI, -Math.PI * 0.89, false);
ctx3.stroke();
ctx3.beginPath();
ctx3.arc(580, 160, 100, -Math.PI, -Math.PI * 0.86, false);
ctx3.stroke();
ctx4.strokeRect(10, 10, 100, 100);
ctx4.fillStyle = "lightgray";
ctx4.fillRect(210, 10, 100, 100);
ctx4.clearRect(230, 30, 60, 60);
img.src = "img/pattern.png";
img.onload = function() {
ctx5.drawImage(img, 0, 0, 80, 80);
ctx5.drawImage(img, 0, 0, 80, 80, 100, 10, 40, 40);
}
ctx5.font = "bold 30px 宋体";
ctx5.fillText("hello", 200, 30);
ctx5.strokeText("HELLO", 310, 30);
ctx5.beginPath();
ctx5.fillStyle = "rgba(250, 150, 83,0.2)";
ctx5.fillRect(10, 100, 100, 100);
ctx5.fillStyle = "rgba(250, 150, 83,0.4)";
ctx5.fillRect(120, 100, 100, 100);
ctx5.fillStyle = "rgba(250, 150, 83,0.8)";
ctx5.fillRect(230, 100, 100, 100);
var linear = ctx5.createLinearGradient(10, 210, 110, 310);
linear.addColorStop(0, "red");
linear.addColorStop(0.5, "orange");
linear.addColorStop(1, "purple");
ctx5.fillStyle = linear;
ctx5.fillRect(10, 210, 100, 100);
img2.src = "img/-1.png";
img2.onload = function() {
var pattern = ctx5.createPattern(img2, "no-repeat");
ctx5.fillStyle = pattern;
ctx5.fillRect(120, 210, 100, 100);
}
ctx6.lineWidth = "4";
ctx6.moveTo(100, 10);
ctx6.lineTo(50, 60);
ctx6.lineTo(150, 60);
ctx6.lineTo(100, 10);
ctx6.moveTo(100, 60);
ctx6.lineTo(25, 110);
ctx6.lineTo(175, 110);
ctx6.lineTo(100, 60);
ctx6.moveTo(100, 110);
ctx6.lineTo(0, 160);
ctx6.lineTo(200, 160);
ctx6.lineTo(100, 110);
ctx6.strokeStyle = "green";
ctx6.stroke();
ctx6.beginPath();
ctx6.lineCap = "square";
ctx6.moveTo(80, 160);
ctx6.lineTo(80, 280);
ctx6.lineTo(120, 280);
ctx6.lineTo(120, 160);
ctx6.strokeStyle = "brown";
ctx6.stroke();
ctx6.beginPath();
ctx6.shadowOffsetX = 8;
ctx6.shadowOffsetY = 8;
ctx6.shadowBlur = 4;
ctx6.shadowColor = "rgba(11, 6, 3,0.5)";
ctx6.fillRect(180, 280, 100, 100);
ctx7.strokeStyle = "red";
ctx7.lineWidth = "20";
ctx7.save();
ctx7.strokeStyle = "orange";
ctx7.lineWidth = "20";
ctx7.save();
ctx7.strokeStyle = "blue";
ctx7.lineWidth = "20";
ctx7.arc(200, 200, 120, 0, Math.PI * 2, true);
ctx7.stroke();
ctx7.restore();
ctx7.beginPath();
ctx7.arc(200, 200, 100, 0, Math.PI * 2, true);
ctx7.stroke();
ctx7.restore();
ctx7.beginPath();
ctx7.arc(200, 200, 80, 0, Math.PI * 2, true);
ctx7.stroke();
drawCircle(ctx8);
ctx8.translate(80, 0);
drawCircle(ctx8);
ctx8.translate(-160, 0);
drawCircle(ctx8);
ctx8.translate(40, 80);
drawCircle(ctx8);
ctx8.translate(80, 0);
drawCircle(ctx8);
ctx9.translate(200, 200);
drawRotate(ctx9);
ctx9.scale(0.2, 0.2);
drawRotate(ctx9);
ctx10.transform(1, -0.3, -0.3, 1, 50, 50);
ctx10.rect(150, 150, 100, 100);
ctx10.stroke();
ctx11.arc(200, 200, 200, 0, Math.PI * 2, true);
ctx11.clip()
ctx11.fillStyle = "rgb(246, 246, 246)";
ctx11.fillRect(0, 0, 400, 400);
}
function drawRotate(ctx) {
for(var i = 0; i < 9; i++) {
ctx.rotate(Math.PI * 2 / 9);
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2, true);
ctx.stroke();
}
}
function drawStar(n, x, y, r, ctx) {
ctx.beginPath();
for(var i = 0; i < n; i++) {
var radians = Math.PI / n * 4 * i;
var x = Math.sin(radians) * r + x;
var y = Math.cos(radians) * r + y;
ctx.lineTo(x, y);
}
var cr = parseInt(Math.random() * 255);
var cg = parseInt(Math.random() * 255);
var cb = parseInt(Math.random() * 255);
ctx.closePath();
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 5;
ctx.shadowColor = "rgb(" + cr + "," + cg + "," + cb + ")";
ctx.fill();
}
function drawCircle(ctx) {
ctx.beginPath();
ctx.arc(200, 150, 50, 0, Math.PI * 2, true);
ctx.stroke();
}
</script>
</head>
<body onload="drawP()">
<canvas id="myCanvas" width="640px" height="210px" style="border: 1px solid saddlebrown;">
这个浏览器不支持canvas
</canvas>
<canvas id="myCanvas2" width="640px" height="210px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas3" width="800px" height="800px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas4" width="400px" height="200px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas5" width="400px" height="400px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas6" width="400px" height="400px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas7" width="400px" height="400px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas8" width="400px" height="400px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas9" width="400px" height="400px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas10" width="400px" height="400px" style="border: 1px solid saddlebrown;"></canvas>
<canvas id="myCanvas11" width="400px" height="400px" style="border: 1px solid saddlebrown;"></canvas>
<script>
setInterval(function() {
var c11 = document.getElementById("myCanvas11");
var ctx11 = c11.getContext("2d");
drawStar(5, Math.random() * 400, Math.random() * 400, 30, ctx11);
}, 200);
</script>
</body>
</html>
静态效果：
动态效果：
Part Six
Html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="preload()">
<audio id="myAudio" controls muted="muted" style="outline: none;">
<source src="music/Serenade.ogg" type="audio/ogg"></source>
<source src="music/Serenade.mp3" type="audio/mp3"></source>
</audio>
<button onclick="playAudio(this)">Play</button>
<video id="myVideo" src="video/Young.Sheldon.S02E18.mp4" type="video/mp4" width="200" height="200" controls="controls">
</video>
<button onclick="playVideo(this)">Play</button>
<button onclick="enlarge()">Enlarge</button>
<button onclick="lessen()">Lessen</button>
<button onclick="progressSpeed()">Speed</button>
<button onclick="progressReverse()">Reverse</button>
<button onclick="showMess()">Show Mess</button>
<button onclick="stopDownload()">stop download</button>
<span id="out"></span>
<script>
var myAudio = document.getElementById("myAudio");
var myVideo = document.getElementById("myVideo");
var out = document.getElementById("out");
function preload() {
console.log("audio:" + !!document.createElement("audio").canPlayType);
console.log("video:" + !!document.createElement("video").canPlayType);
}
function playAudio(bt) {
if(bt.innerHTML == "Play") {
myAudio.play();
bt.innerHTML = "Pause";
} else {
myAudio.pause();
bt.innerHTML = "Play";
}
}
function playVideo(bt) {
if(myVideo.paused) {
myVideo.play();
bt.innerHTML = "Pause";
} else {
myVideo.pause();
bt.innerHTML = "Play";
}
console.log(myVideo.played);
}
function enlarge() {
var w = myVideo.width + 20;
var h = myVideo.height + 20;
myVideo.width = w;
myVideo.height = h;
}
function lessen() {
var w = myVideo.width - 20;
var h = myVideo.height - 20;
if(w >= 0) {
myVideo.width = w;
myVideo.height = h;
}
}
function progressSpeed() {
var progressTime = myVideo.currentTime;
progressTime += 5;
myVideo.currentTime = progressTime;
}
function progressReverse() {
var progressTime = myVideo.currentTime;
progressTime -= 5;
myVideo.currentTime = progressTime;
}
function showMess() {
out.innerHTML = "start time:" + myVideo.seekable.start(0);
out.innerHTML += "<br>end time:" + myVideo.seekable.end(0);
out.innerHTML += "<br>now time:" + myVideo.played.end(0);
}
function stopDownLoad() {
myVideo.pause();
myVideo.src = "";
}
</script>
</body>
</html>
网页效果：
Part Seven
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="getPosition()">
<button onclick="realTimeGetPosition()">开始实时获取位置</button>
<button onclick="stopRealTimeGetPosition()">停止实时获取位置</button>
<span id="out"></span>
<script>
var out = document.getElementById("out");
var options = {
enableHighAccuracy: true,
timeout: 10000,
maximunAge: 20000
};
var watchID;
if(navigator.geolocation)
out.innerHTML = "<br>可以支持地理定位";
else
out.innerHTML = "<br>不支持地理定位";
function getPosition() {
out.innerHTML += "<br>开始获取地理定位...";
navigator.geolocation.getCurrentPosition(showPosition, showErrorMess, options);
}
function realTimeGetPosition() {
out.innerHTML += "<br>开始实时获取地理定位...";
watchID = navigator.geolocation.watchPosition(realTimePosition, showErrorMess, options);
}
function stopRealTimeGetPosition() {
out.innerHTML += "<br>停止实时获取地理定位!";
navigator.geolocation.clearWatch(watchID);
}
function showPosition(position) {
out.innerHTML += "<br>经度：" + position.coords.latitude;
out.innerHTML += "<br>纬度：" + position.coords.longitude;
out.innerHTML += "<br>位置精确度：" + position.coords.accuracy;
out.innerHTML += "<br>海拔：" + position.coords.altitude;
out.innerHTML += "<br>海拔精确度：" + position.coords.altitudeAccuracy;
out.innerHTML += "<br>方向：" + position.coords.heading + "°";
out.innerHTML += "<br>速度：" + position.coords.speed + " m/s";
out.innerHTML += "<br>响应日期：" + position.coords.timeStamp;
}
function realTimePosition(position) {
var d = new Date();
out.innerHTML += "<br>Update time:+" + d.toLocaleString() + "<br>经度：" + position.coords.latitude + "<br>纬度：" + position.coords.longitude;
}
function showErrorMess(error) {
switch(error) {
case error.PERMISSION_DENIED:
out.innerHTML += "<br>用户拒绝获取地理位置的请求";
break;
case error.POSITION_UNAVAILABLE:
out.innerHTML += "<br>位置信息不可用";
break;
case error.TIMEOUT:
out.innerHTML += "<br>请求超时";
break;
case error.UNKNOWN_ERROR:
out.innerHTML += "<br>未知错误";
break;
}
}
</script>
</body>
</html>
PC端：
Android端：
Part Eight
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onload="preload()">
<fieldset style="width: 500px;height: 800px;">
<legend>Storage</legend>
Name:<input id="name" type="text" /><br />
<button onclick="localSave()">localStorage save</button><br />
<button onclick="sessionSave()">sessionStorage save</button><br />
<button onclick="watchLocalStorage()">watch localStorage</button><br />
<button onclick="watchSessionStorage()">watch sessionStorage</button><br />
<button onclick="removeTel()">remove localStorage</button><br />
<button onclick="clearStorage()">clear Storage</button><br />
<span id="out"></span>
</fieldset>
<script>
var out = document.getElementById("out");
function preload() {
if(!window.localStorage)
out.innerHTML = "哎哟，浏览器不支持localStorage!";
if(!window.sessionStorage)
out.innerHTML += "<br>哎哟，浏览器不支持sessionStorage!";
var name = localStorage.name;
var name2 = sessionStorage.name;
}
function localSave() {
var name = document.getElementById("name");
localStorage.setItem("name", name.value);
localStorage.setItem("sex", "male");
localStorage.setItem("major", "jk");
localStorage.setItem("tel", "911");
}
function sessionSave() {
var name = document.getElementById("name");
sessionStorage.setItem("name", name.value);
}
function watchLocalStorage() {
out.innerHTML = "";
for(var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
out.innerHTML += "<br>" + (i + 1) + ". " + localStorage.getItem(key);
}
}
function watchSessionStorage() {
out.innerHTML = "";
for(var i = 0; i < sessionStorage.length; i++) {
var key = sessionStorage.key(i);
out.innerHTML += "<br>" + (i + 1) + ". " + sessionStorage.getItem(key);
}
}
function removeTel() {
localStorage.removeItem("tel");
}
function clearStorage() {
localStorage.clear();
sessionStorage.clear();
}
</script>
</body>
</html>
网页动态效果：
Part Nine
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style>
.p1 {
border: 1px solid saddlebrown;
}
</style>
<title></title>
</head>
<body>
<button onclick="hideAll()">全部隐藏</button>
<button onclick="appendStyle()">追加样式</button>
<button onclick="removeStyle()">移除样式</button>
<button onclick="showFormSelector()">表单选择器</button>
<h1>基础jQuery</h1>
<p id="p1">p</p>
<a href="https://www.baidu.com">Baidu</a><br />
<a href="https://www.bilibili.com">Bilibili</a><br />
<a href="https://www.mosoteach.cn">Blue ink cloud</a><br />
<form>
name:<input type="text" /><br /> password:
<input type="password" /><br /> tel:
<input type="tel" /><br /> male
<input type="radio" name="sex" checked="checked" /> female
<input type="radio" name="sex" />
<select>
<option>white</option>
<option selected="selected">orange</option>
</select><br />
</form>
<p id="p2">
用于<span>测试<strong>子元素</strong></span>选择器
</p>
<p id="p3">
用于<span>测试<strong>后代</strong></span>选择器
</p>
<p id="p4">
有ID的P
</p>
<p>
无ID的P
</p>
<p>
无ID的P
</p>
<table border="1" style="border-collapse: collapse;">
<tr>
<th>第一季度</th>
<th>第二季度</th>
<th>第三季度</th>
</tr>
<tr>
<td>100</td>
<td>120</td>
<td>140</td>
</tr>
<tr>
<td>200</td>
<td>220</td>
<td>240</td>
</tr>
<tr>
<td>300</td>
<td>320</td>
<td></td>
</tr>
</table>
<span id="out"></span>
<script>
var out = document.getElementById("out");
var str = "javascript 2019",
str2 = "JAVASCRIPT 2019";
var pattern = new RegExp("a");
var person = new Object();
var jq = jQuery.noConflict();
person.name = "zlm";
person.sex = "male";
person.tel = "911";
out.innerHTML = "源字符：" + str;
out.innerHTML += "<br>替换所有小写为M： " + str.replace(/[a-z]+/, "M");
out.innerHTML += "<br>slice获取前四个字符(负数则倒数)： " + str.slice(0, -6);
out.innerHTML += "<br>substring获取前四个字符（负数则为0）： " + str.substring(-1, 4);
out.innerHTML += "<br>转大写: " + str.toUpperCase();
out.innerHTML += "<br>转小写: " + str2.toLowerCase();
out.innerHTML += "<br>获取数字: " + str.match(/[0-9]/g);
out.innerHTML += "<br>exec顺序检索字符串是否有a字符: " + pattern.exec(str);
out.innerHTML += "<br>test检索字符串是否有a字符: " + pattern.test(str);
for(i in person)
out.innerHTML += "<br>" + person[i];
jq(document).ready(function() {
alert("i am ready!");
});
function hideAll() {
jq("*").hide();
}
function appendStyle() {
jq("h1,#p1").addClass("p1");
jq("a[href$='.cn']").css("background", "lightblue");
jq("p#p2>strong").css("color", "lightseagreen");
jq("p#p3 strong").css("color", "lightseagreen");
jq("p#p4+p").css("color", "lightseagreen");
jq("p#p4~p").css("border", "1px solid lightseagreen");
jq("button:first").css("border", "1px solid lightseagreen");
jq("button:odd").css("border", "1px solid orange");
jq("button:eq(2)").css("border", "1px solid purple");
jq(":header").css("color", "lightseagreen");
jq("td:parent").css("background", "lightseagreen");
jq("td:empty").css("background", "lightyellow");
jq("tr:has(td)").css("border","1px solid purple");
}
function removeStyle() {
jq("#p1").removeClass("p1");
jq(".p1").removeClass("p1");
jq("button:gt(1)").css("border", "1px solid black");
jq("button:lt(2)").css("border", "1px solid black");
jq("p:not(#p4)").css("border", "0px");
jq("p:contains('ID')").css("color", "black");
}
function showFormSelector() {
jq(":password").css("border", "1px solid blue");
jq(":checked").css("width", "50px");
jq(":selected").css("background", "blue");
}
</script>
</body>
</html>
静态效果图：
追加样式：
移除样式：
表单选择器：
动态效果图：
Part Ten
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<style>
div {
width: 80px;
height: 80px;
margin: 10px;
}
</style>
<title></title>
</head>
<body>
<fieldset>
<legend>jQuery Event</legend>
按下次数：<span id="count"></span><br /> 按键状态：
<span id="statusKey"></span>
<div id="mouseEvent" style="text-align: center;border: 1px solid saddlebrown;line-height: 80px;-webkit-user-select: none;"></div>
状态:<span id="statusMouse"></span><br />
<form>
SNO:<input id="test" type="text" />
<select>
<option>male</option>
<option>female</option>
</select>
<input type="submit" value="Submit" />
</form>
状态:<span id="status3"></span><br />
<div>
<input id="bindBtn" type="button" value="未绑定" />
<input id="bind" type="button" value="绑定" />
<input id="unbind" type="button" value="解绑" />
</div>
<input id="temporary" type="button" value="临时事件" />
</fieldset>
<script>
var count = 0;
$(document).ready(function() {
$(document).keydown(function() {
$("#statusKey").text("down");
$("#count").text(count);
})
$(document).keyup(function() {
$("#statusKey").text("up");
$("#count").text(count++);
})
$("#mouseEvent").hover(function() {
$("#mouseEvent").css("box-shadow", "0px 0px 5px black");
$("#mouseEvent").css("background", "red");
$("#statusMouse").text("Hover");
})
$("#mouseEvent").click(function() {
$("#mouseEvent").css("background", "orange");
$("#statusMouse").text("Click");
})
$("#mouseEvent").dblclick(function() {
$("#mouseEvent").css("background", "yellow");
$("#statusMouse").text("Double Click");
})
$("#mouseEvent").mouseleave(function() {
$("#mouseEvent").css("box-shadow", "none");
$("#mouseEvent").css("background", "none");
$("#statusMouse").text("Leave");
})
$("#test").blur(function() {
$("#status3").text("blur");
})
$("#test").focus(function() {
$("#status3").text("focus");
})
$("#test").select(function() {
$("#status3").text("select");
})
$("select").change(function() {
$("#status3").text("change");
})
$("form").submit(function(e) {
var num = $("#test").val();
if(num == "" || isNaN(num)) {
$("#status3").text("this is not number!");
return false;
} else {
alert("Submit success!");
return true;
}
})
$("#bind").click(function() {
$("#bindBtn").val("已绑定");
$("#bindBtn").on("click", function() {
alert("bind success!");
})
})
$("#unbind").click(function() {
$("#bindBtn").val("未绑定");
$("#bindBtn").off("click")
alert("unbind success!");
})
$("#temporary").one("click", function() {
alert("once");
})
})
</script>
</body>
</html>
动态效果图：
Part Eleven
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<title></title>
<style>
@keyframes myFrame {
0% {
transform: translate(0px);
}
30% {
transform: translate(400px);
border-radius: 0% 50% 0% 0%;
}
40% {
transform: translate(400px, 30px);
border-radius: 0% 50% 50% 0%;
}
50% {
transform: translate(350px, 0px);
border-radius: 0% 50% 50% 50%;
}
60% {
transform: translate(350px, 0px);
border-radius: 50% 50% 50% 50%;
}
100% {
border-radius: 50%;
background: salmon;
}
}
div {
width: 50px;
height: 50px;
background: sandybrown;
margin: 10px;
}
</style>
</head>
<body>
<fieldset>
<legend><strong>jQuery动画</strong></legend>
<div id="d1"></div>
<button id="hideBtn">Hide</button>
<button id="showBtn">Show</button>
<button id="toggleBtn">Hide/Show</button>
<hr />
<div id="d2"></div>
<button id="fadeOut">Fade Out</button>
<button id="fadeIn">Fade In</button>
<button id="fadeToggle">Fade Toggle</button>
<button id="fadeTo">Transparency</button>
<button id="fadeTo2">Restore</button>
<hr />
<div id="d3"></div>
<button id="slideUp">Slide Up</button>
<button id="slideDown">Slide Down</button>
<button id="slideUpDown">Slide UP/Down</button>
<hr />
<div id="d4" style="position: relative;"></div>
<button id="animate">Animate Queue</button>
<button id="stop1">Stop Current</button>
<button id="stop2">Stop All</button>
<hr />
<div id="d5"></div>
<button id="animateChaining">Animate Chaining</button>
</fieldset>
<script>
$(document).ready(function() {
$("#hideBtn").click(function() {
$("#d1").hide(1500, function() {
$("#hideBtn").hide(1000);
})
})
$("#showBtn").click(function() {
$("#d1").show(1500, function() {
$("#hideBtn").show(1000);
})
})
$("#toggleBtn").click(function() {
$("#d1").toggle(1500, function() {
$("#hideBtn").toggle(1000, function() {
$("#showBtn").toggle(1000);
});
});
})
$("#fadeOut").click(function() {
$("#d2").fadeOut(2000);
$(this).fadeOut(2000);
})
$("#fadeIn").click(function() {
$("#d2").fadeIn(2000);
$("#fadeOut").fadeIn(2000);
})
$("#fadeToggle").click(function() {
$("#d2").fadeToggle(2000);
$("#fadeOut").fadeToggle(2000);
$("#fadeIn").fadeToggle(2000);
})
$("#fadeTo").click(function() {
$("#d2").fadeTo(2000, 0.2);
})
$("#fadeTo2").click(function() {
$("#d2").fadeTo(2000, 1);
})
$("#slideDown").click(function() {
$("#d3").slideDown(2000);
})
$("#slideUp").click(function() {
$("#d3").slideUp(2000);
})
$("#slideUpDown").click(function() {
$("#d3").slideToggle(2000);
})
$("#animate").click(function() {
$("#d4").animate({
opacity: 0.5,
left: "+=400px"
}, 2000);
$("#d4").animate({
top: "+=35px"
}, 500);
$("#d4").animate({
left: "+=400px"
}, 500);
$("#d4").animate({
left: "-=800px",
top: "-=35px",
opacity: 1,
fontSize: "16px"
}, 500)
})
$("#animateChaining").click(function() {
$("#d5").slideUp(500)
.slideDown(500)
.css("animation", "myFrame 3s 1s forwards")
})
$("#stop1").click(function() {
$("#d4").stop();
})
$("#stop2").click(function() {
$("#d4").stop(true, false);
})
})
</script>
</body>
</html>
动态效果图:
Part Twelve
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style>
.add {
border: 1px solid saddlebrown;
}
.style1 {
color: goldenrod;
}
</style>
<title></title>
</head>
<body>
<fieldset>
<legend>jQuery DOM</legend>
<p id="p1" style="width: 100px;height:23px;border: 1px solid saddlebrown;">
<span>span <i>1</i></span>
<span>span <strong>2</strong></span>
</p>
<button>get text</button>
<button>reset text</button>
<hr />
<textarea rows="2" cols="22" style="color: darkgray;">please enter content...</textarea><br />
<button>get value</button>
<button>set value</button>
<hr />
<p id="p2">
<span id="d" class="c">span 1</span>
<span id="dd" class="cc">span 2</span> - -
</p>
<button>get html</button>
<button>set html</button>
<hr />
<button>get attribute</button>
<a href="https://www.mosoteach.cn">Blue ink cloud</a>
<hr />
<p id="add" class="add">Current paragraph</p>
<button>append</button>
<button>prepend</button>
<button>after</button>
<button>before</button>
<button>remove outside</button>
<button>empty</button>
<button>remove attribute</button>
<hr />
<p id="add2">test</p>
<button>add class</button>
<button>remove class</button>
<button>toggle class</button>
</fieldset>
<script>
$(document).ready(function() {
$("button:eq(0)").click(function() {
alert($("#p1").text());
})
$("button:eq(1)").click(function() {
$("#p1").text("");
})
$("button:eq(2)").click(function() {
alert($("textarea").val());
})
$("button:eq(3)").click(function() {
$("textarea").val("海纳百川，有容乃大。\n壁立千仞，无欲则刚。")
$("textarea").css("color", "black");
$("textarea").css("text-align", "center");
})
$("button:eq(4)").click(function() {
alert($("#p2").html());
})
$("button:eq(5)").click(function() {
$("#p2").html("<strong>set success!</strong>");
})
$("button:eq(6)").click(function() {
$("a").css({
color: "rgba(4, 179, 195,0.8)",
fontSize: "18px",
textDecoration: "none"
});
alert($("a").attr("href"));
})
$("button:eq(7)").click(function() {
$("#add").append("<p>Next paragraph</p>")
})
$("button:eq(8)").click(function() {
$("#add").prepend("<p>Previous paragraph</p>")
})
$("button:eq(9)").click(function() {
$("#add").after("<p id='outside'>After paragraph</p>");
})
$("button:eq(10)").click(function() {
$("#add").before("<p id='outside'>Before paragraph</p>");
})
$("button:eq(11)").click(function() {
$("#outside").remove();
})
$("button:eq(12)").click(function() {
$("#add").empty();
})
$("button:eq(13)").click(function() {
$("#add").removeAttr("class");
})
$("button:eq(14)").click(function() {
$("#add2").addClass("add style1");
})
$("button:eq(15)").click(function() {
$("#add2").removeClass("style1");
})
$("button:eq(16)").click(function() {
$("#add2").toggleClass("add style1");
})
})
</script>
</body>
</html>
动态效果图：
Part Thirteen
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<title></title>
<style>
</style>
</head>
<body>
<fieldset>
<legend>jQuery traversal</legend>
<div id="container">
<strong>P1</strong>
<div>
<p class="p1">
<strong>C1</strong>
</p>
<p class="p2">
<strong>C2</strong>
</p>
<p>
<strong>C3</strong>
</p>
</div>
<hr />
<strong>P2</strong>
<div>
<p id="test1">
<strong>C1</strong>
</p>
<p id="test2">
<strong>C2</strong>
</p>
<p id="test3">
<strong>C3</strong>
</p>
</div>
<hr />
<strong>P3</strong>
<div>
<p>
<strong>C1</strong>
</p>
<p>
<strong>C2</strong>
</p>
<p>
<strong>C3</strong>
</p>
</div>
<hr />
<div>
<p></p>
</div>
</div>
</fieldset>
<button>children</button>
<button>children(selector)</button>
<button>find(selector)</button>
<button>siblings</button>
<button>next</button>
<button>nextAll</button>
<button>nextUntil</button>
<button>nextUntil(selector)</button>
<button>prev</button>
<button>prevALL</button>
<button>parent</button>
<button>add Class</button>
<button>parents</button>
<script>
$(document).ready(function() {
$("button:eq(0)").click(function() {
$("div#container div:eq(0)").children().css("border", "2px solid rgb(238, 232, 213)");
})
$("button:eq(1)").click(function() {
$("div#container div:eq(0)").children(".p1").css("background-color", "rgb(108, 83, 60)");
})
$("button:eq(2)").click(function() {
$("div#container div:eq(0)").find(".p2+p").css("background-color", "rgb(142, 126, 113)");
})
$("button:eq(3)").click(function() {
$("div#container div:eq(0)").siblings().css({
color: "rgb(255, 125, 0)",
fontSize: "25px"
});
})
$("button:eq(4)").click(function() {
$("div#container div:eq(0)").next().css("box-shadow", "1px 1px 2px black");
})
$("button:eq(5)").click(function() {
$("div#container div:eq(0)").nextAll().css("background-color", "#8FBC8F");
})
$("button:eq(6)").click(function() {
$("div#container div:eq(1) #test1").nextUntil().css("border", "2px dashed red");
})
$("button:eq(7)").click(function() {
$("div#container div:eq(1) #test1").nextUntil("#test3").css("opacity", "0.3");
})
$("button:eq(8)").click(function() {
$("div#container div:eq(2)").prev().css("background", "none");
})
$("button:eq(9)").click(function() {
$("div#container div:eq(2)").prevAll().css("border", "1px dashed pink");
})
$("button:eq(10)").click(function() {
$("fieldset").parent().css("background-color", "rgb(255, 252, 244)");
})
$("button:eq(11)").click(function() {
$("div#container div:eq(3)").css({
width: "250px",
height: "100px",
border: "1px solid saddlebrown"
});
$("div#container div:eq(3)").children("p").css({
width: "200px",
height: "50px",
border: "1px solid saddlebrown",
margin: "25px"
});
$("div#container div:eq(3)").children("p").append("<span id='element' style='width:20px;height:20px;border: 1px solid saddlebrown;margin-left: 30px;'>Element span</span>");
})
$("button:eq(12)").click(function() {
$("#test2").parents().css("border", "3px solid black");
})
})
</script>
</body>
</html>
静态图：
动态图：
Part Fourteen
JSP:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<style>
textarea {
width: 400px;
height: 250px;
}
.d1 {
width: 400px;
height: 80px;
border: 1px solid saddlebrown;
}
</style>
</head>
<body>
<fieldset>
<legend>jQuery AJAX</legend>
<textarea></textarea>
<div class="d1"></div>
<p id="status"></p>
<button>load text</button>
<button>load element</button>
<button>callback function</button>
<button>$.get</button>
<hr />
username:<input id="username" type="text" /><br /> password: <input
id="password" type="text" /><br />
<button>$.post</button>
<button>$.ajax</button>
<button>$.param</button>
<hr />
<form>
<input type="text" name="name" /> <input type="text" name="sex" />
</form>
<button>$.serialize</button>
<button>$.serializeArray</button>
</fieldset>
<script>
$(document).ready(function() {
$("button:eq(0)").click(function() {
$("textarea").load("文本.txt");
})
$("button:eq(1)").click(function() {
$("div:eq(0)").load("文本.txt p");
})
$("button:eq(2)").click(function() {
$("div:eq(0)").load("文本.txt", function(response, status, xhr) {
if (status == "success")
$("#status").text(xhr.status + " " + xhr.statusText);
})
})
$("button:eq(3)").click(function() {
$.get("F1.jsp", {
name : "zlm",
sex : "male"
}, function(data) {
$("textarea").html(data);
$("div:eq(0)").html(data);
})
})
$("button:eq(4)").click(function() {
var name = $("#username").val();
var pw = $("#password").val();
$.post("F2.jsp", {
username : name,
password : pw
}, function(data) {
$("textarea").html(data);
$("div:eq(0)").html(data);
})
})
$("button:eq(5)").click(function() {
var name = $("#username").val();
var pw = $("#password").val();
$.ajax({
url : "F2.jsp",
method : "post",
data : {
username : name,
password : pw
},
dataType : "html",
beforeSend : function() {
alert("ready send request");
},
success : function(data) {
alert("request success");
$("textarea").html(data);
$("div:eq(0)").html(data);
},
error : function(data) {
alert("request error");
$("textarea").html(data);
$("div:eq(0)").html(data);
}
})
})
$("button:eq(6)").click(function() {
var p = new Object();
p.name = "zlm";
p.sex = "male";
var data = $.param(p);
alert(data);
})
$("button:eq(7)").click(function() {
alert($("form").serialize());
})
$("button:eq(8)").click(function() {
alert(JSON.stringify($("form").serializeArray()));
})
})
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%=request.getParameter("name") %>
<%=request.getParameter("sex") %>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String username = request.getParameter("username");
String password = request.getParameter("password");
boolean status=false;
if(username.equals("zlm")&&password.equals("123"))
status=true;
%>
<%=status %>
<%=username%>
<%=password%>
</body>
</html>
动态图：
