1.jQuery:一种JS的轻量级框架,封装了JS、CSS、DOM,提供了一致简洁的API,兼容CSS3及各种浏览器,能够更方便的操作HTML、Events、动画处理、Ajax交互。使用户页面保持HTML和代码分离,使用步骤是:
1)引入jQuery的js文件
2)利用选择器定位要操作的节点
3)使用jQuery的API操作节点
2.jQuery对象:jQuery为解决浏览器的兼容问题封装的,大部分方法的返回值是jQuery对象,其实质是DOM对象数组。拥有数组的特性,利用obj.get(index)或obj[index]可获得数组元素,为DOM对象,通过$(DOM对象)转为jQuery对象
3.jQuery选择器:类似于CSS选择,能够实现定位元素,施加行为。选择器分为:
1)基本选择器
---元素选择器:$("标签名")
---类选择器:$(".class属性名")
---id选择器:$("#id名")
---选择器组
2)层次选择
---$("s1 s2"):选择s1下所有的s2(父子孙关系)
---$("s1>s2"):选择s1下子元素的s2(父子关系)
$("s1+s2"):选择s1下一个的s2(下一个弟弟)
$("s1~s2"):选择s1后所有的s2(所有弟弟)
3)过滤选择器
:first/:last/:not(selector)/:even/:odd/:eq(index)/:gt(index)/:lt(index),分别是第一个、最后一个、不包括、奇数行、偶数行、下标相等的、大于下标的、小于下标的
:contains(text)--包含指定文本的元素;empty--不包含子元素或内容的元素
---可见性过滤选择器:包括:hidden--不可见元素; :visible--可见元素
[attribute名]--匹配具有attr属性的元素;[attribute=value]--匹配attr属性等于value的元素(还有!=)
:checked(选择的,针对单多选):selected(针对下拉选)
4)表单选择器:依据<input>的type属性值选择
4.jQuery对节点操作:
1)读写节点:方法无参数意味着读取,有参数为修改,值为参数
2)创建节点:
3)插入节点:
4)样式操作:
5)遍历节点:
5.jQuery事件:
1)$obj.click():单击事件,可以传入函数名作为参数
$(function(){});:相当于onload事件
$obj.click(function(e){}):获取event对象
e.stopPropagation()取消事件冒泡
event或者this
6)合成事件:
---hover(mouseenter,mouseleave):模拟鼠标悬停和离开事件
---toggle():切换多个事件
$obj.each(function(){}):数组遍历的方法,自动循环执行function函数,利用this获取当前对象
6.jQuery动画:
1)show()/hide():显示或隐藏动画,可传入的参数是(执行时间,回调函数),执行时间的值是:slow、normal、fast、毫秒数;回调函数是指该函数执行完后接着执行的函数
2)slideDown()/slideUp():通过改变高度来实现显示或隐藏,用法同上
3)fadeIn()/fadeOut():通过改变透明度来实现显示或隐藏,用法同上
animate(偏移位置,执行时间,回调函数):自定义动画。偏移位置写法是JSON,其他参数用法同上