jquery常用api 方法- 01

对元素节点的选择

filter()：过滤 对以获取的网页元素进行过滤

not()：filter的反义词
has()：拥有， 直接判定获取的子节点中是否有符合条件的元素

兄弟节点的操作

prev()：当前兄弟节点中的上一个节点

next()：当前兄弟节点中的下一个节点

siblings()：当前节点的所有兄弟节点

find()：查找子节点 find(选择器)方法中可以使用任何选择器类型

index()：获取当前节点在兄弟节点中的下标

eq()：通过下标获取指定元素节点

元素属性处理

attr()：获取节点的行间属性 attr("title") 设置属性 attr("title", "myTitle") 或者 attr({"title": "myTitle"})

元素类的处理，操作class属性

addClass()：给元素添加class， addClass("class1 class2 class3")

removeClass()：给元素删除class，removeClass("class1 class2")

width系列的三个方法

width()：width

innerWidth()：width + padding

outWidth()：width + padding + border 如果要获取margin 则要传入一个参数： outWidth(true)  width + padding + border + margin

相似的高度处理

height()：height

innerHeight()：height + padding

outHeight()：height + padding + margin

关于节点的操作

insertBefore()：找到A节点将他插入到B节点前面， $("span").insertBefore($("div"))，找到span标签把他插入到div标签的前面

before(): B节点是在A节点的前面 主要用于链式操作的主体不一样

insertAfter()：找到A节点将他插入到B节点的后面

after()：B节点在A节点的后面， 相当于主谓颠倒

appendTo()：找到A节点将他追加到B节点的子节点的末尾

append()：B节点的子节点的末尾追加A节点

prependTo()：找到A节点将他追加到B节点的子节点的最开始

prepend()：B节点的子节点的开始追加A节点

remove()：删除指定的节点

事件的绑定方法

on()：绑定事件， 可以单个也可以多个，进行事件委托

1、给一个事件添加一个函数

$('#div').on('click', function() {})

2、同时给多个事件添加一个函数，多个事件之间可以通过空格隔开

$('#div').on('click mouseover', function() {})

3、给不同的事件添加不同的函数

$('#div').on({
    click : function() {},
    mouseover : function() {}
})

4、事件委托 第二个参数为触发对象的选择器

$('ul').on('click', 'li', function() {
    $(this).css("backgroundColor", "red")
})

off：取消事件

1、取消所有点击事件

$('#div').off('click')

2、取消某一事件下指定的函数  show为定义的show方法

$('#div').off('click', show)

scrollTop()：获取页面滚动高度

$(window).scrollTop()

事件细节

ev.stopPropagration() ：阻止事件冒泡 $('#div').click(function(ev) { ev.stopPropagration() })

ev.preventDefault()：阻止默认行为 $('#div').click(function(ev) { ev.preventDetault() })

return false：既阻止冒泡，又阻止默认行为

鼠标位置

ev.pageX：带滚动距离

ev.pageY：带滚动距离

ev.clientX：可视窗口距离

ev.clientY：可视窗口距离

块的位置

offset()：直接获取当前元素，距离最左边的距离，margin不算数,margin不算在自身

$("#div2").offset().left()

position()：直接获取，当前元素，距离第一个有定位父节点的距离，margin算在内，margin算在自身

$("#div2").position().top()

offsetParent()：查找第一个有定位的父节点，如果父节点没有定位就继续往下走，最终找到html节点

$("#div2").offsetParent().css("backgroundColor","yellow")