首页 🎨烦文琐事

Day03


jQuery效果

滑动

slideDown()

$("#flip").click(function(){
  $("#panel").slideDown();
});

用于向下滑动元素

slideUp()

$("#flip").click(function(){
    $("#panel").slideUp();
});

用于向上滑动元素

slideToggle()

$("#flip").click(function(){
  $("#panel").slideToggle();
});

在slideDown()与slideUp()方法之间进行切换

slide语法

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

选填:
speed参数为隐藏/显示的速度,可以取值:"slow","fast",毫秒(不带单位)
clallback参数为隐藏/显示完成后执行的函数名


动画

animate()语法

$(selector).animate({params},speed,callback);

必填:
params定义形成动画的CSS属性

选填:
speed参数为隐藏/显示的速度,可以取值:"slow","fast",毫秒(不带单位)
clallback参数为隐藏/显示完成后执行的函数名

实例:

$("button").click(function(){
    $("div").animate({left:"250px"});
});

可以操作多个CSS属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

使用相对值

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用预定义的值

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

甚至可以设置为"show"、"hide" 或 "toggle",实例见https://www.runoob.com/try/try.php?filename=tryjquery_animation1_toggle

队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

这意味着如果您在彼此之后编写多个animate()调用,jQuery会创建包含这些方法调用的"内部"队列https://www.runoob.com/try/try.php?filename=tryjquery_animation

停止动画

$("#stop").click(function(){
  $("#panel").stop();
});

语法

$(selector).stop(stopAll,goToEnd);

选填:
stopAll参数规定是否应该清除动画队列(默认值: false)
goToEnd参数规定是否立即完成当前动画(默认值: false)


jQuery方法链接

直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。
不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

如需链接一个动作,只需简单地把该动作追加到之前的动作上。

另一种书写方法

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

HTML

DOM操作

获取内容

text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括 HTML 标记)
val() 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

实例见链接1链接2

获取属性

attr() 获取属性值

$("button").click(function(){
  alert($("#runoob").attr("href"));
});



文章评论