JS学习日记1

JavaScript的组成：
1.ECMAScript-JavaScript的标准规范-ES6
2.BOM-浏览器对象模型
3.DOM-文档对象模型

变量常见类型：

number、String、boolean、undefined、object、function

数组的常用方法：
1.join() (将数组的元素组成一个字符串)
2.push()和pop()
push() 接受任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度
pop() 数组末尾移除最后一项，减少数组的length值，然后返回移除的项
3.shift()和unshift()
shift()删除原数组第一项，并返回删除元素的值，如果数组为空则返回underfined;
unshift()将参数添加到原数组开头，并返回数组的长度.
4.reverse()

翻转数组项的顺序（1.2.3.4.5）——》（5.4.3.2.1）

对象：

字面量对象：

var p{

name:"张三";

age:"18";

sayHi: function(){

console.log("this.name");

}

};

JSON:

JSON是javaScript的子集，javaScript对象表现形式

JSON与字面量对象的区别：

1.JSON的属性必须用双引号括起来，字面量对象不用("name":"张三").

2.JSON本质上是一种数据交换格式,JSON有两种结构：对象和数组，两种结构相互结合从而形成复杂的数据结构。

对象的遍历：

for...in遍历对象的属性与方法

for(var key in obj){

console.log(key+":"+obj[key]);

}

var dog{

name:"旺财";

age:"10";

}

遍历：for(var key in dog){

console.log(dog[key]);

}

构造函数：

new后面调用函数，我们成为构造函数//new Object()

Object()视为一个构造函数，用来创建新对象

//1.构造函数
function Dog(name,age,) {
    //1.1属性
    this.name= name;
    this.age= age;
    //1.2方法
    this.eat= function (something) {
        console.log(this.name+"在吃"+something);
    }
    this.run=function (somewhere) {
        console.log(this.name+"在跑"+somewhere);
    }
}
var p=new Dog("旺财",3);
console.log(p);
p.eat("奶");
p.run("公园");


var p1=new Dog("小花",5);
p1.eat("肉");
p1.run("广场");

prototype的用法：

Array.prototype.eat=function () {
    alert("我会吃东西");
};
var arr=new Array();
arr.eat();

var arr1=new Array();
arr1.eat();

即prototype可以理解为一个构造函数的共享库，实例化后的构造函数都可以调用。

constructor的用法:

arr.constructor可以找到产生arr的构造函数，即Array();

javaScript的数据类型：

基本数据类型：boolean,string,number,undefined,null

复杂(引用)数据类型:Object,Array,Date

javaScript中的内置对象:

即js本身已经帮我们写好的对象，可直接使用

常见的内置对象有：Data,Array,Math,RegExp,Error,String

数组(Array)的API:

创建数组的两种方式：

1.var arr1=new Array();

2.var arr2=[];

Array对象方法：

concat()	连接两个或更多的数组，并返回结果。
join()	把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()	删除并返回数组的最后一个元素
push()	向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()	颠倒数组中元素的顺序。
shift()	删除并返回数组的第一个元素
slice()	从某个已有的数组返回选定的元素
sort()	对数组的元素进行排序
splice()	删除元素，并向数组添加新元素。
toSource()	返回该对象的源代码。
toString()	把数组转换为字符串，并返回结果。
toLocaleString()	把数组转换为本地数组，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值

JS特效（BOM和DOM)

javaScript的组成：｛

1.ECMAScript: javaScript的标准规范 ES6

2.BOM:浏览器对象模型

3.事件:

4.DOM:文档对象模型

｝

获取父节点：a.parentNode //a的父节点

获取兄弟节点:{

下一个兄弟节点：nextSibling(IE678中使用)

nextElementSibling(火狐谷歌IE9中使用)

上一个兄弟节点：previousSibling(IE678中使用)

previousElementSibling(火狐谷歌IE9中使用)

}

获取单个节点:{

第一个子节点：firstChild(IE678中使用)

firstElementChild(火狐谷歌IE9中使用)

最后一个子节点:lastChild(IE678中使用)

lastElementChild(火狐谷歌IE9中使用)

}

获取所有子节点：｛

1.childNodes:标准属性，返回所有属性，HTML节点，文本节点

node.Type==1//表示的是元素节点

node.Type==2//表示的是属性节点

node.Type==3//表示的是文本节点

获取所有子节点：子节点数组=父节点.childNodes

2.children:非标准属性，它返回指定元素的子元素集合。只返回HTML节点，不返回文本节点，支持所有的浏览器

获取所有子节点：子节点数组=父节点.children //用的最多

｝

节点的增删改查：

创建节点：新的节点=document.createElement("标签名");

插入节点：1.父节点.appendChild(新节点);//在父节点的最后插入一个新节点

2. 父节点.insertBefore(新节点，参考节点);//在参考节点前插入新节点

删除节点：1.父节点.removeChild(子节点)

2.当前节点.remove();

复制节点：新节点=要复制的节点.cloneNode(参数);

节点的属性:

获取属性：getAttribute(名称)

设置属性 : setAttribute(名称，值)

删除属性: removeAttribute(名称)

IE6.7不支持

图片切换:

<body>
     <img id="icon" src="img/1.jpg" alt="">
     <button id="prev">上一张</button>
     <button id="next">下一张</button>

<script>
      window.onload=function () {
          //获取需要的标签
          var icon=document.getElementById("icon");
          var prev=document.getElementById("prev");
          var next=document.getElementById("next");
          //监听按钮的点击
          var maxIndex = 6, minIndex=1, currentIndex = minIndex;
          prev.onclick=function () {
              if(currentIndex === minIndex){ //边界值
                  currentIndex = maxIndex;
              }else {  //正常情况
                  currentIndex --;
              }
              icon.setAttribute("src","img/"+currentIndex+".jpg");
          };
          next.onclick=function () {
              if(currentIndex===maxIndex){ //边界值
                  currentIndex = minIndex;
              }else {  //正常情况
                  currentIndex ++;

              }
              icon.setAttribute("src","img/"+currentIndex+".jpg");

          };
      }
</script>
</body>

图片隐藏与显示:

<body>
     <button id="btn">隐藏</button>
     <p></p>
     <img src="img/1.jpg" alt="">
<script>
   window.onload=function () {
       //获取事件源和相关的元素
       var btn=document.getElementById("btn");
       var img=document.getElementsByTagName("img")[0];
       //绑定事件
       btn.onclick=function () {
           //事件驱动程序
           if(btn.innerText === "隐藏"){
               img.style.display="none";
               btn.innerText="显示";
           }else{
               img.style.display = "block";
               btn.innerText="隐藏";
           }
       }

   }
</script>
</body>

注：innerHTML在JS是双向功能：获取对象的内容或向对象插入内容；
如：<div id="aa">这是内容</div> ，
我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容；
也可以对某对象插入内容，如 document.getElementById('abc').innerHTML='这是被插入的内容';
这样就能向id为abc的对象插入内容。

对象：

JS特效（BOM和DOM)

猜你喜欢