前端开发技能之jQuery

一。区别

1. attr()prop()is()；attr()返回是属性值，prop(),is()返回的是布尔值；<input type="checkbox" checked="checked"/>，attr("checked")=>checked;prop("checked")=>true;is("checked")=>true;具有true和false两个属性，如checked，selected，disabled使用prop()，其他自定义属性用attr()

二。选择器

• 基本选择器

1. $("div")元素选择器
2. $("#id")id选择器
3. $(".class")class选择器
4. $("#id,div,.class")组合选择器

• 层次选择器

1. $("#id>.class")子元素选择器
2. $("#id .class")后代元素选择器
3. $("#id+.class")紧邻下一个元素选择器
4. $("#id ~ div")兄弟元素选择器

• 过滤选择器（重点）

1. $("li:first")选择第一个li元素
2. $("li:last")选择最后一个li元素
3. $("li:odd")选择下标为奇数的li
4. $("li:even")选择下标为偶数的li
5. $("li:eq(2)")选择下标为2的li
6. $("li:not(#id)")选择除了id="id"之外的所有li元素
7. $("li:gt(2)")选择下标大于2的li
8. $("li:lt(2)")选择下标小于2的li

• 内容过滤选择器：

1. $("div:contains(John)")选择所有div中含有John文本的元素
2. $("td:empty")选择所有的为空的td元素的数组
3. $("div:has(p)")选择所有含有p标签的div元素
4. $("td:parent")选择所有的以td为父节点的元素数组

• 可视化过滤选择器：

1. $("div:hidden")选择所有的被hidden的div元素
2. $("div:visible")选择所有的可视化的div元素

• 属性过滤选择器：

1. $("div[id]")选择所有含有id属性的div元素
2. $("input[name='name']")选择name属性为name的input元素
3. $("input[name^='news']")开头
4. $("input[name$='news']")结尾
5. $("input[name*='man']")选择所有的name为man的input元素

• 子元素过滤选择器：

1. $("ul li:nth-child(2)"),$("ul li:nth-child(odd)")
2. $("div span:first-child")
3. $("div span:last-child")
4. $("div button:only-child")

• 表单元素选择器：

1. $(":input")所有的表单元素
2. $(":text")所有的单行文本框
3. $(":password")所有的密码框
4. $(":radio")所有的单选按钮
5. $(":checkbox")所有的复选框
6. $(":hidden")所有类型为hidden的input元素或表单的隐藏域
7. $(":reset")所有的重置按钮
8. $(":file")所有的文件域

• 表单元素过滤器：

1. $(":enabled")
2. $(":disabled")
3. $(":checked")
4. $("select option:selected")选择所有的select的子元素中被selected的元素

三。jQuery事件：

• 鼠标事件：

1. click
2. dblclick
3. mouseenter鼠标指针划过元素
4. mouseleave鼠标离开元素
5. mousedown鼠标划过元素并且按下鼠标按键
6. mouseup在元素上松开鼠标按钮，触发
7. hover鼠标悬停事件，是mouseenter和mouseleave的混合

• 键盘事件：

1. keydown键按下的过程
2. keyup键被松开
3. keypress键被按下

• 表单事件：

1. submit提交表单时，会发生submit事件，该事件只适用于<form>元素
2. change当表单元素的值改变时
3. focus
4. blur

• .on(),.off()

jQuery效果：

• 基本：

1. show()
2. hide()
3. toggle()

• 滑动：

1. slideUp()
2. slideDown()
3. slideToggle()

• 淡入淡出：

1. fadeIn(speed,callback)
2. fadeOut(speed,callback)speed为fast，slow，3000等数值
3. fadeTo(speed,opacity,callback)加透明度（值介于0-1之间）
4. fadeToggle(speed,callback)切换，如果元素已经淡出，则fadeToggle()会向元素添加淡入效果

• 自定义：

1. animate({params},speed,callback)
2. stop()停止动画或者其他效果
3. delay()
4. finish()

四。jQuery设置或者捕获内容：

1. text()所选元素的文本内容
2. html()设置或者返回所选表单的内容
3. val()表单字段的值

五。jQuery添加或者删除元素：

• 添加元素：

1. append()在被选元素结尾插入内容
2. prepend()开头
3. after()在被选元素之后插入内容
4. before()之前

• 删除元素：

1. remove()删除被选元素（及其子元素）
2. empty()删除被选元素的子元素

六。jQuery操作css类：

1. addClass()
2. removeClass()
3. toggleClass()

七。jQuery操作css方法:

1. css();

八。jQuery的一些问题：

• jQuery库中的$()是什么？

$()函数是jQuery()函数的别称，可以被允许调用定义在jQuery对象上的多个不同方法。

• $(this)和this关键字在jQuery中有何不同？

$(this)返回一个jQuery对象，可以对它调用多个jQuery方法，比如text(),val()；this代表当前元素，是js的关键词，表示上下文当前的DOM元素，不能对它调用jQuery方法。