JQuery 基本常用方法
$().addClass(css中定义的样式类型); 给某个元素添加样式
$().attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值
$().html(); 获得该元素内的内容(元素,文本等)
$().html(”<b>new stuff</b>”); 给某元素设置内容
$().addClass(”class”) 给某元素添加指定的样式
$().removeClass(”class”) 给某元素删除指定的样式
$().toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$().val(); 获取input元素的值
$().val(value); 设置input元素的值为value
$().siblings() 获取元素的所有兄弟节点
$().css({}) 设置样式
$(”div > p”).css(”border”, “1px solid gray”); 查找所有div的子节点p,添加样式
$.extend(prop) prop是一个jQuery对象,
JQuery Ajax 方法说明
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get(”test.cgi”, { name: “John”, time: “2pm” }, function(data){
alert(”Data Loaded: ” + data);
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后,执行一个函数。这是一个Ajax事件
$(”#msg”).ajaxComplete(function(request, settings){
$(this).append(”<li>Request Complete.</li>”);
});
JQuery Effects 方法说明
show( ) 显示隐藏的匹配元素。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。
slideDown( speed, [callback] ) 通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。这个动画 效果只调整元素的高度,可以使匹配的元素以”滑动”的方式隐藏起来。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中,他们就会立即开始。
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。
eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始。
filter( expr ) 返回与指定表达式匹配的元素集合,可以使用”,”号分割多个expr,用于实现多个条件筛选。
filter( fn ) 利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
is( expr ) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
not( expr ) 从匹配的元素集合中删除与指定的表达式匹配的元素。
slice( start, [end] ) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。
children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点,不包括文本节点)。
contents( ) 取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点,不包括文本节点),如果元素为iframe,则取得其中的文档元素。
find( expr ) 搜索所有与指定表达式匹配的元素。
next( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
nextAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合。
parent( [expr] ) 取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合(不包含根元素)。
prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
基本选择器
$(”#myDiv”) 匹配唯一的具有此id值的元素
$(”div”) 匹配指定名称的所有元素
$(”.myClass”) 匹配具有此class样式值的所有元素
$(”*”) 匹配所有元素
$(”div,span,p.myClass”) 联合所有匹配的选择器
css( name ) 访问第一个匹配元素的样式属性。
css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。
$(”p”).hover(function () {
$(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
var cssObj = {backgroundColor: “#ddd”,fontWeight: “”,color: “rgb(0,40,244)”}
$(this).css(cssObj);
});
css( name, value ) 在所有匹配的元素中,设置一个样式属性的值。
offset( ) 取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性,top和left,属性值为整数。这个函数只能用于可见元素。
var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );
width( ) 取得当前第一匹配的元素的宽度值,
width( val ) 为每个匹配的元素设置指定的宽度值。
height( ) 取得当前第一匹配的元素的高度值,
height( val ) 为每个匹配的元素设置指定的高度值。