一、补充
: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无法感知新添加的元素(也就是说即便你为其它与该元素相同的元素添加了事件,也无法应用到该元素下),所以说在这样的情况中,我们利用事件委托,找到父级或者更外层的元素去绑定实现会更好一些。