博客列表 >jQuery的引入与方式与工厂函数$使用方式-2018年4月3日

jQuery的引入与方式与工厂函数$使用方式-2018年4月3日

小小的菜的博客
小小的菜的博客原创
2018年04月03日 18:10:29665浏览

对于痛苦的原生javascript来说,jQuery可谓神器

看一下jQuery的理念就知道,选择他是对的:写得少,做的多

实际应用中jQuery有两种使用方法,也就是引用方式,下面简单介绍一下:

第一种方法:线上引用

非常简单,只需要记住两个关键词即可,一是“静态资源公共库”、二是“jQuery”

记住这两个词的目的很简单,就是让你在“百度”、“谷歌”等搜索引擎来找到它

下面以百度静态库举例

进入百度www.baidu.com 输入“静态资源库” 搜索出现如下页面

1522747885985776.jpg

点击进入,并在搜索框中输入“jQuery”

1522748018398179.jpg

复制如下链接 http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

1522748052968142.jpg

打开编辑器,在<script>标签中的src属性下输入刚才复制的链接进行引用,如下所示:

1522748243508795.jpg

第二种方法:本地引用

首先下载jQuery,然后调用,步骤如下:

找到jQuery官网 https://jquery.com/ 国外网站,访问较慢,请耐心等待

1522748501256209.jpg

然后点击右侧的 download jQuery v n.n.n  后面这个是版本号,进入如下页面:

1522748603438563.jpg

会出现三个下载链接供你选择,初学者一般选择第二个“uncompressed development”版本

将下载文件保存到你项目的js文件夹下,然后再用script标签下的src将其引入即可,具体参照方法一


说到这里,对于jQuery的引入位置我们应该重新梳理一下,因为我们看到引入位置可以放在头部,又可以放在底部,那到底应该怎么理解这个引入呢。首先我们应该明白,代码是按照自上而下的顺序执行的,理论上讲我们把所有的页面元素加载完成之后,再将其进行特效渲染,是这么个顺序,所以放在底部是没有问题的,所以这里我们就不讲放在底部的问题了,我们来谈一下如何将jQuery放在头部还能正常使用的方法。

方法一:window.onload====页面元素全部加载完成后再执行,传统,要等待页面所有信息的加载,对于页面元素较多的网站来说,客户的体验会受到影响。

方法二:也是我们着重要说的方法,jQuery中自由的方式,$(document).ready(),特点是先将页面中的DOM结构加载完就会触发,优点就是客户只需要很少的流量资源就可以有较好的体验。而作为js中“神器”的存在,jQuery还对其有更友好的书写方式,那就是省略(document).ready,直接将函数传入$()下。



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议