天天看点

jquery用法

 JavaScript 框架库 - jQuery

jQuery是JS的一个框架库,他是把很多JS语法实现的功能进行了封装,开发人员可以直接调用jQuery的方法。

如何使用:

要使用jQuery的某个库,必须在<script></script>标签中先引入该库文件(该库文件在jquery官网下载),例如:

或者:

1

2

3

4

5

6

7

8

9

10

11

12

13

<code>&lt;!DOCTYPE html&gt;</code>

<code>&lt;html lang</code><code>=</code><code>"zh-CN"</code><code>&gt;</code>

<code>&lt;head&gt;</code>

<code>    </code><code>&lt;meta charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code> </code> 

<code>    </code><code>&lt;title&gt;&lt;</code><code>/</code><code>title&gt;</code>

<code>&lt;</code><code>/</code><code>head&gt;</code>

<code>&lt;body&gt;</code>

<code>    </code> 

<code>&lt;</code><code>/</code><code>body&gt;</code>

<code>&lt;script src</code><code>=</code><code>"/static/inspinia/js/jquery-2.1.1.js"</code><code>&gt;&lt;</code><code>/</code><code>script&gt;</code>

<code>&lt;script src</code><code>=</code><code>"/static/inspinia/js/bootstrap.min.js"</code><code>&gt;&lt;</code><code>/</code><code>script&gt;</code>

<code>&lt;script src</code><code>=</code><code>"/static/inspinia/js/plugins/metisMenu/jquery.metisMenu.js"</code><code>&gt;&lt;</code><code>/</code><code>script&gt;</code>

jQuery能实现什么功能?

我们可以通过使用 jQuery 应用 JavaScript 效果。

jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

基本上,你将学习到如何选取 HTML 元素,以及如何对它们执行类似隐藏、移动以及操作其内容等任务

以下是jQuery的所有方法,

<a href="http://www.php100.com/manual/jquery/" target="_blank">http://www.php100.com/manual/jquery/</a>

实例:

14

15

16

17

18

19

20

21

<code>&lt;</code><code>html</code> <code>lang</code><code>=</code><code>"zh-cn"</code><code>&gt;</code>

<code>&lt;</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>meta</code> <code>charset</code><code>=</code><code>"utf-8"</code><code>&gt;</code>

<code>&lt;</code><code>title</code><code>&gt;&lt;/</code><code>title</code><code>&gt;</code>

<code>&lt;/</code><code>head</code><code>&gt;</code>

<code>&lt;</code><code>body</code><code>&gt;&lt;</code><code>p</code><code>&gt;I want to say:&lt;/</code><code>p</code><code>&gt;</code>

<code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"button"</code> <code>id</code><code>=</code><code>'addId'</code> <code>value</code><code>=</code><code>"追加"</code><code>&gt;</code>

<code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/jquery-3.1.1.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>src</code><code>=</code><code>"js/jquery-3.1.1.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>    </code><code>$(function(){</code>

<code>        </code><code>$('#addId').click(function(){</code>

<code>        </code><code>$('p').append('alex');</code>

<code>        </code><code>});</code>

<code>    </code><code>})</code>

<code>&lt;/</code><code>script</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

<code>$(function(){</code>

<code>    </code><code>Foo();</code>

<code>    </code><code>Bar();</code>

<code>})</code>

表示web页面一加载完后就会执行Foo( )和Bar( )函数。

上面的例子,我们给ID=addId的标签绑定了一个事件(click事件),当点击“追加”按钮时,会在所有&lt;p&gt;标签的文本后面加上“alex”字符串。

测试:

打开页面时

<a href="https://s4.51cto.com/wyfs02/M02/8E/BD/wKioL1jKUXPy43xyAAAYIRYRJTU485.png" target="_blank"></a>

点击追加按钮后:

<a href="https://s4.51cto.com/wyfs02/M01/8E/BF/wKiom1jKUXTg6RT_AAAapux_tMU274.png" target="_blank"></a>

本文转自 曾哥最爱 51CTO博客,原文链接:http://blog.51cto.com/zengestudy/1907286,如需转载请自行联系原作者

继续阅读