JQuery相关知识点总结回顾

jQuery知识点梳理

一、jquery选择器

1. 基本选择器

• ID选择器
• 类选择器
• 标记选择器
• 分组选择器
• 通配符选择器

1. 层次选择器

• $(“ancestor descendent”)：祖先后代选择器    空格
• $(“parent > child”)：父子选择器   大于
• $(“prev + next”)：相邻后兄弟元素选择器   加号
• $(“prev ~ siblings”)：所有后兄弟元素选择器  波浪线

1. 过滤选择器：基本过滤选择器

：first、:last、:odd、:even、:eq(index)、:gt(index)、：lt(index)、not(selector)

1. 过滤选择器：内容过滤选择器

:contains(text)、:empty、:parent、has(selector)

1. 过滤选择器：可见性过滤选择器

：visible、:hidden

1. 过滤选择器：属性过滤选择器

[attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value]

1. 过滤选择器：表单过滤选择器

• :checked、:selected
• :text、：password、:radio、:checkbox、:submnit、:button、:image、:reset、:file、

二、选择器相关方法

parent()、children()、prev()、next()、prevAll()、nextAll()、siblings()、find()、filter()

三、核心函数

• 文档加载完毕函数   $(document).ready(function(){});   ==   $(function(){});
• JS -> jQuery对象

Jquery对象 –> js对象  1.$(selector)[index]   2.$(selector).get(index)

Js -> jquery对象    $(js对象)

四、DOM操作

1. 添加、移除、修改、克隆

append()、after()、before()、prepend()、remove()、empty()、clone()、html()

1. 属性操作

添加|修改属性：attr(“属性名”, “属性值”)

移除属性：removeAttr(“属性名”);

获取属性值：attr(“属性名”);

1. 常用方法

text()、text(String  text)

html()、html(String  html)

val()、val(String  value)

height()、height(int)

width()、width(int)

五、CSS操作

添加类样式：addClass(“类名”)

移除类样式：removeClass(“类名”)

切换类样式：toggleClass(“类名”)

判断是否拥有类样式：hasClass(“类名”)

设置CSS属性值：css(“CSS属性名”, “css属性值”)、 css({“属性名1”:”值1”, “属性名2”：“值2”})

六、事件

• 事件类型

click、dblclick、mouseover、mouseout、mouseleave、mouseenter、mousemove、keydown、keyup、keypress、change、blur、focus、

• 绑定、移除绑定

bind(“事件类型”, function(){})

unbind(“事件类型”)

$(selector).事件类型(function(){})   $(“#btn1”).click(function(){});

• 合成事件

hover  ==  mouseover   +   mouseout

hover(function(){}, function(){})

hover(function(){})

• 事件参数

which：

pageX：

pageY：

七、动画

• show()、hide()、toggle()
• slideUp()、slideDown()、slideToggle()
• fadeIn()、fadeOut()、fadeToggle()
• animate：自定义动画函数