js中的变量和this的初步认识">js中的变量和this的初步认识
博客
博主：章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
js中的变量">js中的变量
在java或者c/c++中，什么是变量，变量也就是值是可以改变的量，包括了变量的声明与定义。每个变量都可以有自己不同的变量类型，因为在java或者c/c++中可以自己定义丰富的类，或者结构体等等，而由于js是一种弱类型的浏览器脚本语言，所以其变量可以统一使用一个var关键字来进行表示：
如:
var box = document.getElementById("box");
这个box也就是一个变量，通过变量的使用可以简化代码，同时也可以优化浏览器的解析速度。
this指针">this指针
因为在java或者C/C++中我是比较习惯性的称为this指针这个名字，它在其中表示了当前的对象的意思。而在js中其实大概的意思也是一样的，this它表示指向触发这个事件的对象，一般是在哪个对象调用了这个函数，这个this就是指向谁;
含义都比较简单，当然在这里其实也不做过多的复杂讲解，当然有种this需要注意
如下：
window.onload = function(){
this.xxxxx = "yyyy"; //这里的this指向的就是window这个对象了
}
js xml">js-doctype"><!DOCTYPE html>
js-tag"><js-title">html js-attribute">lang=js-value">"en">
js-tag"><js-title">head>
js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8">
js-tag"><js-title">title>Titlejs-tag"></js-title">title>
js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8">js-comment"><!--申明当前网页的编码集UTF-8-->
js-tag"><js-title">meta js-attribute">name=js-value">"Generator" js-attribute">content=js-value">"EditPlus®"> js-comment"><!--编辑器的名称-->
js-tag"><js-title">meta js-attribute">name=js-value">"Author" js-attribute">content=js-value">"作者是谁">
js-tag"><js-title">meta js-attribute">name=js-value">"Keywords" js-attribute">content=js-value">"关键词">
js-tag"><js-title">meta js-attribute">name=js-value">"Description" js-attribute">content=js-value">"描述和简介">
js-tag"><js-title">style js-attribute">type=js-value">"text/css">
js-tag">body,js-tag">dl,js-tag">dd,js-tag">dt,js-tag">p,js-tag">h1,js-tag">h2,js-tag">h3,js-tag">h4,js-tag">h5,js-tag">h6js-rules">{ js-rule">js-attribute">margin:js-value"> js-number">0;js-rule">}
js-tag">ul,js-tag">oljs-rules">{js-rule">js-attribute">margin:js-value"> js-number">0; js-rule">js-attribute">list-style:js-value"> none; js-rule">js-attribute">padding:js-value"> js-number">0;js-rule">}
js-tag">ajs-rules">{ js-rule">js-attribute">text-decoration:js-value"> none; js-rule">}
*js-rules">{ js-rule">js-attribute">margin:js-value"> js-number">0; js-rule">js-attribute">padding:js-value"> js-number">0; js-rule">}
js-class">.mainjs-rules">{js-rule">js-attribute">width:js-value"> js-number">800px;js-rule">js-attribute">margin:js-value"> js-number">40px auto;js-rule">js-attribute">box-shadow:js-value"> js-number">0 js-number">0 js-number">10px js-number">0 deeppink}
js-tag">pjs-rules">{js-rule">js-attribute">height:js-value"> js-number">50px;js-rule">js-attribute">text-align:js-value"> center;js-rule">js-attribute">margin:js-value"> js-number">10px;js-rule">js-attribute">border:js-value"> js-number">1px solid red}
js-tag"></js-title">style>
js-tag"></js-title">head>
js-tag"><js-title">body>
js-tag"><js-title">div js-attribute">class=js-value">"main">
js-tag"><js-title">p js-attribute">id=js-value">"mouse_event_1">1js-tag"></js-title">p>
js-tag"><js-title">p js-attribute">id=js-value">"mouse_event_2">2js-tag"></js-title">p>
js-tag"><js-title">p js-attribute">id=js-value">"mouse_event_3">3js-tag"></js-title">p>
js-tag"></js-title">div>
js-tag"><js-title">script>
js-keyword">var mouse_event_1 = document.getElementById(js-string">"mouse_event_1"); js-comment">//定义一个变量，注意变量是可变的量
js-keyword">var mouse_event_2 = document.getElementById(js-string">"mouse_event_2");
mouse_event_1.onmouseenter = js-function">js-keyword">function js-params">() {
mouse_event_1.style.backgroundColor = js-string">"deeppink";
}
mouse_event_2.onclick = js-function">js-keyword">function js-params">() {
js-keyword">this.style.backgroundColor = js-string">"blue"; js-comment">//this指针指向的是当前触发这个时间的对象，也就是mouse_event_2
}
js-tag"></js-title">script>
js-tag"></js-title">body>
js-tag"></js-title">html>显示效果如下所示:
注意变量与常量的区别，变量是值能够改变的量，而常量是值不能改变的值。
最后上一波简单操作:
js xml">js-doctype"><!DOCTYPE html>
js-tag"><js-title">html js-attribute">lang=js-value">"en">
js-tag"><js-title">head>
js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8">
js-tag"><js-title">title>Titlejs-tag"></js-title">title>
js-tag"><js-title">meta js-attribute">charset=js-value">"UTF-8">js-comment"><!--申明当前网页的编码集UTF-8-->
js-tag"><js-title">meta js-attribute">name=js-value">"Generator" js-attribute">content=js-value">"EditPlus®"> js-comment"><!--编辑器的名称-->
js-tag"><js-title">meta js-attribute">name=js-value">"Author" js-attribute">content=js-value">"作者是谁">
js-tag"><js-title">meta js-attribute">name=js-value">"Keywords" js-attribute">content=js-value">"关键词">
js-tag"><js-title">meta js-attribute">name=js-value">"Description" js-attribute">content=js-value">"描述和简介">
js-tag"><js-title">style js-attribute">type=js-value">"text/css">
js-tag">body,js-tag">dl,js-tag">dd,js-tag">dt,js-tag">p,js-tag">h1,js-tag">h2,js-tag">h3,js-tag">h4,js-tag">h5,js-tag">h6js-rules">{ js-rule">js-attribute">margin:js-value"> js-number">0;js-rule">}
js-tag">ul,js-tag">oljs-rules">{js-rule">js-attribute">margin:js-value"> js-number">0; js-rule">js-attribute">list-style:js-value"> none; js-rule">js-attribute">padding:js-value"> js-number">0;js-rule">}
js-tag">ajs-rules">{ js-rule">js-attribute">text-decoration:js-value"> none; js-rule">}
*js-rules">{ js-rule">js-attribute">margin:js-value"> js-number">0; js-rule">js-attribute">padding:js-value"> js-number">0; js-rule">}
js-tag">bodyjs-rules">{js-rule">js-attribute">background:js-value"> black js-function">url(js-string">"img/bg2.jpg")no-repeat js-number">0px js-number">40px/cover;js-rule">js-attribute">background-size:js-value"> js-number">100% js-number">500px }
js-tag">divjs-class">.headerjs-rules">{js-rule">js-attribute">height:js-value"> js-number">400px;js-rule">js-attribute">width:js-value"> js-number">100px;js-rule">js-attribute">margin:js-value"> auto;js-rule">js-attribute">z-index:js-value"> js-number">999;js-rule">}
js-tag">ajs-rules">{js-rule">js-attribute">position:js-value"> absolute;js-rule">js-attribute">margin:js-value">auto;js-rule">js-attribute">left:js-value"> js-number">0px;js-rule">js-attribute">right:js-value"> js-number">0px;js-rule">js-attribute">width:js-value"> js-number">100px;js-rule">js-attribute">height:js-value"> js-number">40px;js-rule">js-attribute">line-height:js-value"> js-number">40px;
js-rule">js-attribute">text-align:js-value"> center;js-rule">js-attribute">color:js-value"> white}
js-tag">divjs-class">.header js-tag">pjs-rules">{js-rule">js-attribute">position:js-value"> absolute;js-rule">js-attribute">top:js-value"> js-number">40px;js-rule">js-attribute">width:js-value"> js-number">550px;js-rule">js-attribute">height:js-value"> js-number">300px;js-rule">js-attribute">background:js-value"> js-function">url(js-string">"img/bg.jpg")no-repeat center/cover;js-rule">js-attribute">display:js-value"> none}
js-tag"></js-title">style>
js-tag"></js-title">head>
js-tag"><js-title">body>
js-tag"><js-title">div js-attribute">class=js-value">"main">
js-tag"><js-title">div js-attribute">class=js-value">"header" js-attribute">id=js-value">"header">
js-tag"><js-title">a js-attribute">id=js-value">"oA" js-attribute">href=js-value">"">装扮js-tag"></js-title">a>
js-tag"><js-title">p js-attribute">id=js-value">"oP">js-tag"></js-title">p>
js-tag"></js-title">div>
js-tag"></js-title">div>
js-tag"><js-title">script>
js-keyword">var header = document.getElementById(js-string">"header");
js-keyword">var oA = document.getElementById(js-string">"oA");
js-keyword">var oP = document.getElementById(js-string">"oP");
header.onmouseenter =js-function">js-keyword">function js-params">() {
oA.style.backgroundColor = js-string">"white";
oA.style.color = js-string">"black";
oP.style.display = js-string">"block";
}
header.onmouseleave = js-function">js-keyword">function js-params">() {
oA.style.backgroundColor = js-string">"black";
oA.style.color = js-string">"white";
oP.style.display = js-string">"none";
}
js-tag"></js-title">script>
js-tag"></js-title">body>
js-tag"></js-title">html>
![从零开始前端学习[49]:js函数的初步认识](/images/no-images.jpg)
![从零开始前端学习[50]:js操作标签属性,读写属性标签](https://img-blog.csdn.net/20171112102554858?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjk5MjQwNDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![从零开始前端学习[51]:js中去操作css样式以及css属性的替代方法](https://img-blog.csdn.net/20171112184439749?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjk5MjQwNDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![从零开始前端学习[52]:js中的数据类型以及没有数据类型的数据类型typeof](https://img-blog.csdn.net/20171112203559077?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjk5MjQwNDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)