走进JavaScript
JavaScript的作用:操作HTML元素,响应用户的操作,处理数据;
script标签的type或者language可以写也可以不写;
script标签防止位置:head结束之前或者body结束之后;
JS里面严格区分大小写!!!
JS可以通过元素的ID获取html元素,
document.getElementById("box").onclick = function(){
alert('Hello JavaScript')
};
在上例中 onclic是点击事件;function(){}是函数;alert()是弹窗;
window.onload = function(){
document.getElementById("box").onclick = function(){
alert('这是一段JavaScript代码')
};
};
window.onload的意思是当页面加载完成后,执行这段JavaScript代码,一个页面只能出现一次;
JS中的事件
鼠标事件:onclick 鼠标点击某个对象;onmouseover/onmouseenter 鼠标被移到某元素之上;
onmouseout/onmouseleave 鼠标从某元素移开; ondblclick 鼠标双击某个对象;
onmousedown 某个鼠标按键被按下;onmousemove鼠标被移动;onmouseup鼠标被松开;
表单事件
onblur 元素失去焦点;onfocus 元素获得焦点;onchange 用户改变域的内容;onreset重置按钮被点击;
键盘事件
onkeydown 键盘的键被按下;onkeypress 键盘的键被按下或按住;onkeyup 键盘的键被松开;
系统事件
onload 某个页面或图像被完成加载;onresize 窗口或框架被调整尺寸;onselect 文本被选中;
innerHTML / innerText
innerHTML 属性,设置或返回,表格行的开始和结束标签之间的 HTML。
<body>
<div id="box"></div>
<script>
document.getElementById('box').onmouseover = function(){
document.getElementById('box').innerText = '<p>这里写的是 innerHTML内容</p>'
};
</script>
</body>
在JS中变量的定义可以是任意数字,字母,下划线(-),$,但是不能以数字开头;
事件里面的简单This
<body>
<div id="box"></div>
<script>
var cniao = document.getElementById('box');
cniao.onmouseover = function(){
this.innerText = '<p>我是菜鸟</p>'
};
cniao.onmouseout = function(){
this.innerText = ' ';
};
</script>
</body>
JS在修改元素样式的时候,一般修改内部样式,还是上面的例子;
cniao.onmouseover = function(){
this.style.background = 'red';
};
cniao.onmouseout = function(){
this.style.background = 'green'
};
赋值与获取标签内容
<body>
<p id = 'test'>
这里面是要被读取与修改的内容
</P>
<script>
var cniao = document.getElementById('test');
cniao.onclick = fuction(){
// this.innerHTML = "嘿嘿你被修改了";
alert(this.innerHTML)
};
</script>
</body>
有名函数 / 匿名函数
函数就是包裹在花括号中的代码块,前面使用了关键词 function;
function functionname(){
被执行的代码块
};
函数的定义大致可以三种;
//第一种
function cniao(x){ return x + ;}; //第二种,这种方法使用了Functiong构造函数,把参数和函数体都作为字符串;
var cniao = new Function('x', 'return x + 1;'); //第三种,右边的就是一个匿名函数,创建后又将该函数赋给了变量cniao
var cniao = function(x){return x + ;};
匿名函数的创建
//这里创建了一个匿名函数(在第一个括号内),第二个括号用于调用该函数,并传入参数。
(function(x,y ){ alert(x + y); })(,);
有名函数可以自执行,函数名 + ();自执行时 this 指向 window;
<body>
<div id = "box"></div>
<script>
var cniao = document.getElementById('box');
cniao.onclick = lniao;
function lniao(){
alert(this)
this.style.width = '100px';
};
lliao();
</script>
</body>
读取标签属性
<body>
<div id="box" class="cniao"></div>
<script>
var lniao = document.getElementById('box');
lniao.onclick = function(){
alert(this.className); //class ==> className;
};
</script>
</body>
拼接
<body>
<script>
var a = ; varb = ;
alert( a + b + '我是新加入的菜鸟');
</script>
</body>
JavaScript的数据类型;
var a = 1;数字
var a = '1';string字符串
var a = function(){};函数
var a = false;布尔值
var arr=["字符串",true,1];数组
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
var cniao={name:"sgg", id:123};
undefined 表示变量没有值(没定义);
null 可以通过将变量的值设置为null来清空变量;
走进JavaScript的更多相关文章
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- 走进javascript——不起眼的基础,值和分号
值 有时我很想知道javascript解析引擎是如何区分一个变量的值,比如下面这段代码. var x = 'javascript'; //javascript x = "hello" ...
- 走进javascript——类型
ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String ...
- 走进javascript——数组的那些事
Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...
- 走进JavaScript——重拾对象
创建对象 Object构造器的参数如果为空或null.undefined将返回一个空的Object对象,如果为其他值则调用相应的构造器,如 new Object() // Object {} new ...
- 走进javascript——重拾数组
Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...
- 走进javascript——它是什么?
javascript不是什么 如<把时间当作朋友>的作者所说,"有些时候,有些事物,从反面描述比从正面描述更为容易.如若先仔细说清楚这本书不是什么,之后,至于它究竟是什么,很可能 ...
- 雷哥带你走进Javascript
javascript复习笔记--------------------------------------------1.概念2.面向对象思想3.作用认识4.引入方式5.执行顺序 变量 1)声明方式 x ...
- 走进javascript——解开switch之谜
很早以前就觉得switch很怪异,或者说一直没太理解它,它怪异就怪异在非要给每个语句加上break;不然后面的语句就算不符合条件还是会执行,比如以下这段代码 var num = 2; switch(n ...
随机推荐
- Cocos Creator的类别
cc是命名空间:cocos creater引擎下的类得加cc; 如cc.Node cc.v2; 1).cc.Component组件类onLoadstartupdatelateUpdateonDestr ...
- 编写装饰器实现python请求错误重试功能
在做接口自动化测试的时候,总会遇到,因连接超时等错误导致,接口脚本失败. 官方给出的方法: max_retries=5 出错重试5次注意的是,这个只对DNS,连接错误进行重试. from reques ...
- C#设计模式(3)——工厂方法模式(转)
C#设计模式(3)——工厂方法模式 一.引言 在简单工厂模式中讲到简单工厂模式的缺点,有一点是——简单工厂模式系统难以扩展,一旦添加新产品就不得不修改简单工厂方法,这样就会造成简单工厂的实现逻辑过 ...
- mysql数据据备份与还原
http://www.cnblogs.com/kissdodog/p/4174421.html备份:mysqldump -u username -p dbname > BackupName.sq ...
- 基于Groovy+HttpRestful的超轻量级的接口测试用例配置的设计方案及DEMO实现
目标 设计一个轻量级测试用例框架,接口测试编写者只需要编写测试用例相关的内容(入参及结果校验),不需要理会系统的实现,不需要写跟测试校验无关的内容. 思路 测试用例分析 一个用例由以下部分组成: (1 ...
- MongoSpark 28799错误
Exception : . The full response is { , "codeName" : "Location28799" } at com.mon ...
- 爬虫----selenium模块
一.介绍 selenium最初是一个测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如跳 ...
- 2018-2019-1 20189206 《Linux内核原理与分析》第九周作业
#linux内核分析学习笔记 --第八章 进程的切换和系统的一般执行过程 学习目标:重点关注进程切换的过程,进程调度的时机,操作系统的基本构成以及一般的执行过程. 进程调度的时机 因为进程的调度只发生 ...
- Base64 空格,加号问题
缘由: 在一个项目中,app请求tcpdump日志与记录的日志内容不一致 请求%2B 识别成 + 请求 + 识别成 空格 这个在base64解密的时候会出现异常,base64需要的是加号,而不是空格 ...
- strcpy函数解析
char * strcpy( char *strDest, const char *strSrc ) { assert((strDest != NULL)&&(strSrc != NU ...