jquery学习(一)
jquery简单介绍：
jquery是一个轻量级的javascript库，它可以帮助你，用最小的代码写出你想要的功能和漂亮的效果,它能让你很容易得操作文档，处理事件，运行动态效果和AJAX交互！
它有什么优点：
1.代码简练，学习快速
2.轻量级，大小才20k左右
3.很好地支持IE6.0＋和firefox1.5+等等
4.易扩展，根据需要自己添加其他功能
5.插件很丰富，基本包括了常用的功能
可以去官方网站：http://www.jquery.com下载最新的脚本库，版本号：jquery.1.2.3!
下面，开始学习的第一步：
要使用jquery必须，在项目上首先引入这个jquery库,例如，我的jquery放在js文件夹下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Jquery学习</title> <script language="javascript" src="js/jquery-1.2.3.js" type="text/javascript"></script></head><body> <form id="frmMain" runat="server"> <div> </div> </form></body></html>让我们从“Hello,World”开始吧:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Jquery学习</title> <script language="javascript" src="js/jquery-1.2.3.js" type="text/javascript"></script> <script language="javascript" type="text/javascript">
$(document).ready(function(){
$(document).ready( $('a').click(function(){
alert('Hello,World~!');
}); });
</script></head><body> <form id="frmMain" runat="server"> <div> <a href="#" id="aHref">请点击我～！</a> </div> </form></body></html>
虽然说，这么简单地，不需要使用Jquery，也很快就实现了，但，我们竟然要学习，肯定是要从最基础地东西慢慢熟悉的！
简单地说下：
在jquery里，“$”这个符号其实就是，创建一个新的jquery对象！所以，在代码里$('a')其实就是查找<a></a>标记（在jquery里，默认地，它会遍寻所有标记）
也就是说$('a')是查找网页上所有的<a>的元素！"click"就是这个$('a') jquery对象的方法(javascript 里，可以理解方法就是函数),可以尝试下写多个<a>请点击我～</a>是否每个超链接点击都是显示同样的效果！
$(document).ready()相当于window.onload就是在整个网页DOM加载的时候，定义了每个超链接的单击事件！
学习jquery Core（核心）
$(elements):为一个或多个DOM元素绑定jquery功能，这个函数也可以接收XML文档和Window对象，作为有效的参数。
返回值：jquery
--------------
$(expr,context):这个函数接收一个包含CSS或者XPath选择符的字符串，然后用这个字符串去匹配一组元素。
jqeury的核心功能都是通过这个函数实现的，jquery的一切都构造于这个函数之上，或者说都是以某种方式使用这个函数，
这个函数最基本的用法就是向它传递一个表达式（通常就是CSS和XPth选择符组成），然后根据这个表达式来查询所有匹配的元素。
默认情况下，$()查询当前HTML文档中的DOM元素。
返回值：jquery 参数：
1.expr（string） 用来查询用的字符串
2.context（Eleement|jquery）（可选）作为上下文的DOM元素，文档或者jquery对象。
例如：
<p>One</p><div><p>Two</p></div><p>Three</p><p>Two</p>
例如：在文档的第一个表单中(forms),查找所有单选按钮(type="radio")
$("input:radio",document,forms[0]);
例如：查找指定XML文档中所有DIV元素
$("div",one.xml);
其他：
设置网页的背景颜色:$(document.boby).background("颜色");也可以这样写：$(document.boby).css("background","back");
设置某个元素隐藏：$(myForm.elements).hide();
--------------------------
$(fn):是$(document).ready()的简写方式，永续你绑定一个DOM文档载入完成后执行的函数。
这个函数的作用如同$(document).ready()一样，只不过用这个函数的时，需要把页面中所有其他的$()操作符都包装到其中来。
返回值：jquey
参数：
fn(function):当DOM载入完成后要执行的函数
例如:$(function(){//写代码，DOM文档已经载入。。})
---------------------------
$(html):根据提供的HTML标记字符串，动态创建由jquery对象包装的DOM元素
返回值：jquery
参数：
html(string):用于动态创建jquery对象包装的DOM对象的字符串
例如：
动态创建一个div元素（以及其中的所有内容），并将它追加到boby的元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的innerHTML属性设置为给定的标记字符串，来实现标记到DOM元素转换的。
代码：$("<div><p>Hello</p></div>").appendTo("boby");
--------------------------
$.entend(prop)(注意有“.”号的):扩展jquery对象(可以是你自己定义的jquery对象)。
可以吧函数添加到jquery名称空间中，以及添加插件方法(插件)。
返回值：Object
参数：
prop(Object):要合并到jquery对象中的对象
例如：
添加两个插件方法
jquery.fn.extend({ check:function(){ return this.each(function(){this,checked=true;}); }, uncheck:function(){ return this.each(function(){this.checked=false;}) }});$("input[@type=checkbox]").check();$("input[@type=radio]").uncheck();jquery.extend({ min:function(a,b){return a<b?a:b;}, max:function(a,b){return a>b?a:b;}});$.noConflict():把变量$让给第一个实现它的那个库，这样可以确保jqeury不会和其他javascript库的$对象冲突。
当使用了这个函数后，如果你用$("div>p")就必须写成jquery("div>p");
----------------------
each(fn):每次执行传递进来的函数，函数中的this关键词都指向一个不同的元素。
而且，在每次指向函数时，都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字作为参数
返回值：jquery
参数：
fn(function)：要执行的函数
例如：有两个图像标记，迭代它们，并且设置它们的src的属性:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Jquery学习</title> <script language="javascript" src="js/jquery-1.2.3.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $('img').each(function(i){ this.src="images/t"+i+".gif"; }); }); </script></head><body> <form id="frmMain" runat="server"> <div> <img src="" alt="图片1"/> <img src="" alt="图片2"/> </div> </form></body></html>