动画
- 默认显示和隐藏方式
- show([speed,[easing],[fn]])
- hide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn]) –
切换显示和隐藏
- 滑动显示和隐藏方式
- slideDown([speed],[easing],[fn])
- slideUp([speed,[easing],[fn]])
- slideToggle([speed],[easing],[fn])–
切换显示和隐藏
- 淡入淡出显示和隐藏方式
- fadeIn([speed],[easing],[fn])
- fadeOut([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])–
切换显示和隐藏
上述方法的参数详解:
- speed:动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如:1000)
- easing:用来指定切换效果,默认是"swing",可用参数"linear"
- swing:动画执行时效果是 先慢,中间快,最后又慢
- linear:动画执行时速度是匀速的
- fn:在动画完成时执行的函数,每个元素执行一次。
示例:
<script>
//隐藏div
function hideFn(){
/* $("#showDiv").hide("slow","swing",function(){
alert("隐藏了...")
});*/
/*
//默认方式
$("#showDiv").hide(5000,"swing");
*/
/*
//滑动方式
$("#showDiv").slideUp("slow");
*/
//淡入淡出方式
$("#showDiv").fadeOut("slow");
}
//显示div
function showFn(){
/*$("#showDiv").show("slow","swing",function(){
alert("显示了...")
});*/
/*
//默认方式
$("#showDiv").show(5000,"linear");
*/
/*
//滑动方式
$("#showDiv").slideDown("slow");
*/
//淡入淡出方式
$("#showDiv").fadeIn("slow");
}
//切换显示和隐藏div
function toggleFn(){
/*
//默认方式
$("#showDiv").toggle("slow");
*/
/*
//滑动方式
$("#showDiv").slideToggle("slow");
*/
//淡入淡出方式
$("#showDiv").fadeToggle("slow");
}
</script>
遍历
jq的遍历方式
- jq对象.each(callback)
-
语法:
jquery对象.each(function(index,element){});- index:就是元素在集合中的索引
- element:就是集合中的每一个元素对象(也可用this表示)
-
回调函数返回值:
- true:如果当前function返回为false,则结束循环(break)。
- false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
-
//1.获取所有的ul下的li
var citys = $("#city li");
//2. jq对象.each(callback)
citys.each(function (index,element) {
//3.1 获取li对象 第一种方式 this
alert(this.innerHTML);//或者alert($(this).html());
//3.2 获取li对象 第二种方式 在回调函数中定义参数 index(索引) element(元素对象)
alert(index+":"+element.innerHTML);//或者alert(index+":"+$(element).html());
//判断如果是上海,则跳出本次循环
if("上海" == $(element).html()){
//如果当前function返回为false,则结束循环(break)。
//如果返回为true,则结束本次循环,继续下次循环(continue)
return true;
}
- $.each(object, [callback])
$.each(citys,function () {
alert($(this).html());
}
- for…of :jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)
for(li of citys){
alert($(li).html());
}
事件绑定
- jquery标准的绑定方式
- jq对象.事件方法(回调函数);
- 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。如(让文本输入框获得焦点)
- 表单对象.submit();—让表单提交
- on绑定事件/off解除绑定
- jq对象.on(“事件名称”,回调函数)
- jq对象.off(“事件名称”)
- 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
- 事件切换:toggle
-
jq对象.toggle(fn1,fn2…)
- 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2…
-
注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。