Js

最新推荐文章于 2021-10-15 16:09:08 发布

weixin_42231184

最新推荐文章于 2021-10-15 16:09:08 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/weixin_42231184/article/details/81015482

版权

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

数据类型：原始类型、对象类型

数字、字符串、布尔值、NULL、undefined、对象

对象(object)是属性(property)的集合，特殊的对象：函数、数组

变量常见类型：

number、String、boolean、undefined、object、function

隐式全局变量：声明的变量没有var,就叫隐式全局变量。

Boolean类型：

要将一个值转换为其对应的Boolean值，可以调用转型函数Boolean()，如下例所示：

var message="hello world!";

var messageAsBoolean=Boolean(message);

Number类型：

十进制：56

八进制：070=7X8=56（以8为基数，第一位必须是0）

十六进制：0xA=10(前两位必须是0x，后跟任何十六进制数字0~9及A~F)

变量、作用域和内存问题：

基本类型值：指的是简单的数据段

引用类型值：指那些可能由多个值构成的对象

不同点：不能给基本类型的值添加属性，只能给引用类型值动态地添加属性。

复制基本类型值，两个变量可以参与任何操作而不相互影响。而复制引用类型值时，两个变量实际上将引用同一个对象，因此改变其中一个变量，就会影响另一个变量。

ECMAScript中所有函数的参数都是按值传递的，不是按引用传递

typeof用于检测基本数据类型、instanceof用于检测引用类型的值：

var a="hello world" ==>alert(typeof a); //string

alert(person instanceof Object); //变量person是Object吗始终返回true

延长作用域链：try catch语句的catch块；

with语句；

数组：

数组的常用方法：
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 arr=[10,0,100,20,60,30];
//循环控制比较的轮数
for(var i=0;i<arr.length-1;i++){
    //控制每一轮的比较的次数
    for(var j=0;j<arr.length-1-i;j++){
        if(arr[j]>arr[j+1]){
            var temp=arr[j];
            arr[j]=arr[j+1];
            arr[j+1]=temp;//从小到大
        }
    }
}
console.log(arr);

数组(Array)的API:

创建数组的两种方式：

1.var arr1=new Array();

2.var arr2=[];

判断某值是否为数组的方法：

Array.isArray(value)

Array对象方法：

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

对象：

创建对象的三种方式：

1.通过调用系统的构造函数创建对象 new Object():

var obj1=new Object();

obj1.name="李四”;

obj1.age=20;

obj1.eat()=function{

console.log("吃水果");

};

2.自定义构造函数创建对象：

function Person(name,age){

this.name=name;

this.age=age;

this.eat=function(){

console.log("您好");

};

}

//实例化对象同时赋值

var per=new Person("小红"，20);

3.字面量的方式创建对象

var p{

name:"张三";

age:"18";

sayHi: function(){

console.log("this.name");

}

};

4.工厂模式创建对象：

function createObject(name,age){

var obj=new Object();

obj.name=name;

obj.age=age;

obj.eat=function(){

console.log("喜欢吃水果");

};

return obj;

}

var per=createObject("小明"，20);

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

JS特效（BOM和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>