前端js学习
创始人
2024-05-31 20:25:22
0

1. js入门

1.1 js是弱类型语言

在这里插入图片描述

1.2 js使用方式

1.2.1 在script中写

在这里插入图片描述

1.2.2 引入js文件

在这里插入图片描述
在这里插入图片描述

1.2.3 优先级

在这里插入图片描述

1.3 js查错方式

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.4 js变量定义

在这里插入图片描述
在这里插入图片描述

1.4 js数据类型

数据类型英文表示示例
数值类型number1.1 1
字符串类型string‘a’ ‘abc’ “abc”
对象类型object
布尔类型booleannumber
函数类型functionnumber

1.4.1 特殊值

特殊值含义
undefined变量未赋初始值时,默认undefined
null空值
NaNNot a Number 非数值

在这里插入图片描述

1.4.2 注意事项

String字符串[可以用双引号括起来,也可以单引号括起来]
“a book of javascript”, ‘abc’, “a”

1.5 js运算符

给定: x = 5

运算符描述例子
==等于(只比较值)x == 5 为true,x == "5"为true, x == 8为false
===全等(同时比较值和类型)x === 5 为true; x === "5"为false

在这里插入图片描述

1.5.1 逻辑运算符

给定: x=6 和 y=3

运算符描述例子
&&and描述
||or描述
!not描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.5.2 三元运算符

在这里插入图片描述

1.6 js数组

1.6.1 定义方式

在这里插入图片描述
在这里插入图片描述

1.6.2 数组遍历

在这里插入图片描述

1.7 js函数

1.7.1 函数入门

在这里插入图片描述

1.7.2 函数使用方式

1.7.1.1 使用方式一

在这里插入图片描述

1.7.1.2 使用方式二

在这里插入图片描述

1.7.3 函数注意事项

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

1.7.4 函数练习题

在这里插入图片描述

1.8 定义对象

1.8.1 使用object定义

在这里插入图片描述

1.8.2 使用{}定义

在这里插入图片描述

1.9 事件

在这里插入图片描述

  1. 事件的注册(绑定)
    事件注册(绑定),当事件响应(触发)后要浏览器执行哪些操作代码,叫做事件注册或事件绑定;
  2. 静态注册事件
    通过html标签的事件属性直接赋予事件响应后的代码,这种方式叫做静态注册;
  3. 动态注册事件(dom)
    通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function () {} 这种形式叫做动态注册
    步骤:(1)获取标签对象dom对象; (2)标签对象.事件名 = function() {}

1.9.1 onload事件

在这里插入图片描述

1.9.3 onclick事件

在这里插入图片描述

1.9.4 失去焦点事件

在这里插入图片描述

1.9.5 内容发生改变事件

在这里插入图片描述
在这里插入图片描述

1.9.6 表单提交事件

1.9.6.1 静态注册

在这里插入图片描述

1.9.6.2 动态注册

在这里插入图片描述
在这里插入图片描述

1.9.6.3 表单作业

在这里插入图片描述
在这里插入图片描述

2. dom对象

  1. DOM 全称是 Document Object Model 文档对象模型;
  2. 就是将文档中的标签, 属性, 文本转换成对象来管理;
    在这里插入图片描述

2.1 文档对象模型

  1. 当网页被加载时, 浏览器会创建页面的文档对象模型(Document Object Model)
  2. html dom 树

2.2 document对象

  1. document 它管理了所有的HTML 文档内容;
  2. document 它是一种树结构的文档;
  3. 有层级关系, 在 dom中把所有的标签都 对象化;
  4. 通过document 可以访问所有的标签对象;

2.2.1 应用实例一

在这里插入图片描述

2.2.2 应用实例二

  • 静态注册
    在这里插入图片描述
    在这里插入图片描述
    – 动态注册
    在这里插入图片描述
    在这里插入图片描述

2.2.3 应用示例三

在这里插入图片描述

  • 升级版:做到猫狗切换
    思路:根据value值判断选择具体的执行方法
    在这里插入图片描述

2.2.4 应用案例四

在这里插入图片描述

2.3 DOM节点

在HTML DOM(文档对象模型)中,每个部分都是节点

  1. 文档 本身是文档节点;
  2. 所有 HTML元素 是元素节点;
  3. 所有 HTML属性 是属性节点;
  4. HTML元素内的 文本 是文本节点;
  5. 注释是 注释 节点;

2.3.1 节点常用方法

2.3.1.1通过id获取节点

2.3.1.2获取所有option节点

2.3.1.3通过name获取节点

2.3.1.4获取指定dom对象下的子节点

2.3.1.5获取第一个节点

2.3.1.6获取父节点

2.3.1.7获取兄弟节点

2.3.1.8设置文本域内容



演示HTML DOM 相关方法


你喜欢的运动项目:

足球蓝球乒乓球

你当前的女友是谁:


你的编程语言:

  • Java
  • Python
  • Go语言



个人介绍:

2.4 js dom 乌龟吃鸡游戏

在这里插入图片描述
在这里插入图片描述

2.4.1 静态注册实现



tortoise-hen碰撞游戏


相关内容

热门资讯

中证A500ETF摩根(560... 8月22日,截止午间收盘,中证A500ETF摩根(560530)涨1.19%,报1.106元,成交额...
A500ETF易方达(1593... 8月22日,截止午间收盘,A500ETF易方达(159361)涨1.28%,报1.104元,成交额1...
何小鹏斥资约2.5亿港元增持小... 每经记者|孙磊    每经编辑|裴健如 8月21日晚间,小鹏汽车发布公告称,公司联...
中证500ETF基金(1593... 8月22日,截止午间收盘,中证500ETF基金(159337)涨0.94%,报1.509元,成交额2...
中证A500ETF华安(159... 8月22日,截止午间收盘,中证A500ETF华安(159359)涨1.15%,报1.139元,成交额...
科创AIETF(588790)... 8月22日,截止午间收盘,科创AIETF(588790)涨4.83%,报0.760元,成交额6.98...
创业板50ETF嘉实(1593... 8月22日,截止午间收盘,创业板50ETF嘉实(159373)涨2.61%,报1.296元,成交额1...
港股异动丨航空股大幅走低 中国... 港股航空股大幅下跌,其中,中国国航跌近7%表现最弱,中国东方航空跌近5%,中国南方航空跌超3%,美兰...
电网设备ETF(159326)... 8月22日,截止午间收盘,电网设备ETF(159326)跌0.25%,报1.198元,成交额409....
红利ETF国企(530880)... 8月22日,截止午间收盘,红利ETF国企(530880)跌0.67%,报1.034元,成交额29.0...