② 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>