jQuery元素操作和尺寸位置
2024-05-30 17:01:33
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. 获取或设置距离文档的位置（偏移） offsetconsole.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>
jQuery元素操作和尺寸位置相关推荐
- 二、属性操作，文本属性值，元素操作，尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
- jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- jQuery 元素操作——遍历元素
jQuery 元素操作 主要是遍历.创建.添加.删除元素操作 <!DOCTYPE html> <html lang="en"><head>< ...
- jQuery元素操作-遍历元素
1.jQuery元素操作 1.1.遍历元素-语法1 主要遍历dom对象 <!DOCTYPE html> <html lang="en"> <head& ...
- 48 jQuery元素操作
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 主要是遍历.创建.添加.删除元素操作. 1.遍历元素 jQuery隐式迭代是对同一类元素做 ...
- jQuery元素操作
1.1 元素操作 1.1.1 高度和宽度 $("div").height(); // 高度 $("div").width(); ...
- jQuery中的元素操作
jQuery元素操作 通过jQuery可以操作控制元素的样式,文本,属性等 jquery样式操作 css操作行内样式 // 获取div的样式 $("div").css(" ...
- jQuery的属性，位置，元素操作
想要操作,或者获取元素原有属性,jQuery为我们良好的封装了各种,属性和方法.以下,便是: jQuery 属性操作 jQuery有三种操作属性的方法::prop() / attr() / data( ...
- web前端(5)：了解jQuery(常见选择器+相关尺寸+元素/节点操作)
文章目录 一.jQuery是什么 二.JQuery的常见选择器 三.JQuery的元素操作 四.相关尺寸函数 五.常用的事件方法 1. 绑定事件的两种方式 2.解除绑定 六.节点操作 七.经典案例 1 ...
最新文章
- 2017c语言考核册答案,2017年最新C语言考题带答案
- LinearPolar函数
- Oracle学习：视图与索引
- switch注意事项和细节讨论
- SpringSpringMVCMybatis框架-张晨光-专题视频课程
- 【论文阅读】A Gentle Introduction to Graph Neural Networks [图神经网络入门]（5）
- SQL SERVER2000存储过程调试
- matlab 次坐标轴 标注,matlab标注坐标轴
- 深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
- oracle中locate,Oracle定位不知源头的SQL
- day 107radis非关系型数据库
- jinja2模板注入_Flask（Jinja2） 服务端模板注入漏洞
- android n进入分屏代码分析_完全不用鼠标写代码！你信么？[视频]
- 利用MapInfo将MapInfo格式数据转换成shp格式
- Office2013 Visio2013 Project2013零售版与VL版互相转换
- 超火的数码产品犀牛rhino模型素材网站合集看过来
- C++学习（一二零）数据中心 云计算 大数据的概念
- infer.net 入门2 用一个侦探故事来讲解，通俗易懂
- Android备份到电脑,用 TWRP「一键 Ghost」你的 Android 手机，还能备份到电脑
- 学习es6中class——整合阮一峰教程、MDN