jQuery常用知识总结
简介
选择器
属性操作
jQuery()
each
event事件
jQuery扩展
一、简介
What is jQuery
jQuery is fast small and feature-rich JS's libarary; 它兼容多个浏览器
syntax jQuery
$(selector).action()
二、选择器
selector
basic selector
$("*") id 选择器 $("#id") class选择器 $(".class") 元素选择器 $("element") $("#id,.class,element")
层次选择器
$(
".outer div"
) $(
".outer>div"
) $(
".outer+div"
) $(
".outer~div"
)
基本筛选器
$(
"li:first"
) $(
"li:eq(2)"
) $(
"li:even"
) $(
"li:gt(1)"
)
属性选择器
$(
'[id="div1"]'
) $(
'["alex="sb"][id]'
)
筛选器
$(
"li"
).eq(
2
) -------> eq(index)里面放的是索引,返回一个jquery对象
$(
"li"
).first() -------------->return 第一个jquery对象
$(
"ul li"
).hasclass(
"test"
) --------->return boolean (true or false)
查找筛选器
查找子标签: $("div").children(".test") $("div").find(".test") 向下查找兄弟标签: $(".test").next() $(".test").nextAll() $(".test").nextUntil() 向上查找兄弟标签: $("div").prev() $("div").prevAll() $("div").prevUntil()
查找所有兄弟标签: $("div").siblings()
查找父标签: $(".test").parent() $(".test").parents() $(".test").parentUntil()
查找子标签:children() 所有的儿子 find() 所有的后代
查找所有的兄弟 siblings()
向下查找兄弟 next() 向下第一个兄弟,nextAll()向下所有的兄弟(弟弟)nextUntil() 直到遇到什么
向上查找兄弟 prev()向上第一个兄弟 ,prevAll()向上所有的兄弟
查找父标签 他的父亲,parent() parents()祖宗, 不常用 parentUntil() 向上找祖宗直到。。
三、属性操作
.添加删除属性
.addClass()
.removeClass()
.html() =====innerHTML
.css({color:"red",fontsize:"12px"})
.css("color","red")
.attr() ----------- 适用于自定义属性
.removeAttr()
.
prop() ----------------- 适用于固有属性
.removeProp()
显示隐藏效果
show()
hide()
四、event事件
页面载入
$(document).ready( function(){ } )
事件绑定
jquery对象.事件(函数)
$(selector).click(function(e){
e event对象,
})
事件委托
$(selector).on(eve,[selector],[data],fn)