jQuery基础知识总结

声明：该总结基于B站UP主——李南江老师的课程及其资料。（如侵权请联系作者删除）

一、原生JS和jQuery的区别

1.原生JS和jQuery入口函数的加载模式不同
2.原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
3.jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕再执行
4.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
5.jQuery中编写多个入口函数,后面的不会覆盖前面的

	JavaScript	jQuery
入口函数加载	DOM 加载完毕 图片加载完毕 才执行	仅 DOM 加载完毕就执行
多入口函数加载规则	后面编写入口函数的会覆盖前面编写的，只执行后写的入口函数	不会覆盖前面的，两个函数会先后执行

//以下是原生js代码

window.onload = function(ev) {
    //原生js 取 DOM 元素，后面的 [0] 表示从上到下第0个images元素 （也就是第一个）
    var images = document.getElementsByTagName("images")[0];
    console.log(images);

    var width = getComputedStyle(images).width; //取这个图片的高度
    console.log("onload", width);
}

//以下是jquery代码

$(document).ready(function () {
    var $images = $("images");// 1.通过jQuery入口函数可以拿到DOM元素
    console.log($images);

    var $width = $images.width();// 2.通过jQuery入口函数不可以拿到DOM元素的宽高
    console.log("ready", $width);
});

/*
* 1.原生JS和jQuery入口函数的加载模式不同
* 2.原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
* 3.jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕再执行
*/


//原生

window.onload = function (ev) {
    alert("hello lnj1");
}
window.onload = function (ev) {
    alert("hello lnj2");
}

//jquery

$(document).ready(function () {
    alert("hello lnj1");
});
$(document).ready(function () {
    alert("hello lnj2");
});

/*
1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
2.jQuery中编写多个入口函数,后面的不会覆盖前面的
*/

二、jQuery入口函数写法

推荐写法：

$(function(){

        alert("Hello Jquery!");

})；

其他写法如下：

// 1.第一种写法
$(document).ready(function () {
    alert("hello lnj");
});


// 2.第二种写法
jQuery(document).ready(function () {
    alert("hello lnj");
});


//3.第三种写法 (推荐)
$(function () {
    alert("hello lnj");
});


//4.第四种写法
jQuery(function () {
    alert("hello lnj");
});

三、jQuery冲突问题解决

Jquery作者使用$符号，让你“做得更多，写得更少”，那么其他框架的作者也可能会用到$符号进行操作，这个时候就要考虑到冲突问题。

解决步骤和思路如下：

1.释放$的使用权

使用释放函数：jQuery.noConflict();

注意点:

（1）释放操作必须在编写其它jQuery代码之前编写

（2）释放之后就不能再使用$,改为使用jQuery的方式去写。

 2.自定义一个访问符号

用一个变量去接收：var abc = jQuery.noConflict();

注意点：

（1）接收完再用这个变量（abc）替代掉$，再使用jqeury进行编写，其他与第一点保持一致。

//原$没有释放时候的写法

$(function () {
    alert("hello lnj");
});

//1.
jQuery.noConflict(); //释放$使用权

jquery(function () {
    alert("hello lnj");
});

//2.
var abc = jQuery.noConflict(); //将$使用权赋值给abc变量

abc(function () { //用abc变量去替代原有的$
    alert("hello lnj");
});


//释放函数必须放在函数执行前，否则无效。

四、jQuery的核心函数

jQuery的核心函数  -> $();

核心函数可以接收三大类：

1.函数

2.字符串

3.DOM元素

// 1.接收函数

$(function () {
    alert("hello lnj");
});



// 2.接收字符串

// 2.1接收字符串选择器
// 返回一个jQuery对象, 对象中保存了找到的DOM元素

$(function () {
    var $box1 = $(".box1");
    var $box2 = $("#box2");

    console.log($box1);
    console.log($box2);
});

// 2.2接收字符串代码片段
// 返回一个jQuery对象, 对象中保存了创建的DOM元素

$(function () {
    var $p = $("<p>我是段落</p>");
    console.log($p);
    $box1.append($p);
});

// 3.接收DOM元素

$(function () {
    var span = document.getElementsByTagName("span")[0]; 
    // 原生的js执行后会被包装成一个jQuery对象返回给我们
    console.log(span);
    
    //jquery
    var $span = $(span);
    console.log($span);
});

五、jQuery对象实际上就是一个伪数组

让我们来看看控制台中 它和素组的区别和共同点：（上面是对象，下面是数组）

六、静态方法和实例方法

// 1.定义一个类
function AClass() {
    AClass.staticMethod = function() {  // 2.给这个类添加一个静态方法 
    alert("staticMethod"); // 直接添加给类的就是静态方法
    }
    
    // 静态方法通过类名调用
    AClass.staticMethod();

    AClass.prototype.instanceMethod = function() { // 3.给这个类添加一个实例方法
    alert("instanceMethod"); //prototype 是关键字哦！
    }
    
    // 实例方法通过类的实例调用
    var a = new AClass();

    // 通过实例调用实例方法
    a.instanceMethod();
}