JavaScript（十八）jQuery进阶

jQuery进阶

一、类的操作

addClass() 添加(追加)类
removeClass() 移除类
toggleClass() 切换

$('li').click(function(){
   
    // $(this).addClass('on').siblings().removeClass('on');
    $('li').first().toggleClass('on');//切换
});

二、常见的操作

each() 遍历
Index() 获取指定元素在兄弟节点中的位置
size() 个数
length 个数

三、offset和宽高位置系列

offset()
获取当前元素相对于视口的偏移量 {left:xx,top:xxx}
通过传递参数也可设置(参数应为对象)

$('div').offset({
   
    left:"100",     //不能添加单位
    top:"100"
});

position() 获取相对于父元素的偏移量

width() 获取或设置宽
height() 获取或设置高
innerHeight() height+padding
innerWidth()
outerWidth() width+padding+border
outerHeight()
scrollTop() 距离顶部的滚动距离 既可以取值，也可以设置
scrollLeft()

四、事件

1.在jQuery可以通过它的事件为同一个元素添加多个相同的事件
2.jQuery中，事件函数可以被调用
3.jQuery事件对象： 对原生的事件对象进行了包装,没有兼容性问题
常见的事件属性：
keyCode 键码
pageX/pageY 位置
clientX/clientY
screenX/screenY
target 事件源
type 事件类型
altKey 是否按下了alt键
cltrlKey 是否按下了ctrl键
shiftKey

4.事件绑定和委托
on 添加事件
off 取消事件
1)添加单个事件

$('button').on('click',function(){
   
    console.log('11');
});

2）添加多个事件

 //多个事件直接使用空格分割
    $('button')