首页 > 代码库 > jQuery笔记
jQuery笔记
目录
jQuery选择器
jQuery常用事件
jQuery常用方法
jQuery常用属性
jQuery选择器
基本选择器 | 层次选择器 | 属性选择器 | |||
名称 | 示例 | 名称 | 示例 | 名称 | 示例 |
标签选择器 | $(“h2”)选取所有h2元素 | 后代选择器 | $(“#menu span”)选取#menu下所有的<span>元素 |
属性选择器
| $(“[href]”)选取含有href属性的元素 |
类选择器 | $(“.title”)选取所有class为title的元素 | 子选择器 | $(“#menu >span”)选取#menu下的子元素 | $(“[href=http://www.mamicode.com/’#‘]”)选取href属性值为“#”的元素 | |
ID选择器 | $(“#title”)选取id为title的元素 | 相邻选择器 | $(“h2+dl”)选取紧邻<h2>元素之后的同辈元素<dl> | $(“[href!=’#’]”)选取href属性值不为”#”的元素 | |
并集选择器 | $(“div,p,.title”)选取所有div,p和拥有class为title的元素 | 同辈选择器 | $(“h2~dl”)选取<h2>元素之后所有的同辈元素<dl> | $(“[href^=’en’]”)选取href属性值以en开头的元素 | |
交集选择器 | $(“h2.title”)选取所有拥有class为title的h2元素(id也行) | $(“[href$=’.jpg’]”)选取选取href属性值以.jpg结尾的元素 | |||
全局选择器 | $(“*”)选取所有元素 | $(“[href*=‘txt’]”)选取href属性值中含有txt的元素 | |||
$(“li[id][title=新闻要点]”)选取含有id属性和title属性为”新闻要点”的<li>元素 |
基本过滤选择器 | |
名称 | 示例 |
:first | $(“li:first”)选取所有<li>元素中的第一个<li>元素 |
:last | $(“li:last”)选取所有<li>元素中的最后一个<li>元素 |
:not(selector) | $(“li:not(.three)”)选取class不是three的元素 |
:even | $(“li:even”)选取索引是偶数的所有<li>元素 |
:odd | $(“li:odd”)选取索引是奇数的所有<li>元素 |
:eq(index) | $(“li:eq(1)”)选取索引等于1的<li>元素 |
:gt(index) | $(“li:gt(1)”)选取索引大于1的<li>元素(注意:大于1,不等于1) |
:lt(index) | $(“li:lt(1)”)选取索引大于1的<li>元素(注意:小于1,不等于1) |
jQuery常用方法
方法 | 描述 | 备注 |
addClass() | 向被选元素添加一个或多个类样式 | |
css() | 为匹配的元素添加css样式 | |
Next() | 获得所匹配元素集合中每个元素其后紧邻的同辈元素 | |
Click() | 触发或将函数绑定到指定元素的click事件 | |
Show([speed],[callback]) | 控制元素显示 | Speed:可选,元素从隐藏到完全可见的速度 Callback:可选,show函数执行完之后要执行的函数 |
Hide([speed],[callback]) | 控制元素隐藏 | Speed:可选,元素从隐藏到完全可见的速度 Callback:可选,show函数执行完之后要执行的函数 |
fadeIn([speed],[callback]) | 控制元素淡入 | Speed:可选,元素从隐藏到完全可见的速度 Callback:可选,show函数执行完之后要执行的函数 |
fadeout([speed],[callback]) | 控制元素淡出 | Speed:可选,元素从隐藏到完全可见的速度 Callback:可选,show函数执行完之后要执行的函数 |
Mouseover() | 触发或将函数绑定到指定元素的mouseover()事件 | 鼠标指针移过时 |
Mouseout() | 触发或将函数绑定到指定元素的mouseout()事件 | 鼠标指针移出时 |
Keydown() | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
Keyup() | 触发或将函数绑定到指定元素的keyup事件 | 释放键盘时 |
Keypress() | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
KeyCode() | 获取按下键对应的键值 | |
Focus() | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
Blur() | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
Bind(type,[data],fn) | 为匹配的元素一次性绑定一个或多个事件 | Type事件类型,[data]可选参数(时间),fn函数 |
Unbind([type],[fn]) | 为匹配的元素一次性移除一个或多个事件 | Type事件类型(可选参数)fn函数(可选参数) |
Hover() | 鼠标指针悬停的事件(鼠标移进,触发第一个函数,移除,触发第二个函数) | Hover(enter,leave) |
Toggle() | 鼠标连续click事件(单击一次触发一个事件,重复循环) | Toggle(fn1,fn2….fnN); |
slideUp() | 控制元素从下向上延伸显示 | |
slideDown() | 控制元素从上向下延伸显示 | |
animate(params,[speed],[fn]) | 用于创建自定义动画的函数 | params:一组包含作为动画属性和终值的样式属性和及其值的集合(多个则用{}括起) speed: 表示动画时长的毫秒数值 fn: 在动画完成时执行的函数,每个元素执行一次 |
removeClass(class1,class2) | 移除样式 | |
toggleClass(class) | 切换不同元素的类样式 | |
Html([content]) | 对HTML代码进行操作,通常用于动态的新增页面内容 | Cotent:可选。规定被选元素的新内容,该参数可以包含HTML标签。无参时,表示获取被选元素的文本内容 |
Text() | 获取或设置元素的文本内容,不含HTML标签 | Content:可选。规定被选元素的文本新内容。无参时,表示获取被选元素的文本内容 |
Val() | 获取或设置元素value属性值 | |
Remove() | 将匹配的元素从DOM中删除 | |
Empty() | 清空元素中的所有后代节点 | |
replaceWith() | 将所匹配的元素都替换成指定的HTML或者DOM元素 | |
Clone([includeEvents]) | 节点复制 | includeEvents:可选,为布尔值ture或false,规定是否复制元素的所有事件处理 |
Attr() | 获取或设置元素属性 | Attr([name]):获取或设置单个属性值,如$($newNode4).attr(“alt”) Attr({[name1:value1],name2:value2}……),设置多个属性值,如$(“img”).attr({width:”50”,height:”100”}) |
RemoveAttr(name) | 删除元素属性 | 参数为属性名称 |
Prev([expr]) | 获取紧邻匹配元素之前的元素 | 参数可选,用于过滤同辈元素的表达式 |
Siblings([expr]) | 获取位于匹配元素前面和后面的所有同辈元素 | 参数可选,用于过滤同辈元素的表达式 |
Parent([selector]) | 获取当前匹配元素集合中每一个元素的父级元素 | 参数可选 |
Parents([selector]) | 获取当前匹配元素集合中每一个元素的祖先元素 | 参数可选 |
Children() | 获取当前匹配元素下的所有子元素 | |
Select() | (表单验证方法)选取文本域中的内容,突出显示输入区域的内容 | 【(onblur,onfocus)表单验证的失去焦点跟获得焦点的事件】 |
find(expr|obj|ele) | 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 | Expr: 用于查找的表达式 object: 一个用于匹配元素的jQuery对象 element: 一个DOM元素 |
each(callback) | 以每一个匹配的元素作为上下文来执行一个函数。 | Callback: 对于每个匹配的元素所要执行的函数 |
live(type, [data], fn) | 事件委托:对一个还没有添加进DOM的元素有效 | type:一个或多个事件类型,由空格分隔多个事件。 fn:要从每个匹配元素的事件中反绑定的事件处理函数 |
插入节点方法 | ||
插入方式 | 方法 | 描述 |
内容插入 | Append(content) | 后置,$(A).append(B)表示把B追加到A中 |
appendTo(content) | 后置,$(A).appendTo(B)表示把A追加到B中 | |
Prepend(content) | 前置,$(A). Prepend (B)表示把B追加到A中 | |
prependTo(content) | 前置,$(A). prependTo (B)表示把A追加到B中 | |
外部插入 | After(content) | 后置,$(A). After (B)表示把B插入到A之后 |
insertAfter(content) | 后置,$(A). insertAfter (B)表示把A插入到B之后 | |
Before(content) | 前置,$(A). Before (B)表示把B插入至A之前 | |
insertBefore(content) | 前置,$(A). insertBefore (B)表示把A插入至B之前 |
正则表达式
Var reg=/表达式/附加参数
表达式:一个字符串代表了某种规则,其中可以使用某些特殊字符来代表特殊的规则
附加参数:用来扩展表达式的含义,主要有一下3个参数:
g:代表可以进行全局匹配
i:代表不区分大小写匹配
m:代表可以进行多行匹配
正则表达式的常用符号:
符号 | 描述 |
/…/ | 代表一个模式的开始和结束 |
^ | 匹配字符串的开始 |
$ | 匹配字符串的结束 |
\s | 任何空白字符 |
\S | 任何非空白字符 |
\d | 匹配一个数字字符,等价于[0-9] |
\D | 除了数字之后的任何字符,等价于[^0-9] |
\w | 匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_] |
\W | 任何非单字字符,等价于[^a-zA-Z0-9_] |
. | 除了换行符之外的任何字符 |
正则表达式的重复字符:
符号 | 描述 |
{n} | 匹配前一项n次 |
{n,} | 匹配前一项n次,或者多次 |
{n,m} | 匹配前一项至少n次,但是不能超过m次 |
* | 匹配前一项0次或多次,等价雨{0,} |
+ | 匹配前一项1次或多次,等价于{1,} |
? | 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1} |
本文出自 “张志鹏” 博客,请务必保留此出处http://zhangzhipeng.blog.51cto.com/9115459/1571398
jQuery笔记