jQuery操作css样式、属性、动画、节点
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>
