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的更多相关文章

  1. 走进javascript——DOM事件

    DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...

  2. 走进javascript——不起眼的基础,值和分号

    值 有时我很想知道javascript解析引擎是如何区分一个变量的值,比如下面这段代码. var x = 'javascript'; //javascript x = "hello" ...

  3. 走进javascript——类型

    ECMAScript语言类型对应于使用ECMAScript语言的ECMAScript程序员直接操作的值.ECMAScript语言类型有以下几种Undefined,Null,Boolean,String ...

  4. 走进javascript——数组的那些事

    Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...

  5. 走进JavaScript——重拾对象

    创建对象 Object构造器的参数如果为空或null.undefined将返回一个空的Object对象,如果为其他值则调用相应的构造器,如 new Object() // Object {} new ...

  6. 走进javascript——重拾数组

    Array构造器 如果参数只有一个并且是Number类型,那么就是指定数组的长度,但不能是NaN,如果是多个会被当做参数列表. new Array(12) // (12) [undefined × 1 ...

  7. 走进javascript——它是什么?

    javascript不是什么 如<把时间当作朋友>的作者所说,"有些时候,有些事物,从反面描述比从正面描述更为容易.如若先仔细说清楚这本书不是什么,之后,至于它究竟是什么,很可能 ...

  8. 雷哥带你走进Javascript

    javascript复习笔记--------------------------------------------1.概念2.面向对象思想3.作用认识4.引入方式5.执行顺序 变量 1)声明方式 x ...

  9. 走进javascript——解开switch之谜

    很早以前就觉得switch很怪异,或者说一直没太理解它,它怪异就怪异在非要给每个语句加上break;不然后面的语句就算不符合条件还是会执行,比如以下这段代码 var num = 2; switch(n ...

随机推荐

  1. Cocos Creator的类别

    cc是命名空间:cocos creater引擎下的类得加cc; 如cc.Node cc.v2; 1).cc.Component组件类onLoadstartupdatelateUpdateonDestr ...

  2. 编写装饰器实现python请求错误重试功能

    在做接口自动化测试的时候,总会遇到,因连接超时等错误导致,接口脚本失败. 官方给出的方法: max_retries=5 出错重试5次注意的是,这个只对DNS,连接错误进行重试. from reques ...

  3. C#设计模式(3)——工厂方法模式(转)

    C#设计模式(3)——工厂方法模式   一.引言 在简单工厂模式中讲到简单工厂模式的缺点,有一点是——简单工厂模式系统难以扩展,一旦添加新产品就不得不修改简单工厂方法,这样就会造成简单工厂的实现逻辑过 ...

  4. mysql数据据备份与还原

    http://www.cnblogs.com/kissdodog/p/4174421.html备份:mysqldump -u username -p dbname > BackupName.sq ...

  5. 基于Groovy+HttpRestful的超轻量级的接口测试用例配置的设计方案及DEMO实现

    目标 设计一个轻量级测试用例框架,接口测试编写者只需要编写测试用例相关的内容(入参及结果校验),不需要理会系统的实现,不需要写跟测试校验无关的内容. 思路 测试用例分析 一个用例由以下部分组成: (1 ...

  6. MongoSpark 28799错误

    Exception : . The full response is { , "codeName" : "Location28799" } at com.mon ...

  7. 爬虫----selenium模块

    一.介绍 selenium最初是一个测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作,比如跳 ...

  8. 2018-2019-1 20189206 《Linux内核原理与分析》第九周作业

    #linux内核分析学习笔记 --第八章 进程的切换和系统的一般执行过程 学习目标:重点关注进程切换的过程,进程调度的时机,操作系统的基本构成以及一般的执行过程. 进程调度的时机 因为进程的调度只发生 ...

  9. Base64 空格,加号问题

    缘由: 在一个项目中,app请求tcpdump日志与记录的日志内容不一致 请求%2B 识别成 + 请求 + 识别成 空格 这个在base64解密的时候会出现异常,base64需要的是加号,而不是空格 ...

  10. strcpy函数解析

    char * strcpy( char *strDest, const char *strSrc ) { assert((strDest != NULL)&&(strSrc != NU ...