jQuery第二天学习心得

jQuery第二天学习心得

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

• 元素固有属性值 prop()
  所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。

      // 1.获取属性语法：
      $('选择器').prop('属性')
      // 2.设置属性语法
      $('选择器').prop('属性','属性值')

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

• 元素自定义属性值 attr()
  用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。

 // 1.获取属性语法： 类型原生getAttribute()
      $('选择器').arrt('属性')
      // 2.设置属性语法   类型原生setAttribute()
      $('选择器').arrt('属性','属性值')

注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

• 数据缓存 data()
  data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。

 // 1.附加属性语法：
      $('选择器').date('属性','属性值')
      // 2.获取数据语法
      $('选择器').date('属性')

注意：同时，还可以读取 HTML5 自定义属性  data-index ，得到的是数字型。
1.只能获取到第一次赋值的属性，之后通过修改的值获取不到;
 2.如果值是string类型的数字，比如“123”，获取的时候会强转为number，123;
  3.所以建议还是使用$(“.div”).att()的方法去获取

<div index="1" data-index="2">我是div</div>
         // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
            $("span").data("uname", "andy");
            console.log($("span").data("uname"));
            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
               console.log($("div").data("index"));

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

 // 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");

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

• 遍历元素
  虽然jquery有隐私迭代，但是只能执行一样的操作，若想让jquery伪数组执行不同的操作，则需要遍历
  jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。

// 语法1：
      $('div').each(function(index,domEle){
        代码块
      })
      1.each()方法遍历匹配的每一个元素，主要用dom处理，each每一个
      2.里面的回调函数的两个参数 index为jquery伪数组中每个元素的洗标，domele是每个dom元素，不是jquery元素
      3.若想用jquery方法则需要转换  $('domEle')

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

 语法2：
      $.each(object,function(index,domEle){
        代码块
      })
      1.each()方法遍历任何对象，主要处理 对象 数组
      2.里面的回调函数的两个参数 index为jquery伪数组中每个元素的洗标，domele是每个dom元素，不是jquery元素

注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

  $(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 属性值
            })
        })

3.创建、添加、删除
jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

    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(""); // 可以删除匹配的元素里面的子节点 孩子

4.jQuery 尺寸、位置操作
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。

            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));

5. jQuery 位置操作
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

            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元素做动画
            })

注意：$(document)不能做动画