提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

JQuery基础

jQuery 基础
2023-04-18 14:47:20 时间

一、JQuery的用途。

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

二、JQuery的优势。

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

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

TablesWindow.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]));

相关文章