Jquery----对css操作和元素添加删除
jquery对css操作：
1、CSS
.css()
- .css("color") -> 获取color css值
- .css("color", "#ff0000") -> 设置值
- .css({"color": "#cccccc", "border": "1px solid #ff0000"}) -> 设置多个值
- .css(["color", "border"]) -> 获取多个值
.offset
- 获取相对位置
- 比较的对象是html (窗口)
.position
- 获取相对已经定位的父标签的位置
- 比较的是最近的那个做过定位的祖先标签
.scrollTop([val])
- 返回顶部的例子
.scrollLeft([val])
尺寸：
height([val|fn])
- 元素的高度
width([val|fn])
- 元素的宽度
innerHeight()
- 带padding的高度
innerWidth()
- 带padding的宽度
outerHeight([soptions])
- 在innerHeight的基础上再加border的高度
outerWidth([options])
- 在innerHeight的基础上再加border的高度
3、动画
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("真没用3");
});
自定义
animate(p,[s],[e],[fn])1.8*
- css属性值都可以设置
- 图片变小（漏气）
4. 事件处理
之前绑定事件的方式：
1. onclick=clickMe(); function clickMe() {}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){}) js事件委派
jQuery绑定事件的方式：
1. $(ele).on("click", function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){}) 这个3.几的版本没有这个方法了，这是3.几以前版本有的方法
3. $("tbody").on("click",".btn-warning",function(){}) jQuery的事件委派
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回首页</title> </head> <style> .c1{ height: 100px; } button{ position: fixed; right: 15px; bottom: 15px; background-color: #336699; } .hide{ display: none; } </style> <body> <div class="c1">1</div> <div class="c1">2</div> <div class="c1">3</div> <div class="c1">4</div> <div class="c1">5</div> <div class="c1">6</div> <div class="c1">7</div> <div class="c1">8</div> <div class="c1">9</div> <div class="c1">10</div> <div class="c1">11</div> <div class="c1">12</div> <div class="c1">13</div> <div class="c1">14</div> <div class="c1">15</div> <div class="c1">16</div> <div class="c1">17</div> <div class="c1">18</div> <div class="c1">19</div> <div class="c1">20</div> <button class="cc hide">返回顶部</button> <script src="jquery.min.js"></script> <script> $(":button").on("click",function () { $(window).scrollTop(0);// 给一个滚动条位置 // $(window).scrollTop(500) }); $(window).scroll(function () { //滚动的时候做的操作 if ($(window).scrollTop()>100){ $(":button").removeClass("hide") } else{ $(":button").addClass("hide") } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸</title> <style> .c1{ height: 100px; width: 80px; background-color: red; } </style> </head> <body> <div class="c1"></div> <script src="jquery.min.js"></script> <script> // 没设置前 console.log($(".c1").height); console.log($(".c1").width); console.log($(".c1").innerHeight()); //100 // 设置后 innerHeight() $(".c1").css("padding","20px"); console.log($(".c1").innerHeight()); //140(自己的高度+padding(内边距) console.log($(".c1").innerWidth()); //120(自己的高度+padding(内边距) // 测试margin $(".c1").css("margin","20px"); //和外边距没有关系，高度还是140 console.log($(".c1").innerHeight()); // outerHeight() console.log($(".c1").outerHeight()); //140(自己的高度+padding(内边距) $(".c1").css("border","10px solid yellow")//120(自己的高度+padding(内边距) console.log($(".c1").outerHeight()); //160(自己的高度+padding(内边距)+border的宽度 // 测试margin $(".c1").css("margin","30px"); //和外边距没有关系，高度还是160 console.log($(".c1").outerHeight()); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css示例</title> </head> <style> .c2{ width: 100px; height: 100px; background-color: red; position: relative; top: 50px; left: 50px; } .c3{ width: 100px; height: 100px; background-color: greenyellow; position: absolute; left: 100px; top: 100px; } </style> <body> <div class="c1">你好那？</div> <div class="c4">哎呦歪</div> <div class="c2"> <div class="c3"></div> </div> <script src="jquery.min.js"></script> <script> // 1、 .css() $(".c1").css("color","#336699");//找到标签，设置单个样式 // console.log($(".c1").css("color"));//获取color css值 $(".c4").css({"color":"red","border":"1px solid green","font-size":"20px"});//设置多个样式 // console.log($(".c4").css(["color","border","font-size"])) // 2、offset console.log($(".c2").offset().left); console.log($(".c2").offset().top); console.log($(".c3").offset()); //{top: 107, left: 58} console.log($(".c3").position());//{top: 100, left: 100} </script> </body> </html>
append prepend after before wrap replacewith empty remove等示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文档操作</title> </head> <ul id="u1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> <p>苍茫的大海是我的哎</p> <ul id="u2"> <li>第一章</li> <li>第二章</li> <li>第三章</li> <li>第四章</li> </ul> <body> <script src="jquery.min.js"></script> <script> // 在内部插入 // append：往后添加（内部） $("#u1").append("<li>456</li>"); var li =document.createElement("li"); $(li).text(666); $(li).appendTo($("#u1")); $("#u1>li:first").appendTo($("#u1")); //吧第一个添加到这个列表中。注意是挪动，不是复制 // // prepend ：往前添加 $("#u2").prepend("<li>啦啦啦</li>"); //吧啦啦啦添加到列表的前面 // var tem = document.createElement("li"); tem.innerText = "哗啦啦。呼啦啦"; $(tem).prependTo($("#u2")) ;//吧啦啦啦添加到列表里（先创建） // // // 在紧挨着外部插入 ( after) $("#u2").after("<div>哈啊好好</div>"); //在列表的后面插入 // var tem = document.createElement("div"); $(tem).text("哎哎呀"); $(tem).css("color","red"); $(tem).insertAfter($("#u2")); //插入到列表的后面 // // before $("#u2").before("<div>111</div>"); //在列表的前面插入 // var tem = document.createElement("div"); $(tem).text("six"); $(tem).css("color","blue"); $(tem).insertBefore($("#u2")) //插入到列表的前面 // // // 包裹 // // wrap和unwrap var tem = document.createElement("div"); $(tem).css("border","1px solid #ff0000"); // $("#u1").wrap($(tem)); //让tem吧列表包起来 // $("#u1").unwrap() ;//不包，不需要加参数 // // wrapAll和wrap和wrapInner var tem = document.createElement("div"); $(tem).css("border","1px solid yellow"); // $("ul").wrapAll($(tem)); //都包 // $("ul").wrap($(tem)); //(自动给每一个ul)单个包 // $("ul").wrapInner($(tem));//里面包 // // // 替换 // // replaceWith和replaceAll 效果一样，方向相反 // $("ul").replaceWith("<p>你愁啥？<p>") ;//吧所有的列表替换成你愁啥？ // $("ul>li").replaceWith("<p>你愁啥？<p>") ;//吧所有的列表中的内容替换成你愁啥？ // // var ele = document.createElement("p"); // $(ele).text("你愁啥？"); // $(ele).replaceAll($("ul")); // // // 删除 // $("ul:first").empty() ;//吧第一个ul清空 和$("ul:first").remove()效果一样 // $("ul>li:first").empty() ;//只是清空内容(位置占用) $("ul>li:last").remove();//清空最后一个li 位置和内容都清空 // console.log($("ul>li")) //只可以找到一个，会找到所有的li变成一个伪列表 // console.log(typeof $("ul>li")) //object // // var a = $("#u1>li:first").detach(); //删除以后还保留着，可以再次使用 // a.appendTo($("#u1")) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>克隆</title> </head> <body> <button class="c1">点我点我</button> <script src="jquery.min.js"></script> <script> $(".c1").on("click",function () { // $(this).after($(this).clone(true)) //应该是将属性也一起克隆了 // $(this).after($(this).clone()) // $(this).after($(this)) //如果没有克隆只是单纯的将this 放在 this后面，没有任何效果 }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> .hide{ display: none; } </style> </head> <body> <img src="timg.jpg" alt=""> <script src="jquery.min.js"></script> <button class="c1">召唤</button> <button class="c2">淡出</button> <button class="c3">淡入</button> <button class="c4">淡出到0.66透明度</button> <button class="c5">淡入淡出</button> <button class="c6">动画:图片变小</button> <script> $(".c1").on("click",function () { // $("img").hide(); // $("img").show(); $("img").toggle(); }); // 淡出 $(".c2").on("click",function () { $("img").fadeOut(); $("img").fadeOut("fast"); //快速的淡出 }); // 淡入 $(".c3").on("click",function () { // 增加淡入的时间 $("img").fadeIn(3000,function () { // alert(123) }); }); // 淡出到0.66透明度 $(".c4").on("click",function () { $("img").fadeTo(3000,0.66,function () { // alert(123) }) }); // 淡入淡出 $(".c5").on("click",function () { $("img").fadeToggle(3000,function () { // alert(123) }) }) // 动画-图片变小 $(".c6").on("click",function () { $("img").animate( { width:"80px", height:"80px" },3000,function () { //这是一个回调函数 alert(123) } ) }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script src="jquery.min.js"></script> </head> <body> <div style="width: 200px;height: 200px;overflow: hidden"> <img src="timg.jpg" style="width: 200px;height: 200px" alt=""> </div> <script> $("img").on("mouseover",function () { $("img").animate( { width:"210px", height:"210px" },1000) }); $("img").on("mouseout",function () { $("img").stop(true,true); $("img").animate( { width:"200px", height:"200px" },1) }) </script> </body> </html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
