随笔-67  评论-522  文章-0  trackbacks-0
    在上一篇jQuery学习总结(一)中,简单的介绍了jQuery提供对JavaScript开发的四个部分的支持,这篇文章将详细的用代码示例来说明如何实现。
    1、DOM
    jQuery提供强大的DOM查找功能,并且能够很方便的进行取值和赋值操作。查找元素最主要的是使用选择器,可能还会需要筛选器的配合。从项目中来看,给DOM元素设置idname,会比较容易实现需求。我列一下使用得最多的几种选择器#id.classelement:eq[attribute^=value][attribute$=value][attribute=value][attribute]:checked:selected等等。另外jQuery提供的属性也是强大利器:attrremoveAttraddClassremoveClasshtmlval等,在实际中,大量的被应用。在文档处理及CSSappendcloneemptycssheightwidth也是使用频率很高的。关于这部分的知识很复杂,精髓我可写不出来,我只能把我在项目中的体会、感悟、想法记录下来,给需要的人一点帮助就很开心了。下面来看几个例子。

$("#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的大部分内容,也有许多示例帮助理解,另外多看帮助文档也是一个非常好的学习方式。我深深的体会到,只有多动手做,才会有提高。光学不练是一点用处都没有的。特别是在项目中学习,那速度,真是"飞"一般的感觉啊!哈哈,我们下次继续讨论。
    本文为菠萝大象原创,如要转载请注明出处。
posted on 2010-02-14 12:27 菠萝大象 阅读(3867) 评论(5)  编辑  收藏 所属分类: jQuery

评论:
# re: jQuery学习总结(二) 2010-04-19 20:12 | 三国阿海
对了,你有没有好一点的书介绍给我啊,我要JQuery的.  回复  更多评论
  
# re: jQuery学习总结(二) 2010-04-19 21:48 | 菠萝大象
@三国阿海
你要看的话,我建议你看jQuery in Action,图灵的。这本书写的很不错,我自己有,而且写jQuery学习总结的时候,又反复看了一下。我不得不说下,在这些技术书籍方面,外国人确实比较厚道,把知识点,要点都写出来了,不像国内大部分作者,纯粹是骗稿费。太让人气愤了。  回复  更多评论
  
# re: jQuery学习总结(二) 2010-04-19 22:46 | 三国阿海
可惜我看不懂老外写的字。

他们都不能用中文表达自己意思,傻傻的哦。  回复  更多评论
  
# re: jQuery学习总结(二) 2010-04-19 22:48 | 三国阿海
我在Google推荐的网站中找到你的,它发送到我Yahoo邮箱了。

关键字struts2,很牛叉哦你.  回复  更多评论
  
# re: jQuery学习总结(二) 2010-04-20 08:42 | 菠萝大象
@三国阿海
jQuery in Action有中文版啊,翻译的还可以。我没在意google的搜索,不过前几天发现有人转我的SSH2全注解实例详解文章又不注明出处,让我很气愤。所以决定以后的文章中大量使用图片并加上水印。我并不反对你们转载,但请注明一下出处吧,这很难吗?  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: