jQuery系列第二章 jQuery框架使用准备

时间 2019-11-05

原文原文链接

第二章 jQuery框架使用准备

　　　　2.1 jQuery框架和JavaScript加载模式对比

jQuery框架的加载模式html

1 <script>
2     window.onload = function () {
3         console.log("window.onload——1")
4     };
5     window.onload = function () {
6         console.log("window.onload——2")
7     }
8 </script>

打印结果：window.onload——2jquery

JavaScript的加载模式api

1 <script src="jquery-3.2.1.js"></script>
2 <script>
3     $(document).ready(function () {
4         console.log("$().ready——1")
5     });
6     $(document).ready(function () {
7         console.log("ready——2")
8     })
9 </script>

　　　　打印结果：ready——1 ready——2闭包

两种加载模式对比app

① 监听时机不相同

window.onload方法须要等全部的资源（CSS\JS\图片等）都加载完毕后执行包裹代码。

jQuery框架的ready方法等DOM结构加载完毕后执行包裹代码。

② 执行次数不相同

window.onload方法，N次只会执行一次，后面的会把前面的覆盖。

jQuery框架的ready方法，N次会执行N次，不存在覆盖的问题。

③ 简写方式不相同

   jQuery框架中的加载方式能够简写为： 
 

   $().ready( 
  function () {}） 
 

   $( 
  function () {}) 
 
2.2 jQuery框架解决冲突在实际的开发中，咱们的项目中可能须要用到并引入多个第三方框架，若是这些框架自己在设计的时候，没有命名空间的约束，那么库与库之间发生冲突将在所不免。框架
jQuery框架在设计的使用，使用闭包的形式在全部的代码都封装到一个当即调用函数中，对外仅仅提供了美圆符号和jQuery做为框架的入口。函数
jQuery当中全部的操做都是使用美圆符号或者是jQuery对象进行的。假如，咱们在使用jQuery框架以前已经在页面的代码中用到了美圆符号，那么这种状况下，咱们再按照常规的方式使用jQuery就可能会发生错误。ui
为了不这种状况的发生，jQuery框架使用noConflict方法,能够在使用以前把美圆符号替换成其它的标识符，至关因而给jQuery对象换个其余的名字。spa
代码示例prototype
 
   1 <script src="jquery-3.1.1.js"></script>
2 <script>
3     var $ = "文顶顶";
4     $(function () {
5         console.log("DOM加载完毕");
6     })
7 </script> 
  
代码说明
若是直接执行上面的代码，那么会报错。
报错信息：Uncaught TypeError: $ is not a function
报错缘由：美圆符号被定义为字符串，jQuery框架中美圆符号被覆盖。
解决冲突（给jQuery框架安排新的代言人）
 
    1 <script>
 2     //在$符号被定义以前使用noConflict方法来从新设置名称
 3     var jq = $.noConflict();
 4     // $符号可能被定义为字符串或其余数据
 5     var $ = "文顶顶";
 6     //解决冲突以后,使用新设置的名称来操做
 7     jq(function () {
 8         console.log("DOM加载完毕");
 9     })
10 </script> 
  
2.3 jQuery对象和DOM对象的相互转换DOM对象：每一个HTML页面都是一个 DOM对象(Document Object Model，文本对象模型)，经过传统的JavaScript方法访问页面中的元素，就是访问 DOM 对象。
jQuery对象：在 jQuery框架中，经过自己自带的方法获取页面元素的对象，称为 jQuery 对象 ;
备注：其实jQuery自己只是个工厂函数，咱们一般意义上所说的jQuery实例对象实际上是jQuery的原型对象上面的init方法建立出来的实例对象。即 jQuery对象 = new jQuery.prototype.init() , 只是由于init方法和jQuery构造函数共用相同的原型对象，所以咱们才会称init构造函数建立出来的对象为jQuery实例。
代码示例
 
    1 <body>
 2 <div class="box">我是div</div>
 3 <script src="jquery-3.2.1.js"></script>
 4 <script>
 5     //经过DOM提供的api获取页面中全部class为box的标签
 6     var oDiv = document.getElementsByClassName("box");
 7     console.log(oDiv);
 8     //经过jQuery提供的方法获取页面中全部class为box的标签
 9     var ojQueryObj = $("div");
10     console.log(ojQueryObj);
11 </script>
12 </body> 
  
DOM对象和jQuery对象的转换
DOM对象能够理解为标签对象，咱们在操做这些标签的时候，有不少标签自带的方法能够使用，如innerHTML、innerText属性，或者是appendChild方法等。
jQuery对象能够理解为jQuery初始化方法这个构造函数建立的实例化对象，由于它的原型对象为jQuery.prototype，所以全部的jQuery实例对象均可以访问jQuery原型对象上面的成员[属性或方法]，如html、text方法等。
注意： DOM对象不能直接访问jQuery原型对象上面的成员，jQuery对象也不能直接访问标签对象上面的成员，如需访问则应该先进行转换。
DOM标签对象 -> jQuery实例对象 $(DOM标签对象)
jQuery实例对象 -> DOM标签对象 jQuery对象.get(index) | jQuery对象[index]
 
代码示例
 
    1 <body>
 2 <div class="box">我是div</div>
 3 <script src="jquery-3.1.1.js"></script>
 4 <script>
 5     //经过DOM提供的api获取页面中全部class为box的标签
 6     var oDiv = document.getElementsByClassName("box")[0];
 7     //经过jQuery提供的方法获取页面中全部class为box的标签
 8     var ojQueryObj = $("div");
 9     //DOM -> jQuery
10     console.log($(oDiv).html());
11     //jQuery -> DOM
12     console.log(ojQueryObj.get(0));
13     console.log(ojQueryObj[0]);
14 </script>
15 </body> 
  
 
Posted by 博客园·文顶顶 ~ 文顶顶的我的博客_花田半亩
联系做者 简书·文顶顶 新浪微博·文顶顶
原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | 文顶顶

jQuery系列 第二章 jQuery框架使用准备

第二章 jQuery框架使用准备

2.1 jQuery框架和JavaScript加载模式对比

2.2 jQuery框架解决冲突

2.3 jQuery对象和DOM对象的相互转换

jQuery系列第二章 jQuery框架使用准备

　　　　2.1 jQuery框架和JavaScript加载模式对比