jQuery学习第二天（操作样式和属性、动画及节点）

最新推荐文章于 2022-02-18 17:01:07 发布

阿发学测试

最新推荐文章于 2022-02-18 17:01:07 发布

阅读量153

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42603991/article/details/101633421

版权

前端学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

jQuery操作样式

css操作

css(name,value)
css(obj)

 $(function () {
    //css(name, value)
    //修改单个样式
    //name:样式名 value:样式值
    /*
    $("li")
      .css("backgroundColor", "pink")
      .css("color", "red")
      .css("fontSize", "32px");
    */
    
    //css(obj)
    //修改多个样式
    /*
    $("li").css({
      backgroundColor:"pink",
      color: "red",
      fontSize:"32px",
      border: "1px solid black"
    });
    */
    //获取样式
    //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");
    
    //A:20  b:21  c:22   d:23  e:16  f:[20, 21, 22, 23]
    
    //隐式迭代：
      // 设置操作的时候：会给jq内部的所有对象都设置上相同的值。
      // 获取的时候：只会返回第一个元素对应的值。
    console.log($("li").css("fontSize"));//16px
  
  });

class操作

addClass()
removeClass()

$(function () {
    
    $("input").eq(0).click(function () {
      
      // 添加一个类
      $("li").addClass("basic");
    });
  
    $("input").eq(1).click(function () {
      $("li").addClass("bigger");
    });
    
    $("input").eq(2).click(function () {
      
      //移除一个类
      $("li").removeClass("bigger");
    });
    
    //判断类
    $("input").eq(3).click(function () {
    
      //移除一个类
      console.log($("li").hasClass("bigger"));;
    });
  
  
    $("input").eq(4).click(function () {
    
      //判断li有没有basic类，如果有，就移除他，如果没有，添加他
      //toggle
      $("li").toggleClass("basic");
    });
  });

案例：tab栏切换
在这里插入图片描述

$(function () {
      
      $(".tab-item").mouseenter(function () {
        //两件事件
        $(this).addClass("active").siblings().removeClass("active");
        var idx = $(this).index();
        $(".main").eq(idx).addClass("selected").siblings().removeClass("selected");
      });
      
    });

jQuery操作属性

attr操作

attr(name,value)
attr(obj)

 $(function () {
    //用法和css一样
    //设置单个属性
    //attr(name, value)
    //$("img").attr("alt", "图破了");
    //$("img").attr("title", "错错错错");
    
    //设置多个属性
    /*$("img").attr({
      alt:"图破了",
      title:"错错错",
      aa:"bb"
    })*/
    console.log($("img").attr("alt"));
  });

prop操作

对于布尔类型的属性，不要attr方法，应该用prop方法
prop用法跟attr方法一样。

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

案例：表格全选
在这里插入图片描述

$(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)
      }
  
    });
    
  });

jQuery动画

三组基本动画

1.show/hide

$(function () {
    
    $("input").eq(0).click(function () {
      
      //show不传参数，没有动画效果
      //$("div").show();
      
      //show(speed)
      //speed:动画的持续时间  可以是毫秒值 还可以是固定字符串
      //fast:200ms   normal:400ms   slow:600
      //$("div").show("ddd");
    
      // show([speed], [callback])
      $("div").show(1000, function () {
        console.log("哈哈，动画执行完成啦");
      })
      
    });
      
    $("input").eq(1).click(function () {
      $("div").hide();
    })
    
  });

2.slideDown/slideUp/slideToggle

3.fadeIn/fadeOut/fadeToggle

案例

下拉菜单案例

 $(function () {
      
      //mouseover：鼠标经过事件
      //mouseout:鼠标离开事件
      
      //mouseenter:鼠标进入事件
      //mouseleave：鼠标离开事件
      
      var $li = $(".wrap>ul>li");
      
      //给li注册鼠标经过事件，让自己的ul显示出来
      $li.mouseenter(function () {
        //找到所有的儿子，并且还得是ul
        
        //stop：停止当前正在执行的动画
        $(this).children("ul").stop().slideDown();
      });
  
      $li.mouseleave(function () {
        $(this).children("ul").stop().slideUp();
      });
      
      
    });

