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. 关于mysql处理百万级以上的数据时如何提高其查询速度的方法

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...

  2. Lambda表达式详解（例子详解）（转自：http://blog.csdn.net/damon316/article/details/51734661）

    Lambda表达式详解(例子详解)     lambda简介 lambda运算符:所有的lambda表达式都是用新的lambda运算符 " => ",可以叫他,“转到”或者 ...

  3. C# 调用C++的dll 那些事

    之前从来没搞过C++,最近被安排的任务需要调用C++的接口,对于一个没用过 Dependency 的小白来说,原本以为像平时的Http接口那样,协议,端口一定义,方法参数一写就没事,结果踩了无数的坑. ...

  4. WIFI CAT ET III Adapter Caterpillar ET3 New Arrival

    The old bluetooth cat et adatper iii has stopped production, and you can get the new WIFI CAT Caterp ...

  5. 传值与传引用（C++）

    reference(引用) 是C++对C的一个扩充 int a; int &b = a;//声明b是一个整形的引用变量 C语言,函数的参数传递有2种形式:传值方式调用和传引用方式调用 传值方式 ...

  6. vue-i18n使用ES6语法以及空格换行问题

    1.运行报错 报错使用了不恰当的exports Uncaught TypeError : Cannot assign to read only property 'exports ' of objec ...

  7. EDK II之Device Path

    UEFI中通过Device Path来描述设备的路径,一个完整的路径由多个Device Path Nodes组成. 下面通过输入设备的路径作为例子: PNP0A03 – PCI Host Bridge ...

  8. IIS 设备未就绪。

    看看Web.config 是否指向的磁盘在本机上不存在此磁盘

  9. linux下如何源码编译安装vim

    1. 获取源码 git clone https://github.com/vim/vim.git ~/vim cd ~/vim 2. 配置 ./configure --prefix=/home/jel ...

  10. LINQ之路13：LINQ Operators之连接(Joining)

    Joining IEnumerable<TOuter>, IEnumerable<TInner>→IEnumerable<TResult> Operator 说明 ...