jQuery之基础知识1

1、目前jQuery有三个大版本

1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增,因此一般项目来说,使用 1.x版本就可以了,最终版本:1.12.4

2.x:不兼容IE678,很少人使用,官方只做BUG维护,功能不在新增。如果不考虑兼容低版本的浏览器可以使用。最终版本:2.2.4

3.x:不兼容IE678,只支持最新的浏览器。除非特殊要求,一般不会使用 3.x版本的,很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。

jQuery版本地址:

https://code.jquery.com/jquery-1.11.2.min.js

https://code.jquery.com/jquery-1.11.2.js

例如:jQuery1.11.2具有3个可供下载的文件

  • Production jQuery版 :优化压缩后的版本,具有体积小,主要用于部署网站时使用。.min.js
  • Development jQuery版:未压缩版本,一般用于在网站建设时使用这个版本以便于调试。.js
  • jQuery map文件:map文件能够被用来在源代码感知的浏览器上调试压缩后的jQuery文件,比如Google Chrome,它可以增强调试的体验,对于使用jQuery的用户来说,一般不需要下载这个文件。

       与自行编写的其他js文件一样,jQuery库实际上就是一个扩展JavaScript功能的外部js文件。使用方法:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script>

     在网站开发阶段,可以直接引用开发版,即.js版本,当网站要部署到正式环境时,可以引用压缩后的.min.js版本,可以减少网页代码的大小,并提高了页面加载速度。

2、认识jQuery库的基础知识

1、jQuery库的核心方法----$()

在jQuery程序代码中,不管是页面元素的选择,还是内置的功能方法,都是以一个美元符号“$”和一对圆括号开始。其实$()方法是jQuery库中最重要、最核心的方法jQuery()的简写,主要用来选择页面元素或执行功能方法。

例子:$(function () {});//执行一个匿名方法      等价于  jQuery(function() { } );

$('#box'); //进行执行的ID元素选择                   等价于  jQuery('#box');

$('#box').css('color','red');//执行功能方法         等价于  jQuery('#box').css('color','red');

7个重载方法:

  1. jQuery():该方法返回一个空的jQuery对象。在jQuery1.4版本之前,该方法会返回一个包含Document结点对象;但是在这个版本以后,则返回一个空的jQuery对象。
  2. jQuery(elements):该方法实现将一个或多个DOM元素转化为jQuery对象或者集合。
  3. jQuery(callback):该方法等价于jQuery(document).ready(callback),主要用来实现绑定在DOM文档载入完成后执行的方法。
  4. jQuery(expression,[context]):该方法接受一个包含jQuery选择器的字符串,在具体执行时,会使用传入的字符串去匹配一个或多个元素。
  5. jQuery(html):该方法具体执行时,会根据传入的HTML标志代码,动态创建由jQuery对象封装的DOM元素。
  6. jQuery(html,props):该方法具体执行时,不仅会根据传入的HTML标志代码,动态创建由jQuery对象封装的DOM元素,而且还会设置该DOM元素的属性、事件等。
  7. jQuery(html,[ownerDocument]):该方法具体执行时,不仅会根据传入的HTML标志代码,动态创建由jQuery对象封装的DOM元素,而且还会指定该DOM元素所在的文档。

2、jQuery代码的风格

$('box').css('color','red');//执行功能方法

css()这个功能方法并不是直接被jQuery对象调用执行,而是先获取元素,然后返回某个具体的对象,再调用css()这个功能方法。执行完css()这个功能方法后,最终返回的还是jQuery对象。因此可以不停地连续调用功能方法。

例子:$('#box').css('color','red').css('font-size','16px');//正确

$('#box').css('color','red';'font-size','12px');//错误

3、jQuery库延迟等待加载模式

为了让方法在浏览器加载完网页后再执行,一般会使用“$()”将方法首尾包裹,即$(function(){})。因为jQuery代码文件是在<body>标签元素加载之前加载,而jQuery代码文件里的方法一般需要操作DOM元素,为了让上述方法能够正常执行,则必须等待所有的DOM元素加载后才能进行元素操作,于是需要通过“$()”包裹方法来实现延迟等待加载功能。例如,window.ready(function(){});//jQuery加载等待

wiindow.onload与$(document).ready()区别:

     window.onload必须等待网页全部加载完毕,然后再执行包裹代码。只能执行一次,如果第二次,那么第一次将被覆盖。

     $(document).ready()加载完毕,就能执行包裹代码,可以执行多次,第N次都不会被上一次覆盖。

在实际应用中,很少直接去使用window.onload事件来实现延迟等待加载,因为该事件所关联的方法需要等待图片之类的大型元素加载完毕后才能执行。令人头疼的是网速较慢的情况下,页面已经全面展开,图片还在还在缓慢加载,这时页面上任何的JavaScript交互功能全部处在假死状态。

3、jQuery对象与DOM对象之间的转换

在jQuery对象中无法调用DOM对象的任何方法,同样在DOM对象中无法调用jQuery对象。

1、jQuery对象转换成DOM对象

jQuery对象是一个特殊的数组对象,即使只有一个元素,jQuery对象仍然是一个数组。因为实际上jQuery对象是包含一个数组对象和各种方法的类。而jQuery对象的数组保存的是DOM对象,因此可以通过索引的方式将jQuery对象转换成DOM对象。

例子:

var $sc=$('#div3");//获取jQuery对象$sc

var cr=$sc[0];//将jQuery对象$sc转换成dom对象

也可以写成 var  cr=$sc.get(0);

2、DOM对象转换成jQuery对象

只需要用$()把DOM对象包装起来,就可以获得 一个jQuery对象。语法:$(dom对象)

例子:

var cr=document.getElementById('div3');//获取dom对象

var $sc=$(cr);//将dom对象cr转换jQuery对象

猜你喜欢

转载自blog.csdn.net/weixin_42210229/article/details/81217705