JQuery基础

一、JQuery的用途。

1. 访问和操作Dom元素。
2. 控制页面样式。
3. 对页面事件的处理。
4. 方便的使用JQuery的插件。
5. 与Axax技术的完美结合。
   
   

二、JQuery的优势。

1. 轻量级。
2. 强大的选择器。
3. 出色的DOM封装。
4. 可靠的事件处理机制。
5. 出色的浏览器兼容性。
6. 隐式迭代。
7. 丰富的插件支持。
   
   

三、Window.onload 与 $(document).ready()的对比。

Tables	Window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后 （包括图片、Flash、视频等）才能执行。	网页中所有DOM文档结构绘制完毕后即刻执行， 可能与DOM元素关联的内容（图片、Flash、 视频等）并没有加载完
编写个数	同一个页面不能同时编写多个	同一页面能同时编写多个

四、css()方法与addClass()方法的区别。

1. CSS() 方法为所匹配的元素设置给定的CSS样式。

$("id").css("font-weight","bold");

1. addClass() 方法向所匹配的元素添加一个或多个类，该方法不会移除已经存在的类，仅在原有的基础上追加行的类样式。

$("id").css({"font-weight":"bold","color":"red"});

五、CSS选择器。

Css选择器请查阅：Css选择器

六、JQuery绑定事件。

请查阅：绑定事件

七、JS 中 hasOwnProperty 和 isPrototypeOf 方法的区别。

理解：

hasOwnProperty是用于判断对象中的某个属性值是否存在。

isPrototypeOf是用于判断创建的对象是否存在！

function siteAdmin(nickName, siteName) {
    this.nickName = nickName;
    this.siteName = siteName;
}
siteAdmin.prototype.showAdmin = function() {
    console.log(this.nickName + "是" + this.siteName + "的站长!")
};
siteAdmin.prototype.showSite = function(siteUrl) {
    this.siteUrl = siteUrl;
    return this.siteName + "的地址是" + this.siteUrl;
};

var matou = new siteAdmin("愚人码头111", "WEB前端开发111");
var matou2 = new siteAdmin("愚人码头222", "WEB前端开发222");
matou.age = "30";

console.log(matou.hasOwnProperty("nickName")); //true
console.log(matou.hasOwnProperty("age")); //true
console.log(matou.hasOwnProperty("showAdmin")); //false
console.log(matou.hasOwnProperty("siteUrl")); //false
console.log(siteAdmin.prototype.hasOwnProperty("showAdmin")); //true
console.log(siteAdmin.prototype.hasOwnProperty("siteUrl")); //false

console.log(siteAdmin.prototype.isPrototypeOf(matou)) //true
console.log(siteAdmin.prototype.isPrototypeOf(matou2)) //true

八、prototype 介绍 。

function baseClass(){
    this.showMsg = function()
    {
       alert("baseClass::showMsg");   
    }
}

function extendClass(){
    this.showMsg = function()
    {
       alert("baseClass");   
    }
}


/**
(1)如果extendClass中本身包含有一个与baseClass的方法,同名的方法会怎么样?
*/

extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass

/**
实验证明：函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。
或者可以理解为prototype不会克隆同名函数。
*/


/**
(2)如果我想使用extendClass的一个实例instance,调用baseClass的对象方法showMsg怎么办？
*/

var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg

答案是可以使用call:

这里的 baseinstance.showMsg.call(instance);

阅读为“将instance当做baseinstance来调用，调用它的对象方法showMsg”

好了，这里可能有人会问，为什么不用

baseClass.showMsg.call(instance);

这就是对象方法和类方法的区别，我们想调用的是baseClass的对象方法。

function baseClass() {
    this.showMsg = function() {
        console.log("baseClass::showMsg");
    }
    this.baseShowMsg = function() {
        console.log("baseClass::baseShowMsg");
    }
}
baseClass.showMsg = function() {
    console.log("baseClass::showMsg static");
}


function extendClass() {
    this.showMsg = function() {
        console.log("extendClass::showMsg");
    }
}
extendClass.showMsg = function() {
    console.log("extendClass::showMsg static")
}



extendClass.prototype = new baseClass();
var instance = new extendClass();

instance.showMsg(); //显示extendClass::showMsg
instance.baseShowMsg(); //显示baseClass::baseShowMsg

extendClass.showMsg.call(instance); //显示extendClass::showMsg static

baseClass.showMsg.call(instance); //显示baseClass::showMsg static

var baseinstance = new baseClass();
baseinstance.showMsg.call(instance); //显示baseClass::showMsg

九、闭包 。

for(var i=1;i<=3;i++){   
   setTimeout(function(){       
         console.log(i);       
    },0);
};

//答案：4 4 4

原因：Javascript事件处理器 在线程空闲之前不会运行。

那么问题来了，如何让上述代码输出1 2 3？

for(var i=1;i<=3;i++){  
  setTimeout((function(a){  //改成立即执行函数 
        console.log(a);     
    })(i),0);   
};

//答案：1,2,3

十、Javascript 中 callee 和 caller 的作用 。

caller是返回一个对函数的引用，该函数调用了当前函数；

callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

var result = [];

function fn(n) { //典型的斐波那契数列  
    if (n == 1) {
        return 1;
    } else if (n == 2) {
        return 1;
    } else {
        if (result[n]) {
            return result[n];
        } else {
            //argument.callee()表示fn()  
            result[n] = arguments.callee(n - 1) + arguments.callee(n - 2);
            console.log(result[n])
            return result[n];
        }
    }
}

fn(3)//2

十一、JS 的构造函数

//构造函数
  function Fish(name, color) {
      this.name = name;
      this.color = color;
      console.log(this.name + "----" + this.color)
  }
  Fish.prototype.livesIn = "water";
  Fish.prototype.price = 20;
  var fish1 = new Fish("mackarel", "gray");
  var fish2 = new Fish("goldfish", "orange")
  var fish3 = new Fish("salmon", "white");
  for (var i = 1; i <= 3; i++) {
      var fish = eval("fish" + i); // 我只是取得指向这条鱼的指针
      console.log(fish.name + "," + fish.color + "," + fish.livesIn + "," + fish.price);
      console.log(fish.name + "," + fish.color + "," + fish.livesIn + "," + fish.price);
  }

十二、排序打乱

//排序打乱
shuffle = function(o) { //v1.0
    var j, x, i = o.length;
    for (
        i; i; j = parseInt(Math.random() * i),
        x = o[--i],
        o[i] = o[j],
        o[j] = x
    )
        console.log("-----" + o + "-----------")
    return o;
};
console.log(shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]));

如果看不懂上面的，那么看下面的（效果是一样样的）：

//倒序

var shuffle2 = function(arr) { //v2.0
    var num, x,i=0;

    for(i = arr.length-1; i > 0 ;i--){

        num = parseInt(Math.random() * i);
        x = arr[i];//关键代码
        arr[i] = arr[num];
        arr[num] = x;
        console.log("-----" + arr + "-----"+i+"----");

    }
    return arr;
};
console.log(shuffle2([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]));

基于基数循环的，明显你就会感觉到次数少了一半，但是相对来说，打乱的顺序还可以。

var shuffle2 = function(arr) { //v2.0
    var num, x,i=0;

    for(i = arr.length-1; i > 0 ;i--){

        num = parseInt(Math.random() * i);
        x = arr[--i];//关键代码
        arr[i] = arr[num];
        arr[num] = x;
        console.log("-----" + arr + "-----"+i+"----");

    }
    return arr;
};
console.log(shuffle2([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]));

---