隐藏和显示以及切换隐藏和显示;
hide和show,
$("#id").onclick(function(){
$("#id").show(speed); 显示 // speed可以取的值为slow,fast,和毫秒
$("#id").hide(speed); 隐藏
$("#id").toggle(speed) 切换两张状态
})
淡入淡出有四种方法
$("#id").onclick(function(){
$("#id").fadeln() // 淡入已经隐藏掉的元素
$("#id").fadeout() // 淡出显示的元素
$("#id").fadetoggle() //在上面两种效果之间切换
$("#id").fadeto() // 允许渐变为给定的一个透明度
})
滑动有三种方法
$("#id").onclick(function(){
$("#id").slidedowm() // 让元素向下滑动
$("#id").slideup() // 让元素向上滑动
$("#id").slidetoggle() //在上面两种效果之间切换
})
动画 $(selector).animate({params},speed,callback);
params //必选,规定形成动画的css属性
speed // 规定动画的时长
callback //规定动画完成之后的回调函数
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
动画使用相对值(元素相对与元素本身的值)的话是用+=来表示
height:"+=250px"
动画有队列功能,如果编写了多个animate的话,它会逐一实现
停止动画
$("#id").onclick(function(){
$("#id").stop(stopAll,goToEnd); // 第一个参数是仅仅停止当前的动画,允许队列中的后面的动画执行,
第二个参数是是否立即完成当前动画 两个参数默认都为false
}
attr是获取元素的属性
$("#id").attr("href","www.baidu.com"); // 第一个参数是要获取的属性,第二个参数是你要修改的内容
jquery添加元素
$("#id").onclick(function(){
$("#id").append() // 用于在元素末尾添加元素
$("#id").perpend() // 用于在元素开头添加元素
$("#id").after() // 用于在被选元素之后添加元素
$("#id").before() // 用于在被选元素之前添加元素
}
jquery删除元素
$("#id").onclick(function(){
$("p").remove("#one") // 用于删除被选元素以及它的字元素 可以接受一个jquery当中的所有选择器参数 用来过滤其他元素
如上面;删除id=one的元素中的所有p元素
$("#id").empty() // 用于删除被选元素的子元素
}
jquery获取并设置css样式
$("button").click(function(){
$("h1,h2,p").addClass("blue"); //里面可选的参数为style里面地class类样式 可以为元素添加一个或者多个class
$("h1,h2,p").removeclass("blue"); //删除元素当中的class
$("h1,h2,p").toggleclass("blue"); //用于给元素切换添加删除class地操作
$("h1,h2,p").css("background-color":"yellow"); //用于给元素添加一个或者多个css属性
});
jquery的尺寸
$("#id").width(); // 用于设置或者返回元素的宽度(不包括内外边距以及边框)
$("#id").innerwidth(); // 用于设置或者返回元素的宽度(包括内边距);
$("#id").outerwidth(); // 用于设置或者返回元素的宽度(包括内外边距以及边框)
jquery的遍历
$("#id").parent(); // 用于返回被选元素的父元素
$("#id").parents("ul"); //用于返回被选元素的所有祖元素,一直到html根元素 可以接受一个参数,用于过滤对祖先元素的筛选
如上,返回被选id元素的祖元素当中的ul元素
$("#id").parentuntil("div"); //用于返回两个给定元素之间的所有元素
$("#id").children(); //用于返回被选元素的所有直接子元素,不会返回孙元素
$("#id").find("*"); //用于返回被选元素的所有后代元素 可以接受一个参数,参数是什么,就返回被选元素的所有后代的这个参数的元素
$("#id").siblings("p"); //用于返回被选元素的所有同胞兄弟元素 可以接受一个参数,用来过滤其他元素
如上,返回被选元素的所有兄弟p元素
$("#id").next(); //用于返回被选元素的下一个兄弟元素
$("#id").nextAll(); //用于返回被选元素之后的所有兄弟元素
$("#id").nextuntil("#id"); //用于返回被选元素与参数之间的所有兄弟元素
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。
jquery过滤
三个最基本的方法
$("#id p").first(); //返回被选元素当中的第一个p元素
$("#id p").last(); //返回被选元素当中的最后一个p元素
$("p").eq(2); // 参数为 索引值 返回html里面被选元素索引值为3的元素
$("p").filter("#id"); //允许你放入一个参数,返回的是被选元素中带有这个参数的所有元素
如上,返回被选元素中带有#id的所有元素
$("p").not("#id"); //允许你放入一个参数,返回的是被选元素中所有不带有这个参数的所有元素
如上,返回被选元素中不带有#id的所有元素