jQuery学习笔记（一）
本日志内容均来自 http://www.w3school.com.cn/jquery/ 教程，边看边整理。
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
jQuery可以在jQuery.com被下载。
有两个版本的 jQuery 可供下载：
-
Production version - 用于实际的网站中，已被精简和压缩。
-
Development version - 用于测试和开发（未压缩，是可读的代码）
可以把下载文件放到与页面相同的目录中，这样更方便使用。
向页面添加jQuery库,<script> 标签应该位于页面的 <head> 部分。
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head>
库的替代
Google 和 Microsoft 对 jQuery 的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 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>
使用Google或Microsoft提供的在线js的好处：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
jQuery 库包含以下特性：
-
HTML 元素选取
-
HTML 元素操作
-
CSS 操作
-
HTML 事件函数
-
JavaScript 特效和动画
-
HTML DOM 遍历和修改
-
AJAX
-
Utilities
jQuery基本语法：
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
-
美元符号定义 jQuery
-
选择符（selector）“查询”和“查找” HTML 元素
-
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数
您也许已经注意到在我们的实例中的所有 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 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
jQuery 是为事件处理特别设计的。
<script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ //do something $("p").hide(); }); }); </script>
单独文件中的函数
<head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="my_jquery_functions.js"></script> </head>
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
<script> $.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍在运行！"); }); }); </script>
<script> var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在运行！"); }); }); </script>
jQuery常用事件
$(document).ready(function); //将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function); //触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function); //触发或将函数绑定到被选元素的双击事件
$(selector).focus(function); //触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function); //触发或将函数绑定到被选元素的鼠标悬停事件
jQuery hide() 和 show()
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
//语法,可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
//通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
//显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
//语法,可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
$(selector).toggle(speed,callback);
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
-
fadeIn()
-
fadeOut()
-
fadeToggle()
-
fadeTo()
//用于淡入已隐藏的元素。 //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 $(selector).fadeIn(speed,callback); //用于淡出可见元素。 //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 $(selector).fadeOut(speed,callback); //jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 //如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。 //如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 //如果callback非空,无论是完成淡入或者淡出,callback都会被触发 $(selector).fadeToggle(speed,callback); //必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 //fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 //可选的 callback 参数是该函数完成后所执行的函数名称。 $(selector).fadeTo(speed,opacity,callback);
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
-
slideDown()
-
slideUp()
-
slideToggle()
三组方法类似于fadeIn() ,fadeOut(), fadeToggle(),这里不做详细记录
jQuery 动画 - animate() 方法
//!!默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。 //必需的 params 参数定义形成动画的 CSS 属性。 //可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 //可选的 callback 参数是动画完成后所执行的函数名称。 $(selector).animate({params},speed,callback); //example:把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止： 实例 $("button").click(function(){ $("div").animate({left:'250px'}); }); //操作多个属性 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); //使用相对值 //也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -= $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); //甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： $("button").click(function(){ $("div").animate({ height:'toggle' }); }); //jQuery 默认提供针对动画的队列功能。 //jQuery 会内部创建这些动画的运行队列。与TweenLite不同，不需要手动创建队列 $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); //当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。 //同时，色彩动画并不包含在核心 jQuery 库中。 //如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
//因此，默认地，stop() 会清除在被选元素上指定的当前动画。
$(selector).stop(stopAll,goToEnd);
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"> </script> <script> $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); $("#stop").click(function(){ $("div").stop(); }); $("#stop2").click(function(){ $("div").stop(true); }); $("#stop3").click(function(){ $("div").stop(true,true); }); }); </script> </head> <body> <button id="start">开始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止但要完成</button> <p><b>"开始"</b> 按钮会启动动画。</p> <p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p> <p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p> <p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>
jQuery - Chaining
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
使用Chaining的好处是可以减少浏览器查找操作元素的次数。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
W3School资料内描述，当进行链接时，代码行会变得很差。
暂时不清楚代码变差是指的代码可维护性还是性能。
浙公网安备 33010602011771号