2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

2019.4.10 4.11 JS
2019.4.10 4.11 JS

2019.4.10 4.11 JS

var定义变量 function定义方法 都在script方法体内

2019.4.10 4.11 JS

2019.4.10 4.11 JS

第一个JS-弹出提示框

2019.4.10 4.11 JS
2019.4.10 4.11 JS

弹出一个带有输入框的提示框

2019.4.10 4.11 JS

栗子: 输入数字 输出平方
2019.4.10 4.11 JS

2019.4.10 4.11 JS
2019.4.10 4.11 JS

通过一个button 设计点击按钮 来**弹出对话框行为

  1. 定义方法, 在head标签里面的script标签里面
    关键字:function 方法名(){
    }
  2. 在button标签里面 为onclick属性赋值。

栗子1:取平方
2019.4.10 4.11 JS

2019.4.10 4.11 JS

这个时候,显示网页的时候会显示一个按钮2019.4.10 4.11 JS
点击按钮后才会弹出页面等一系列行为。

栗子2:计算周长面积
2019.4.10 4.11 JS
2019.4.10 4.11 JS

注意,这里的number01和number02要通过parsInt强制转型, 不然在计算周长的时候,number01+number02 会被js拼接为 number01number02 (如输入2和4变成了24)。所以需要强转。

栗子3:取随机数
2019.4.10 4.11 JS
2019.4.10 4.11 JS

math.floor:取整


2019.4.10 4.11 JS
2019.4.10 4.11 JS

写到JS文件夹里面,可以减少主界面过多的代码

主界面通过这句话引用js里面的function方法
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
栗子:通过随机数写一个猜数字的游戏
2019.4.10 4.11 JS

input 语法:

2019.4.10 4.11 JS

在JS中,通过var 对象名 = document.getElementById(“对象的id”)获取键/输入框输入的内容。

栗子:通过JS写一个简易计算器
2019.4.10 4.11 JS

js中数组的写法

2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
还是和css中的相仿, 通过


来设置。先设置数组中的内容,然后通过for循环输出。 通过 上面那个select size 设置一次显示的数量。

innerHTML与innerText的区别

2019.4.10 4.11 JS
2019.4.10 4.11 JS

点击前:2019.4.10 4.11 JS
点击后:
2019.4.10 4.11 JS

原因是由于:
2019.4.10 4.11 JS


下午

2019.4.10 4.11 JS

window对象

2019.4.10 4.11 JS
2019.4.10 4.11 JS

window常用属性

2019.4.10 4.11 JS
使用示范:
2019.4.10 4.11 JS

JS:
2019.4.10 4.11 JS

window常用方法

2019.4.10 4.11 JS

Confirm:

2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

关于blur 失去焦点: 一般用于注册的时候,在账号框没有输入账号 却点到别处了会自动弹出提示。

提示框:prompt()

2019.4.10 4.11 JS

开启,关闭窗口

2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

但是在关闭的时候不是这样操作,需要定义一个全局变量。因为单纯的close 浏览器并不知道关谁。
2019.4.10 4.11 JS
a.close() 关闭新窗口
2019.4.10 4.11 JS
window.close() 关闭当前窗口


获取当前时间

2019.4.10 4.11 JS
2019.4.10 4.11 JS

《带有上午好、下午好的时间显示表》
2019.4.10 4.11 JS


定时器

注意:这个括号里面 前面是要转向的 方法名(function后面跟的那个) 后面是时间
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

课堂练习:跑马灯的制作。

2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

document对象(DOM)

2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

动态的通过JS来操作 显示在body里面的文档数。
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS


根据层次查找节点。注意!文档中的空白文档也是节点

2019.4.10 4.11 JS

在相同节点数下,若查找前一个、下一个节点,一定要注意是否有空白文档,若有空白文档在前面或后面,则下一个、前一个节点就是undifined。

找出select标签。

2019.4.10 4.11 JS
2019.4.10 4.11 JS
里面一共有7个元素
2019.4.10 4.11 JS
这个绿色的长条换行 也算。一个元素

获取属性操作

2019.4.10 4.11 JS
2019.4.10 4.11 JS

getAttribute是获得值,括号里面是就是你想获得的内容。


赋值:给b01赋予click属性
2019.4.10 4.11 JS
2019.4.10 4.11 JS

setAttribute: 1.属性的名字 2属性的值(可以是其他方法)


删除属性
2019.4.10 4.11 JS


通过name/tagname属性查找节点。

2019.4.10 4.11 JS

2019.4.10 4.11 JS


增加节点

2019.4.10 4.11 JS

在原有元素上添加新的元素(文本框 按钮等)

2019.4.10 4.11 JS

示例:
2019.4.10 4.11 JS
1.创立一个添加节点的方法 创建一个节点p
2.找到方法体body中的某个元素 (通过id) 并且赋于名称
3.通过节点名.点 innerHTML 设置添加的内容
4.通过元素 。点appendChild(节点名称)

2019.4.10 4.11 JS

2019.4.10 4.11 JS

2019.4.10 4.11 JS


删除节点

2019.4.10 4.11 JS
2019.4.10 4.11 JS

2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

2019.4.10 4.11 JS
2019.4.10 4.11 JS


事件。(目前就学了一个onclick)

2019.4.10 4.11 JS

onchange

2019.4.10 4.11 JS
2019.4.10 4.11 JS
一旦修改了值,onchange事件就会被触发。
2019.4.10 4.11 JS

JS重点:事件冒泡

js的事件委托
2019.4.10 4.11 JS

2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS
2019.4.10 4.11 JS

相关文章:

  • 2021-11-01
  • 2022-12-23
  • 2021-11-14
  • 2021-07-20
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-23
猜你喜欢
  • 2022-01-19
  • 2022-12-23
  • 2022-12-23
  • 2021-05-06
  • 2021-07-22
  • 2021-08-05
  • 2021-12-17
相关资源
相似解决方案