jQuery教程（一）
jQuery
a) 是一个javascript函数库
jQuery库包含特性
a) HTML元素读取
b) HTML元素操作
c) CSS操作
d) HTML事件函数
e) JavaScript特效和动画
f) HTML DOM遍历和修改
g) AJAX
h) Utilities
使用jQuery准备工作
a) 第一种方式：下载jQuery
b) 第二种方式：可以从 Google或 Microsoft 加载 CDN jQuery 核心文件。
i. 使用Google的cdn jQuery文件
<scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
ii. 使用Microsoft的cdn jQuery文件
<scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
使用jQuery hide() 函数，隐藏当前的 HTML 元素。
a) 实例：
<head>
<scripttype=”text/javascript” src=”jquery.js”>
</script>
<scripttype=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(this).hide();
});
</head>
<body>
<buttontype=”button”>click me</button>
</body>
使用jQuery hide()函数，隐藏id=”test”的元素
a) <script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“#test”).hide();
})
</script>
使用jQuery hide()函数，隐藏所有<p>元素
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).hide();
使用jQuery hide()函数，隐藏所有class=”test”的元素
$(“.test”).hide();
jQuery语法
a) 基础语法：$(selector).action()
b) 说明：
i. 美元符号定义jQuery
ii. 选择符（selector）“查询”和“查找”html元素
iii. jQuery的action()执行对元素的操作
文档就绪函数
a) 语法：
jQuery选择器
a) 分类：
i. 元素选择器
实例：$(“p”),$(“p.first”),$(“p#demo”)
ii. 属性选择器
实例：$(“[href]”),$(“[href=’#’]”),$(“[href!=’#’]”),$(“[href$=’.jpg’]”)
iii. Css选择器
实例：$(“p”).css(“background-color”,”green”);
b) 更多选择器实例
语法
描述
$(this)
当前 HTML 元素
$("p")
所有 <p> 元素
$("p.intro")
所有的 <p> 元素
$(".intro")
所有的元素
$("#intro")
id="intro" 的第一个元素
$("ul li:first")
每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")
所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")
id="intro" 的 <div> 元素中的所有的元素
jQuery事件函数
a) jQuery事件处理方法是jQuery中的核心函数，事件处理程序指的是当html中发生某些事件时所调用的方法。
Event 函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery名称冲突
a) jQuery使用$符号作为jQuery的简介方式，但其他javaScript库中也会使用$符号，就会出现名称冲突
b) 解决方式：使用noConflict()的方法
c) 实例：var jq =jQuery.noConflict();
使用jQuery的结论
a) 把所有的jQuery代码置于事件处理函数中
b) 把所有的事件处理函数置于文档就绪事件处理器中
c) 把jQuery代码置于单独的.js文件中
d) 如果存在名称冲突，则重命名jQuery库
jQuery效果
a) 层的大小改变效果
b) 实例：
$(“#start”).click(function(){
$(“#box”).animate({height:300},”slow”);
$(“#box”).animate({width:300},”slow”);
$(“#box”).animate({height:100},”slow”);
$(“#box”).animate({width:100},”slow”);
淡出效果
实例：
<script type=”text/javascript>
$(“div”).fadeTo(“slow”,0.25);
slide panel(滑动面版效果)
$(“.flip”).click(function(){
$(“.panel”).slideToggle(“slow”);
隐藏部分文本
jQuery隐藏和显示
a) 隐藏：hide()
b) 显示：show()
c) 都可以设置两个参数：speed和callback
d) 语法：
i. $(selector).hide(speed,callback)
ii. $(selector).show(speed,callback)
解释：speed参数规定显示或隐藏的速度，可以设置的值：“slow”,“fast”,“normal”或毫秒。Callback参数是在hide或show函数完成之后被执行的函数名称。
16. jQuery切换
隐藏显示的内容和显示隐藏的内容语法：
i. $(selector).toggle(speed,callback)
i. $(“button”).click(function(){
$(“p”).toggle();
ii. });
本文转自 素颜猪 51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1561414
![主流浏览器四大综合性能测试[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)