JQurey第三天

一、补充
     :checked 选择器 选中所有被选中的复选框
     $('被选中的复选框:checked')     //获取到所有被选中的复选框
二、尺寸——位置
1、尺寸
         1.1、$('css选择器').css('width')      //获取匹配元素当前计算的宽度值  .width   带单位
         1.2、$('css选择器').width()   // 获取匹配元素当前计算的宽度值  .width()   不带单位   (只读)
         1.3、$('css选择器').innerWidth()    // 获取匹配元素内部区域宽度 .innerWidth() width + padding   (只读)
         1.4、$('css选择器').outerWidth()   // 获取匹配元素的外部宽度 .outerWidth() width + padding + border  (只读)
         1.5、$('css选择器').outerWidth(true)//设置为 true 时，计算边距在内 .outerWidth(true)  (width+padding+border+margin)   (只读)
2. 位置
         2.1、$('css选择器').css('left')    // 获取匹配元素的left值 .css('left')
         2.2、$('css选择器').position()  // 获取匹配元素相对父元素的偏移 .position() {left:值,top:值}  (只读)
         2.3、$('css选择器').offset()     // 获取匹配元素在当前文档的相对偏移,以文档的左上角为参照  .offset()     {left:值,top:值}  
         2.4、$('css选择器').offset({left:值,top:值})   //设置位置         
三、 卷入语法
1、滚动条产生有2种方式:
       1.1、文档滚动条: 标签高度超出屏幕
       1.2、 盒子滚动条: overflow-y: auto; (前提是有固定高度, 内容超出盒子容器高度)
2、滚动事件  .scrollTop()
     2.1、 滚动事件scroll：监听谁在滚动；注册给给有滚动条元素；
     2.2、 获取卷入高度；被卷入JQ标签对象.scrollTop(); 也可以设置后影响滚动位置

例:<script>
      // 监测document滚动
      $(document).on('scroll',function () { 
      // 获取卷入的高度 -  被卷入的对象.scrollTop()
         console.log('页面滚动了...',$(document).scrollTop());
      }) 
   </script>

     2.3、scrollTop(值) 不光可以获取卷入高度,还可以设置

 例：<script>
        // 场景: 点击当前文档,让文档滚动到顶部 
        $(document).on('click',function () {
            // $(document).scrollTop(0) 
            $('html,body').animate({
                  scrollTop:0
            //毫秒值
            }，2000,function () {
                 console.log('当前动画做完了');
            })
        })
     </script>

3、注意点：
     3.1、document是文档不是标签 ,没有样式属性去使用,所以不能用document设置动画 
     3.2、兼容：$('html, body')是为了兼容标准模式和怪异模式的scrollTop的值，因为如果没有顶部的DOCTYPE声明,就会以怪异模式来解析这个文档, 设置scrollTop只有body才能生效，如果有DOCTYPE声明,就会以html5标准模式,来解析这个文档的代码,设置scrollTop时以html才能生效
     3.3、为什么$()的document不写引号，是因为document本身就是一个变量(文档对象)  - 不是css选择器,所以直接转换，但是 $("html,body")用的是标签名css选择器,所以css选择器需要加引号
四、创建-添加-删除-克隆
1、创建---借助字符串来创建

例：let newP = $('<p>我是一个创建出来的p标签</p>')

1、添加标签

1.1、$('CSS选择器').append(newP)
     //内部  向当前元素内部追加内容（内部末尾追加）---append()
1.2、$('CSS选择器').prepend(newP)
     //内部  向当前元素内部前置内容（内部头部追加）---prepend()
1.3、$('CSS选择器').before(newP)
     //兄弟  向当前元素之前插入内容（在目标前面兄弟位置插入标签）---before() 
1.4、$('CSS选择器').after(newP)
     //兄弟  向当前元素之后插入内容（在目标后面兄弟位置插入标签）---after()

2、删除标签  

     $('CSS选择器').remove()---从dom中删除匹配的元素---remove()
     注意：删除的是DOM元素中‘CSS选择器’这个元素

3、克隆---克隆匹配的元素

例： let theDiv = $('#myDiv').clone(); 
     //再添加进去
     $('body').append(theDiv);

五、本地存储
1、存储  localStorage.setItem('设置的属性名','值')
2、获取  localStorage.getItem('属性名')
3、注意：本地存储只能存储字符串, 所以转换成JSON字符串  (JSON格式要求除了数字和布尔, 只能用双引号)
     3.1、存储的是复杂数据类型  - 将复杂数据类型转化成JSON字符串   

  let obj = {
        a:1,
        b:2
      }
   localStorage.setItem('myObj',JSON.stringify(obj))

    3.2、获取- 将值转换成JSON的格式        

    JSON.parse(localStorage.getItem('myObj'))

4、一般从本地存储里取数据

     //先获取本地存储的内容，若无则获取一个空数组
     let dataArr = JSON.parse(localStorage.getItem('设置的属性名'))  ||   [ ]；
     //然后再存
     localStorage.setItem('todolist', JSON.stringify(dataArr))  
     // 需要去管理本地的数组

六、删除某一项
      .splice(参数一，参数二) 方法---删除某一项 参数一就是下标, 参数二是个数
七、一些注意事项
      动态创建的一个标签，不要直接给标签注册事件，利用事件委托 - 既能给现在的标签还能给将来的标签委托一个点击事件，因为JavaScript无法感知新添加的元素（也就是说即便你为其它与该元素相同的元素添加了事件，也无法应用到该元素下），所以说在这样的情况中,我们利用事件委托,找到父级或者更外层的元素去绑定实现会更好一些。

标签：标签,元素,第三天,---,JQurey,scrollTop,选择器,css
来源： https://blog.csdn.net/Bear_with_her/article/details/117932828