1. 技术文章
  2. jQuery操作css样式、属性、动画、节点

jQuery操作css样式、属性、动画、节点

由 我只是一个虾纸丫 提交于 2020-01-31 02:29:49

css样式操作：

　　1、设置单个样式: css(name, value)

　　2、设置多个样式:css(obj)

　　3、获取样式:css(name)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<ul>
  <li>高圆圆</li>
  <li>周二珂</li>
  <li>冯提莫</li>
  <li>郑爽</li>
</ul>

<script src="jquery-1.12.4.js"></script>
<script>
  
  $(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
  
  
  });
  
</script>
</body>
</html>

 

class样式操作：

　　1、添加类

　　　　addClass（name）

　　2、移除类

　　　　removeClass(name)

　　3、判断类

　　　　hasClass(name)

　　4、切换

　　　　toggleClass(name)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    li.basic {
      background-color: pink;
      font-size: 32px;
      color: red;
    }
    
    .bigger {
      font-size: 40px;
    }
  </style>
</head>
<body>
<input type="button" value="添加basic类" >
<input type="button" value="添加bigger类">
<input type="button" value="移除bigger类">
<input type="button" value="判断bigger类">
<input type="button" value="切换类">
<ul>
  <li class="aa bb cc dd">1</li>
  <li class="aa bb cc dd">2</li>
  <li class="aa bb cc dd">3</li>
  <li class="aa bb cc dd">4</li>
</ul>


<script src="jquery-1.12.4.js"></script>
<script>
  $(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");
    });
  });
</script>
</body>
</html>

 

操作属性

　　1、attr

　　　　设置单个属性

　　　　设置多个属性

　　　　获取属性

　　2、prop

　　　　对于布尔类型的属性：disabled，selected，checked，只能用prop

　　3、移除某个属性

　　　　removeAttr(name)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--样式：在style里面写的，用css来操作。-->
<!--属性：在里面里面写的，用attr方法操作。-->
<img src="04.gif" alt="突破了" title="对对对">

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

</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" id="ck">

<script src="jquery-1.12.4.js"></script>
<script>
  
  
  //对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。
  $(function () {
    $("input").eq(0).click(function () {
      $("#ck").prop("checked", true);
    });
  
    $("input").eq(1).click(function () {
      $("#ck").prop("checked", false);
    });
  });
</script>


</body>
</html>

 

动画

　　1、三组基本动画

　　show/hide　　slideDown/slideUp/slideToggle　　fadeIn/fadeOut/fadeToggle

　　2、自定义动画

　　animate(prop, [speed], [swing/linear], [callback])

　　3、停止动画

　　stop

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">

<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(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();
    })
    
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
    #box2 {
      background-color: blue;
      margin-top: 150px;
    }
    
    #box3 {
      background-color: yellowgreen;
      margin-top: 300px;
    }
  </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $("input").eq(0).click(function () {
      
      //第一个参数：对象，里面可以传需要动画的样式
      //第二个参数：speed 动画的执行时间
      //第三个参数：动画的执行效果
      //第四个参数：回调函数
      $("#box1").animate({left:800}, 8000);
      
      //swing:秋千 摇摆
      $("#box2").animate({left:800}, 8000, "swing");
      
      //linear:线性 匀速
      $("#box3").animate({left:800}, 8000, "linear", function () {
        console.log("hahaha");
      });
    })
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: pink;
      position: absolute;
    }
  </style>
</head>
<body>
<input type="button" value="按钮" id="btn">
<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $("#btn").click(function () {
      
      //把这些动画存储到一个动画队列里面
      $("div").animate({left:800})
        .animate({top:400})
        .animate({width:300,height:300})
        .animate({top:0})
        .animate({left:0})
        .animate({width:100,height:100})
    })
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
      display: none;
    }
  </style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div></div>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    $("input").eq(0).click(function () {
      $("div").slideDown(4000).slideUp(4000);
    });
    
    
    $("input").eq(1).click(function () {
      //stop:停止当前正在执行的动画
      //clearQueue:是否清除动画队列 true  false
      //jumpToEnd:是否跳转到当前动画的最终效果 true false
      
      
      //.stop().animate();
      $("div").stop(true, true);
    })
  });
</script>
</body>
</html>

 

操作节点：

　　1、创建节点：$("<span></span>")

　　2、添加节点: append　　appendTo　　prepend　　prependTo　　after　　before

　　3、清空内容: empty

　　4、删除节点: remove

　　5、克隆节点: clone

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
    }
  </style>
</head>
<body>
<!--<a href="http://web.itcast.cn" target="_blank">传智大前端</a>-->
<div id="box"></div>


<script src="jquery-1.12.4.js"></script>
<script>
  $(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>');
    
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
    }
  </style>
</head>
<body>

<div id="box">
  我是内容
</div>

<p>我是外面的p元素</p>

<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    
//    //创建jq对象
//    var $li = $('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
//    console.log($li);
//
//
//    $("div").append('<a href="http://web.itcast.cn" target="_blank">传智大前端</a>');
    
    //添加到子元素的最后面
    //$("div").append($("p"));
    //$("p").appendTo($("div"));
    
    //$("div").prepend($("p"));
    //$("p").prependTo($("div"));
    
//    $('div').after($("p"));
//    $('div').before($("p"));
    
    
  });
</script>

</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      width: 400px;
      height: 400px;
      background-color: pink;
    }
  </style>
</head>
<body>

<div>
  <p>1111</p>
  <p>2222</p>
</div>

<p class='des'>我是外面的p元素</p>


<script src="jquery-1.12.4.js"></script>
<script>
  $(function () {
    
    
    $(".des").click(function () {
      alert("hehe");
    })
    
    //可以清空一个元素的内容
    
    //内存泄露：
    //$("div").html("");
    //清理门户（）
    //$("div").empty();
    
    //
    //$("div").remove();
  
  
    
    //false:不传参数也是深度复制,不会复制事件
    //true:也是深复制，会复制事件
    $(".des").clone(true).appendTo("div");
  });
</script>
</body>
</html>

 

标签
input
jquery动画
button样式
jquery事件
background
meta
Pink
css样式
jquery
css
按钮
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!