1. 遍历元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../jQuery.min.js"></script> </head> <body> <div>1</div> <div>2</div> <div>3</div> <!-- 1. $("div").each( function(index, dom ) { }); 2. $.each($("div"), function(index, dom) { }); 3. 遍历dom对象, 用$("div").each(); 遍历数组, 对象等, 使用$.each(); $().each()：以每一个匹配的元素作为上下文来执行一个函数; $.each()： 它是一个工具, 不同于遍历jQuery对象的 $().each()方法，此方法可用于遍历任何对象; $().each():> 在dom处理上面用的较多 $.each():> 通常用来遍历数组或对象 --> <script> var arr = ["red", "green", "purple"]; $(function () { //1. each方法：遍历元素 $("div").each(function (index, dom) { console.log(index); //索引号 console.log(dom); //dom元素对象 $(dom).css("color", "red"); //dom对象转换为jQuery对象（$(dom)） $(dom).css("color", arr[index]); // }); console.log('---------------------'); //2. $.each()遍历: 主要用来遍历数据，处理数据, 遍历所有对象 // console.log($("div")); $.each($("div"), function (index, dom) { console.log(index); console.log(dom); }); console.log('---------------------'); //3. $.each()很好的遍历数组 $.each(arr, function (index, ele) { console.log(index); console.log(ele); }); console.log('---------------------'); //4. $.each()遍历对象 $.each({ name: 'XingWei', age: 23 }, function (index, ele) { console.log(index); console.log(ele); }); }); </script> </body> </html>
2. 元素操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../jQuery.min.js"></script> </head> <body> <ul> <li>原先的li</li> </ul> <div class="test">原先的div</div> <p>我是段落</p> <!-- 1. $(); 2. append() / prepend(); // 向每个匹配的元素内部追加内容 3. after() / before(); // 在每个匹配的元素之后/之前插入内容 3. remove(); 4. empty(); --> <script> $(function () { // 1.创建元素: $('标签') var li = $("<li>动态创建的li</li>"); // 2.添加元素: // (1) 内部添加 append, prepend ; // $("ul").append(li); $("ul").prepend(li); $("p").append($("<span>HelloWorld</span>")); //将span追加到了p的内部的后面 $("p").prepend($("<span>Before, HelloWorld</span>")); //将span追加到了p的内部的前面（F12即可知道） // (2) 外部添加 after, before ; var div = $("<div>动态创建的div</div>"); // $(".test").after(div); $(".test").before(div); // 3.删除元素 // $("ul").remove(); // 删除自身 // $("ul").empty(); // 删除它的孩子 // $("ul").html(""); // 同上 }); </script> </body> </html>
3. 尺寸
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; padding: 10px; border: 15px solid red; margin: 20px; } </style> <script src="../jQuery.min.js"></script> </head> <body> <div></div> <!-- jQuery尺寸： 1. width() / height(): 只是 width, height; 2. innerWidth() / innerHeight(): 包含了 padding; 3. outerWidth() / outerHeight(): 包含了 padding + border; 4. outerWidth(true) / outerHeight(true): 包含了 padding + border + margin; --> <script> $(function() { // 1. width() / height() console.log($("div").width()); //200px // 2. innerWidth() / innerHeight() console.log($("div").innerWidth()); //220px // 3. outerWidth() / outerHeight() console.log($("div").outerWidth()); //250px // 4. outerWidth(true) / outerHeight(true) console.log($("div").outerWidth(true)); //290px }) </script> </body> </html>
4. 位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } .father { width: 400px; height: 400px; background-color: pink; margin: 100px; overflow: hidden; position: relative; } .son { width: 150px; height: 150px; background-color: purple; position: absolute; left: 10px; top: 10px; } </style> <script src="../jQuery.min.js"></script> </head> <body> <div class="father"> <div class="son"></div> </div> <!-- 位置主要有3个： offset(), position(), scrollTop() / scrollLeft(); 1. offset(): 获取或设置被选择元素相对于文档的偏移量，与父级没有任何关系; （返回一个坐标对象） 获取匹配元素在当前视口的相对偏移; 2. position(): 获取(只能获取, 不能设置)被选择元素相对于带有定位的父级的偏移坐标, 如果父级都没有定位, 则以文档为主; --> <script> $(function() { // 1. 获取或设置距离文档的位置（偏移） offset console.log($(".son").offset()); console.log($(".son").offset().top); $(".son").offset({ // top: 200, // left: 200 }); // 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准 // 这个方法只能获取不能设置偏移 console.log($(".son").position()); // $(".son").position({ // top: 200, // left: 200 // }); //只是获取, 设置则无效 }) </script> </body> </html>
5. scroll系列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { height: 2000px; } .back { position: fixed; width: 50px; height: 50px; background-color: pink; right: 30px; bottom: 100px; display: none; } .container { width: 900px; height: 500px; background-color: skyblue; margin: 200px auto; } </style> <script src="../jQuery.min.js"></script> </head> <body> <div class="back">返回顶部</div> <div class="container"> </div> <!-- scrollTop() / scrollLeft(): scrollTop(): 获取匹配元素相对滚动条顶部的偏移; scrollLeft(): 获取匹配元素相对滚动条左侧的偏移; --> <script> $(function () { $(document).scrollTop(100); var boxTop = $(".container").offset().top; // console.log(boxTop); // 200 $(window).scroll(function () { // 页面滚动事件 console.log($(document).scrollTop()); // if ($(document).scrollTop() >= boxTop) { $(".back").fadeIn(); } else { $(".back").fadeOut(); } }); // 返回顶部按钮 $(".back").click(function () { // $(document).scrollTop(0); // 方式1-无动画 $("body, html").stop().animate({ // 方式2-动画 scrollTop: 0 }); // $(document).stop().animate({ // scrollTop: 0 // }); 不能是文档而是 html和body元素做动画, 这么写是错误的 }) }) </script> </body> </html>
