jQuery（二）

最新推荐文章于 2023-05-27 23:48:40 发布

jhkkk_

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量121

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/linjiehuijh/article/details/83040012

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

7.slideDown()、slideUp()、slideToggle()

8.fadeIn() 、fadeOut() 、fadeToggle

Tips

1.修改CSS样式

css(name, value)
1.1修改单个样式
name:样式名 value:样式值
$("li")
.css("backgroundColor", "pink")
.css("color", "red")
.css("fontSize", "32px");

css(obj)
1.2修改多个样式
$("li").css({
backgroundColor:"pink",
color: "red",
fontSize:"32px",
border: "1px solid black"
});

1.3获取样式
css(name)
name:想要获取的样式
$("li").eq(0).css("fontSize", "20px");
$("li").eq(1).css("fontSize", "21px");
$("li").eq(2).css("fontSize", "22px");
$("li").eq(3).css("fontSize", "23px");

2.隐式迭代

设置操作的时候：会给jq内部的所有对象都设置上相同的值。
获取的时候：只会返回第一个元素对应的值。
console.log($("li").css("fontSize"));//16px

3.class操作

3.1 添加一个类
$("li").addClass("basic");
});

$("input").eq(1).click(function () {
$("li").addClass("bigger");
});

3.2 移除一个类
$("li").removeClass("bigger");
});

3.3判断类

console.log($("li").hasClass("bigger"));;
});

3.4 toggle

判断li有没有basic类，如果有，就移除他，如果没有，添加他
toggle
$("li").toggleClass("basic");

4.属性操作

用法和css一样

4.1设置单个属性
attr(name, value)
$("img").attr("alt", "图破了");
$("img").attr("title", "错错错错");

4.2设置多个属性
/*$("img").attr({
alt:"图破了",
title:"错错错",
aa:"bb"
})*/

5.prop方法

//对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
$(function () {
$("input").eq(0).click(function () {
$("#ck").prop("checked", true);
});

$("input").eq(1).click(function () {
$("#ck").prop("checked", false);
});
});

6.show()和hide()方法

show([speed], [callback])

show(speed)
speed:动画的持续时间可以是毫秒值还可以是固定字符串
fast:200ms normal:400ms slow:600
$("div").show("ddd");

$("div").show(1000, function () {
console.log("哈哈，动画执行完成啦");
})

$("input").eq(1).click(function () {
$("div").hide();
})

7.slideDown()、slideUp()、slideToggle()

//滑入（slideDown）滑出：slideUp
$("input").eq(0).click(function () {

//slideDown：如果不传参数，有一个默认值normal
//$("div").slideDown();
//$("div").slideDown(1000);
$("div").slideDown(1000, function () {
console.log("额呵呵");
});
});

$("input").eq(1).click(function () {
$('div').slideUp();
})

$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').slideToggle();
})

8.fadeIn() 、fadeOut() 、fadeToggle

//淡入：fadeIn 淡出：fadeOut 切换：fadeToggle
$("input").eq(0).click(function () {
$("div").fadeIn(2000);
});

$("input").eq(1).click(function () {
$("div").fadeOut(1000);
})

$("input").eq(2).click(function () {
//如果是滑入状态，就执行滑出的动画，
$('div').fadeToggle();
})

9.自定义动画animate()

//第一个参数：对象，里面可以传需要动画的样式
//第二个参数：speed 动画的执行时间
//第三个参数：动画的执行效果
//第四个参数：回调函数
$("#box1").animate({left:800}, 8000);

//swing:秋千摇摆
$("#box2").animate({left:800}, 8000, "swing");

//linear:线性匀速
$("#box3").animate({left:800}, 8000, "linear", function () {
console.log("hahaha");
});

10.动画队列

//这些动画将存在一个队列当中先后执行
$("div").animate({left:800})
.animate({top:400})
.animate({width:300,height:300})
.animate({top:0})
.animate({left:0})
.animate({width:100,height:100})

11.停止动画stop()

放在执行的动画之前，以清除动画队列当中未完成的动画

$("input").eq(1).click(function () {
//stop:停止当前正在执行的动画
//clearQueue:是否清除动画队列 true false
//jumpToEnd:是否跳转到当前动画的最终效果 true false

//.stop().animate();
$("div").stop(true, true);

12.创捷节点

创建jq对象
var $li = $('<a href="http://www.baidu.com" target="_blank">百度</a>');
console.log($li);

$("div").append('<a href="http://www.baidu.com" target="_blank">百度</a>');

添加到子元素的最后面
$("div").append($("p"));
$("p").appendTo($("div"));
  添加到子元素的最前面
$("div").prepend($("p"));
$("p").prependTo($("div"));

$('div').after($("p"));
$('div').before($("p"));

13.清空及复制节点

//内存泄露：
$("div").html("");
//清理门户（）
$("div").empty();
//移除
$("div").remove();

// false:不传参数也是深度复制,不会复制事件
// true:也是深复制，会复制事件
$(".des").clone(true).appendTo("div");

代码

1.Tap栏切换

<script>
    $(function () {
      
      $(".tab-item").mouseenter(function () {
        $(this).addClass("active").siblings().removeClass("active");
        var $dv=$(this).index();
        $(".main").eq($dv).addClass("selected").siblings().removeClass("selected");
      });
      
    });
  </script>

2.表格全选案例

<script>
  $(function () {
    
    $("#j_cbAll").click(function () {
      //修改下面的哪些checkbox
      $("#j_tb input").prop("checked", $(this).prop("checked"));
    });
  
    $("#j_tb input").click(function () {
  
      if($("#j_tb input:checked").length  ==  $("#j_tb input").length){
        $("#j_cbAll").prop("checked", true)
      }else {
        $("#j_cbAll").prop("checked", false)
      }
  
    });
    
  });
</script>

3.元素左右移动案例

  $(function () {
    $("#btn1").click(function () {
      $("#src-city>option").appendTo("#tar-city");
    });
    
    $("#btn2").click(function () {
      $("#src-city").append($("#tar-city>option"));
    });
    
    $("#btn3").click(function () {
      $("#src-city>option:selected").appendTo("#tar-city");
    });
  
    $("#btn4").click(function () {
      $("#src-city").append($("#tar-city>option:selected"));
    });
  });

4.发布文本案例

<script>
  $(function () {
    
    $("#btn").click(function () {
      
      if($("#txt").val().trim().length == 0) {
        return;
      }
      //就是文本框的值
      $("<li></li>").text($("#txt").val()).prependTo("#ul");
  
      $("#txt").val("");
    })
    
  });
</script>

5.弹幕效果

<script>
  
  $(function () {
    
    //注册事件
    var colors = ["red", "green", "hotpink", "pink", "cyan", "yellowgreen", "purple", "deepskyblue"];
    $("#btn").click(function () {
      var randomColor = parseInt(Math.random() * colors.length);
      var randomY = parseInt(Math.random() * 400);
      
      $("<span></span>")//创建span
        .text($("#text").val())//设置内容
        .css("color", colors[randomColor])//设置字体颜色
        .css("left", "1400px")//设置left值
        .css("top", randomY)//设置top值
        .animate({left: -500}, 10000, "linear", function () {
          //到了终点，需要删除
          $(this).remove();
        })//添加动画
        .appendTo("#boxDom");
      
      
      $("#text").val("");
    });
    
    
    $("#text").keyup(function (e) {
      if (e.keyCode == 13) {
        $("#btn").click();
      }
    });
    
  });

</script>