jQuery的使用方法有哪些？

Posted 2023-05-04

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery的使用方法有哪些？相关的知识，希望对你有一定的参考价值。

使用步骤如下：
1.jQuery给放到一个文件夹里面,方便我们待会引用这个jQuery,这里我就放到我项目的js文件夹里面。
2.然后我们来开始编辑html界面代码。
3.使用script标签把jQuery引入到我们的HTML界面。src引号里面的就是我们的jQuery路径名称。
4.接着再书写一个script标签对,里面写上jQuery入口函数,这样,当我们的HTML加载完成之后就会执行我们的jQuery代码参考技术A

jQuery可以下载使用，有两个版本的 jQuery 可供下载
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
jQuery 1.8.0版时压缩前后的对比文件行数大小 jquery-1.8.0.min.js 2 91KB jquery-1.8.0.js 9228 254KB 这两个版本都可以从 jQuery.com官网下载。
也可以从多个公共服务器中选择引用。把jQuery存储在CDN公共库上可加快网站载入速度，CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。国外的有Google、Microsoft等多家公司给jQuery提供CDN服务，国内由新浪云计算(SAE) 、百度云(BAE)等提供
下面就介绍几个相对来说比较稳定的CDN。并且有jquery1.1至2.0所有版本下载分享
Google CDN <script type=text/javascriptsrc=http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script>提示：通过 Google CDN 来获得最新可用的版本：
如果您观察上面的 Google URL - 在 URL 中规定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）。
Microsoft CDN <script type=text/javascriptsrc=http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.0.min.js></script>提示：使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
新浪 CDN <script type=text/javascriptsrc=http://libs.baidu.com/jquery/2.0.3/jquery.min.js></script>百度 CDN <script type=text/javascriptsrc=http://libs.baidu.com/jquery/2.0.3/jquery.min.js></script>为了保险起见，当无法从CDN服务器上获取jQuery时，则使用本地jQuery <script type=text/javascript>window.jQuery||document.write('<scriptsrc=//localhost/jQuery/jquery-2.1.0.min.js><\\/script>');</script>在Wordpress主题中使用的方法为 <script type=text/javascript>window.jQuery||document.write('<scripttype=text/javascriptsrc=<?phpechoget_template_directory_uri();?>/jquery.min.js>\\x3C/script>')</script>注意事项
1、Wordpress内置jQuery库，其末尾防止JS库冲突而加入的jQuery.noConflict()使得主题中所有jQuery代码都要做一些小修改，更可能导致一些插件效果失效。wordpress建议下载官方jQuery-Min库放到当前主题目录下调用，不要使用wp-includes里面的库。
2、Google CDN库的地址采用了协议相对路径，它可以很好的解决https引起的一些问题，具体可以看Paul Irish的介绍，当然你依旧可以使用带“http:”的路径。
3、许多网站都采用Google CDN提供的jQuery库，使用它可以得到出色的缓存效果。
4、把jQuery代码统统放到页面底部可以提高载入速度。
5、使用HTML5重构的页面可省略掉 type=text/javascript。
6、推荐使用国内CDN公共库，速度更快，稳定性更高。

参考技术B 先引入jq，然后看这批经验http://jingyan.baidu.com/article/ab0b5630685f8dc15afa7d2f.html
之后，你再去学习jq封装的方法就可以了。参考技术C 这tm是三言两语说了你就能会的么？自己百度：jq教程

请教Jquery插件的使用方法有哪些？

我在网上下了一个timelineXML的Jquery插件，在网页的head部分加上了
<script src="/timelinexml.js"></script> 以及
<link rel="stylesheet" href="/timelinexml.css">之后
又按照他的说明做了3点，

1. Add an HTML element that will hold the timeline 2. Fill the content 3. Call the plugin
Step 1: The HTML
A simple tag with an ID will do just fine:
<div id=”my-timeline” /div> (brackets removed because they don’t show up here)
Step 2: Fill the content using an XML file.
[...] You can also reference the sample .xml file that came with the plugin. When you are done, save and close the file and that’s all there is to the .xml file
Step 3: Call the plugin
The final step is to call the plugin, like this:
$(’#my-timeline’).timelinexml( src : ‘timeline.xml’ );
Parameters:
- src: specify the path to the .xml file, relative to the file from which you call the plugin. For example, if you put that line in script.js, which is included in index.html, the path should be relative to index.html

但是我不知道$(’#my-timeline’).timelinexml( src : ‘timeline.xml’ );这一段应该放在HTML中的哪个位置，是紧接着<div id=”my-timeline” /div> ,还是放在head部分的
<script src="path-to-script/timelinexml.js"></script>
这个后面？或者其他位置？或者call the plugin需要别的函数？抱歉我是个初学者，不太了解，请各位大神们回答的更加仔细些，merci beaucoup~

<html>
<head>
<link rel="stylesheet" href="/timelinexml.css">
<script src="/timelinexml.js"></script>
<script>
$(’#my-timeline’).timelinexml( src : ‘timeline.xml’ );
</script>
</head>
<body>
<div id=”my-timeline”></div>
</body>
</html>

参考技术A

放到

<body>
....
<script>
$(’#my-timeline’).timelinexml( src : ‘timeline.xml’ );
</script>
</body>

原则：body里的最下面。避免这东西影响网页加载速度与或卡住页面。

参考技术B 可以放在head里或body里追问

是直接放么？前面要加点什么东西么

追答

$(’#my-timeline’).timelinexml( src : ‘timeline.xml’ );

追问

放在body部分的一个表格里面会提示别的位置语法错误，我放在head部分$(’#my-timeline’).timelinexml( src : ‘timeline.xml’ );
写成了这样，DW识别出了他们，但是传到服务器上依旧看不到时间轴

追答

你js和css2个文件的路径写对了吗