HTML与JavaScript联动
目录
一、数组（增删查改）
1.创建数组
2. 增加数组元素
3.删除数组中的元素
4.查看数组元素
5.修改数组元素
二、创建方法
1.函数
2.作用域
3.作用域链
三、对象
1.使用 字面量 创建对象 [常用]
2.使用 new Object 创建对象
四、JavaScript 的对象和 Java 的对象的区别
五、JS 操作 DOM
1.得到控件
2.操作元素
2.1 获取元素值
2.2 设置元素的值
2.3 innerText /innerHTML
3.原生猜数字游戏
4.jquery版本猜数字游戏
5.聚合搜索
6.表白墙
首先，我想大家推荐一个可以用来查询JavaScript语法的一个网站：链接：lJavaScript - 学习 Web 开发 | MDN (mozilla.org)
一、数组（增删查改）
1.创建数组
1️⃣使用 new 关键字创建
// Array 的 A 要大写
var arr = new Array();2️⃣使用字面量方式创建 [常用]
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"在数组中，我们可以存放任意类型的元素
2. 增加数组元素
使用 push 进行追加元素
代码示例: 给定一个数组, 把数组中的奇数放到一个 newArr 中.
var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {if (arr[i] % 2 != 0) {newArr.push(arr[i]);}
}
console.log(newArr);3.删除数组中的元素
使用 splice 方法删除元素
var arr = new Array();
arr.push(1);
arr.push("hello");
arr.push(false);arr.splice(1, 1);
console.log(arr.length);for(var item of arr) {console.log(item);
}
4.查看数组元素
使用下标的方式访问数组元素(从 0 开始)
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr);
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = '小猫凯迪';
console.log(arr);❗❗注意：如果下标超出范围读取元素, 则结果为 undefined
var arr = new Array();
arr.push(1);
arr.push("hello");
arr.push(false);console.log(arr[3]);//undefined❗❗不要给数组名直接赋值, 此时数组中的所有元素都没了
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
arr = '小猫凯迪';5.修改数组元素
直接修改
var arr = new Array();
arr.push(1);
arr.push("hello");
arr.push(false);arr[1] = "hi";
console.log(arr.length);
for(var item of arr) {console.log(item);
}
二、创建方法
1.函数
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {函数体return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值<body><input type="botton" value="添 加" onclick="add('张三', '123')"> <input type="botton" value="修 改" onclick="up('李四')"> <input type="botton" value="删 除" > <input type="botton" value="查 询" > <script>//修改方法function up() {alert("执行了修改方法！");}</script></body>
1️⃣函数定义并不会执行函数体内容, 必须要调用才会执行. 调用几次就会执行几次.
<input type="botton" value=" 添 加" onclick="add('张三', '123')"> <input type="botton" value=" 修 改" > <input type="botton" value=" 删 除" > <input type="botton" value=" 查 询" > <script>alert(111);//添加方法--不需要写参数类型function add(name, password) {alert("执行了添加方法！\n name=" +name+ "\n passord=" + password);}</script>在进行页面加载的过程中是不会调用函数的：
2️⃣在页面加载的过程中，如果想要触发函数，直接在全局 script 中调用add函数（可以不传参数，默认为unfined）：
<body><input type="botton" value="添 加" onclick="add('张三', '123')"> <input type="botton" value="修 改" > <input type="botton" value="删 除" > <input type="botton" value="查 询" > <script>alert(111);//添加方法--不需要写参数类型function add(name, password) {alert("执行了添加方法！\n name=" +name+ "\n passord=" + password);}add();</script></body>
3️⃣调用函数的时候进入函数内部执行, 函数结束时回到调用位置继续执行. 可以借助调试器来观察.并且函数的定义和调用的先后顺序没有要求. (这一点和变量不同, 变量必须先定义再使用)
// 调用函数
hello();
// 定义函数
function hello() {console.log("hello");
}2.作用域
1️⃣全局作用域: 在整个 script 标签中, 或者单独的 js 文件中生效.
2️⃣局部作用域/函数作用域: 在函数内部生效.
// 全局变量
var num = 10;
console.log(num);
function test() {// 局部变量var num = 20;console.log(num);
}
function test2() {// 局部变量var num = 30;console.log(num);
}
test();
test2();
console.log(num);
// 执行结果
10
20
30
10
❗❗创建变量时如果不写 var, 则得到一个全局变量
function test() {num = 100;
}
test();
console.log(num);
// 执行结果
100不写 var，会自动创建一个变量
3.作用域链
1️⃣函数可以定义在函数内部
2️⃣内层函数可以访问外层函数的局部变量.
内部函数可以访问外部函数的变量. 采取的是链式查找的方式. 从内到外依次进行查找.
var num = 1;
function test1() {var num = 10;function test2() {var num = 20;console.log(num);}test2();
}
test1();
// 执行结果
20执行 console.log(num) 的时候, 会现在 test2 的局部作用域中查找 num. 如果没找到, 则继续去 test1 中查找. 如果还没找到, 就去全局作用域查找.
三、对象
在 JavaScript 中式没有类这个概念的；但是有对象的，一切皆对象
1.使用 字面量 创建对象 [常用]
var student = {id:1,name:"张三",password:"123",saylli:function() {alert("hi student");}
}console.log(student.name);
student.saylli();1️⃣使用 { } 创建对象2️⃣属性和方法使用键值对的形式来组织.3️⃣键值对之间使用 , 分割. 最后一个属性后面的 , 可有可无4️⃣键和值之间使用 : 分割.5️⃣方法的值是一个匿名函数
使用对象的属性和方法：
// 1. 使用 . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使用 [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调用方法, 别忘记加上 ()
student.sayHello();2.使用 new Object 创建对象
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();❗❗注意：使用 { } 创建的对象也可以随时使用 student.name = "蔡徐坤"; 这样的方式来新增属性.
四、JavaScript 的对象和 Java 的对象的区别
1️⃣JavaScript 没有 "类" 的概念
对象其实就是 "属性" + "方法" .
类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 "月饼模子"，在 JavaScript 中的 "构造函数" 也能起到类似的效果，而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象
2️⃣JavaScript 对象不区分 "属性" 和 "方法"
JavaScript 中的函数是 "一等公民", 和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行.
3️⃣JavaScript 对象没有 private / public 等访问控制机制
对象中的属性都可以被外界随意访问.
4️⃣JavaScript 对象没有 "继承"
继承本质就是 "让两个对象建立关联". 或者说是让一个对象能够重用另一个对象的属性/方法
JavaScript 中使用 "原型" 机制实现类似的效果
5️⃣JavaScript 没有 "多态"
多态的本质在于 "程序猿不必关注具体的类型, 就能使用其中的某个方法".
C++ / Java 等静态类型的语言对于类型的约束和校验比较严格. 因此通过 子类继承父类, 并重写父类的方法的方式 来实现多态的效果.
五、JS 操作 DOM
HTML与JavaScript联动相关推荐
- 转载 javascript联动菜单
JavaScript-联动select菜单完全解析,看完本例后你将彻底了解有关网页联动菜菜的用法.如果再配上Ajax技术,那么联动的select框效果将会更好. 下载与演示地址 http://lsln ...
- 用JavaScript实现动态省市县三级联动
像平时购物选择地址时一样,通过选择的省动态加载城市列表,通过选择的城市动态加载县区列表,从而可以实现省市县的三级联动,下面使用原生的JavaScript来实现这个功能: <!DOCTYPE ht ...
- JavaScript巧用对象的引用解决三级联动
在开发过程中,我们经常会有操作需要进行三级联动操作,比较典型的如:省市区的选择,菜单栏的选择等.当我们遇到这个问题的时候,为了便于开发,我们都是通常使用第三方的插件来实现数据的联动效果.这时候按照联动 ...
- HTML/CSS——form表单select联动（JavaScript方法）
下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取opti ...
- javascript省市三层联动，修改
/* PCAS (Province City Area Selector 省.市.地区联动选择JS封装类) Ver 2.01 完整版 *\ 制作时间:2005-12-30 更新时间:2006-01-2 ...
- JavaScript实现省市二级联动
JavaScript实现省市二级联动 展示一下效果? 当我鼠标点击前面的省那一栏的时候后面市那一栏会出现相对应的下辖市 实现思路 1. 添加相对应的select容器 2. 然后添加数据 3. ...
- 简单的一个用javascript做的'省市区'三级联动效果
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition ...
- JavaScript省市二级联动
XML文件负责保存所需要的数据,而HTML文件负责通过javascript解析XML数据并显示在页面上.代码如下: cities.xml <?xml version="1.0" ...
- ASP+XML+JavaScript实现动态无限级联动菜单
我做某个项目时,有需求的是做一个动态的无限级的联动菜单.由于本人比较懒于是上网找找有关的代码,但很多都没有满足需求,其中有一编文章是用JavaScript对XML文件操作来实现无限级联动菜单的,我们可 ...
最新文章
- go定时器 每天重复_通过测试学习Go：Hello, World
- php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
- 虽未达到科幻中的未来，人工智能革命仍已到来
- Django REST framework API 指南（12）：验证器
- 一位刚刚成功上岸的智能车队员对于参赛经历总结与对比赛的建议
- T-SQL的高级查询详解（一）--函数的综合应用
- java旋转爱心_p5.js临摹旋转爱心
- 惊呆了！小姐姐用图解 Python,这也太秀了吧?
- python计算一年有多少天_Python 案例 004 （计算当前时间是一年中的第几天）
- 使用python获取焦点窗口的进程名称
- Mybatis-plus常用API全套教程
- PHP 函数调用跟踪
- 牛客19115 选择颜色
- codeforce 985C Liebig's Barrels
- Qt创建桌面快捷方式
- MACD顶背离和底背离是什么(图解)
- EasyExcel模板数据填充
- 浙江大学计算机考研分数线2018,2018年浙江大学考研复试分数线已公布
- 【uniapp | 微信小程序】注册和开发环境搭建
- Feign - Error while extracting response for type [class java.lang.String]