京东轮播图

  $(function () {
    
    var count = 0;
    
    $(".arrow-right").click(function () {
      count++;
      
      
      if(count == $(".slider li").length){
        count = 0;
      }
      console.log(count);
      //让count渐渐的显示，其他兄弟渐渐的隐藏
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    });
    
    $(".arrow-left").click(function () {
      count--;
  
      if(count == -1){
        count = $(".slider li").length - 1;
      }
      console.log(count);
      //让count渐渐的显示，其他兄弟渐渐的隐藏
      $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
    })
    
  });

自定义动画

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

第一个参数：对象，要执行动画的css属性，带数字 (必选)
第二个参数：speed 动画的执行时间(可选)
第三个参数：动画的执行效果默认为swing(缓动) ，可以是linear(匀速)
第四个参数：回调函数-动画执行后立即执行的回调函数(可选)

$(function () {
    $("input").eq(0).click(function () {
    
      $("#box1").animate({left:800}, 8000);
      
      //swing:秋千 摇摆
      $("#box2").animate({left:800}, 8000, "swing");
      
      //linear:线性 匀速
      $("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("hahaha");
      });
    })
  });

动画队列与停止动画

在同一个元素上执行多个动画，那么对于多个动画来说，后面的画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）

stop:停止当前正在执行的动画
stop(clearQueue,jumpToEnd);
clearQueue:是否清除动画队列 true false
jumpToEnd:是否跳转到当前动画的最终效果 true false

手风琴案例
在这里插入图片描述

$(function () {
    var $li = $("#box li");
    //循环遍历，为每个li显示图片
    for (var i = 0; i < $li.length; i++) {
      $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)");
    }
  
  
    //给所有的li注册鼠标经过事件
    $li.mouseenter(function () {
      $(this).stop().animate({width:800}).siblings().stop().animate({width:100});
    }).mouseleave(function () {
      $li.stop().animate({width:240});
    });
    
  });

音乐导航案例
在这里插入图片描述

$(function () {
      $(".nav li").mouseenter(function () {
        $(this).children("span").stop().animate({top:0});
        
        var idx = $(this).index();
        //让对应的音乐播放, 音乐播放的方法时DOM对象。
        $("audio").get(idx).load();
        $("audio").get(idx).play();
      }).mouseleave(function () {
        $(this).children("span").stop().animate({top:60});
      });
      
    });

jQuery节点操作

创建节点

$(htmlStr）
htmlStr:html格式的字符串
$(“这是一个span元素”);

$(function () {
//    var box = document.getElementById("box");
//
//    var a = document.createElement("a");
//    box.appendChild(a);
//    a.setAttribute("href", "http://web.itcast.cn");
//    a.setAttribute("target", "_blank");
//    a.innerHTML = "传智大前端";
    
    $("#box").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
    
  });

添加节点

append appendTo
prepend prependTo
before
after

城市选择案例
在这里插入图片描述

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

微博发布案例
在这里插入图片描述

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

清空与删除节点

empty:清空指定节点的所有元素，自身保留（清理门户）

内存泄露：
    $("div").html("");
    清理门户（）
    $("div").empty();//(推荐使用)

remove():删除节点

克隆节点

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

弹幕效果案例

在这里插入图片描述

$(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();
      }
    });
    
  });

阿发学测试

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习第二天（操作样式和属性、动画及节点）

jQuery操作样式css操作css(name,value)css(obj) $(function () { //css(name, value) //修改单个样式 //name:样式名 value:样式值 /* $("li") .css("backgroundColor", "pink") .css("color", "...
复制链接

扫一扫

专栏目录