jQuery选择器
基本选择器
#id :根据id属性匹配元素 //重点
Element :根据标签名称匹配元素 //重点
selector1,selector2 :群组选择器,匹配所有满足条件的元素 //重点
.class :根据class属性匹配元素 //重点
层级选择器
ancetor descendant :匹配当前元素的所有后代元素 //重点
parent > child :匹配当前元素的所有子元素 //重点
prev + next :匹配当前元素后面紧邻的下一个元素
prev~siblings :匹配当前元素后面所有的同级兄弟元素
简单选择器
:first :匹配第一个元素
:last :匹配最后一个元素
:even :匹配所有偶数元素
:odd :匹配所有奇数元素
:eq(index) :匹配索引等于index的元素,默认索引从0开始 //重点
:gt(index) :匹配索引大于index的元素
:lt(index) :匹配索引小于index的元素
:not(selector) :匹配除指定选择器以外的元素
内容选择器
:contains(text) :匹配内容包含text的元素
:empty :匹配内容为空的元素 //重点
:has(selector) :匹配具有指定选择器的元素
:parent :匹配具有子元素的元素(匹配内容不为空的元素)
可见性选择器
:hidden :匹配所有隐藏元素,(隐藏表单元素以及display:none元素)
:visible :匹配所有可视化元素
属性选择器
[attribute] :匹配具有指定属性的元素
[attribute=value] :匹配元素属性等于指定值的元素 //重点
[attribute!=value] :匹配元素属性值不等于value的元素
[attribute^=value] :匹配属性值以value开始的元素
[attribute$=value] :匹配属性值以value结尾的元素
[attribute*=value] :匹配属性值包含value的元素
[selector1][selector2][selectorN] :匹配同时具有多个属性的元素 //重点
子元素选择器
:nth-child(index/even/odd) 从1算起,根据(索引/偶数/奇数)来匹配子元素
:first-child :匹配第一个子元素
:last-child :匹配最后一个子元素
:only-child :如果当前元素是唯一子元素,则匹配
表单选择器
:input :匹配所有表单元素 //重点
:text :匹配所有文本框 //重点
:password :匹配所有密码框
:radio :匹配所有单选按钮
:checkbox :匹配所有复选框 //重点
:submit :匹配所有提交按钮
:reset :匹配所有重置按钮
:image :匹配所有图像域
:button :匹配所有button按钮
:file :匹配所有文本域
:hidden :匹配所有隐藏表单
表单对象选择器
:enabled :匹配所有可用表单元素
:disabled :匹配所有不可用表单元素
:checked :匹配所有选中的元素 //重点
:selected :匹配所有下拉选中的元素 //重点
*********************************************************************
jQuery对象转DOM对象
DOM对象 = jQuery对象[索引];
DOM对象 = jQuery对象.get(索引);
DOM对象转jQuery对象
jQuery对象 = $(DOM对象);
*********************************************************************
属性操作
<元素 属性=属性的值 … />
attr(name) :获取指定属性的值
attr(key,value) :设置指定属性
attr(properties) :同时为元素设置多个属性,要求格式是一个json对象
attr(key,fn) :通过函数的返回值,设置元素属性
removeAttr(name) :移除某个属性
class属性操作
<元素 class=”class样式” />
addClass(class) :为元素添加class样式
removeClass(class) :移除元素的class样式
toggleClass(class) :切换class属性,如果当前元素存在该属性则移除,反之,添加
hasClass(class) :判断元素是否具有某个class样式
css操作
<元素 style=’border:1px #f00 solid; background-color:yellow’ />
css(name) :获取css属性值
css(name,value) :设置css属性值
css(properties) :同时为元素设置多个css样式
offset位置
offset() :获取元素的位置信息,返回json对象,包含left和top两个属性
offset(coordinates) :设置元素的位置信息,要求是一个json对象,必须包含left和
top属性
尺寸操作
width() :获取元素的宽度
width(value) :设置元素宽度
height() :获取元素的高度
height(value) :设置元素的高度
文本/值
html() :获取元素的值
html(val) :设置元素的值
相当于DOM对象中的innerHTML属性(操作双标签元素)
val() :获取表单元素的值
val(val) :设置表单元素的值
相当于DOM对象中的value属性(操作表单元素)
text() :获取元素的值
text(val) :设置元素的值
相当于DOM对象中的innerText属性(原生代码具有兼容性问题,在jQuery中已解决)
***********************************************************************
基本事件
blur(fn) :当失去焦点时触发
change(fn) :当状态改变时触发
click(fn) :当单击时触发
dblclick(fn) :当双击时触发
focus(fn) :当获得焦点时触发
keydown(fn) :当键盘按下时触发
keyup(fn) :当键盘弹起时触发
keypress(fn) :当键盘按下时触发 keypress?keydown?keyup
load(fn) :当页面载入完毕后触发(功能与ready方法类似)
unload(fn) :当页面关闭时触发
mousedown(fn) :当鼠标按下时触发
mouseup(fn) :当鼠标弹起时触发
mousemove(fn) :当鼠标移动时触发
mouseover(fn) :当鼠标悬浮时触发
mouseout(fn) :当鼠标离开时触发
resize(fn) :当窗口大小改变时触发
scroll(fn) :当滚动条滚动时触发
select(fn) :(了解),当文本框内容被选中时触发
submit(fn) :当表单元素提交时触发
*******************************************************************
hover(over,out) :鼠标切换事件(鼠标悬浮,鼠标离开)
参数解析:
鼠标悬浮与鼠标离开切换事件,当鼠标悬浮时触发第一个事件处理程序,当鼠标离开时触
发第二个事件处理程序。
over:鼠标悬浮事件
out:鼠标离开事件
*******************************************************************
toggle(fn,fn) :点击切换事件
参数说明:
当我们第一次单击时触发第一个fn事件处理程序,当我们第二次单击时触发第二
个fn事件处理程序,当我们第三次单击时,触发第一个fn事件处理程序(当然其可以定义
多个fn事件处理程序)
fn:事件的处理程序
*********************************************************************
事件绑定
bind(type,[data],fn) :为元素绑定相关事件
参数说明:
type:要绑定的事件类型,不带’on’前缀,如click、mouseover、mouseout
[data]:(了解),事件发生时所传递的参数
fn:事件的处理程序,一般是一个匿名函数
bind({type:fn,type:fn}) :为元素绑定多个相关事件,要求参数是一个json对象
参数说明:
参数只有一个,就是一个json对象,里面属性为type,值为fn
type:事件的类型
fn:事件的处理程序
one(type,[data],fn) :为元素进行一次绑定,只绑定一次
参数说明:
type:要绑定的事件类型,不带’on’前缀,如click、mouseover、mouseout
[data]:(了解),事件发生时所传递的参数
fn:事件的处理程序,一般是一个匿名函数
unbind([type]) :移除元素事件
参数说明:
[type]:可选参数,填写type代表移除某个指定的事件
不填写代表移除所有事件
这个方法不同于原生Javascript中的移除,原生Javascript代码移除时,首先必须要具有
一个前提:在元素进行绑定时,其事件的处理程序必须是一个有名函数。
********************************************************************
阻止事件冒泡
jQuery对象.bind(‘事件’,function(event) {
event.stopPropagation();
});
********************************************************************
阻止默认行为
记住:在jQuery中其完全兼容W3C所以处理方式一样
jQuery对象.bind(‘事件’,function(event) {
event.preventDefault();
});
********************************************************************
基本效果(显示与隐藏)
show() :显示
show(speed,[callback]) :以动画效果显示
hide() :隐藏
hide(speed,[callback]) :以动画效果隐藏
toggle() :显示或隐藏,如果显示则隐藏,反之则显示
toggle(switch) :显示或隐藏,如果参数为true,代表一直显示,反之,一直隐藏
toggle(speed,[callback]) 以动画效果切换或隐藏
参数说明:
1)speed:速度,其可以使用以下三个值
speed:"slow", "normal", "fast"
slow:缓慢的
normal:正常的
fast:快速的
2)speed:动画的持续时间,单位为毫秒,3000代表(3s)
3)[callback]:动画完成时所触发的回调函数
********************************************************************
滑动效果(向上或向下滑动)
slideDown(speed,[callback]) :以动画效果向下滑动
slideUp(speed,[callback]) :以动画效果向上滑动
slideToggle(speed,[callback]) :以动画效果向上或向下滑动
********************************************************************
淡入淡出效果(透明度设置)
fadeIn(speed,[callback]) :以动画效果淡入
fadeOut(speed,[callback]) :以动画效果淡出
参数说明:
speed:动画的持续时间
[callback]:动画完成时所触发的回调函数
fadeTo(speed,opacity,[callback]) :设置元素的透明度
参数说明:
speed:动画的持续时间
opacity:元素的透明度(0全透明 1不透明 0-1之间半透明)
[callback]:动画完成时所触发的回调函数
********************************************************************
自定义动画
animate(params,[speed]) :自定义动画
参数说明:
params:自定义动画效果,要求是一个json格式的对象
[speed]:动画持续时间
********************************************************************
jQuery文档操作
插入
删除
复制
替换
包裹
查找
1、插入操作(内部插入)
append(content) :把content内容插入到元素的尾部
appendTo(content) :把匹配到的内容插入到content元素的尾部
prepend(content) :把content内容插入到元素的头部
prependTo(content) :把匹配到的内容插入到content元素的头部
2、插入操作(外部插入)
after(content) :在元素的尾部插入content内容
before(content) :在元素的头部插入content内容
insertAfter(content) :把匹配到的内容插入到content元素的尾部
insertBefore(content) :把匹配到的内容插入到content元素的头部
3、删除操作
在jQuery代码中,删除一般有两种情况:
1)删除元素的内容,但是保留标签 empty()
2)删除元素的内容同时也删除元素的标签 remove()
4、复制操作(克隆元素)
clone() :克隆元素但不是不克隆元素本身的事件
clone(true) :克隆元素且克隆元素本身的事件
5、替换操作
replaceWith() :实现元素节点的替换
html()、text() :实现元素内容(值)的替换
6、包裹操作
wrap() :对每个匹配的元素进行单独包裹
wrapAll() :对所有匹配的元素进行一次包裹
wrapInner() :对每个匹配的元素的内容进行单独包裹
7、查找操作
eq(index) :匹配索引等于index的元素
filter(expr) :过滤(但是这个过滤不是过滤掉元素而是缩小查询的范围)
not(expr) :匹配除指定选择器以外的其他元素
children([expr]) :匹配当前元素的所有子元素(只有一级关系)
find(expr) :匹配当前元素的所有后代元素(可能具有多级关系)
next([expr]) :匹配当前元素紧邻的下一个元素(要求是同级兄弟节点)
prev([expr]) :匹配当前元素紧邻的上一个元素(要求是同级兄弟节点)
parent([expr]) :匹配当前元素的父元素
siblings([expr]) :匹配当前元素的所有同级兄弟节点(包括上面也包括下面)
***********************************************************************
2、实现jQuery插件扩展
jQuery.fn.extend(object) 或 $.fn.extend(object)
语法:
jQuery.fn.extend({
//属性:扩展函数的名称,右边的函数就是函数的具体实现
fn1:function(){},
fn2:function(){},
......
});
基本选择器
#id :根据id属性匹配元素 //重点
Element :根据标签名称匹配元素 //重点
selector1,selector2 :群组选择器,匹配所有满足条件的元素 //重点
.class :根据class属性匹配元素 //重点
层级选择器
ancetor descendant :匹配当前元素的所有后代元素 //重点
parent > child :匹配当前元素的所有子元素 //重点
prev + next :匹配当前元素后面紧邻的下一个元素
prev~siblings :匹配当前元素后面所有的同级兄弟元素
简单选择器
:first :匹配第一个元素
:last :匹配最后一个元素
:even :匹配所有偶数元素
:odd :匹配所有奇数元素
:eq(index) :匹配索引等于index的元素,默认索引从0开始 //重点
:gt(index) :匹配索引大于index的元素
:lt(index) :匹配索引小于index的元素
:not(selector) :匹配除指定选择器以外的元素
内容选择器
:contains(text) :匹配内容包含text的元素
:empty :匹配内容为空的元素 //重点
:has(selector) :匹配具有指定选择器的元素
:parent :匹配具有子元素的元素(匹配内容不为空的元素)
可见性选择器
:hidden :匹配所有隐藏元素,(隐藏表单元素以及display:none元素)
:visible :匹配所有可视化元素
属性选择器
[attribute] :匹配具有指定属性的元素
[attribute=value] :匹配元素属性等于指定值的元素 //重点
[attribute!=value] :匹配元素属性值不等于value的元素
[attribute^=value] :匹配属性值以value开始的元素
[attribute$=value] :匹配属性值以value结尾的元素
[attribute*=value] :匹配属性值包含value的元素
[selector1][selector2][selectorN] :匹配同时具有多个属性的元素 //重点
子元素选择器
:nth-child(index/even/odd) 从1算起,根据(索引/偶数/奇数)来匹配子元素
:first-child :匹配第一个子元素
:last-child :匹配最后一个子元素
:only-child :如果当前元素是唯一子元素,则匹配
表单选择器
:input :匹配所有表单元素 //重点
:text :匹配所有文本框 //重点
:password :匹配所有密码框
:radio :匹配所有单选按钮
:checkbox :匹配所有复选框 //重点
:submit :匹配所有提交按钮
:reset :匹配所有重置按钮
:image :匹配所有图像域
:button :匹配所有button按钮
:file :匹配所有文本域
:hidden :匹配所有隐藏表单
表单对象选择器
:enabled :匹配所有可用表单元素
:disabled :匹配所有不可用表单元素
:checked :匹配所有选中的元素 //重点
:selected :匹配所有下拉选中的元素 //重点
*********************************************************************
jQuery对象转DOM对象
DOM对象 = jQuery对象[索引];
DOM对象 = jQuery对象.get(索引);
DOM对象转jQuery对象
jQuery对象 = $(DOM对象);
*********************************************************************
属性操作
<元素 属性=属性的值 … />
attr(name) :获取指定属性的值
attr(key,value) :设置指定属性
attr(properties) :同时为元素设置多个属性,要求格式是一个json对象
attr(key,fn) :通过函数的返回值,设置元素属性
removeAttr(name) :移除某个属性
class属性操作
<元素 class=”class样式” />
addClass(class) :为元素添加class样式
removeClass(class) :移除元素的class样式
toggleClass(class) :切换class属性,如果当前元素存在该属性则移除,反之,添加
hasClass(class) :判断元素是否具有某个class样式
css操作
<元素 style=’border:1px #f00 solid; background-color:yellow’ />
css(name) :获取css属性值
css(name,value) :设置css属性值
css(properties) :同时为元素设置多个css样式
offset位置
offset() :获取元素的位置信息,返回json对象,包含left和top两个属性
offset(coordinates) :设置元素的位置信息,要求是一个json对象,必须包含left和
top属性
尺寸操作
width() :获取元素的宽度
width(value) :设置元素宽度
height() :获取元素的高度
height(value) :设置元素的高度
文本/值
html() :获取元素的值
html(val) :设置元素的值
相当于DOM对象中的innerHTML属性(操作双标签元素)
val() :获取表单元素的值
val(val) :设置表单元素的值
相当于DOM对象中的value属性(操作表单元素)
text() :获取元素的值
text(val) :设置元素的值
相当于DOM对象中的innerText属性(原生代码具有兼容性问题,在jQuery中已解决)
***********************************************************************
基本事件
blur(fn) :当失去焦点时触发
change(fn) :当状态改变时触发
click(fn) :当单击时触发
dblclick(fn) :当双击时触发
focus(fn) :当获得焦点时触发
keydown(fn) :当键盘按下时触发
keyup(fn) :当键盘弹起时触发
keypress(fn) :当键盘按下时触发 keypress?keydown?keyup
load(fn) :当页面载入完毕后触发(功能与ready方法类似)
unload(fn) :当页面关闭时触发
mousedown(fn) :当鼠标按下时触发
mouseup(fn) :当鼠标弹起时触发
mousemove(fn) :当鼠标移动时触发
mouseover(fn) :当鼠标悬浮时触发
mouseout(fn) :当鼠标离开时触发
resize(fn) :当窗口大小改变时触发
scroll(fn) :当滚动条滚动时触发
select(fn) :(了解),当文本框内容被选中时触发
submit(fn) :当表单元素提交时触发
*******************************************************************
hover(over,out) :鼠标切换事件(鼠标悬浮,鼠标离开)
参数解析:
鼠标悬浮与鼠标离开切换事件,当鼠标悬浮时触发第一个事件处理程序,当鼠标离开时触
发第二个事件处理程序。
over:鼠标悬浮事件
out:鼠标离开事件
*******************************************************************
toggle(fn,fn) :点击切换事件
参数说明:
当我们第一次单击时触发第一个fn事件处理程序,当我们第二次单击时触发第二
个fn事件处理程序,当我们第三次单击时,触发第一个fn事件处理程序(当然其可以定义
多个fn事件处理程序)
fn:事件的处理程序
*********************************************************************
事件绑定
bind(type,[data],fn) :为元素绑定相关事件
参数说明:
type:要绑定的事件类型,不带’on’前缀,如click、mouseover、mouseout
[data]:(了解),事件发生时所传递的参数
fn:事件的处理程序,一般是一个匿名函数
bind({type:fn,type:fn}) :为元素绑定多个相关事件,要求参数是一个json对象
参数说明:
参数只有一个,就是一个json对象,里面属性为type,值为fn
type:事件的类型
fn:事件的处理程序
one(type,[data],fn) :为元素进行一次绑定,只绑定一次
参数说明:
type:要绑定的事件类型,不带’on’前缀,如click、mouseover、mouseout
[data]:(了解),事件发生时所传递的参数
fn:事件的处理程序,一般是一个匿名函数
unbind([type]) :移除元素事件
参数说明:
[type]:可选参数,填写type代表移除某个指定的事件
不填写代表移除所有事件
这个方法不同于原生Javascript中的移除,原生Javascript代码移除时,首先必须要具有
一个前提:在元素进行绑定时,其事件的处理程序必须是一个有名函数。
********************************************************************
阻止事件冒泡
jQuery对象.bind(‘事件’,function(event) {
event.stopPropagation();
});
********************************************************************
阻止默认行为
记住:在jQuery中其完全兼容W3C所以处理方式一样
jQuery对象.bind(‘事件’,function(event) {
event.preventDefault();
});
********************************************************************
基本效果(显示与隐藏)
show() :显示
show(speed,[callback]) :以动画效果显示
hide() :隐藏
hide(speed,[callback]) :以动画效果隐藏
toggle() :显示或隐藏,如果显示则隐藏,反之则显示
toggle(switch) :显示或隐藏,如果参数为true,代表一直显示,反之,一直隐藏
toggle(speed,[callback]) 以动画效果切换或隐藏
参数说明:
1)speed:速度,其可以使用以下三个值
speed:"slow", "normal", "fast"
slow:缓慢的
normal:正常的
fast:快速的
2)speed:动画的持续时间,单位为毫秒,3000代表(3s)
3)[callback]:动画完成时所触发的回调函数
********************************************************************
滑动效果(向上或向下滑动)
slideDown(speed,[callback]) :以动画效果向下滑动
slideUp(speed,[callback]) :以动画效果向上滑动
slideToggle(speed,[callback]) :以动画效果向上或向下滑动
********************************************************************
淡入淡出效果(透明度设置)
fadeIn(speed,[callback]) :以动画效果淡入
fadeOut(speed,[callback]) :以动画效果淡出
参数说明:
speed:动画的持续时间
[callback]:动画完成时所触发的回调函数
fadeTo(speed,opacity,[callback]) :设置元素的透明度
参数说明:
speed:动画的持续时间
opacity:元素的透明度(0全透明 1不透明 0-1之间半透明)
[callback]:动画完成时所触发的回调函数
********************************************************************
自定义动画
animate(params,[speed]) :自定义动画
参数说明:
params:自定义动画效果,要求是一个json格式的对象
[speed]:动画持续时间
********************************************************************
jQuery文档操作
插入
删除
复制
替换
包裹
查找
1、插入操作(内部插入)
append(content) :把content内容插入到元素的尾部
appendTo(content) :把匹配到的内容插入到content元素的尾部
prepend(content) :把content内容插入到元素的头部
prependTo(content) :把匹配到的内容插入到content元素的头部
2、插入操作(外部插入)
after(content) :在元素的尾部插入content内容
before(content) :在元素的头部插入content内容
insertAfter(content) :把匹配到的内容插入到content元素的尾部
insertBefore(content) :把匹配到的内容插入到content元素的头部
3、删除操作
在jQuery代码中,删除一般有两种情况:
1)删除元素的内容,但是保留标签 empty()
2)删除元素的内容同时也删除元素的标签 remove()
4、复制操作(克隆元素)
clone() :克隆元素但不是不克隆元素本身的事件
clone(true) :克隆元素且克隆元素本身的事件
5、替换操作
replaceWith() :实现元素节点的替换
html()、text() :实现元素内容(值)的替换
6、包裹操作
wrap() :对每个匹配的元素进行单独包裹
wrapAll() :对所有匹配的元素进行一次包裹
wrapInner() :对每个匹配的元素的内容进行单独包裹
7、查找操作
eq(index) :匹配索引等于index的元素
filter(expr) :过滤(但是这个过滤不是过滤掉元素而是缩小查询的范围)
not(expr) :匹配除指定选择器以外的其他元素
children([expr]) :匹配当前元素的所有子元素(只有一级关系)
find(expr) :匹配当前元素的所有后代元素(可能具有多级关系)
next([expr]) :匹配当前元素紧邻的下一个元素(要求是同级兄弟节点)
prev([expr]) :匹配当前元素紧邻的上一个元素(要求是同级兄弟节点)
parent([expr]) :匹配当前元素的父元素
siblings([expr]) :匹配当前元素的所有同级兄弟节点(包括上面也包括下面)
***********************************************************************
2、实现jQuery插件扩展
jQuery.fn.extend(object) 或 $.fn.extend(object)
语法:
jQuery.fn.extend({
//属性:扩展函数的名称,右边的函数就是函数的具体实现
fn1:function(){},
fn2:function(){},
......
});