js基本知识3
1. 函数 function
函数的声明 函数的 调用 函数的传参
2. 函数返回值
Return 返回结果 返回给函数
Id 函数
function $id(id) { return document.getElementById(id);}
3. 获得焦点 onfocus onblur 失去焦点
4. this 这个 自己的 指向的是 事件调用者
5. InnerHTML 属于盒子的内容 表单的内容 value
6. 表单自动获得焦点 focus() 选择表单内容 select();
7. For(var i = 0; i<;i++) { } 遍历
8. For(;;){ } 死循环
9. GetElementById() id元素 一个
10. getElementsByTagName() 很多个
1.2 判断用户输入事件
正常浏览器 : oninput
Ie 678 支持的 : onpropertychange
1.3 数组 array
数组是做什么用的?
var num = 10; 变量可以用来存储东西 。
一个变量里面只能一个值。
我们130人,想把我们每个人的人名存储,要用变量需要 130变量。
这个时候可以考虑 数组 。 组合
数组: 就是一个大变量, 它里面可以存储很多的值。
1.3.1 声明数组
var arr = [1,3,5,7,9];
var arr = new Array(1,3,5);
1.3.2 使用数组
使用的方法: 数组名[索引值]; 函数名();
索引号是从0开始的。 0 1 2 3 4 5 ...
var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3])
1.3.3 数组的长度
数组名.length;
1.3.4 遍历数组
想到了for 遍历 数组
getElementsByTagName() 得到一个伪数组
1.3.5 案例 隔行变色
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li"); // 得到所有的li
//alert(lis.length);
for(var i = 0; i<lis.length; i++)
{
if(i%2 == 0) // 只有偶数能被2整除
{
lis[i].style.backgroundColor = "#eee";
}
//鼠标经过li 的时候, 当前的底色变亮
lis[i].onmouseover = function(){
this.className = "current";
}
lis[i].onmouseout = function(){
this.className = "";
}
}
}
</script>
1.3.6 求平均值
<script>
var arr = [10,20,30,34,67];
function avg(array){ // 封装求平均值函数
var len = array.length; // 数组的长度
var sum = 0;
for(var i=0; i<len; i++)
{
sum += array[i]; // sum = sum +array[i];
}
return sum / len;
}
//a*=3 a= a*3
console.log(avg(arr));
</script>
字符相连
+
数值相加 字符相连
1+1 = 2;
“你好” + “吗” “你好吗”
“你好” + 2 “你好2” “0” + 10 “010”
10 - “2” 8
所有的input 取过来的值 是 字符型。
三元运算符 三目运算符
一元: a++ b++ +a -a
二元: a+b a>=b
三元: 表达式 ? 结果1 : 结果2 等价于 if else
如果表达式结果为真 , 则返回 结果1
如果表达式结果为假, 则返回结果2
if(3>5) {alert(“11”)} else { alert(22)} ==
3>5 ? alert(11) : alert(22)
the king is always luck
王老吉
1.4 排他思想
排他思想:
首先干掉所有人, 剩下我自己
<script>
window.onload = function(){
var btns = document.getElementsByTagName("button");
for(var i=0;i<btns.length;i++)
{
btns[i].onclick = function(){
//清除所有人的 类名 只能用 for 遍历
for(var j=0;j<btns.length;j++)
{
btns[j].className = "";
}
//就剩下自己 就是一个 而且是点击那个
this.className = "damao";
}
}
}
</script>
1.5 变量 和属性
变量
是独立存在的 自由自在的
miss 小姐 女士
属性和方法
属于某个对象的 属性和 方法
mrs
var index = 10; //变量 谁都可以使用
var arr = []; // 数组
arr.index = 20; // 自定义属性 他只能在arr 才能使用
alert(arr.index);
js基本知识3的更多相关文章
- [JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
- HTML+CSS+JS基础知识
HTML+CSS+JS基础知识 目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="sty ...
- Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
- 网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
- NodeJs>------->>第三章:Node.js基础知识
第三章:Node.js基础知识 一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
- JS底层知识理解之执行上下文篇
JS底层知识理解之执行上下文篇 一.什么是执行上下文(Execution Context) 执行上下文可以理解为当前代码的执行环境,它会形成一个作用域. 二.JavaScript引擎会以什么方式去处理 ...
- 零散的JS和node.js小知识
JS的连续赋值和曾经出现的怪异情况 let a=1; let b=a=3; 如上的真实赋值过程 => a=1 => a=3 => b=3 => 一般来说,等号是从右向左赋值的 ...
- 前端学习:JS面向对象知识学习(图解)
前端学习:JS面向对象知识学习(图解) 前端学习:JS(面向对象)代码笔记 JS面向对象图解知识全览 创建类和对象 方式1:使用Object()函数 方式2:使用自变量 方式3:使用工厂函数 创建多个 ...
- JS基础知识二
JS控制语句 switch 语句用于基于不同的条件来执行不同的动作 <script> function myFunction(){ var x; var d=new Date().getD ...
- JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
随机推荐
- linux 处理键盘 鼠标事件
Linux下鼠标和键盘的模拟控制,也就是为手势和语音控制鼠标和键盘部分服务的. 有关于本系统构建的文章结构都会由三个部分来组织,一是该功能模块的介绍和在Linux下简单应用程序的实现:二是将该功能模块 ...
- HTML+CSS-如何定义让两个div横向排列
方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inlin ...
- 小贝_redis高级应用-公布与订阅
redis高级应用-公布与订阅 一.公布与订阅(pub/sub)功能 二.公布与订阅(pub/sub)机制 三.redis公布与订阅(pub/sub)的实现 一.公布与订阅(pub/sub)功能 Pu ...
- Statusbar、Menubar、Toolbar合集
In the last example of this section, we create a menubar, a toolbar and a statusbar. We also create ...
- javascript 闭包 通俗解释
代码段 function foo(){ var a = 2; function bar(){ console.log(a); } return bar; } var baz = foo(); baz( ...
- UI组件之TextView及其子类(五)计时器Chronometer
Chronometer直接继承了TextView组件,它会显示一段文本,显示从某个事实上时间開始.一共过了多长时间.我们看Chronometer的源代码: watermark/2/text/aHR0c ...
- UVA1614(贪心)
Hell on the Markets Time Limit:3000MS Memory Limit:Unknown 64bit IO Format:%lld & %llu [Subm ...
- js 判断进入可视区域
js 判断进入可视区域 CreateTime--2018年4月14日08:17:41 Author:Marydon 1.使用场景 图片懒加载时候需要用到,其他情况暂时没有遇到,欢迎留言补充! 2. ...
- Yii1.1应用升级到Yii2.0的一些注意点
1. 应用程序实例直接使用全局命名变量来訪问:$app,而无须调用app() 2. Yii2在视图层的一个显著改变是引入了视图类,这样在MVC模式实现上更为完整. 对应的,相关展现层附属类就由新的视图 ...
- 用python实现的的手写数字识别器
概述 带GUI界面的,基于python sklearn knn算法的手写数字识别器,可用于识别手写数字,训练数据集为mnist. 详细 代码下载:http://www.demodashi.com/de ...