JQuery学习

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

jQuery语法

$(selector).action

文档就绪函数

$(document).ready(
function()
);

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

jQuery选择器
jQuery选择器支持通过标签名，属性名，内容对html进行选择。

jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取

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

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

元素。

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 “#” 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 “#” 的元素。
$("[href$='.jpg']") 选取所有 href 值以 “.jpg” 结尾的元素。

Query CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：

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

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 元素
$(“p.intro”)	所有 class=”intro” 的 元素
$(“.intro”)	所有 class=”intro” 的元素
$(“#intro”)	id=”intro” 的第一个元素
$(“ul li:first”)	每个 的第一个 元素
$ (“[href=’.jpg’]”)	所有带有以 “.jpg” 结尾的 href 属性的属性
$(“div#intro .head”)	id=”intro” 的 元素中的所有 class=”head” 的元素

jQuery事件
事件处理函数是当 HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。

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隐藏和显示
隐藏hide()函数
显示show()函数

$("#hide").click(function(){

$("p").hide(speed,callback);

});

$("#show").click(function(){

$("p").show(speed,callback);

});

hide() 和 show() 都可以设置两个可选参数：speed 和 callback。

speed 参数可以设置这些值：”slow”, “fast”, “normal” 或毫秒

jQuery 切换
jQuery 用 toggle()来切换元素的可见状态
jQuery 滑动函数

$(selector).slideDown(speed,callback)



$(selector).slideUp(speed,callback)



$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值：”slow”, “fast”, “normal” 或毫秒

jQuery Fade 函数

$(selector).fadeIn(speed,callback)



$(selector).fadeOut(speed,callback)



$(selector).fadeTo(speed,opacity,callback)

speed 参数可以设置这些值：”slow”, “fast”, “normal” 或毫秒
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。

jQuery 自定义动画

jQuery 函数创建自定义动画的语法：

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性：

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是：”slow”, “fast”, “normal” 或 毫秒。

HTML 元素默认是静态定位，且无法移动。 如需使元素可以移动，请把 CSS 的 position 设置为 relative 或 absolute。

jQuery callback
为了避免函数冲突，故设置callback（回调）函数
callback 参数是一个在函数操作完成后被执行的函数。

jQuery HTML操作
1、改变html内容
语法：

$(selector).html(content)

2、追加html内容
语法：

$(selector).append(content)

3、向所匹配的html元素内部预置内容
语法：

$(selector).prepend(content)

4、在所有匹配的元素之后插入 HTML 内容
语法：

$(selector).after(content)

5、在所有匹配的元素之前插入 HTML 内容

$(selector).before(content)

jQuery CSS 函数

jQuery 拥有三种供 CSS 操作的重要函数：

• $(selector).css(name,value)
• $(selector).css({properties})
• $(selector).css(name)

css(name,value)为所有匹配元素的给定css属性设置值

$(selector).css(name,value)

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

css({properties})同时为所有匹配元素的一系列 CSS 属性设置值：

$(selector).css({properties})

$("p").css({"background-color":"yellow","font-size":"200%"});

css(name)返回指定的 CSS 属性的值

$(selector).css(name)

$(this).css("background-color");

jQuery AJAX

Load函数

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

使用选择器来定义要改变的html元素，用url定义后台地址，只有当希望向服务器发送数据，才需要使用 data 参数。只有当您需要在完毕之后触发一个函数时，您才需要使用 callback 参数。

Low Level AJAX

$.ajax(options) 是低层级AJAX函数的语法。

option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。

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 文件

(selector) jQuery 元素选择器语法
(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项