jquery基本操作

jquery 简化了JS代码的开发量，使程序变得更加简单易懂，而且还取代了某些javascript不能完成的功能，大大增加了开发的效率。

举一个简单的例子

<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
<script>

上边的效果是点击文档中所有a标签时将弹出对话框，$("a") 是一个jQuery选择器，$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法，同理$(document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document全部下载完毕时执行函数。
在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span id="p"></span>)的元素.

$(expr)
说明：该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础

参数：expr：字符串，一个查询表达式或一段html字符串

$("div > p").html()这是查找所有div下的p标签的html内容

$(elem)
说明：限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象

参数： elem：通过jQuery对象压缩的DOM元素

eg:$(document.body).background("black");

$(elems)
说明：限制jQuery作用于一组特定的DOM元素
参数： elem：一组通过jQuery对象压缩的DOM元素
eg:$(form1.elements ).hide(); 让form表单下的元素都影藏

$(fn)
说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！

参数：fn (Function):当文档载入时执行的函数！

$(obj)
说明：复制一个jQuery对象，
参数：obj (jQuery): 要复制的jQuery对象
eg：var f = $("div");
alert($(f).find("p").html())
each(fn)
说明：将函数作用于所有匹配的对象上
参数：fn (Function): 需要执行的函数
eg:$("img").each(function(){
this.src = "2.jpg"; });

eq(pos)
说明：减少匹配对象到一个单独得dom元素
参数：pos (Number): 期望限制的索引，从0 开始
eg:$("p").eq(1).html()

get() get(num)
说明：获取匹配元素，get(num)返回匹配元素中的某一个元素
参数：get (Number): 期望限制的索引，从0 开始
eg:$("p").get(1).innerHTML

注意get和eq的区别，eq返回的是[b]jQuery对象，get返回的是所匹配的dom对象，所有取$("p").eq(1)对象的内容用jQuery方法html()，而取$("p").get(1)的内容用innerHTML
[/b]index(obj)
说明：返回对象索引
参数：obj (Object): 要查找的对象
eg:$("div").index(document.getElementById('test1'));

size() Length
说明：当前匹配对象的数量，两者等价

2:DOM操作

属性
我们以<img id="a" scr="5.jpg"/>为例，在原始的javascript里面可以用var o=document.getElementById('a')取的id为a的节点对象，在用o.src来取得或修改该节点的src属性，在jQuery里$("#a")将得到jQuery对象[ <img id="a" scr="5.jpg"/> ]，然后可以用jQuery提供的很多方法来进行操作，如$("#a").scr()将得到5.jpg,$("#a").scr("1.jpg")将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作
eg:$("#test").href("2.html");

其他类似的操作：

herf() herf(val) html() html(val) id() id (val) name() name (val)

rel() rel (val)src() src (val) title() title (val) val() val(val) attr() attr('name',val);

attr({src:'1.jpg',alter:'Image'})

操作
after(html) 在匹配元素后插入一段html
eg:$("#test").after("<b>Hello</b>");

append(html)在匹配元素内部，且末尾插入指定html

appendTo (obj)是将某个对象添加到obj对象的后面

eg:$("#test").clone().appendTo($("a")); 复制$("#test")然后插入到<a>后,执行后相当于
empty() 删除匹配对象的所有子节点

eg:$("#test").empty();
$("#a").prepend ($("div"))把id为a的元素里面替换成div包括div里面的元素
remove() 删除匹配对象
注意区分empty()，empty()移出匹配对象的子节点，remove()，移出匹配对象
wrap(htm) 将匹配对象包含在给出的html代码内

eg:$("p").wrap("<div class='wrap'></div>");

wrap(elem) 将匹配对象包含在给出的对象内
$("p").wrap( document.getElementById('content') );

遍历、组合
add(expr) 在原对象的基础上在附加符合指定表达式的[b]jquery对象[/b]

