jQuery基础

来源：互联网发布：淘宝图片美工软件编辑：程序博客网时间：2024/05/22 06:19

1.JavaScript框架

JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。为了应对这些调整，许多的 JavaScript 库应运而生。这些 JavaScript 库常被称为 JavaScript 框架。比较常用的JavaScript框架有jQuery、Prototype以及MooTools等等。

2.jQuery框架

jQuery是一个JavaScript函数库。jQuery库包含以下功能：HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX以及Utilities等等，除此之外，Jquery还提供了大量的插件。

通过 jQuery，您可以选取（查询，query） HTML元素，并对它们执行"操作"（actions）。

jQuery有两种使用方式：

（1）下载jQuery js库文件到本地，然后在HTML文档中引用

<script src="jquery-1.10.2.min.js"></script>

（2）从网络或CDN中直接引用jQuery的库文件

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">或<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">或<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">或......

3.jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作，语法如下：

$(selector).action()

其中，

（1）$()称为jQuery函数，如果向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

（2）选择符（selector）是要"查询"和"查找" HTML 元素，和CSS中的selector一致。

（3）jQuery 的 action() 执行对元素的操作

实例如下：

$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有 <p> 元素$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素$("#test").hide() - 隐藏所有 id="test" 的元素

4.使用jQuery框架的例子

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){  $("p").click(function(){    $(this).hide();  });});</script></head><body><p>如果你点我，我就会消失。</p><p>点我消失!</p><p>点我也消失!</p></body></html>

其中$(document).ready()是文档就绪事件，表示HTML文档加载完成之后，执行ready函数括号中的内容。这个还比较重要，因为有些操作如果在文档加载完之前执行，可能会出现异常的问题，比如试图隐藏一个不存在的元素。关于文档的就绪事件有两种方法：

（1）$(document).ready()

$(document).ready(function(){   // 开始写 jQuery 代码...});

（2）$(function(){})

$(function(){   // 开始写 jQuery 代码...});

$("p").click(function(){})表示当段落被点击事件发生时，执行funtion中定义的函数。

5.jQuery对AJAX的支持

（1）load方法

jQueryload()方法是简单但强大的AJAX方法。load()方法从服务器加载数据，并把返回的数据放入被选元素中。

语法如下：

$(selector).load(URL,data,callback);

（2）jQuery get/post方法

jQuery get()和post()方法用于通过HTTP GET或POST请求从服务器请求。

>>$.get()

$.get()方法通过HTTP GET请求从服务器上请求数据，语法如下：

$.get(URL, callback);

必需的URL参数规定您希望请求的 URL。

可选的callback参数是请求成功后所执行的函数名。

>>$.post()

$.post()方法通过HTTP POST请求从服务器上请求数据，语法如下：

$.post(URL, data, callback);

必需的URL参数规定您希望请求的 URL。
可选的data参数规定连同请求发送的数据。
可选的callback参数是请求成功后所执行的函数名。

0 0