首页 > 其他分享> 文章详细

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

2021-06-20 11:31:20 阅读：187 来源： 互联网

标签：语句 jQuery 元素菜鸟代码 JavaScript 进阶篇 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益智拼图小游戏 (点击版本号下载)

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

正在开发…

标签：语句,jQuery,元素,菜鸟,代码,JavaScript,进阶篇,HTML,循环
来源： https://blog.csdn.net/qq_42275943/article/details/107294531

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9