jQuery学习笔记

来源：互联网发布：香港恒生指数年度数据编辑：程序博客网时间：2024/04/30 00:21

一、jQuery的概念

1.jQuery 是一个 JavaScript 库。

2.jQuery 库可以通过一行简单的标记被添加到网页中。

3.jQuery 库包含以下特性：

· HTML 元素选取

· HTML 元素操作

· CSS 操作

· HTML 事件函数

· JavaScript 特效和动画

· HTML DOM 遍历和修改

· AJAX

· Utilities

二、向页面添加 jQuery 库

jQuery 库位于单个的 JavaScript 文件中，其中包含所有 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中：

<head>

<script type="text/javascript" src="jquery.js"></script>

</head>

库的替代

Google 和 Microsoft 对 jQuery 的支持都很好。

如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google or Microsoft 加载 CDN jQuery 核心文件。

使用 Google 的 CDN

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

</head>

使用 Microsoft 的 CDN

<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

</head>

三、jQuery 语法实例

$(this).hide()

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()

演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()

演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()

演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

实例

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

文档就绪函数

实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

下面的例子演示了在文档完全加载之前运行函数的话，操作失败的情况：

· 试图隐藏一个不存在的元素。

· 获得未完全加载的图像的大小。

四、jQuery 选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例

$("p").css("background-color","red");

更多的实例

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有 class="intro" 的 <p> 元素

$(".intro")

所有 class="intro" 的元素

$("#intro")

id="intro" 的第一个元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的 href 属性的属性

$("div#intro .head")

id="intro" 的 <div> 元素中的所有 class="head" 的元素

五、jQuery 事件

下面是 jQuery 中事件函数的一些例子：

Event 函数

绑定函数至

$(document).ready(function)

文档的就绪事件

（当 HTML 文档就绪可用）

$(selector).click(function)

被选元素的点击事件

$(selector).dblclick(function)

被选元素的双击事件

$(selector).focus(function)

被选元素的获得焦点事件

$(selector).mouseover(function)

被选元素的鼠标悬停事件

六、jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

七、jQuery 效果

函数

描述

$(selector).hide()

隐藏被选元素

$(selector).show()

显示被选元素

$(selector).toggle()

切换（在隐藏与显示之间）被选元素

$(selector).slideDown()

向下滑动（显示）被选元素

$(selector).slideUp()

向上滑动（隐藏）被选元素

$(selector).slideToggle()

对被选元素切换向上滑动和向下滑动

$(selector).fadeIn()

淡入被选元素

$(selector).fadeOut()

淡出被选元素

$(selector).fadeTo()

把被选元素淡出为给定的不透明度

$(selector).animate()

对被选元素执行自定义动画

八、Callback 函数。

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。当动画 100% 完成后，即调用 Callback 函数。

典型的语法：

$(selector).hide(speed,callback)callback 参数是一个在 hide 操作完成后被执行的函数。

错误（没有 callback）

$("p").hide(1000);

alert("The paragraph is now hidden");

TIY

正确（有 callback）

$("p").hide(1000,function(){

alert("The paragraph is now hidden");

});

九、jQuery HTML 操作

函数描述

$(selector).html(content) 改变被选元素的（内部）HTML

$(selector).append(content) 向被选元素的（内部）HTML 追加内容

$(selector).prepend(content) 向被选元素的（内部）HTML “预置”（Prepend）内容

$(selector).after(content) 在被选元素之后添加 HTML

$(selector).before(content) 在被选元素之前添加 HTML

十、jQuery CSS 函数

CSS 属性

描述

$(selector).css(name,value)

为匹配元素设置样式属性的值

$(selector).css({properties})

为匹配元素设置多个样式属性

$(selector).css(name)

获得第一个匹配元素的样式属性值

$(selector).height(value)

设置匹配元素的高度

$(selector).width(value)

设置匹配元素的宽度

十一、jQuery AJAX 请求

请求

描述

$(selector).load(url,data,callback)

把远程数据加载到被选的元素中

$.ajax(options)

把远程数据加载到 XMLHttpRequest 对象中

$.get(url,data,callback,type)

使用 HTTP GET 来加载远程数据

$.post(url,data,callback,type)

使用 HTTP POST 来加载远程数据

$.getJSON(url,data,callback)

使用 HTTP GET 来加载远程 JSON 数据

$.getScript(url,callback)

加载并执行远程的 JavaScript 文件