jQuery
jQuery是一个javascript函数库
jQuery是一个轻量级的“写的少,做的多“的javascript库
jquery
主要是用来替换原生的javascript
优势
轻量级
强大的选择器
出色的dom操作及其封装
可靠的事件处理机制
完善的ajax
不污染顶级变量
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层和和结构层的分离
丰富的插件支持
使用jquaery
常规引入
$符号
大多时候 我们直接使用$
如果$变量被占用是 我们就使用jquery
jquert的书写格式
你用什么就写什么
、
这三种方法的原型是
window.οnlοad=function(){
。。。。。。
}
jquery选择器
类似于$(”#dom.ID“)
返回对象的jquery对象 类似于数组 每个元素都是一个引用了dom节点的对象
不会返回 undefined或者null
基本选择器
#id ID选择器
element 元素选择器
当选择特定的选项 $(this).index()
当作数组时 $('div')[index]
.class选择器
* 通配符选择器
会选中html中的所有标签元素
多项选择器
$(”selector1,selector2, selector3');
将每一个选择器匹配到的元素合并一起返回
层级选择器
$(’父级元素 子孙元素‘)
他会匹配父级元素下的子孙元素
子选择器
$('父元素>子元素')
兄弟选择器
选择紧跟在元素后的兄弟元素
$('兄弟元素+兄弟元素')
兄弟选择器
$('兄弟元素~兄弟元素')
选择元素后面的所有兄弟选择器
属性选择器
$('[ 属性名]')
属性值选择器
$('[属性名=属性值]')
$('[属性名!=属性值]')
选中除了这个属性的其他属性
$('[属性名^=属性值]')
选中属性值开头的所有的
$('[属性名$=属性值]')
选中属性值结尾的所有
$('[属性名*=属性值]')
选中包含属性值得项目
多个属性选择器
要同时满足这几个属性才能被找到
过滤器
::first-child
::last-child
nth-child(n)
nth-last-child(n)
only-child
:first-of-type
:last-of-type
nth-of-type(n)
nth-last-of-child(n)
only-of-type
过滤器参数
n 匹配子元素序号 从1开始
even 匹配偶数元素
odd 匹配奇数元素
表单相关的选择器
:input 可以选择input textarea select button
:text 匹配所有的单行文本框 和input[type='text']一样
其他的input的type
:password/:radio/:checkbox/:image/:rest/:button/:file
表单状态
:enabled
:disabled
enabled匹配可以选中的disabled匹配不可选择的
:checked
匹配单选框和复选框选中的项目
selected
匹配下拉框的元素
查找和过滤
find()
搜索所有与指定表达时匹配的元素
children([expr])
取得一个包含的元素集合中的每一个元素的所有子元素的元素合集
parent([])
取得一个包含着他的父元素元素集合
next([expr])\ prev([expr])
取得一个包含匹配的元素集合中的每一个元素紧邻的后面(前面的)同辈元素集合
eq(index)
取得一个包含匹配元素集合中的每一个元素的所有唯一同辈的元素集合
silblings([expr])
取得一个包含匹配的元素集合中的每一个元素的唯一同辈元素的集合
事件类型
鼠标事件
click 鼠标单击时触发
dbclick鼠标双击时触发
mousedown鼠标按下时触发
mouseup 鼠标放松时触发
mouseenter mouseleave
鼠标进入移出
hover([ovre,]out)
鼠标悬浮
mouseover mouseout
鼠标进去移出里面的子元素会触发事件
mousemove([[data],fn])
在dom内部移动,会发生mouse move事件
scroll 滚动事件
scroll([[data],fn])
当滚动指定的元素时 会触发事件
键盘事件
keydown([[data],fn])
当按键被按下时 触发事件。
按下需要知道是哪个按键时要用event keyCode表示为输入按键的ASCII码
keyup([[data],fn])
当按键松开时触发事件
可以发生在document和获得焦点的元素上面
keypress([[data],fn])
按下时会触发事件
如果调整了输入内容时 不会触发事件
其他事件
ready
当dom载入就绪时
resize([[data],fn])
当改变浏览器窗口大小时 发生事件
focus([[data],fn]),blur([[data],fn])
当焦点获得/失去时 触发事件
change([[data],fn])
当内容发生变化时触发事件
其他事件
select([[data],fn])
当文本被选择时会触发事件
submit([[data],fn])
当提交表单时,会发生submit事件
提交表单 阻止表单提交 提交表单时做一些我们所需要做的事情
事件参数
事件的绑定与取消
on(events,data,fn)
在选择元素上绑定一个或者多个事件的事件处理函数
off(events,data,fn)
取消
自定义动画
jQuery动画
动画dom及其css操作
自定义动画 animate()
可以实现任意动画效果,需要传递的参数时dom元素最终的css状态和事件。
opacity 设切换事件 如果切换时间过长 会导致无法解释切换 需要在自定义动画上加上stop()来控制切换
串行动画
delay()可以使得动画暂停
动画函数
show/hide 显示和隐藏
可以设置数值或者时fast/slow
toggle()把显示的元素隐藏 隐藏的元素显示
fadeIn/fadeOut 淡入淡出
fadetoggle()和toggle功能类似
slide Up/slideDown 垂直方向张开或者收缩
slidetoggle 展开和隐藏
计时器
setTimeout 过多长时间后执行那个函数
setInterval 重复多少次后执行函数