在上一篇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、事件$( " #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
我再一次,强烈的建议,给DOM元素添加的行为,一定不要和DOM元素混在一起,一定要和它们分离开来,这里面有规范,也有教训。添加事件时我们一般在初始化的时候进行,让我们把<body οnlοad="">这种写法抛弃掉,采用jQuery的写法。jQuery的代码是可以跨浏览器运行的,这样的好处对开发人员来说无疑是非常棒的!
$(document).ready(
function
(){
// 在这里写初始化代码
});
也可以简写成:
$( function (){
// 在这里写初始化代码
});
关于事件类型,帮助文档里面说得也比较详细了,不清楚的话就查一下。为元素绑定事件,正规说法是写成bind形式,其实我们一般都是采用简写方式:// 在这里写初始化代码
});
也可以简写成:
$( function (){
// 在这里写初始化代码
});
$(
function
(){
// 绑定click事件
( " #btn_add " ).click(
function (){
alert( " 你点击的是新增按钮 " );
}
);
// 对一组控件进行事件绑定
$( " [name=ctrRadio] " ).each( function (index,item){
// 这里的index是索引,从0开始,item是当前对象,也即this,可以省略这两个参数
$( this ).click(
function (){
alert($( this ).attr( " id " ));
}
);
});
});
jQuery事件中定义的函数全都是一个匿名函数,如果在某些情况下,匿名函数内部要执行的代码是一样的,这样重复定义就显得不规范了。因此,可以把这部分代码提取出来,写成一个函数,指定一个具体的名称,再调用这个函数,看下面这个例子:// 绑定click事件
( " #btn_add " ).click(
function (){
alert( " 你点击的是新增按钮 " );
}
);
// 对一组控件进行事件绑定
$( " [name=ctrRadio] " ).each( function (index,item){
// 这里的index是索引,从0开始,item是当前对象,也即this,可以省略这两个参数
$( this ).click(
function (){
alert($( this ).attr( " id " ));
}
);
});
});
function
doSame(){}
$(“btn_a”).click(
function (){
doSame();
}
);
$(“btn_b”).click(
function (){
doSame();
}
);
$(“btn_b”).click(
function (){
doSame();
}
);
除了一般的响应事件,jQuery还有两个合成事件——hover()和toggle()。这两个事件的使用频率也比较高。$(“btn_a”).click(
function (){
doSame();
}
);
$(“btn_b”).click(
function (){
doSame();
}
);
$(“btn_b”).click(
function (){
doSame();
}
);
hover()方法的语法结构为:hover(over,out);
它用于模仿鼠标悬停事件,当鼠标移动到元素上时,会触发指定的第一个函数(over);当鼠标移出这个元素时,会触发指定的第二个函数(out)。
$(
"
td
"
).hover(
function (){
$( this ).addClass( " hover " );
},
function (){
$( this ).removeClass( " hover " );
}
);
toggle()方法的语法结构为:toggle(fn1,fn2,......fnN);function (){
$( this ).addClass( " hover " );
},
function (){
$( this ).removeClass( " hover " );
}
);
它用于模仿鼠标连续点击事件,当第一次点击元素,则触发指定的第一个函数(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、动画function () {
$( " #tbl_advance " ).show();
$( this ).html( " 隐藏 " );
},
function () {
$( " #tbl_advance " ).hide();
$( this ).html( " 更多信息 " );
}
);
<div id="ctr_advance">更多信息</div>
<div id="ctr_info" class="hide">代码省略</div>
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
运行例子看下效果,明白了吧?$( " [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()方法是前面两者的合成,因此上面的例子也可以改写成这样:
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 >
$(
"
#div_click
"
).click(
function (){
$( " #radios " ).slideToggle( " slow " );
}
);
另外值得注意的是:在进行页面开发时,我们应该而且也必须使用XHTML规范,它符合W3C标准,是比HTML更规范、更严格的一个标记语言。function (){
$( " #radios " ).slideToggle( " slow " );
}
);
上面的例子,如果不加上下面一句,动画会有点小问题:
<!
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对应就不会有错。$( " #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 ;
}
}
});
}
}
);
这四个部分基本上涵盖了jQuery的大部分内容,也有许多示例帮助理解,另外多看帮助文档也是一个非常好的学习方式。我深深的体会到,只有多动手做,才会有提高。光学不练是一点用处都没有的。特别是在项目中学习,那速度,真是"飞"一般的感觉啊!哈哈,我们下次继续讨论。
本文为菠萝大象原创,如要转载请注明出处。
http://www.blogjava.net/bolo/archive/2010/02/14/312888.html
转载于:https://blog.51cto.com/memory2014/1350145