菜鸟的复习之路——HTML进阶篇（下)

一、JavaScript 基础（二）

文章末尾新增了练手项目，有兴趣的可以下载查阅！

1.JavaScript 语句

作为一们计算机语言，JavaScript和java类似具有相应的条件语句、循环语句、正则表达等语句。

Ⅰ.条件语句

在写代码时，需要为不同的决定来执行不同的动作。此时就可以使用条件语句进行判断。
在 JavaScript 中，我们可使用以下条件语句：

• if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
• if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
• if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
• switch 语句 - 使用该语句来选择多个代码块之一来执行

//---------if------------
if (time<10) //括号内的值一定为Boolean类型
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)//else if 含义为： 不是...而是...
{
    document.write("<b>今天好</b>");
}
else //else 含义为：不是上面的所有，而是..
{
    document.write("<b>晚上好!</b>");
}
//---------switch ------------
switch(n) //n为所要比较的对象 只能为number类型
{
    case 1:  //case 1，1为n的比较对象，若两者比较返回为true则执行“：”后的代码块
        执行代码块 1
        break; //执行完毕后退出判断
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

Ⅱ.循环语句

JavaScript 支持不同类型的循环：

• for - 循环代码块一定的次数
• for/in - 循环遍历对象的属性
• while - 当指定的条件为 true 时循环指定的代码块
• do/while - 同样当指定的条件为 true 时循环指定的代码块

for循环：

//---------for------------
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

• 语句 1 （代码块）开始前执行。 通常我们会使用语句1 初始化循环中所用的变量 (var i=0)。语句 1 是可选的，也就是说不使用语句1 也可以。 您可以在语句 1 中初始化任意（或者多个）值：
• 语句 2 定义运行循环（代码块）的条件。通常语句 2 用于评估初始变量的条件。语句 2 同样是可选的。如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
• 语句 3 在循环（代码块）已被执行之后执行。通常语句 3 会增加初始变量的值。语句 3 也是可选的。语句 3 有多种用法。增量可以是负数 (i–)，或者更大 (i=i+15)。语句 3 也可以省略（比如当循环内部有相应的动态条件代码）。

for in 循环：

//---------for in------------
var person={fname:"John",lname:"Doe",age:25}; 
txt="";
for (x in person)  // x 为属性名的泛型
{
    txt=txt + person[x];
}

for in 循环常用于遍历数组。

while 循环：

// while 循环：先判断条件，后运行代码块
while (条件)
{
    需要执行的代码
}

// do/while 循环 先运行代码块，再判断条件。

do
{
    需要执行的代码
}
while (条件);

注：break 跳出循环、continue 跳出本轮循环后，会继续执行该循环之后的代码

2.JavaScript DOM

JavaScript作为一个脚本语言，可以对页面级document对象进行操作，通过get方法获得页面元素对象，对其相关属性进行修改、操作等。
JavaScript可以事件进行反应，响应事件后操作DOM,可达到人机互动效果、动画效果等。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

JS可通过HTML元素的ID、Class、标签名找到该元素。
参照菜鸟教程 JavaScript教程

二、jQuery 基础

jQuery的出现极大的方便了JavaScript的使用，多种选择器、内置动画效果、Ajax异步操作等等。

• jQuery 是一个 JavaScript 库。
• jQuery 极大地简化了 JavaScript 编程。

jQuery实例：

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

1.选择器

jQuery以$符号为标识，具有大量的选择其模型。部分选择器如下：

选择器	描述
$("*")	选取所有元素
$(this)选	取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的 p 元素
$(“p:first”)	选取第一个 p 元素
$(“ul li:first”)	选取第一个 ul>元素的第一个 li 元素
$(“ul li:first-child”)	选取每个 ul 元素的第一个 li 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 a 元素
$(“a[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的a 元素
$(":button")	选取所有 type=“button” 的 input 元素 和 button元素
$(“tr:even”)	选取偶数位置的 tr 元素
$(“tr:odd”)	选取奇数位置的 tr 元素

2.事件

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	blur	unload
hover

相对于JavaScript的原生事件，jQuery更加精简。

3.jQuery 效果

jQuery具有很多内置的效果，如淡入淡出、显示隐藏、动画、jQuery 方法链接。
本文不做过多复述，详细请看菜鸟教程 jQuery教程

三、总结

HTML+CSS+JavaScript,前端三大将已经粗略复习完毕，还有很多知识没有写到博客中来。以及一些流行的前端框架，还需要去进一步熟悉，如vue.js、Bootstrap等等都是前端热门技术。本系列博客只是基础复习就不做过多的介绍了，后期的项目将会一一对各种技术进行介绍以及学习。
HTML复习篇到此就结束了，因为本人主学Java后端因此对于前端不做重点，复习系列文章仅作为一个复习导引，具体内容还需要进行大量的资料查阅以及项目练手。未来几天博主将会写一些HTML静态页面，进行一个项目复习，随后会上传至博客中。
复习路漫漫，吾将上下而求索。

注：本文所用资料均来源于菜鸟教程

四、练手项目

1. H5益智拼图小游戏 (点击版本号下载)

• 1.0
• 1.1

2. 仓库管理系统静态前端页面

正在开发…

本文地址：https://blog.csdn.net/qq_42275943/article/details/107294531