jQuery——有关于jQuery操作 属性,元素,还有尺寸位置等
程序员文章站
2022-07-06 12:39:35
1.有关于属性的操作 所谓的属性操作就是操作一系列的元素的属性,value啦class啦 .......特别是有关于input的操作是非常重要的。 为了完成后续有关于框架的高级骚操作,我们现在先来学习一下,jQuery的常用属性操作的三种 prop(),attr(),data() (1)、元素固有的 ......
1.有关于属性的操作
所谓的属性操作就是操作一系列的元素的属性,value啦class啦 .......特别是有关于input的操作是非常重要的。
为了完成后续有关于框架的高级骚操作,我们现在先来学习一下,jquery的常用属性操作的三种 prop(),attr(),data()
(1)、元素固有的属性值prop()
- 所谓的固有的属性 ,比如a标签里面的href input里面的type等...
我们看一下如何获取,还有如何设置
- 获取:prpo('属性')
- 设置属性:prpo('属性','属性值')
- 非常的适合操作 表单的属性 比如 disabled/checked/selected
(2)、自定义属性值attr()
- 用于给元素添加自己定义的属性
- 获取:attr('属性');
- 设置:attr('属性','属性值')
注意: 类似于原生的dom>>>getattribute(),该操作 适用于h5自定义属性
(3)、数据相关data/非常重要!/
- 这个非常的重要!特别是到了后期操作数据渲染的时候,还有框架的时候,前端的三大框架里面都有用到类似的实现逻辑
- 附加(设置)数据的语法:data( 'name' ,'value')
- 获取数据的语法 data('name').
注意:这种方式也同样的适用于h5里面获取自定义的属性
代码举例:
<a href="http://www.baidu.com" title="都挺好">都挺好</a> <input type="checkbox" name="" id="" checked> <div index="1" data-index="2">我是div</div> <span>123</span> <script> $(function() { //1. element.prop("属性名") 获取元素固有的属性值 console.log($("a").prop("href")); $("a").prop("title", "我们都挺好"); $("input").change(function() { console.log($(this).prop("checked")); }); // console.log($("div").prop("index")); // 2. 元素的自定义属性 我们通过 attr() console.log($("div").attr("index")); $("div").attr("index", 4); console.log($("div").attr("data-index")); // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面 $("span").data("uname", "andy"); console.log($("span").data("uname")); // 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型 console.log($("div").data("index")); })
2.有关于文本属性的操作
常见的文本操作主要有三种 html() / text()/ val();分别对应元素dom的innerhtml、innertext 、value的属性
这些操作并没有什么难度,详细请参见下面的代码实例
<body> <div> <span>我是内容</span> </div> <input type="text" value="请输入内容"> <script> // 1. 获取设置元素内容 html() console.log($("div").html()); // $("div").html("123"); // 2. 获取设置元素文本内容 text() console.log($("div").text()); $("div").text("123"); // 3. 获取设置表单值 val() console.log($("input").val()); $("input").val("123"); </script> </body>
3.有关于元素的操作
有关于元素的操作主要是:标签的遍历,创建,添加,删除等操作(简单的理解就是对标签的 增 删 改 查)
(1)、遍历元素
- jquery隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作,就需要用到遍历。
- 语法有两种
语法1
注意:此方法用于遍历 jquery 对象中的每一项,回调函数中元素为 dom 对象,想要使用 jquery 方法需要转换。
语法2
注意:此方法用于遍历 jquery 对象中的每一项,回调函数中元素为 dom 对象,想要使用 jquery 方法需要转换。
- 代码实例:
<body> <div>1</div> <div>2</div> <div>3</div> <script> $(function() { // 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大) var sum = 0; var arr = ["red", "green", "blue"]; // 1. each() 方法遍历元素 $("div").each(function(i, domele) { // 回调函数第一个参数一定是索引号 可以自己指定索引号号名称 // console.log(i); // 回调函数第二个参数一定是 dom 元素对象,也是自己命名 // console.log(domele); // 使用jquery方法需要转换 $(domele) $(domele).css("color", arr[i]); sum += parseint($(domele).text()); }) console.log(sum); // 2. $.each() 方法遍历元素 主要用于遍历数据,处理数据 // $.each($("div"), function(i, ele) { // console.log(i); // console.log(ele); // }); // $.each(arr, function(i, ele) { // console.log(i); // console.log(ele); // }) $.each({ name: "andy", age: 18 }, function(i, ele) { console.log(i); // 输出的是 name age 属性名 console.log(ele); // 输出的是 andy 18 属性值 }) }) </script> </body>
(2)、创建 修改 添加
- 有关于它们的操作都是非常的简单 ,具体的详细的操作 请去查看官方的api
jquery方法操作元素的创建、添加、删除方法很多,则重点使用部分,如下:
语法总和
再啰嗦一下:以上只是元素的创建、添加、删除方法的常用方法,其他方法请参详api。
案例代码
<body> <ul> <li>原先的li</li> </ul> <div class="test">我是原先的div</div> <script> $(function() { // 1. 创建元素 var li = $("<li>我是后来创建的li</li>"); // 2. 添加元素 // 2.1 内部添加 // $("ul").append(li); 内部添加并且放到内容的最后面 $("ul").prepend(li); // 内部添加并且放到内容的最前面 // 2.2 外部添加 var div = $("<div>我是后妈生的</div>"); // $(".test").after(div); $(".test").before(div); // 3. 删除元素 // $("ul").remove(); 可以删除匹配的元素 自杀 // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子 }) </script> </body>
4.有关于尺寸位置的操作
(1)、有关于元素(尺寸)的操作//嘿嘿嘿 开车了,尺寸
- 语法详解
注意:有了这套 api 我们将可以快速获取和子的宽高,至于其他属性想要获取和设置,还要使用 css() 等方法配合。
- 具体的实例代码:
<body> <div></div> <script> $(function() { // 1. width() / height() 获取设置元素 width和height大小 console.log($("div").width()); // $("div").width(300); // 2. innerwidth() / innerheight() 获取设置元素 width和height + padding 大小 console.log($("div").innerwidth()); // 3. outerwidth() / outerheight() 获取设置元素 width和height + padding + border 大小 console.log($("div").outerwidth()); // 4. outerwidth(true) / outerheight(true) 获取设置 width和height + padding + border + margin console.log($("div").outerwidth(true)); }) </script> </body>
(2)、有关于位置的操作
最主要的还是我们的三个操作:offset()/ position()/ scrolltop()/ scrollleft()/....当然了还要更多的骚操作
- 照例,我们先看一下语法
- 代码实例
<body> <div class="father0"> <div class="son"></div> </div> <div class="back">返回顶部</div> <div class="container"></div> <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 // }); // 3. 被卷去的头部 $(document).scrolltop(100); // 被卷去的头部 scrolltop() / 被卷去的左侧 scrollleft() // 页面滚动事件 var boxtop = $(".container").offset().top; $(window).scroll(function() { // console.log(11); console.log($(document).scrolltop()); if ($(document).scrolltop() >= boxtop) { $(".back").fadein(); } else { $(".back").fadeout(); } }); // 返回顶部 $(".back").click(function() { // $(document).scrolltop(0); $("body, html").stop().animate({ scrolltop: 0 }); // $(document).stop().animate({ // scrolltop: 0 // }); 不能是文档而是 html和body元素做动画 }) }) </script> </body>
上一篇: Win10使用Linux子系统使用adb|win10子系统配置adb环境变量
下一篇: 第一次做伴郎