学习日记: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>