java script 菜鸟教程_JavaScript 基础教程
JS入门基础
写JS的步骤
先实现布局
想出实现原理
了解JS语法
希望把某个元素移除的实现
display: none; 显示为无
visibility: hidden; 隐藏
width \ height
透明度
left \ top
拿与背景色相同的div盖住该元素
利用margin值
……
获取元素
getElementById() ——静态方法,前面只能跟document
document.body、document.title 页面中只有一个的元素
getElementsByTagName() ——动态方法,前面可以跟document也可以跟其他元素,返回的是一个类似数组的元素的集合
有类似数组的length
有类似数组的应用方式,比如ali[0]
在用TagName的时候,必须要加上中括号[]
所谓的动态方法,是指通过js动态添加的元素,getElementsByTagName()也可以找到,但是document.getElementById是找不到的
事件
事件:鼠标事件、键盘事件、系统事件、表单事件、自定义事件
onclick
onmouseover
onmousedown
onmouseout
onmouseup
onmousemove
……
如何添加事件
元素.onmouseover
函数
函数可以理解为命令,做一些事情,如:
function abc() { //肯定不会主动执行! … }
直接调用:abc();
事件调用:元素.事件 = 函数名 (oDiv.onclick = abc;)
……
function(){} 匿名函数
元素.事件 = function(){}
测试
alert(1); 带确定按钮的警告框;alert('ok'); 'ok' 字符串
初学者:最好保持随时写,随时测试的习惯
变量
var li = document.getElementById('lis');
var num = 123;
var name = 'leo';
JS的属性操作
HTML属性操作
属性名
属性值
属性的读操作:获取、找到
元素.属性名
属性的写操作:替换、修改
元素.属性名 = 新的值
添加的话,需要用 +=
innerHTML 读取元素内的所有HTML代码
字符串连接:加号
属性读写操作的注意事项
JS属性中不允许出现"-",例如font-size改为fontSize
class在js里面是保留字,在js作用class要用className
所有的相对路径都别拿来做判断(如img的src、还有href)
颜色值不要拿来做判断(因为有red、#f00、rgb(250, 0, 0)等写法
相对路径也不要拿来做判断
innerHTML的值别拿来做判断
IE6、IE7、IE8中表单元素的type更改不了,不支持,会报错;其他的都可以。
在有些浏览器中,直接更改float值可能不支持。在js中,可以用IE(styleFloat)和非IE(cssFloat)来区别对待。
不能用来做判断的东西,可以创造一个开关,利用布尔值来实现
关于兼容:
技术上:必须能做到掌握兼容性(兼容性问题的解决方案)
需求上:商量着来(提供最准确的呈现方案)
[]中括号的使用
点"."后面的值无法修改
中括号[]里面的值可以修改;JS中允许把"."替换成"[]"
条件判断
if(条件){……};
if(条件){……} else {……};
if(条件1){……} else if(条件2) {……} else if(条件3) {……} else {……};
数组
"放数据的仓库"
中括号[],半角都好分隔,最后一个数据后面不要加逗号
数组的length属性
为数组最后塞东西用push();
for应用
for循环的使用场景:
如果想要重复执行某些代码
每次执行的时候,有个数字在变化
for循环的执行顺序:1→234→234……
var i = 0;
i < 3; 关键步骤
括号里面的所有代码
i++
注意下面这样一个循环:
for (var i=0; i
aLi[i].onclick = function(){
alert(i);
}
}
以上代码会弹出一个3,而不是一次0、1、2;这里注意,如果在for循环里面包了一个函数,函数里面用了i,那么由于作用域的关系,i不会像你想象的那样逐次增加。
cssText文本格式化与属性操作
oDiv.style.cssText = 'width: 200px; height: 200px;';
cssText不会动head的style中的设置;但是会改变行间样式(注意,是替换行间样式,而非新增行间样式)
按钮点击之后,不再重复功能的思路
找按钮的麻烦,比如点击一次之后,设置oBtn.disabled = true;
继续找按钮的麻烦,比如点击一次后,将按钮隐藏oBtn.style.display = 'none';
将按钮添加的东西清空,然后再添加一次,先清空再生成
用判断
this指向及this应用
window是js中的"老大"
function fn1(){
alert(this);
}
fn1();
上述代码中执行函数fn1()相当于window.fn1();因此,在函数体内弹出这个this仍然是window。
function fn1(){
alert(this);
}
oBtn.onclick = fn1;
上述用按钮的点击事件调用的fn1函数,最终弹出来的是这个按钮,而不是window。
function fn1(){
alert(this);
}
oBtn.onclick = function(){
alert(this)
}
上述代码,点击按钮弹出的this仍然是oBtn这个按钮。
function fn1(){
alert(this);
}
oBtn.onclick = function(){
fn1();
}
上述代码,点击oBtn按钮,弹出的就不再是oBtn这个对象,而是window。
上述代码是行间事件,弹出的this就是这个按钮btn2。
function fn1(){
alert(this);
}
this => div
java script 菜鸟教程_JavaScript 基础教程相关推荐
- javascript基础教程_JavaScript基础教程(九)对象、类的定义与使用
对象.类的定义与使用 对象与类是面向对象程序设计语言教学过程中不可避免需要讲解的内容之一.很多人将两者混为一谈,简单认为对象就是类,类就是对象.实际上深入分析的话,对象与类的区别还是较为明显的.本文主 ...
- java程序设计之网络编程基础教程_Java程序设计之网络编程基础教程
基本信息 书名:Java程序设计之网络编程基础教程(21世纪高等学校计算机基础实用规划教材) :43.50元 作者:李芝兴 主编 出版社:清华大学出版社 出版日期:2012-12-1 ISBN:978 ...
- 【中英双语】Java Persistence Hibernate 和 JPA 基础教程
[中英双语]Java Persistence Hibernate 和 JPA 基础教程 关于 Java Persistence API (JPA) 与 Hibernate 的简单易学和易于理解的课程 ...
- 黑马程序员全套Java教程_Java基础教程_异常(含扩展)(二十三)
黑马程序员全套Java教程_Java基础教程_异常(含扩展)(二十三) 1.1 异常概述与异常体系结构 1.2 JVM遇到异常时的默认处理方案 1.3 异常处理 1.4 异常处理之try--catch ...
- [转载]VBS入门教程 VBS基础教程
[转载]VBS入门教程 VBS基础教程(收藏) VBS基础教程 VBS(VBScript的进一步简写)是基于Visual Basic的脚本语言. Microsoft Visual Basic是微软公司 ...
- 全国电子商务人才专业化从业认证考试初级教程(公共基础教程)(全国电子商务人才丛业能力教育指定教材)
书名:<全国电子商务人才专业化从业认证考试初级教程(公共基础教程)>(全国电子商务人才丛业能力教育指定教材) 作者:单兴华 组编:全国电子商务人才从业能力教育项目管理办公室 出版社:中国人 ...
- 14-(基础入门篇)关于系统教程和基础教程后期规划
https://www.cnblogs.com/yangfengwu/p/9966901.html 系统教程:现在的系统教程已经写完源码,还没配教程,现在买只能给源码哈 系统教程初步要做到的就是12节 ...
- java script 菜鸟教程_JavaScript 菜鸟基础教程
<JavaScript 菜鸟基础教程>由会员分享,可在线阅读,更多相关<JavaScript 菜鸟基础教程(21页珍藏版)>请在人人文库网上搜索. 1.JavaScript 简 ...
- java script 菜鸟教程_JS 基础知识之菜鸟教程(2016-09-30)
//2016-09-30 重读菜鸟教程上JS教程同时摘录重要知识点 1.JavaScript 输出几种方式: 使用 window.alert() 弹出警告框. 使用 document.write() ...
- java 基础教程 ppt_java基础教程课件.ppt
java基础教程课件 第三章 运算符,表达式和语句 3.1运算符与表达式 3.2 语句的概述 3.3 控制语句 3.4循环语句 3.5break 和continue语句 3.1运算符与表达式 3.1. ...
最新文章
- 硬核!30 张图解 HTTP 常见的面试题
- ASP.NET Core 菜鸟之路:从Startup.cs说起
- 理解快速生成树协议(RSTP)(二)
- cp -r 和 cp -R 的区别
- Sublime Text 3 搭建Python3 IDE
- php 原生 redis,php redis_php redis扩展_php redis使用 - Lane Blog
- Cocos2d-x移植Android 常见问题处理办法
- 响应式和自适应的区别
- 常用的织梦(dedecms)调用标签
- 程序阻碍OD调试的方式1
- 卸载干净ARCGIS不用手动删注册表,一键用GEEK
- 关联规则挖掘与Apriori算法
- XBee无线模块的通信方式和结合Arduino的具体实施过程
- 《时间的玫瑰》书中的精髓:知名投资人但斌眼中的价值投资是什么?我们如何秉承价值投资的原则选择有价值的股票?
- 使用Vlookup函数对数据进行分组
- iOS16.1RC版发布后 iPhone14 Pro系列机型可以在灵动岛显示球赛比分
- 自然语言处理实战——巧用 Amazon Comprehend 分析社交媒体数据
- MATLAB 矢量场
- 2022.11.14每日刷题打卡
- Docker容器-----Consul部署