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” 或毫秒