文章末尾新增了练手项目,有兴趣的可以下载查阅!
作为一们计算机语言,JavaScript和java类似具有相应的条件语句、循环语句、正则表达等语句。
在写代码时,需要为不同的决定来执行不同的动作。此时就可以使用条件语句进行判断。
在 JavaScript 中,我们可使用以下条件语句:
//---------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------------
for (语句 1; 语句 2; 语句 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 跳出本轮循环后,会继续执行该循环之后的代码
JavaScript作为一个脚本语言,可以对页面级document对象进行操作,通过get方法获得页面元素对象,对其相关属性进行修改、操作等。
JavaScript可以事件进行反应,响应事件后操作DOM,可达到人机互动效果、动画效果等。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
JS可通过HTML元素的ID、Class、标签名找到该元素。
参照菜鸟教程 JavaScript教程
jQuery的出现极大的方便了JavaScript的使用,多种选择器、内置动画效果、Ajax异步操作等等。
- jQuery 是一个 JavaScript 库。
- jQuery 极大地简化了 JavaScript 编程。
jQuery实例:
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
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 元素 |
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload | |
hover |
相对于JavaScript的原生事件,jQuery更加精简。
jQuery具有很多内置的效果,如淡入淡出、显示隐藏、动画、jQuery 方法链接。
本文不做过多复述,详细请看菜鸟教程 jQuery教程
HTML+CSS+JavaScript,前端三大将已经粗略复习完毕,还有很多知识没有写到博客中来。以及一些流行的前端框架,还需要去进一步熟悉,如vue.js、Bootstrap等等都是前端热门技术。本系列博客只是基础复习就不做过多的介绍了,后期的项目将会一一对各种技术进行介绍以及学习。
HTML复习篇到此就结束了,因为本人主学Java后端因此对于前端不做重点,复习系列文章仅作为一个复习导引,具体内容还需要进行大量的资料查阅以及项目练手。未来几天博主将会写一些HTML静态页面,进行一个项目复习,随后会上传至博客中。
复习路漫漫,吾将上下而求索。
注:本文所用资料均来源于菜鸟教程
正在开发…
本文地址:https://blog.csdn.net/qq_42275943/article/details/107294531
如对本文有疑问, 点击进行留言回复!!
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
网友评论