走进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 ...
随机推荐
- ubuntu14安装mantis实践（包含LAMP/PHP）
安装LAMP 参考 https://www.linuxidc.com/Linux/2016-12/138757.htm sudo add-apt-repository ppa:ondrej/apach ...
- OAuth2认证和授权：ClientCredentials认证
1:创建授权服务器项目:AuthorizationServer,添加包:IdentityServer4 2:创建资源服务器项目:ResourcesServer,添加包:IdentityServer4. ...
- C#设计模式(3)——工厂方法模式（转）
C#设计模式(3)——工厂方法模式 一.引言 在简单工厂模式中讲到简单工厂模式的缺点,有一点是——简单工厂模式系统难以扩展,一旦添加新产品就不得不修改简单工厂方法,这样就会造成简单工厂的实现逻辑过 ...
- tomcat安装与项目部署
1.tomcat依赖:jdk jre,环境变量配置 java_home jre_home 2.tomcat安装: 下载:http://tomcat.apache.org/ download ...
- TCP、UDP以及HTTP的简单讲解
先来一个讲TCP.UDP和HTTP关系的 1.TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层.在网络层有IP协议.ICMP协议.ARP协议.RARP协议和BOOTP协议.在传输层中有T ...
- keepalived weight正负值问题(实现主服务器nginx故障后迅速切换到备服务器)
有两台负载均衡,lb01,lb02. lb02, priority值为100 编辑keepalived配置文件 vim /etc/keepalived/keepalived.conf ! Con ...
- 用HTML+CSS实现一个计科院网站首页静态页面
链接:https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ 提取码:s6ys
- PostgreSQL在Update时使用Substring函数截取字符串并且加上CASE WHEN THEN条件判断
--更新 UPDATE wp_order_detail SET layout_type = ( SELECT CASE THEN ) ELSE '' END FROM wp_catalog_size ...
- Python数据分析Numpy库方法简介(三)
补充: np.ceil()向上取整 3.1向上取整是4 np.floor()向下取整 数组名.resize((m,n)) 重置行列 基础操作 np.random.randn()符合正态分布(钟行/高斯 ...
- 基于ROS和beaglebone的串口通信方式，使用键盘控制移动机器人
一.所需工具包 1.ROS键盘包:teleop_twist_keyboard 2.ROS串口通讯包:serial $ cd ~/catkin_ws/src $ git clone https://g ...