jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
语法
jQuery元素 属性操作 - 图1
注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
语法
jQuery元素 属性操作 - 图2
注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

数据缓存 data()

  1. data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。<br />**语法**<br />![](https://cdn.nlark.com/yuque/0/2021/png/1484158/1616073492334-8d7a046e-854f-4449-a169-2820244ff75f.png#crop=0&crop=0&crop=1&crop=1&height=169&id=teEJx&originHeight=169&originWidth=616&originalType=binary&ratio=1&rotation=0&showTitle=false&status=done&style=none&title=&width=616)<br />注意：同时，还可以读取 HTML5 自定义属性  data-index ，得到的是数字型。<br />**演示代码**
  1. <body>
  2.     <a href="http://www.itcast.cn" title="都挺好">都挺好</a>
  3.     <input type="checkbox" name="" id="" checked>
  4.     <div index="1" data-index="2">我是div</div>
  5.     <span>123</span>
  6.     <script>
  7.         $(function() {
  8.             //1. element.prop("属性名") 获取元素固有的属性值
  9.             console.log($("a").prop("href"));
  10.             $("a").prop("title", "我们都挺好");
  11.             $("input").change(function() {
  12.                 console.log($(this).prop("checked"));
  13.             });
  14.             // console.log($("div").prop("index"));
  15.             // 2. 元素的自定义属性 我们通过 attr()
  16.             console.log($("div").attr("index"));
  17.             $("div").attr("index", 4);
  18.             console.log($("div").attr("data-index"));
  19.             // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
  20.             $("span").data("uname", "andy");
  21.             console.log($("span").data("uname"));
  22.             // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
  23.             console.log($("div").data("index"));
  24.         })
  25.     </script>
  26. </body>

jQuery 文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

jQuery内容文本值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。
语法
jQuery元素 属性操作 - 图3
注意：html() 可识别标签，text() 不识别标签。
演示代码

  1. <body>
  2.     <div>
  3.         <span>我是内容</span>
  4.     </div>
  5.     <input type="text" value="请输入内容">
  6.     <script>
  7.         // 1. 获取设置元素内容 html()
  8.         console.log($("div").html());
  9.         // $("div").html("123");
  10.         // 2. 获取设置元素文本内容 text()
  11.         console.log($("div").text());
  12.         $("div").text("123");
  13.         // 3. 获取设置表单值 val()
  14.         console.log($("input").val());
  15.         $("input").val("123");
  16.     </script>
  17. </body>

jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
jQuery元素 属性操作 - 图4
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
jQuery元素 属性操作 - 图5
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
演示代码

  1. <body>
  2.     <div>1</div>
  3.     <div>2</div>
  4.     <div>3</div>
  5.     <script>
  6.         $(function() {
  7.             // 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
  8.             var sum = 0;
  9.             var arr = ["red", "green", "blue"];
  10.             // 1. each() 方法遍历元素 
  11.             $("div").each(function(i, domEle) {
  12.                 // 回调函数第一个参数一定是索引号  可以自己指定索引号号名称
  13.                 // console.log(i);
  14.                 // 回调函数第二个参数一定是 dom 元素对象，也是自己命名
  15.                 // console.log(domEle);  // 使用jQuery方法需要转换 $(domEle)
  16.                 $(domEle).css("color", arr[i]);
  17.                 sum += parseInt($(domEle).text());
  18.             })
  19.             console.log(sum);
  20.             // 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
  21.             // $.each($("div"), function(i, ele) {
  22.             //     console.log(i);
  23.             //     console.log(ele);
  24.             // });
  25.             // $.each(arr, function(i, ele) {
  26.             //     console.log(i);
  27.             //     console.log(ele);
  28.             // })
  29.             $.each({
  30.                 name: "andy",
  31.                 age: 18
  32.             }, function(i, ele) {
  33.                 console.log(i); // 输出的是 name age 属性名
  34.                 console.log(ele); // 输出的是 andy  18 属性值
  35.             })
  36.         })
  37.     </script>
  38. </body>

创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：
语法总和
jQuery元素 属性操作 - 图6
jQuery元素 属性操作 - 图7
jQuery元素 属性操作 - 图8
jQuery元素 属性操作 - 图9
注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。
案例代码

  1. <body>
  2.     <ul>
  3.         <li>原先的li</li>
  4.     </ul>
  5.     <div class="test">我是原先的div</div>
  6.     <script>
  7.         $(function() {
  8.             // 1. 创建元素
  9.             var li = $("<li>我是后来创建的li</li>");
  11.             // 2. 添加元素
  12.             //     2.1 内部添加
  13.             // $("ul").append(li);  内部添加并且放到内容的最后面 
  14.             $("ul").prepend(li); // 内部添加并且放到内容的最前面
  15.             //  2.2 外部添加
  16.             var div = $("<div>我是后妈生的</div>");
  17.             // $(".test").after(div);
  18.             $(".test").before(div);
  20.             // 3. 删除元素
  21.             // $("ul").remove(); 可以删除匹配的元素 自杀
  22.             // $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
  23.             $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
  24.         })
  25.     </script>
  26. </body>

jQuery 尺寸、位置操作

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

jQuery 尺寸操作

jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。
语法
jQuery元素 属性操作 - 图10
代码演示

  1. <body>
  2.     <div></div>
  3.     <script>
  4.         $(function() {
  5.             // 1. width() / height() 获取设置元素 width和height大小 
  6.             console.log($("div").width());
  7.             // $("div").width(300);
  8.             // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
  9.             console.log($("div").innerWidth());
  10.             // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
  11.             console.log($("div").outerWidth());
  12.             // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
  13.             console.log($("div").outerWidth(true));
  14.         })
  15.     </script>
  16. </body>

注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。

jQuery 位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:
语法
jQuery元素 属性操作 - 图11
jQuery元素 属性操作 - 图12
jQuery元素 属性操作 - 图13
代码演示

  1. <body>
  2.     <div class="father">
  3.         <div class="son"></div>
  4.     </div>
  6.     <div class="back">返回顶部</div>
  7.     <div class="container"></div>
  9.     <script>
  10.         $(function() {
  11.             // 1. 获取设置距离文档的位置（偏移） offset
  12.             console.log($(".son").offset());
  13.             console.log($(".son").offset().top);
  14.             // $(".son").offset({
  15.             //     top: 200,
  16.             //     left: 200
  17.             // });
  19.             // 2. 获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准
  20.             // 这个方法只能获取不能设置偏移
  21.             console.log($(".son").position());
  22.             // $(".son").position({
  23.             //     top: 200,
  24.             //     left: 200
  25.             // });
  27.               // 3. 被卷去的头部
  28.               $(document).scrollTop(100);
  29.             // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
  30.             // 页面滚动事件
  31.             var boxTop = $(".container").offset().top;
  32.             $(window).scroll(function() {
  33.                 // console.log(11);
  34.                 console.log($(document).scrollTop());
  35.                 if ($(document).scrollTop() >= boxTop) {
  36.                     $(".back").fadeIn();
  37.                 } else {
  38.                     $(".back").fadeOut();
  39.                 }
  40.             });
  41.             // 返回顶部
  42.             $(".back").click(function() {
  43.                 // $(document).scrollTop(0);
  44.                 $("body, html").stop().animate({
  45.                     scrollTop: 0
  46.                 });
  47.                 // $(document).stop().animate({
  48.                 //     scrollTop: 0
  49.                 // }); 不能是文档而是 html和body元素做动画
  50.             })
  51.         })
  52.     </script>
  53. </body>