jQuery

什么是jQuery

jQuery是一个JavaScript函数库。

---

jQuery有什么用处

• 获取Dom元素
• 修改元素样式
• 操作Dom元素
• Html事件函数
• ajax
• Dom的遍历和操作
• JavaScript特效和动画
• Utilities
• 事件函数

---

jQuery的兼容性

IE浏览器6、7、8兼容的最高版本是 jQuery 1.9.1。
自从微软停止对windows 7的更新后，大部分的windows电脑操作系统都是win 10，现在win10 的浏览器版本是 11。

---

$(function(){ … })

$(function() {
	//...
})
是
$(document).ready(function() {
	//...
})
的缩写形式

---

选择器

1. 基本选择器

id选择器

标签选择器

class选择器

通配符选择器 $(’*’)

2. 多项选择器

$(’#first, div, .last’)

3. 层级选择器

祖先后代选择器 $(‘ul li’)

直接后代选择器 $(‘div>p’)

紧邻下一个选择器 $(‘prev + next’) 获取到与prev元素同级的紧邻后一个元素

兄弟选择器 $(’.current ~ siblings’)

4. 属性选择器

属性名选择器 $(’[class]’)

属性值选择器 $(’[type=button]’)

非属性选择器 $(’[type != button]’)

$(’[class ^= tool_]’) 选中class属性值是以’tool_'开头的所有元素

$(’[class $= tool]’) 选中class属性值以’tool’结尾的所有元素

$(’[class *= nav]’) 选中class属性值中包含’nav’字符串的所有元素

多个属性选择器 $(’[class][class *= user][class $= name]’) 筛选出同时满足所有条件的元素

5. 过滤器

5.1 child系列过滤器

first-child, $(‘detail > p:first-child’) 找到detail标签亲子集下第一个标签并且这个标签必须是p标签

last-child

nth-child(), $(‘detail > p:nth-child(1)’) 找到detail标签亲子集下第一个标签并且这个标签必须是P标签。 数组的位置是从1开始

nth-last-child()

only-child, $(detail > p:only-child) 找到detail标签下的p标签并且这个detail标签下只有一个p标签

5.2 type系列过滤器

first-of-type

last-of-type

nth-of-type(even | odd | 2n + 1) 分别选取偶数位、奇数位、满足公式位值的元素

nth-last-of-type()

only-of-type

6.表单相关选择器

$(’:input’) 选中所有input标签

$(’:text’) 选中所有type为text的input标签，与 $(’[type=text]’)结果相同

根据表单状态查找

:enabled, 可用状态

:disabled, 不可用状态

:checked, 选中状态（radio，checkbox，select中选中的option）

:selected, 下拉菜单中被选中的option

7. 查找与过滤

find(), $(’.content’).find(’.title’) 查找类名为content的元素下所有类名为title的元素

children(), $(’.content’).children(’.title’) 查找类名为content的元素的亲子集中类名为title的元素

parent()

next()

prev()

siblings()

eq()

filter(express，element，object，fn), 查找元素集合中满足条件的元素

---

事件

鼠标事件

click()

dblclick()

mousedown()

mouseup()

mouseenter()

mouseleave()

hover(function(){}, function(){})，相当于包含了mouseenter和mouseleave

mouseover()

mouseout()

mouseenter 和 mouseleave 是在鼠标进入（离开）当前选中元素时，触发事件；
mouseover 和 mouseout 是在鼠标进入（离开）当前选中元素及其子元素时，触发事件

mousemove()

scroll()

键盘事件

keydown()，必须在document下或者焦点下才有效，$(document).keydown(function(){…})

keyup()，必须在document下或者焦点下才有效，$(document).keyup(function(){…})

keypress()，鼠标按下时触发，但必须是能修改文本内容的按键，alt 、shift、中文输入都不会产生效果

其他事件

ready()

resize()，当浏览器窗口尺寸发生变化时触发，$(window).resize(function(){…})

focus()

blur()

change()，当检测到表单元素的value值发生改变时触发事件，检测的时机并不是在输入文本时

select()，只针对输入框，当input输入框中的文本被选中时触发

submit()，提交表单、阻止表单提交、表单内容验证

$('input[type=button]').click(function() {
	$('form').submit()
})

$('form').submit(function() {
	return false;
})

$('form').submit(function() {
	//...
	return false;
})

事件的绑定和取消

事件的绑定，jQuery结合了JavaScript的bind、delegate、live方法，统一使用on(‘event’,[selector],fn)方法为元素绑定事件，同时也可以为动态添加的元素绑定事件。

为一个元素同时绑定多个事件

$('a').add(document).on({
	mouseenter: function(event) {
		event.stopPropagation();
		//...
	},
	keydown: function(){
		/...
	}
})

事件的销毁，off(‘event’,[selector],fn)

为元素绑定一次性的事件，one(‘event’,[selector],fn)

document.getElementById(‘obj’).nodeName 获取元素的标签名

---

动画

自定义动画：animate({style}, timestamp)，通过添加完成动画后样式和动画持续时间来产生动画效果。自定义动画有时需要使用stop()方法及时将前一个动画停止掉。

delay(millisecond) ,延时、暂停动画

动画函数

show()、hide()、toggle() 在元素左上角缩放显示

fadeIn()、fadeOut()、fadeToggle 淡入淡出

slideDown()、slideUp()、slideToggle() 百叶窗效果