1尺寸相关,滚动事件
1.1获取和设置元素尺寸
width()、height() //获取元素width和height
innerWidth()、innerHeight() //包括padding的width和height
outerWidth()、outerHeight() //包括padding和border的width和height
outerWidth(true)、outerHeight(true) //包括padding和border以及margin的width和height
总结获取元素尺寸的两种方式:方法一($("div").css("width");)方法二(var width1 = $('div').width();) |
1.2获取元素相对页面的绝对位置
var weizhi1 = $('.son').offset(); //获取设置距离文档的位置{top+left}(偏移) offset
var weizhi2=$('.son').offset().top; //获取设置距离文档上边的位置
var weizhi3=$('.son').offset().left; //获取设置距离文档左边的位置
// console.log(weizhi1);
console.log($(".son").position()); // . 获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级,则以文档为准这个方法只能获取不能设置偏移
注:$('.son') .position()这个方法只能获取距离带有定位父级位置(偏移)如果父级没有定位则以文档(body)为准 |
1.3获取其余相关位置
// 获取浏览器可视区的宽度和高度
$(window).width();
$(window).height();
// 获取页面文档的宽度高度
$(document).width();
$(document).height();
// 获取页面的滚动距离
$(document).scrollTop();
$(document).scrollLeft();
1.4滚动事件
$(window).scroll(function() {
})
2,jQuery的属性操作
2.1普通元素内容html()相当于原生的(inner HTML)
// 通过html()取出或设置html的内容
var ysu = $('div').html('<span>第二部分内容</span>');
注:利用html()设置的元素和内容可以解析html标签同时会覆盖页面内原有的内容 |
2.2普通元素文本内容text()相当于原生的(inner Text)
var ysu = $('div').text('<span>第三部分内容</span>')
注:利用text() 设置元素文本内容并不能解析html标签,同时也会覆盖原有文本 |
2.3表单的值val()相当于原生的(value)
var ysu = $('input').val('02')
2.4 元素固有属性值prop()
$('div').prop({
class: 'v_01',
style: 'border: 1px solid pink;width:200px;background-color:blue;'
})
3,jQuery的循环
3.1 each()循环
// 语法一:$(selector).each(function(index,element))
$('div').each(function(index, value) {
})
// 语法二:
$each($('div'), function(index, value) {
})
//打印a里面的内容
$('ul>li a').each(function(index, value) {
console.log($(this).text());
})
注:此处获取的value是每个DOM元素不是jQuery对象,所以若想使用jQuery的 方法需将获取的value元素转换为jQuery对象$('value') |
3.2 map()循环
$.map($('ul>li a'), function(index, value) {
console.log($(index).text());
})
注:map() 方法主要用来遍历操作数组和对象。each() 方法主要用于遍历jquery对象。each() 方法返回的是原来的数组,并不会新创建一个数组。map() 方法会返回一个新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。 |