对于痛苦的原生javascript来说,jQuery可谓神器
看一下jQuery的理念就知道,选择他是对的:写得少,做的多
实际应用中jQuery有两种使用方法,也就是引用方式,下面简单介绍一下:
第一种方法:线上引用
非常简单,只需要记住两个关键词即可,一是“静态资源公共库”、二是“jQuery”
记住这两个词的目的很简单,就是让你在“百度”、“谷歌”等搜索引擎来找到它
下面以百度静态库举例
进入百度www.baidu.com 输入“静态资源库” 搜索出现如下页面
点击进入,并在搜索框中输入“jQuery”
复制如下链接 http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
打开编辑器,在<script>标签中的src属性下输入刚才复制的链接进行引用,如下所示:
第二种方法:本地引用
首先下载jQuery,然后调用,步骤如下:
找到jQuery官网 https://jquery.com/ 国外网站,访问较慢,请耐心等待
然后点击右侧的 download jQuery v n.n.n 后面这个是版本号,进入如下页面:
会出现三个下载链接供你选择,初学者一般选择第二个“uncompressed development”版本
将下载文件保存到你项目的js文件夹下,然后再用script标签下的src将其引入即可,具体参照方法一
说到这里,对于jQuery的引入位置我们应该重新梳理一下,因为我们看到引入位置可以放在头部,又可以放在底部,那到底应该怎么理解这个引入呢。首先我们应该明白,代码是按照自上而下的顺序执行的,理论上讲我们把所有的页面元素加载完成之后,再将其进行特效渲染,是这么个顺序,所以放在底部是没有问题的,所以这里我们就不讲放在底部的问题了,我们来谈一下如何将jQuery放在头部还能正常使用的方法。
方法一:window.onload====页面元素全部加载完成后再执行,传统,要等待页面所有信息的加载,对于页面元素较多的网站来说,客户的体验会受到影响。
方法二:也是我们着重要说的方法,jQuery中自由的方式,$(document).ready(),特点是先将页面中的DOM结构加载完就会触发,优点就是客户只需要很少的流量资源就可以有较好的体验。而作为js中“神器”的存在,jQuery还对其有更友好的书写方式,那就是省略(document).ready,直接将函数传入$()下。