基础核心

时间 2019-11-13

标签基础核心繁體版

原文原文链接

代码风格javascript

在jQuery程序中，不论是页面元素的选择、内置的功能函数，都是美圆符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象：jQuery对象，因此咱们在页面元素选择或执行功能函数的时候能够这么写：css

jQuery基础核心.html：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery基础核心</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="yeDemo.js"></script>
</head>
<body>
    <div id="box">jQuery基础核心</div>
</body>
</html>

yeDemo.js：java

$(function() {
    $("#box").css("color", "red");
});

因为$自己就是jQuery对象的缩写形式，那么也就是说上面的代码也能够写成以下形式：jquery

jQuery(function() {
    jQuery("#box").css("color", "red");
});

怎么证实$自己就是jQuery对象呢?以下：函数

alert($ === jQuery);//相等，恒等

第一次看见===符号，应该是恒等的意思。字体

看看下面代码分别返回什么?spa

alert($);

alert($)：返回的是jQuery对象的内部函数。prototype

alert($());

alert($())：返回jQuery对象。code

alert($("#box"));

alert($("#box"))：返回的也是jQuery对象。

alert($("#box").css("color", "red"));

alert($("#box").css("color", "red"))：返回的仍是jQuery对象。

在执行功能函数的时候，咱们发现.css()这个功能函数并非直接被“$”或jQuery对象调用执行的，而是先获取元素后，返回某个对象再调用.css()这个功能函数。那么也就是说，这个返回的对象其实也就是jQuery对象。

$().css("color", "red")：理论上是合法的，但实际上缺乏元素，但没有报错哟！

值得一提的是，执行了.css()这个功能函数后，最终返回的仍是jQuery对象，那么也就是说，jQuery的代码模式是采用的连缀方式，能够不停的连续调用功能函数。即：

alert($("#box").css("color", "red").css("font-size", "200px").css("font-weight", "bold"));//连缀

返回的依然是jQuery对象。

jQuery中代码注释和JavaScript是保持一致的，有两种最经常使用的注释：单行使用“//...” ，多行使用“/* ... */” 。

加载模式

咱们在以前的代码一直在使用$(function() {});这段代码进行首尾包裹，那么为何必需要包裹这段代码呢？缘由是咱们jQuery库文件是在body元素以前加载的，咱们必须等待全部的DOM元素加载后，延迟支持DOM操做，不然就没法获取到。

在延迟等待加载，JavaScript提供了一个事件为onload，方法以下：

window.onload = function() {...}

例，

window.onload = function() {
    $("#box").css("color", "red");
}

而jQuery语法为：

$(document).ready(function() {...});

例，

$(document).ready(function() {
    $("#box").css("color", "pink");
});

onload与ready的区别

	window.onload	$(document).ready()
执行时机	必须等待网页所有加载完毕(包括图片等)，而后再执行包裹代码	只须要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，若是执行第二次，那么第一次的执行会被覆盖	能够执行屡次，第N次都不会被上一次覆盖
简写方案	无	$(function() { });

咱们来看看第二点(即执行次数)：

window.onload：

window.onload = function() {
    alert(1);
}
window.onload = function() {
    alert(2);
}

只会弹出2，即只能执行一次，若是执行第二次，那么第一次的执行会被覆盖。

$(document).ready()：

$(document).ready(function() {
    alert(1);
});
$(document).ready(function() {
    alert(2);
});

可简写成：

$(function() {
    alert(1);
});
$(function() {
    alert(2);
});

会一次弹出一、2。便可以执行屡次，第N次都不会被上一次覆盖。

在实际应用中，咱们都不多直接去使用window.onload，由于他须要等待图片之类的大型元素加载完毕后才能执行JS代码。因此，最头疼的就是网速较慢的状况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能所有处在假死状态，而且只能执行单次在屡次开发和团队开发中会带来困难。

对象互换

jQuery对象虽然是jQuery库独有的对象，但它也是经过JavaScript进行封装而来的。咱们能够直接输出来获得它的信息。正如前面所得：

alert($);              //jQuery对象方法内部
alert($());            //jQuery对象返回的对象，仍是 jQuery
alert($('#box'));      //包裹ID元素返回对象，仍是 jQuery

从上面三组代码咱们发现：只要使用了包裹后，最终返回的都是jQuery对象。这样的好处显而易见，就是能够连缀处理。但有时，咱们也须要返回原生的DOM对象，好比：

alert(document.getElementById("box"));//返回原生DOM对象  [object HTMLDivElement]

jQuery想要达到获取原生的DOM对象，能够这么处理：

alert($("#box").get(0));//ID元素的第一个原生DOM [object HTMLDivElement]

从上面get(0)，这里的索引看出，jQuery是能够进行批量处理DOM的，这样能够在不少须要循环遍历的处理上更加驾轻就熟。

jQuery对象和DOM对象之间的互换：

alert($(document.getElementById("box")).css("color", "red"));

多个库之间的冲突

当一个项目中引入多个第三方库的时候，因为没有命名空间的约束（命名空间就比如同一个目录下的文件夹同样，名字相同就会产生冲突），库与库之间发生冲突在所不免。

那么，既然有冲突的问题，为何要使用多个库呢？缘由是jQuery只不过是以DOM操做为主的库，方便咱们平常Web开发。但有时，咱们的项目有更多特殊的功能须要引入其
他的库，好比用户界面UI方面的库，游戏引擎方面的库等等一系列。

而不少库，好比prototype、还有咱们JavaScript课程开发的Base库，都使用“$”做为基准起始符，若是想和jQuery共容有两种方法：

一、将jQuery库在Base库以前引入，那么“$”的全部权就归Base库，而jQuery能够直接用jQuery对象调用，或者建立一个“$$”符号给jQuery使用。(马丹，这是一个什么样的字体，艹，不弄了)

var $$ = jQuery; //建立一个$$的jQuery对象
$(function() { //这是Base的$
    //alert($("#box").get(0)); //jQuery库在base库以前引用，那么$全部权就是base库的
    alert($("#box").ge(0)); //这是Base的$
    alert($$("#box").get(0)); //这是jQuery的$$
});

二、若是将jQuery库在Base库以后引入，那么“$”的全部权就归jQuery库全部，而Base库将会冲突而失去做用。这里，jQuery提供了一个方法：

jQuery.noConflict(); //自行了断，把本身的$全部权剔除
var $$ = jQuery;
$(function() {
    //jQuery库在base库以后引用，那么$全部权就是jQuery库的
    alert($("#box").ge(0));
    alert($$("#box").get(0));
});