1.JavaScript入门
- JS入门三部曲：找到谁，加什么事件，发生什么事；
- 属性：固有的特征；分为系统属性和自定义属性；
- 系统属性：元素自带的属性，如：id,class,title,style等；
- 自定义属性：自己命名的属性名，不是变量，不用var声明；
- 属性的获取方式：“.”或“[]”；
- “.”方式不用加引号，直接元素对象加属性，如：ElementObject.className;
- “[]”方式，必须给属性添加双引号，如：ElementObject["className"];
- 方法：后面有括号；能够完成一个动作或功能；
- 提示种类
- 如果一个元素存在某一属性，但是未设置，则使用的时候，就会报错： xxx is not defined;
- 如果一个元素身上不存在此类属性，使用的时候，就会出现undefined,属性不存在不会报错；
- 获取元素时，若未获取元素，则使用元素时，会报错：of null;
- 函数分为定义函数和调用函数；
- 循环中添加事件与循环本体为异步关系；即当循环结束之后，再发生事件；
var inputnodes=document.getElementsByTagName("input");//获取元素集合；
for(var i=0;i<inputnodes.length;i++)
{
inputnodes[i].index=i;//添加自定义属性，将循环中的i添加给index，再使用index属性；
inputnodes[i].onclick=function () {
alert(this.index);//this代表外部inputnodes[i];
}
}
//以上代码中，循环全部结束后，i已经是最大值4，当发生点击事件时，i均为4，当添加自定义属性后，将不同的i存储；
2.对象
- 数据类型
- 基本数据类型（5种）:字符串string，数字number，布尔值Boolean，null，undefined；
- undefined出现的几种情况：1）未定义；2）没有设置返回值的时候；3）对象身上的属性不存在的时候；4）定义了形参，但没有赋值，拿到的参数是undefined;
- 基本数据类型放在栈内存；栈内存提供了供JS代码执行的环境；
- 引用数据类型：分为对象数据类型和函数数据类型，放在堆内存中；
- 对象数据类型：
- 数组
- 对象{}
- RegExp()
- new Date()
- 对象数据类型存在堆内存中三个步骤：
- 开辟一个空间地址；
- 把对象中的键值对，都存在这个内存空间中；
- 把空间地址赋值给一个变量名，指向当前这个空间，地址放在栈内存中。
- 函数数据类型： function定义函数；
- 函数数据类型由两部分组成：
- 函数的定义阶段：定义分为三步；如function add(){};
- 开辟一个空间地址；
- 把函数体内的所有JS代码以字符串的形式，存在这个空间地址中；
- 把这个空间地址赋值给函数名；
- 函数的调用阶段：分两步
- 创建一个私有的作用域；（栈内存中为公共作用域，当函数先在自己私有作用域中查找JS代码，如果没有，则在公共作用域中查找调用，每个私有作用域中，不能相互调用）；
- 将以前堆内存空间地址中的字符串作为JS代码来执行；
- 函数的参数：形参和实参；
<script>
function fn(n,m){
alert(n+m);//n,m为形参；
}
fn(1,2);//1,2为实参
fn("1",2);
//每调用一次函数，就形成一个私有作用域；
</script>
- 函数的定义与执行的表现形式：
function add(){
document.write("加油，努力攻克难关!");
};
add();//调用函数
//第二种方法
var aa=function (){
document.write("加油，努力攻克难关!dfdf");
};
aa();
var odiv=document.getElementById("mass");
odiv.onclick=function(){
alert(123);
}
//1.()()方法
(function(index){
alert(index);
})(5);//index为形参，i为实参；
//实参传送给形参，然后再执行函数内的代码；
//2.～()方法
～function(index){
alert(index);
}(5);
//3.+()方法
+function(index){
alert(index);
}(5);
//4.-()方法
-function(index){
alert(index);
}(5);
- 闭包：当函数被调用的时候，会形成一个私有作用域，保护里面的变量不受外界的干扰，函数的这种保护机制叫做闭包；
//普通定义对象
<script>
var obj={
name: "mydream",
age: 18
};
obj.age= 28;//修改原来的属性值；
obj.sex="man";//添加没有的自定义属性sex；
delete obj.name;//真删除，指的是将name属性全部删除；
obj.name=null;//假删除，指的是给name属性赋值为空；也可设置为undefined;
alert(obj.name);//查找，即获取obj的name值；
</script>
- 对象的特征为属性和方法；
- 目前接触的对象：1）获取到的元素和元素集合；2）数组对象；3）普通对象:obj{};
- 打印console,可在控制台中console中查找
- console.log(object.属性名):打印出对象的属性值；如：console.log(obj.name);或console.log(arry[2]);
- console.dir(object):打印出对象上的属性和方法；如：console.dir(myarr);
- 数组中属性：
- 索引号为属性名，如myarr[2]中，2为属性名，代表的数组元素为属性值；其中myarr["2"]与myarr[2]相同，一般数字不加双引号，不能用myarr.2来获取属性值；
- length属性，myarr["length"]与myarr.length相同；
- 对象遍历
<script>
var obj={
name: "mass",
age: 18,
sex: "你猜"
};
//普通对象的遍历用for in
for(var attr in obj){
console.log(attr);//打印出所有的属性名；
console.log(obj[attr]);//打印出所有的属性值；注：attr为变量，所以不加双引号；
}
</script>
var myarr=new Array("mei","hao","de","yi","tian");
for(var i=0; i<myarr.length; i++){
console.log(myarr[i]);
}
<body>
<div class="wrap" id="awrap">
<ul>
<li class="mass">北京</li>
<li class="active">天津</li>
<li class="mass">上海</li>
</ul>
<div class="hide">北京是个好地方啊</div>
<div class="show">天津也是一个不错的地方</div>
<div class="hide">上海不是一个好的去处啊</div>
</div>
<script>
//需求1:点击每个列表时，其他的列表不选中；
//需求2：点击每个列表的同时，使每个对应的div选中，其他的隐藏；
//思路： 在操作点击事件后，现将所有的选中清除，再添加新的选中样式；清除用for循环；
//第一步：确定进行操作的范围即id为awrap的div中；
var oawrap=document.getElementById("awrap");
//第二步：获取元素对象集合-在oawrap中；
var oli=oawrap.getElementsByTagName("li");
var odiv=oawrap.getElementsByTagName("div");
//第三步：给每个列表添加事件，并用for循环进行清除样式；
for(var i=0;i<oli.length; i++){
//通过自定义属性来赋值i
oli[i].index=i;
//给每个列表添加点击事件
oli[i].onclick=function () {
//清除列表中的选中样式
for(i=0;i<oli.length; i++){
oli[i].className= "";
odiv[i].className="hide";
}
//设置单一样式,但此时i已经是定值，不是变量；所以需要利用自定义属性添加；
//oli中可以用this代表此时的oli[i]，但是odiv没有索引值,可以利用oli中的index值作为索引值；
this.className="active";
odiv[this.index].className="show";
}
}
</script>
</body>
<body>
<div class="wrap" id="awrap">
<ul>
<li>北京</li>
<li class="active">天津</li>
<li>上海</li>
</ul>
<div>北京是个好地方啊</div>
<div class="show">天津也是一个不错的地方</div>
<div>上海不是一个好的去处啊</div>
</div>
<script>
var oawrap=document.getElementById("awrap");
var oli=oawrap.getElementsByTagName("li");
var odiv=oawrap.getElementsByTagName("div");
//思路1：自定义属性：把正确的i值保存在元素的私有属性（即添加的自定义属性）上；
//思路2：闭包：即调用函数，把正确的i值保存在自己的私有作用域中；
for(var i=0;i<oli.length;i++){
//目的：因为此处for循环会迅速进行完，i值不会被储存，在设置特定样式中，需要每个元素的索引值，所以需要想办法，存下i值，进而使用相应的索引值；
//利用函数调用时，会新建一个私有的作用域，进而保存住i值，通过形参来使用i值；
(function (index) {
//下面中oli[index]指的是使用本身的index值，获取元素；可以换成oli[i]，指的是自己私有作用域中查找，不能找到，要在公共作用域中查找i，即在for循环中查找使用；
oli[index].onclick=function () {
//在里面只能用index；点击事件属于异步，此时不能用i，i此时为最大值；
for(var m=0;m<oli.length;m++){
oli[m].className="";
odiv[m].className="";
}
//循环，是为了操作一大堆的；如果设置单独操作某个元素，必须在循环外面；
//for循环是跟外界没有关系的，是单独的操作，就是消除属性
//设置特定的样式时，用到索引值
oli[index].className="active";
odiv[index].className="show";//目的，就是获得当下的索引值，进而查找元素；
}
})(i);
}
</script>
</body>
