学习日记:jQuery之what,why,where,how及应用 (下)

② jQuer元素的方法

//当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
  $("#login").focus();
});

//元素失去焦点的时候触发一个事件
$("p").blur(function(){});

//元素内容或者状态的时候改变的时候触发一个事件
$("p").change(function(){});

//单(双)击元素的时候触发一个事件
$("p").click(function(){});
$("p").dblclick(function(){});

//当元素加载错误的时候触发，比如给定的图片路径加载不了
$("image").error(function(){});

//键盘按下(按住，弹起)的时候触发一个事件
$("p").keydown(function(){});
$("p").keypress(function(){});
$("p").keyup(function(){});

//鼠标点击下(弹起)元素的时候触发一个事件
$("p").mousedown(function(){});
$("p").mouseup(function(){});

//鼠标进入(移出)元素的时候触发一个事件
$("p").mousemove(function(){});
$("p").mouseout(function(){});

//滚动条滚动的时候执行
$(window).scroll(function)

//改变窗口大小的时候触发
$(window).resize(function(){});

//页面关闭的时候触发
$(window).unloda();

//阻止表单提交
$("form").submit(function(){
 return false;
});

//text内容被选中的时候执行
$(":text").select(function(){});

③对元素的操作

//遍历变量的方法
    var $nameArray = $(nameArray);
    $nameArray.each(function(){
        //this代表object类型
        alert(this.name + ":"+this.sal);
    });

//div元素插入到ul元素之后(父子关系)
    $("ul").append( $("div") );     
//div元素插入到ul元素之前(父子关系)
    $("ul").prepend( $("div") );
//div元素插入到ul元素之前(兄弟关系)
    $("ul").before($("div"));
//div元素插入到ul元素之后(兄弟关系)
    $("ul").after($("div"));

//获取或者设置元素的属性
    $("form input:first").attr("type");
    $("form input:first").attr("type","text");

//移除元素属性
    $("form input:first").removeAttr("type");

//添加(移除)元素Class
    $("form input:first").addClass("myClass");
    $("form input:first").removeClass("myClass");
//切换样式,即有样式变为无样式 无样式变为有样式
    $("form input:first").removeClass("myClass");
//判断是否拥有样式
    $("form input:first").hasClass("myClass");

//移除元素(JavaScript只能通过父元素移除子元素,jQuery能自己移除自己)
        $("#buttonID").remove();

//获取元素的value 和标签体内容
    $("#textID").val();
    $("#textID").text();

//复制一个元素(包不包括元素的方法)
    var $old = $("#buttonID");
    var $new = $old.clone();      //只复制元素
    var new1 = $old.clone(true); //复制元素+方法行为

//替代元素
    var $text = $("#textID")
    $("buttonID").replaceWith($text);

//获取(设置)位置
    var offset = $("img").offset();
    var x = offset.left;
    var y = offset.right;
    var offset = $("img").offset({
                                    top:x,
                                    left:y
                                    });


//获取(设置)图片的宽和高
    var $img = $("#imageID");
    var width = $img.width();
    var height = $img.height();
    $img.width(width);
    $img.heigth(height);

//获取直接子元素内容 不包括子元素的子元素
    $("form").children();

//获取下一个(上一个,所有)兄弟内容
    $("#divID").next;
    $("#divID").prev;
    $("#divID").siblings("p");

④动画方法

//5秒缩小显示(隐藏)
        //图片隐蔽
        $("img").hide(5000);

        //休息3秒
        window.setTimeout(function(){

            //图片显示
            $("img").show(5000);

        },3000)

//渐变隐藏(显示)
    $("#imgID").fadeOut(3000)
    $("#imgID").fadeIn(3000);

//隐藏或者显示元素(或者隐藏和显示交替),能做出类似于树形列表的效果


    <div>
        0<br/>  
        1<br/>  
        2<br/>  
        3<br/>  
        4<br/>  
        5<br/>  
        6<br/>  
        7<br/>  
        8<br/>  
        9<br/>  
    </div> 

    <input type="button" value="单机"/>

    <script type="text/javascript">

        $(":button").click(function(){
            //div隐藏
            //$("div").slideUp(100);
            //div显示
            //$("div").slideDown(100);
            //div上下移动
            $("div").slideToggle(100);
        });
    </script>