jQuery学习总结（二）
2010-07-16 17:23
579 查看
在上一篇jQuery学习总结（一）中，简单的介绍了jQuery提供对JavaScript开发的四个部分的支持，这篇文章将详细的用代码示例来说明如何实现。
1、DOM
jQuery提供强大的DOM查找功能，并且能够很方便的进行取值和赋值操作。查找元素最主要的是使用选择器，可能还会需要筛选器的配合。从项目中来看，给DOM元素设置id及name，会比较容易实现需求。我列一下使用得最多的几种选择器：#id、.class、element、:eq、[attribute^=value]、[attribute$=value]、[attribute=value]、[attribute]、:checked、:selected等等。另外jQuery提供的属性也是强大利器：attr、removeAttr、addClass、removeClass、html、val等，在实际中，大量的被应用。在文档处理及CSS中append、clone、empty、css、height、width也是使用频率很高的。关于这部分的知识很复杂，精髓我可写不出来，我只能把我在项目中的体会、感悟、想法记录下来，给需要的人一点帮助就很开心了。下面来看几个例子。
$("#ctr_id").val(id); //给合同ID赋值
$("#ctr_id").val(); //取得合同ID值
$("#ctr_sum").attr("disabled","disabled"); //将合同金额输入框设为不可用
$("[name=ctrRadio]:checked").attr("checked",""); //取消已选中的单选框
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录
$("[name='btndel']").index(obj); //obj是一个按钮对象，这表示该按钮位于相同名称按钮的第几个，返回的索引值从0开始
$("ctr_advance").html("更多信息"); //给span设置HTML内容，此属性类似innerHTML
2、事件
我再一次，强烈的建议，给DOM元素添加的行为，一定不要和DOM元素混在一起，一定要和它们分离开来，这里面有规范，也有教训。添加事件时我们一般在初始化的时候进行，让我们把<body onload="">这种写法抛弃掉，采用jQuery的写法。jQuery的代码是可以跨浏览器运行的，这样的好处对开发人员来说无疑是非常棒的！
$(document).ready(function(){
// 在这里写初始化代码
});
也可以简写成：
$(function(){
// 在这里写初始化代码
});
关于事件类型，帮助文档里面说得也比较详细了，不清楚的话就查一下。为元素绑定事件，正规说法是写成bind形式，其实我们一般都是采用简写方式：
$(function(){
// 绑定click事件
jQuery("#btn_add").click(
function(){
alert("你点击的是新增按钮");
}
);
// 对一组控件进行事件绑定
$("[name=ctrRadio]").each(function(index,item){
// 这里的index是索引，从0开始，item是当前对象，也即this，可以省略这两个参数
$(this).click(
function(){
alert($(this).attr("id"));
}
);
});
});
jQuery事件中定义的函数全都是一个匿名函数，如果在某些情况下，匿名函数内部要执行的代码是一样的，这样重复定义就显得不规范了。因此，可以把这部分代码提取出来，写成一个函数，指定一个具体的名称，再调用这个函数，看下面这个例子：
function doSame(){}
$(“btn_a”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
除了一般的响应事件，jQuery还有两个合成事件——hover()和toggle()。这两个事件的使用频率也比较高。
hover()方法的语法结构为：hover(over,out);
它用于模仿鼠标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(over)；当鼠标移出这个元素时，会触发指定的第二个函数(out)。
$("td").hover(
function (){
$(this).addClass("hover");
},
function (){
$(this).removeClass("hover");
}
);
toggle()方法的语法结构为：toggle(fn1,fn2,......fnN);
它用于模仿鼠标连续点击事件，当第一次点击元素，则触发指定的第一个函数(fn1)，当再次点击同一元素时，则触发指定的第二个函数(fn2)，如果有更多函数，则依次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。通常情况是定义两个函数，在显示与隐藏中经常这样使用。对toggle事件来说，其实已经包含了click事件。
$("#ctr_advance").toggle(
function () {
$("#tbl_advance").show();
$(this).html("隐藏");
},
function () {
$("#tbl_advance").hide();
$(this).html("更多信息");
}
);
<div id="ctr_advance">更多信息</div>
<div id="ctr_info" class="hide">代码省略</div>
3、动画
show()和hide()是jQuery中最基本的动画。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"。
比如，使用如下代码隐藏element元素：
$("element").hide(); //通过.hide(),隐藏元素
这段代码的功能跟用css()方法设置display属性效果相同：
element.css("display", "none"); //通过.css(),隐藏元素
当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline")：$("element").show();
fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法则相反。这是一组对应的渐变效果， 淡入与淡出。看下面的代码：
$(function(){
$("[name=radio]").each(function(){
$(this).hide().fadeIn(2000).fadeOut(2000);
});
});
<input type="radio" name="radio" id="a" />1
<input type="radio" name="radio" id="b" />2
<input type="radio" name="radio" id="c" />3
<input type="radio" name="radio" id="d" />4
<input type="radio" name="radio" id="e" />5
<input type="radio" name="radio" id="f" />6
运行例子看下效果，明白了吧？
滑动动画方法是slideUp()和slideDown()，slideDown()方法，将使元素由上至下延伸显示，slideUp()方法正好相反。
$("#div_click").toggle(
function(){
$("#radios").slideUp("slow");
},
function(){
$("#radios").slideDown("slow");
}
);
<div id="div_click">click here</div>
<div id="radios">
<div><input type="radio" name="radio" id="a" />1</div>
<div><input type="radio" name="radio" id="b" />2</div>
<div><input type="radio" name="radio" id="c" />3</div>
<div><input type="radio" name="radio" id="d" />4</div>
<div><input type="radio" name="radio" id="e" />5</div>
<div><input type="radio" name="radio" id="f" />6</div>
</div>
slideToggle()方法是前面两者的合成，因此上面的例子也可以改写成这样：
$("#div_click").click(
function(){
$("#radios").slideToggle("slow");
}
);
另外值得注意的是：在进行页面开发时，我们应该而且也必须使用XHTML规范，它符合W3C标准，是比HTML更规范、更严格的一个标记语言。
上面的例子，如果不加上下面一句，动画会有点小问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
对比这个写法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
试试看看效果会有什么不一样。
4、AJAX
jQuery提供了好几个Ajax实现，一般情况下你可以使用$.get或$.post，当然也可以采用最底层的实现$.ajax，推荐最后一种，它有一个参数，是一个key/value对象，来看个例子
// 在合同编号失去焦点时验证数据库中是否存在相同的编号
$("#contCode").blur(
function(){
var ctrCode = $(this);
if(ctrCode.val() != ''){
//标准的ajax方式
$.ajax({
type:"POST",
url:"${ctx}/contractInfoAction.do?method=validateContractCode",
data:"contract_code="+ctrCode.val(),
success:function(data){
if(data == '1'){ //1为存在相同的合同编号
alert("该合同编号已被使用，请重新输入！");
ctrCode.val('');
ctrCode.focus();
return false;
}
}
});
}
}
);
关于$.get和$.post很简单，帮助文档中说的很清楚，不过有一点需要注意，这两个方法的参数顺序不能搞错了，一定要按它规定的来。而对于$.ajax来说，因为里面是一个key/value对象，所以顺序对它没有影响，只要key/value对应就不会有错。
这四个部分基本上涵盖了jQuery的大部分内容，也有许多示例帮助理解，另外多看帮助文档也是一个非常好的学习方式。我深深的体会到，只有多动手做，才会有提高。光学不练是一点用处都没有的。特别是在项目中学习，那速度，真是"飞"一般的感觉啊！哈哈，我们下次继续讨论。
1、DOM
jQuery提供强大的DOM查找功能，并且能够很方便的进行取值和赋值操作。查找元素最主要的是使用选择器，可能还会需要筛选器的配合。从项目中来看，给DOM元素设置id及name，会比较容易实现需求。我列一下使用得最多的几种选择器：#id、.class、element、:eq、[attribute^=value]、[attribute$=value]、[attribute=value]、[attribute]、:checked、:selected等等。另外jQuery提供的属性也是强大利器：attr、removeAttr、addClass、removeClass、html、val等，在实际中，大量的被应用。在文档处理及CSS中append、clone、empty、css、height、width也是使用频率很高的。关于这部分的知识很复杂，精髓我可写不出来，我只能把我在项目中的体会、感悟、想法记录下来，给需要的人一点帮助就很开心了。下面来看几个例子。
$("#ctr_id").val(id); //给合同ID赋值
$("#ctr_id").val(); //取得合同ID值
$("#ctr_sum").attr("disabled","disabled"); //将合同金额输入框设为不可用
$("[name=ctrRadio]:checked").attr("checked",""); //取消已选中的单选框
$("select[name='contract_kind'] option:eq(0)").attr("selected","selected"); //选中第一条记录
$("[name='btndel']").index(obj); //obj是一个按钮对象，这表示该按钮位于相同名称按钮的第几个，返回的索引值从0开始
$("ctr_advance").html("更多信息"); //给span设置HTML内容，此属性类似innerHTML
2、事件
我再一次，强烈的建议，给DOM元素添加的行为，一定不要和DOM元素混在一起，一定要和它们分离开来，这里面有规范，也有教训。添加事件时我们一般在初始化的时候进行，让我们把<body onload="">这种写法抛弃掉，采用jQuery的写法。jQuery的代码是可以跨浏览器运行的，这样的好处对开发人员来说无疑是非常棒的！
$(document).ready(function(){
// 在这里写初始化代码
});
也可以简写成：
$(function(){
// 在这里写初始化代码
});
关于事件类型，帮助文档里面说得也比较详细了，不清楚的话就查一下。为元素绑定事件，正规说法是写成bind形式，其实我们一般都是采用简写方式：
$(function(){
// 绑定click事件
jQuery("#btn_add").click(
function(){
alert("你点击的是新增按钮");
}
);
// 对一组控件进行事件绑定
$("[name=ctrRadio]").each(function(index,item){
// 这里的index是索引，从0开始，item是当前对象，也即this，可以省略这两个参数
$(this).click(
function(){
alert($(this).attr("id"));
}
);
});
});
jQuery事件中定义的函数全都是一个匿名函数，如果在某些情况下，匿名函数内部要执行的代码是一样的，这样重复定义就显得不规范了。因此，可以把这部分代码提取出来，写成一个函数，指定一个具体的名称，再调用这个函数，看下面这个例子：
function doSame(){}
$(“btn_a”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
$(“btn_b”).click(
function(){
doSame();
}
);
除了一般的响应事件，jQuery还有两个合成事件——hover()和toggle()。这两个事件的使用频率也比较高。
hover()方法的语法结构为：hover(over,out);
它用于模仿鼠标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(over)；当鼠标移出这个元素时，会触发指定的第二个函数(out)。
$("td").hover(
function (){
$(this).addClass("hover");
},
function (){
$(this).removeClass("hover");
}
);
toggle()方法的语法结构为：toggle(fn1,fn2,......fnN);
它用于模仿鼠标连续点击事件，当第一次点击元素，则触发指定的第一个函数(fn1)，当再次点击同一元素时，则触发指定的第二个函数(fn2)，如果有更多函数，则依次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。通常情况是定义两个函数，在显示与隐藏中经常这样使用。对toggle事件来说，其实已经包含了click事件。
$("#ctr_advance").toggle(
function () {
$("#tbl_advance").show();
$(this).html("隐藏");
},
function () {
$("#tbl_advance").hide();
$(this).html("更多信息");
}
);
<div id="ctr_advance">更多信息</div>
<div id="ctr_info" class="hide">代码省略</div>
3、动画
show()和hide()是jQuery中最基本的动画。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为"none"。
比如，使用如下代码隐藏element元素：
$("element").hide(); //通过.hide(),隐藏元素
这段代码的功能跟用css()方法设置display属性效果相同：
element.css("display", "none"); //通过.css(),隐藏元素
当把元素隐藏后，可以使用show()方法将元素的display样式设置为先前的显示状态("block"或"inline")：$("element").show();
fadeIn()和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display:none")。fadeIn()方法则相反。这是一组对应的渐变效果， 淡入与淡出。看下面的代码：
$(function(){
$("[name=radio]").each(function(){
$(this).hide().fadeIn(2000).fadeOut(2000);
});
});
<input type="radio" name="radio" id="a" />1
<input type="radio" name="radio" id="b" />2
<input type="radio" name="radio" id="c" />3
<input type="radio" name="radio" id="d" />4
<input type="radio" name="radio" id="e" />5
<input type="radio" name="radio" id="f" />6
运行例子看下效果，明白了吧？
滑动动画方法是slideUp()和slideDown()，slideDown()方法，将使元素由上至下延伸显示，slideUp()方法正好相反。
$("#div_click").toggle(
function(){
$("#radios").slideUp("slow");
},
function(){
$("#radios").slideDown("slow");
}
);
<div id="div_click">click here</div>
<div id="radios">
<div><input type="radio" name="radio" id="a" />1</div>
<div><input type="radio" name="radio" id="b" />2</div>
<div><input type="radio" name="radio" id="c" />3</div>
<div><input type="radio" name="radio" id="d" />4</div>
<div><input type="radio" name="radio" id="e" />5</div>
<div><input type="radio" name="radio" id="f" />6</div>
</div>
slideToggle()方法是前面两者的合成，因此上面的例子也可以改写成这样：
$("#div_click").click(
function(){
$("#radios").slideToggle("slow");
}
);
另外值得注意的是：在进行页面开发时，我们应该而且也必须使用XHTML规范，它符合W3C标准，是比HTML更规范、更严格的一个标记语言。
上面的例子，如果不加上下面一句，动画会有点小问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
对比这个写法：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN">
试试看看效果会有什么不一样。
4、AJAX
jQuery提供了好几个Ajax实现，一般情况下你可以使用$.get或$.post，当然也可以采用最底层的实现$.ajax，推荐最后一种，它有一个参数，是一个key/value对象，来看个例子
// 在合同编号失去焦点时验证数据库中是否存在相同的编号
$("#contCode").blur(
function(){
var ctrCode = $(this);
if(ctrCode.val() != ''){
//标准的ajax方式
$.ajax({
type:"POST",
url:"${ctx}/contractInfoAction.do?method=validateContractCode",
data:"contract_code="+ctrCode.val(),
success:function(data){
if(data == '1'){ //1为存在相同的合同编号
alert("该合同编号已被使用，请重新输入！");
ctrCode.val('');
ctrCode.focus();
return false;
}
}
});
}
}
);
关于$.get和$.post很简单，帮助文档中说的很清楚，不过有一点需要注意，这两个方法的参数顺序不能搞错了，一定要按它规定的来。而对于$.ajax来说，因为里面是一个key/value对象，所以顺序对它没有影响，只要key/value对应就不会有错。
这四个部分基本上涵盖了jQuery的大部分内容，也有许多示例帮助理解，另外多看帮助文档也是一个非常好的学习方式。我深深的体会到，只有多动手做，才会有提高。光学不练是一点用处都没有的。特别是在项目中学习，那速度，真是"飞"一般的感觉啊！哈哈，我们下次继续讨论。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery的部分学习总结
- jQuery入门学习总结
- jQuery事件学习总结
- jquery-validation 学习总结
- jQuery学习入门总结之css（）和addClass（）的不同
- jQuery技巧总结(转)作为JQuery学习总结
- jquery学习总结
- jQuery学习总结三
- jQuery学习总结四 --- 功能性表格的开发
- jQuery学习总结四 --- 功能性表格的开发
- Jquery学习总结
- jquery 学习总结
- google地图学习总结2(与jquery结合)
- jQuery学习总结（一）
- jQuery学习笔记总结
- JQuery学习总结
- jQuery学习心得总结(必看篇)
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- 近期学习javascript和jquery遇到一些问题的技巧知识总结
- jQuery学习和知识点总结归纳