jquery知识总结

jquery知识总结：jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。Jquery是继prototype之后又一个优秀的Javascrīpt框架。

jQuery选择器包括基本选择器、层次选择器、过滤选择器、表单选择器。

基本选择器

#id id选择器

.class 类选择器

element 元素选择器

* 所有选择器

层次选择器

$('form input') 选择所有form元素里的所有input元素

$('#main>*') 选择id为main的所有子元素

$('lable+input') 选择所有lable元素的下一个input元素节点

$('$prev~div') 同胞选择器，返回的是id为prev的标签元素的所有的属于同一个父级元素的div标签

过滤选择器

基本过滤选择器

$('tr:first') 选择所有tr元素的第一个

$('tr:last') 选择所有tr元素的最后一个

$('input:not(:checked)+span) 过滤掉有属性checked的input元素的下一个span元素

$('tr:even') 选择所有tr元素中下标为偶数的元素

$('tr:odd') 选择所有tr元素中下标为奇数的元素

$('tr:eq(2)') 选择所有的tr元素中下标为2的元素

$('tr:gt(4)') 选择所有的tr元素中下标大于4的元素

$(tr:lt(4)') 选择所有的tr元素中下标小鱼4的元素

$(':head') 选择h1、h2等所有的标题元素

$('div:animated') 选择正在执行动画的div元素

内容过滤选择器

$("div:contains('john')") 选择所有div元素中包含john文本的元素

$('td:empty') 选择所有为空的td元素

$("div:has('p')") 选择所有包含p标签的div元素

$('td:parent') 选择所有以td为父级的元素

DOM操作方法

增加节点

$('ul').append('



') 查找到ul元素，然后向里面添加p元素


$('



').appendTo('ul') 新建p标签，然后添加到ul元素里面


prepend()

prependTo()

after()

insertAfter()

before()

insertBefore()

删除节点

remove()

empty()

复制节点

$(element).clone()

替换节点

replaceWith()

replaceAll()

包裹节点

wrap()

wrapAll()

wrapInner()

属性设置与删除

attr()

removeAttr()

样式操作

addClass()

removeClass()

toggleClass()

hasClass()

设置和获取html

html()

text()

val()

遍历节点操作

children()

next()

nextUntil()

nextAll()

prev()

prevAll()

prevUntil()

siblings()

closest()

css的DOM操作

css()

offset()

position()

scrollTop()

scrollLeft()

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

事件触发与删除

on()

off()

简单事件绑定



click(handler) 单击事件

blur(handler) 失去焦点事件

mouseenter(handler) 鼠标进入事件

mouseleave(handler) 鼠标离开事件

dbclick(handler) 双击事件

change(handler)改变事件，如：文本框值改变，下来列表值改变等

focus(handler) 获得焦点事件

keydown(handler) 键盘按下事件

mouseover和mouseenter事件的区别

不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件，对应mouseout。

只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave。

这样的话，mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。

事件解绑
unbind()

undelegate()

off()

其他事件

one()

trigger()

ev:enent对象

ev.pageX() 相对于文档的位置

ev.client() 相对于可视区的位置

ev.which() 获取键盘码

ev.preventDefault() 阻止默认事件

ev.stopPropagation() 阻止冒泡操作

return false; 阻止默认事件与冒泡操作

parent() 获取父级

parentsUntil()

offsetParent() 获取有定位的父级

size()

each()

hover() 鼠标移入与移出

动画效果事件

hide()

show()

fadeIn()

fadeOut()

fadeTo()

fadeToggle()

slideUp()

slideDown()

slideToggle()

animate()

stop()

get(index) 将jq转换为js

detach() 删除匹配的节点，但保留节点的操作行为

add()

slice(a,b) 选择指定位置的元素

数据串联

serialize()

serializeArray()

ev.data

ev.target

ev.type

$下的常用方法

type()

trim()

inArray()

proxy()

noConflict()

parseJSON()

makeArray()