执行$("p")得到匹配<p>的对象，有两个，add("span")是在("p")的基础上加上匹配<span >的对象，所有一共有3个，从上面的函数运行结果可以看到$("p").add("span")是3个对象的集合，分别是[<p>Hello</p>]，[<p><span>Hello Again</span></p>]，[<span>Hello Again</span>]。
add(el) 在匹配对象的基础上在附加指定的dom元素。
$("p").add(document.getElementById("a"));
add(els) 在匹配对象的基础上在附加指定的一组对象，els是一个数组。
ancestors (expr) 在ancestors（）的基础上之取符合表达式的对象
children() 返回匹配对象的子介点

children() 返回匹配对象的子介点

children(expr) 返回匹配对象的子节点中符合表达式的节点

parent () parent (expr)取匹配对象父节点的。参照children帮助理解
contains(str) 返回匹配对象中包含字符串str的对象

end() 结束操作,返回到匹配元素清单上操作前的状态.
filter(expr) filter(exprs) 过滤现实匹配符合表达式的对象 exprs为数组，注意添加“[ ]”

find(expr) 在匹配的对象中继续查找符合表达式的对象

is(expr) 判断对象是否符合表达式,返回boolen值

next() next(expr) 返回匹配对象剩余的兄弟节点

prev () prev (expr) 参照next理解
not(el) not(expr) 从jQuery对象中移出匹配的对象，el为dom元素，expr为jQuery表达式。

siblings () siblings (expr) [b]jquery匹配对象中其它兄弟级别的对象[/b]

其他
addClass(class) 为匹配对象添加一个class样式
removeClass (class) 将第一个匹配对象的某个class样式移出

attr (key,value) 为第一个匹配对象的设置属性，key为属性名，value为属性值

removeAttr (name) 将第一个匹配对象的某个属性移出
toggleClass (class) 将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象

3:css操作

$("#a").background(“red”)将该对象的background样式设为redjQuery提供了以下方法，来操作css
background () background (val) color() color(val) css(name) css(prop)
css(key, value) float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)
css(name) 获取样式名为name的样式
$("#a").css("color") 将得到样式中color值red，("#a").css("background ")将得到blue
css(prop) prop是一个hash对象，用于设置大量的css样式
$("#b").css({ color: "red", background: "blue" });
最终效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" }，hash对象，color为key，"red"为value，
css(key, value) 用于设置一个单独得css样式
$("#b").css("color","red");最终效果是<p id="b" style="color:red">test</p>

4:javascript处理

$.browser() 判断浏览器类型，返回boolen值 })当页面载入式判断浏览器类型，可判断的类型有msie、mozilla、opera、safari
$.each(obj, fn) obj为对象或数组，fn为在obj上依次执行的函数，注意区分$().each()

$(function(){
if($.browser.msie) {
alert("这是一个IE浏览器");}
else if($.browser.opera) {
alert("这是一个opera浏览器");}
})

$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
$.extend(obj, prop) 用第二个对象扩展第一个对象

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
执行后settings对象为{ validate: true, limit: 5, name: "bar" }
$.grep(array,fn) 通过函数fn来过滤array，将array中的元素依次传给fn，fn必须返回一个boolen，如fn返回true，将被过滤

$.merge(first, second) 两个参数都是数组，排出第二个数组中与第一个相同的，再将两个数组合并

$.trim(str) 移出字符串两端的空格
show() 显示匹配对象
hide(speed) 以一定的速度隐藏匹配对象，其大小（长宽）和透明度都逐渐变化到0，speed有3级("slow", "normal", "fast")，也可以是自定义的速度。
show(speed) 以一定的速度显示匹配对象，其大小（长宽）和透明度都由0逐渐变化到正常
hide(speed, callback) show(speed, callback) 当显示和隐藏变化结束后执行函数callback
toggle() toggle(speed) 如果当前匹配对象隐藏，则显示他们，如果当前是显示的，就隐藏，toggle(speed),其大小（长宽）和透明度都随之逐渐变化。
5:动态效果
6:event事件
7:ajax支持
8:插件程序

说明：$(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个$(fn)当文档载入时，同时执行所有函数！参数：fn (Function):当文档载入时执行的函数！

each一般结合find使用$("tab").find('tr').eq(0).find("td").each(function(i){

$("tab").find('tr').eq(0).find("td").eq(i).text();

});查找某个表格下第一行下的每一列的值

我将从以下几个内容来讲解jQuery的使用:
1:核心部分