jQuery 

jQuery是一个javascript函数库

jQuery是一个轻量级的“写的少,做的多“的javascript库

 

 

jquery

主要是用来替换原生的javascript

 

优势

轻量级

强大的选择器

出色的dom操作及其封装

可靠的事件处理机制

完善的ajax

不污染顶级变量

出色的浏览器兼容性

链式操作方式

隐式迭代

行为层和和结构层的分离

丰富的插件支持

 

 

使用jquaery

常规引入

jquery学习笔记

 

$符号

大多时候 我们直接使用$

如果$变量被占用是 我们就使用jquery

 

jquert的书写格式

你用什么就写什么

jquery学习笔记

 

 

 

jquery学习笔记

 

 

jquery学习笔记

这三种方法的原型是

window.οnlοad=function(){

。。。。。。

}

 

 

 

jquery选择器

类似于$(”#dom.ID“)

返回对象的jquery对象 类似于数组 每个元素都是一个引用了dom节点的对象

不会返回 undefined或者null

 

 

 

基本选择器

#id   ID选择器

jquery学习笔记

 

 

 

element 元素选择器

jquery学习笔记

当选择特定的选项 $(this).index()

当作数组时 $('div')[index]

 

.class选择器

jquery学习笔记

 

* 通配符选择器

会选中html中的所有标签元素

jquery学习笔记

 

 

多项选择器

$(”selector1,selector2, selector3');

将每一个选择器匹配到的元素合并一起返回

jquery学习笔记

 

 

 

 

 

 

 

层级选择器

$(’父级元素  子孙元素‘)

他会匹配父级元素下的子孙元素

jquery学习笔记

 

 

子选择器

$('父元素>子元素')

jquery学习笔记

 

兄弟选择器

选择紧跟在元素后的兄弟元素

$('兄弟元素+兄弟元素')

jquery学习笔记

 

兄弟选择器

$('兄弟元素~兄弟元素')

选择元素后面的所有兄弟选择器

jquery学习笔记

 

 

属性选择器

$('[ 属性名]')

jquery学习笔记

 

 

属性值选择器

$('[属性名=属性值]')

jquery学习笔记

$('[属性名!=属性值]')

选中除了这个属性的其他属性

jquery学习笔记

$('[属性名^=属性值]')

选中属性值开头的所有的

jquery学习笔记

$('[属性名$=属性值]')

选中属性值结尾的所有

jquery学习笔记

 

$('[属性名*=属性值]')

选中包含属性值得项目

jquery学习笔记

 

多个属性选择器

要同时满足这几个属性才能被找到

jquery学习笔记

jquery学习笔记

 

 

 

 

过滤器

::first-child

jquery学习笔记

::last-child

jquery学习笔记

nth-child(n)

jquery学习笔记

nth-last-child(n)

jquery学习笔记

only-child

jquery学习笔记

 

:first-of-type

:last-of-type

nth-of-type(n)

nth-last-of-child(n)

only-of-type

jquery学习笔记

 

过滤器参数

n   匹配子元素序号 从1开始

even 匹配偶数元素

jquery学习笔记

odd 匹配奇数元素

jquery学习笔记

 

 

jquery学习笔记

 

表单相关的选择器

:input 可以选择input textarea select button

jquery学习笔记

:text 匹配所有的单行文本框 和input[type='text']一样

jquery学习笔记

其他的input的type

:password/:radio/:checkbox/:image/:rest/:button/:file

 

表单状态

:enabled

:disabled

enabled匹配可以选中的disabled匹配不可选择的

:checked

匹配单选框和复选框选中的项目

selected

匹配下拉框的元素

 

查找和过滤

find()

搜索所有与指定表达时匹配的元素

jquery学习笔记

children([expr])

取得一个包含的元素集合中的每一个元素的所有子元素的元素合集

jquery学习笔记

 

 

parent([])

取得一个包含着他的父元素元素集合

jquery学习笔记

next([expr])\  prev([expr])

取得一个包含匹配的元素集合中的每一个元素紧邻的后面(前面的)同辈元素集合

jquery学习笔记

eq(index)

取得一个包含匹配元素集合中的每一个元素的所有唯一同辈的元素集合

jquery学习笔记

silblings([expr])

取得一个包含匹配的元素集合中的每一个元素的唯一同辈元素的集合

jquery学习笔记

 

 

 

 

事件类型

鼠标事件

click 鼠标单击时触发

dbclick鼠标双击时触发

 

 

jquery学习笔记

 

mousedown鼠标按下时触发

mouseup 鼠标放松时触发

jquery学习笔记

 

 

mouseenter mouseleave

鼠标进入移出

jquery学习笔记

 

hover([ovre,]out)

鼠标悬浮

jquery学习笔记

 

mouseover mouseout

鼠标进去移出里面的子元素会触发事件

jquery学习笔记

 

mousemove([[data],fn])

在dom内部移动,会发生mouse move事件

 

scroll 滚动事件

scroll([[data],fn])

当滚动指定的元素时 会触发事件

 

 

键盘事件

keydown([[data],fn])

当按键被按下时 触发事件。

按下需要知道是哪个按键时要用event keyCode表示为输入按键的ASCII码

jquery学习笔记

keyup([[data],fn])

当按键松开时触发事件

jquery学习笔记

可以发生在document和获得焦点的元素上面

keypress([[data],fn])

按下时会触发事件

如果调整了输入内容时 不会触发事件

 

其他事件

ready

当dom载入就绪时

 

resize([[data],fn])

当改变浏览器窗口大小时 发生事件

jquery学习笔记

 

focus([[data],fn]),blur([[data],fn])

当焦点获得/失去时 触发事件

jquery学习笔记

 

change([[data],fn])

当内容发生变化时触发事件

jquery学习笔记

 

其他事件

select([[data],fn])

当文本被选择时会触发事件

 

submit([[data],fn])

当提交表单时,会发生submit事件

提交表单 阻止表单提交 提交表单时做一些我们所需要做的事情

jquery学习笔记

jquery学习笔记

jquery学习笔记

 

 

 

事件参数

jquery学习笔记

 

事件的绑定与取消

on(events,data,fn)

在选择元素上绑定一个或者多个事件的事件处理函数

 

 

off(events,data,fn)

取消

jquery学习笔记

 

 

 

自定义动画

 

jQuery动画

动画dom及其css操作

 

 

 

自定义动画 animate()

可以实现任意动画效果,需要传递的参数时dom元素最终的css状态和事件。

jquery学习笔记

 

opacity 设切换事件 如果切换时间过长 会导致无法解释切换 需要在自定义动画上加上stop()来控制切换

 

 

 

串行动画

delay()可以使得动画暂停

jquery学习笔记

动画函数

show/hide 显示和隐藏

可以设置数值或者时fast/slow

jquery学习笔记

toggle()把显示的元素隐藏 隐藏的元素显示

jquery学习笔记

 

fadeIn/fadeOut 淡入淡出

jquery学习笔记

fadetoggle()和toggle功能类似

jquery学习笔记

slide Up/slideDown 垂直方向张开或者收缩

jquery学习笔记

slidetoggle 展开和隐藏

 

 

计时器

setTimeout 过多长时间后执行那个函数

setInterval  重复多少次后执行函数

 

 

 

 


 

相关文章: