jQuery学习总结
什么是jQuery？
jQuery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库，兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
jQuery学习资料
作为初学者，我在学习jQuery时，主要阅读了《jQuery基础教程》这本书，这本书确实很不错，作者写的很详实，译者的翻译也很到位，是入门jQuery的很好的教程。然后就是在开发中参考jQuery的API，API中的例子很有参考价值，这让我们新手都能很快的掌握一种比较流行的技术。这里为大家提供了上面所说的两种参考资料，请见附件。
jQuery的选择器
jQuery最强大的方面之一就是它能够简化DOM遍历任务。一般来说，可以通过html文档中的元素的标签名，id属性，class属性来获取该元素。举例如下：
标签名：$(‘p’)会取得文档中所有的段落。
Id：$(‘#some-id’)会取得文档中具有对应id为some-id的一个元素。这里使用的是“#”号。
Class：$(‘.some-class’) 会取得文档中带有some-class类的所有元素。这里使用的是“.”符合
由于通过选择器获取的元素可能不止一个，因此，一个jQuery对象实际上可以说是一个集合，集合中包含多个被获取到的元素。
有时，我们可能需要通过元素的属性对元素进行选择。在jQuery中，在涉及属性选择符时，jquery使用了XPath中的惯例来标识属性，即将属性前置一个@符号并放在一个方括号中。例如，要选择所有带title属性的链接，可以使用下面的代码：$(‘a[@title]’)。属性选择符允许以类似正则表达式的语法来标识字符的开始(^)和结尾($)，也可以使用(*)来表示字符串中的任意位置。例如，要取得所有电子邮件链接，需要构造一个选择符，用来寻找所有href属性([]@href)且以mailto开头(^=”mailto”)的锚元素。结果如下所示：
$(‘a[@href^=”mailto”]’);
另外，在不前置@符的情况下，可以用来指定包含在另一个元素中的属性。例如取到包含一个ol元素的所有div元素，代码：$(‘div[ol]’)。
在jQuery中，当触发任何事件处理程序时，关键字this引用的都是携带相关行为的DOM元素。通过在事件处理程序中使用$(this)，可以为相应的元素创建一个jQuery对象。例如如下用法：
$("p").click( function () { $(this).addClass(‘selected’); });
jQuery事件
bind():为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。例如：当每个段落被点击的时候，弹出其文本，
$("p").bind("click", function(){
alert( $(this).text() );
});
unbind():bind()的反向操作，从每一个匹配的元素中删除绑定的事件。例如：将段落的click事件取消绑定，
$("p").unbind( "click" );
而实际上，我们经常不这么写，因为jQuery本身已经提供了很多常用的事件的函数供我们调用，例如：将页面内所有段落点击后隐藏，
$("p").click( function () { $(this).hide(); });
更多的事件请参加jQuery的API。
jQuery常用函数
attr(name)：取得第一个匹配元素的属性值。例如：返回文档中第一个图像的src属性值。Html为<img src="test.jpg"/>，则jQuery代码为
$("img").attr("src");
这里要说的是，我们经常通过一个元素的id来获取该元素，但有时我们已经得到了该元素，并且需要获取该元素的id，这里就可以使用attr(‘id’)。
html(),html(val),text(),text(val),val(),val(val)这几对方法就行java中的get与set方法，当参数为空时，相当于get，当参数不为空时，相当于set方法。
DOM操作方法的简单归纳：
1， 要在每个匹配的元素中插入新元素，使用：
.append()
.appendTo()
.prepend()
.prependTo()
2， 要在每个匹配的元素相邻的位置上中插入新元素，使用：
.after()
.insertAfter()
.before ()
.insertBefore()
3， 要在每个匹配的元素外部插入新元素，使用：
.wrap()
4， 要用新元素或文本替换每个匹配的元素（这里函数中带参数），使用： .html()
.text()
5， 要移除每个匹配的元素中的元素，使用：
.empty()
6， 要从文档中移除每个匹配的元素及其后代元素，但不实际删除它们，使用：
.remove()
另外，还有几个比较常用的函数，addClass(),removeClass(),each(),filter()等。
jQuery也具有与Ajax有关的函数。当Ajax向服务器传递数据的时候，可以执行GET请求或者POST请求。例如：使用get和post请求，
$.get(‘e.php’,{’term’:$(this).text()},function(data){…});
$.post(‘e.php’,{’term’:$(this).text()},function(data){…});
另外，还可以序列化表单，这里要使用.serialize()方法。但是需要注意的是，对于多选字段，使用这个方法只能保留一个选项。
以上函数是具有用法不再一一介绍，请参见API。
jQuery对象
jQuery提供了很多的函数，但是使用这些函数的前提是：你使用的对象是JQuery对象。而使一个Dom对象成为一个Jquery对象很简单，通过前面提到的选择器选中了元素之后，获取的实际上就是jQuery对象，而不再是原来的DOM对象。
jQuery对象会使我们对元素的操作更加方便，但是有时我们仍然需要在代码中直接访问DOM对象，这里jQuery提供了get()方法。要访问jQuery对象引用的第一个DOM对象，可以使用.get(0)方法。如果要在循环中使用DOM对象，那么应该使用.get(index)。因此如果想知道带有id=”my-element”属性元素的标签名，可以使用如下代码：
var myTag=$(‘my-element’).get(0).tagName;
$(document).ready()函数
在页面加载时，就需要执行的js方法，可以写在$(document).ready()。window.onload()是传统javascript里一个很常用的方法。而在jQuery中有
$(document).ready(function(){
// Your code here...
});
所起的作用是相同的，而且速度要快很多。
但是，$(document).ready()只能绑定页面加载完成时存在的元素。当要使页面加载以后，新添加在页面的元素能够仍然触发$(document).ready()绑定的事件方法时，可以有如下解决方法：
(1) 将$(document).ready()放入一个函数中，在新元素添加之后再调用该函
数。
(2) 使用live()代替$(document).ready()。Live()是jQuery 1.3中新增的方法。
给所有当前以及将来会匹配的元素绑定一个事件处理函数（比如click事件）。也能绑定自定义事件。目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。 还不支持 blur, focus, mouseenter, mouseleave, change, submit 。与bind()不同的是，live()一次只能绑定一个事件。
(3) 使用JQuery的livequery插件 $("#a").livequery('click',function(){}); 。
(4) 在一般的js的函数中，也可以使用$()获取jquery对象，编写jquery代码，
可以对新生成的DOM对象进行操作。但是缺点是，代码编写的形式可能比较混乱，风格不好。
jQuery插件的使用
使用jQuery插件的方法很简单。第一步是把插件包含在文档的<head>标签中，并确保它位于主jQuery源文件之后。然后就是包含一个自定义的JavaScript文件，并在其中使用插件创建或扩展的方法。比如使用Form插件的时候，在这个自定义文件的$(document).ready()方法中添加一行代码就可以通过Ajax来提交表单： $(document).ready(function(){ $(‘#myForm’).ajaxForm();
});
jQuery操作Table学习总结
jQuery在客户端操作Table学习：不过有很多很多的不足，还需要学习掌握。 <style type="text/css">
.hover
{
background-color:red;
}
</style>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
<input type="checkbox" id="checkall" onclick="checkAll1(this)"/>
</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>地址</th>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox1" />
</td>
<td>张三</td>
<td>男</td>
<td>zhangsan</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox2" />
</td>
<td>李四</td>
<td>男</td>
<td>lisi</td>
<td>安庆</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox3" />
</td>
<td>王五</td>
<td>男</td>
<td>beijing</td>
<td>北京</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox4" />
</td>
<td>无名氏</td>
<td>女</td>
<td>wumingshi</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox5" />
</td>
<td>赵老师</td>
<td>男</td>
<td>zhaolaoshi</td>
<td>浙江</td>
</tr>
<tr>
<td colspan="5" align="center">
<input type="button" id="btnAdd" runat="server" value="新增" onclick="btnAddRow()" />
<input type="button" id="btnDelete" runat="server" value="删除" onclick="btnDeleteRow()" />
<input type="button" id="btnSave" runat="server" value="保存" onclick="btnSaveClick()" /> </td>
</tr>
</table>
操作：
1.鼠标移动行变色
方法一：jQuery中的hover(fun(),fun())方法，参数一：第一个方法是添加样式功能，参数二：第二个方法是取消样式功能
$("#table1 tr").hover(function(){
$(this).children("td").addClass("hover")
},function(){
$(this).children("td").removeClass("hover")
})
方法二：
$("#table1 tr:gt(0)").hover(function() {
$(this).children("td").addClass("hover");
}, function() {
$(this).children("td").removeClass("hover");
});
2.奇偶行不同颜色
$("#table1 tbody tr:odd").css("background-color", "#bbf"); $("#table1 tbody tr:even").css("background-color","#ffc"); $("#table1 tbody tr:odd").addClass("odd")
$("#table1 tbody tr:even").addClass("even")
3.隐藏一行
$("#table1 tbody tr:eq(3)").hide();
4.隐藏一列
方法一：
$("#table1 tr td::nth-child(3)").hide();
方法二：
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});
5.//删除一行
//删除除第一行外的所有行
$("#table1 tr:not(:first)").remove();
//删除指定行
$("#table1 tr:eq(3)").remove();
6.//删除一列
//删除除第一列外的所有列
$("#table1 tr th:not(:nth-child(1))").remove();
$("#table1 tr td:not(:nth-child(1))").remove();
//删除第一列
$("#table1 tr td::nth-child(1)").remove();
7.得到（设置）某个单元格的值
//设置table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html("value");
//获取table1,第2个tr的第一个td的值。
$("#table1 tr:eq(1) td:nth-child(1)").html();
8.插入一行：
/在第二个tr后插入一行
$("<tr><td> 插入3</td><td>插入</td><td>插入</td><td>插 入</td></tr>").insertAfter($("#table7 tr:eq(1)"));
9：获取每一行指定的单元格的值
var arr = [];
$("#table1 tr td:nth-child(1)").each(function (key, value) { arr.push($(this).html());
});
var result = arr.join(',');
//全选或全不选
//方法一：
//全选或全不选 此传入的参数为event 如：checkAll(event)
function checkAll(evt)
{
evt=evt?evt:window.event;
var chall=evt.target?evt.target:evt.srcElement;
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++)
{
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",chall.checked);
}
}
//方法二：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
var tbl=$("#table1");
var trlist=tbl.find("tr");
for(var i=1;i<trlist.length;i++)
{
var tr=$(trlist[i]);
var input=tr.find("INPUT[type='checkbox']");
input.attr("checked",evt.checked);
}
}
//方法三：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").each(function(i){ $(this).attr("checked",evt.checked)
});
}
//方法四：
//全选或全不选 此传入的参数为this 如：checkAll(this)
function checkAll(evt)
{
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked); }
//客户端动态添加行
function btnAddRow()
{
//行号是从0开始，最后一行是新增、删除、保存按钮行 故减去2
var rownum=$("#table1 tr").length-2;
var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>"; var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>";
var
row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));
}
//客户端删除一行
//每次只能删除一行，删除多行时出错
function btnDeleteRow()
{
$("#table1 tr").find("input[type='checkbox']").each(function(i){
if($(this).attr("checked"))
{
if(i!=0)//不能删除行标题
{
$("#table1 tr:eq("+i+")").remove();
}
}
});
}
//这个比上面的要好，可以一下删除多个记录
function btnDeleteRow()
{
$("#table1 tr").each(function(i){
var chk=$(this).find("input[type='checkbox']");
if(chk.attr("id")!="checkall")//不能删除标题行
{
if(chk.attr("checked"))
{
$(this).remove();
}
}
});
}
//客户端保存
function btnSaveClick()
{
//find()方法中我暂时不知道如何设定多个筛选条件，所以下面得不到select列表的值 //$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
//alert($(this).val());
//});
$("#table1 tr").find("td").each(function(i){ if($(this).find("input[type='text']").length>0) {
alert($(this).find("input[type='text']").val()); }
else if($(this).find("select").length>0) {
alert($(this).find("select").val()); }
});
}
一简介11概述随着WEB20及ajax思想在互联网上的快速发展传播陆续出现了一些优秀的Js框架其中比较著名的有PrototypeY…
jQuery学习总结因为项目需要同时也因为兴趣在近一段时间研究和使用了jQuery它真的是太强大了代码非常的优雅和简洁好后悔现在才…
一选择网页元素jQuery的基本设计和主要用法就是quot选择某个网页元素然后对其进行某种操作quot这是它区别于其他函数库的根本…
JQuery学习总结一页面引用ltscriptsrcquotjquery132jsquottypequottextjavascri…
jQuery学习总结什么是jQueryjQuery是继prototype之后又一个优秀的Javascript框架它是轻量级的js库…
一简介11概述随着WEB20及ajax思想在互联网上的快速发展传播陆续出现了一些优秀的Js框架其中比较著名的有PrototypeY…
Jquery开始documentreadyfunction可缩写成function选择器引号中可以有多个一起选择id要求id唯一c…
一选择网页元素jQuery的基本设计和主要用法就是quot选择某个网页元素然后对其进行某种操作quot这是它区别于其他函数库的根本…
jQuery操作Table学习总结jQuery在客户端操作Table学习不过有很多很多的不足还需要学习掌握ltstyletypeq…
1、$(p).html(Hello$(p).text(Hellobworld/b!);bworld/b!);Html和text的区…