JQurey第三天

2021-06-15 21:03:50 阅读：207 来源： 互联网

标签：标签元素第三天 --- JQurey scrollTop 选择器 css

一、补充
: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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JQurey第三天