jQuery总结

jQuery

零散的知识点

什么是jQuery

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。

DOM对象与jQuery对象的互相转化

① DOM对象转jQuery对象

jQuery对象 = $(DOM);

② jQuery对象转DOM对象

DOM对象 = jQuery对象[索引];

或

DOM对象 = jQuery对象.get(索引);

jQuery中的事件切换

hover(over,out) ：鼠标悬浮与鼠标离开事件

toggle(fn,fn) ：事件切换，可以拥有多个参数，依次执行,第一次点击执行第一个fn,第二次点击执行第二个

jQuery中阻止事件冒泡和阻止事件默认行为

stopPropagation&preventDefault

each方法

jQuery对象.each(callback);

callback是一个回调函数，其结构如下：

function callback(i,item) {}参数说明：

i ：每次遍历时，系统会自动将得到的索引下标放入变量i中

item ：每次遍历时，系统会自动将遍历得到的结果放入变量item中

item其实一个是DOM对象。

选择器

基本选择器

.

#

element

层级选择器

空

选取祖先元素下的所有后代元素（多级）

>

选择父元素下的所有子元素（一级）;用以匹配元素的选择器，并且它是第一个选择器的子元素

+

选取当前元素紧邻的下一个同级元素

~

后者是一个选择器，并且它作为第一个选择器的同辈,也就是选取同级元素

简单选择器

:first ：获取第一个元素

:last ：获取最后一个元素

:even 偶数，获取偶数行数据

:odd  奇数，获取奇数行数据

:eq(index) ：获取索引等于index的元素，index默认从0开始

:gt(index) 大于，获取索引大于index的元素

:lt(index) 小于，获取索引小于index的元素

:not(selector) ：获取除指定选择器以外的其他元素

内容选择器

:contains(text) ：获取内容包含text文本的元素

:empty ：获取内容为空的元素

:has(selector) ：获取内容包含指定选择器的元素；匹配含有选择器所匹配的元素的元素

:parent ：获取内容不为空的元素（特殊）

可见性选择器

:hidden ：获取所有隐藏元素

:visible ：获取所有可见元素

属性选择器

[attribute] ：获取具有指定属性的元素

[attribute=value] ：获取属性值等于value的元素

[attribute!=value] ：获取属性值不等于value的元素

[attribute^=value] ：获取属性值以value开始的元素

[attribute$=value] ：获取属性值以value结尾的元素

[attribute*=value] ：获取属性值包含value的元素

[attribute1][attribute2]...[attributeN] ：获取同时拥有多个属性的元素

$(‘元素[属性=属性值]’)

子元素选择器

A:nth-child(index/even/odd) 下标从1算起，匹配子元素等于index/even/odd的元素; 匹配其父元素下的第N个子或奇偶元素; Selects all elements that are the nth-child of their parent.我自己的描述:匹配A选择器其父元素下选择器名为A的下标等于index/even/odd的元素

:first-child ：获取第一个子元素

:last-child ：获取最后一个子元素

:only-child ：如果当前元素是唯一的子元素，则匹配

表单选择器

:input ：选取页面中的所有表单元素，包含select以及textarea元素

:text ：选取页面中的所有文本框

:password ：选取所有的密码框

:radio    ：选取所有的单选按钮

:checkbox ：选取所有的复选框

:submit ：获取submit提交按钮

:reset ：获取reset重置按钮

:image ：获取type=’image’的图像域

:button ：获取button按钮

:file ：获取type=’file’的文件域

:hidden ：获取隐藏表单

表单对象属性选择器

:enabled ：获取所有可用表单元素

:disabled ：获取所有不可用表单元素

:checked ：获取所有选中的表单元素，主要针对radio以及checkbox

:selected ：所有所有选中的表单元素，主要针对select

筛选(方法)

eq(index|-index) ：根据元素的index索引来匹配元素，前者默认从零开始,后者代表从1开始,从倒数index个索引开始匹配

filter(expr) ：使用过滤器来筛选元素

not(expr) ：匹配除指定选择器以外跟他同级的其他元素

children([expr]) ：匹配满足条件的子元素（一级关系）

find(expr) ：匹配满足条件的所有后代元素（多级关系）

next([expr]) ：匹配紧邻的同级的下一个元素

nextAll([expr]) ：匹配紧邻的同级的下一个元素

prev([expr]) ：匹配紧邻的同级的上一个元素

parent([expr]) ：匹配父元素

parents([expr]) ：匹配所有的满足条件的祖先元素

siblings([expr]) ：匹配所有同级元素（无论上下）

jQuery中属性的操作

基本属性操作

attr(name) ：获取元素的name属性

attr(key,value) ：设置元素的属性

attr(properties) ：一次为元素设置多个属性，要求参数是一个json对象

attr(key,fn) ：使用函数的返回值设置元素的属性

removeAttr(name) ：删除元素的name属性

css属性操作

css(name) ：获取元素的name属性

css(name,value) ：设置元素的name属性

css(properties) ：一次为元素设置多个属性

class属性操作

addClass(class) ：为元素添加class属性

removeClass(class) ：移除元素的class属性

toggleClass(class) ：切换元素的class属性，如果存在则移除，反之则添加

hasClass(class) ：判断元素是否具有class属性等于is(‘.‘+class)

文本/值的操作

html() ：获取元素的html内容

html(val) ：设置元素的html内容

val() ：获取表单元素value值

val(val) ：设置表单元素的value值

text() ：获取元素的文本内容（不包含标签）

text(val) ：设置元素的文本内容（如果包含标签，当做普通文本处理）

offset属性操作

offset() ：获取元素的位置，返回json对象，包含left与top属性

offset(coordinates) ：设置元素的位置，要求参数是一个json对象，必须包含left与top属性

尺寸属性操作

width() ：获取元素的宽度

width(value) ：设置元素的宽度

height() ：获取元素的高度

height(value) ：设置元素的高度

动画的操作

基本效果

显示

show([speed][,callback])

隐藏

hide()

显示隐藏切换

toggle()

滑动效果

slideUp,向上隐藏

slideDown,向下展开

slideToggle

淡入淡出效果

fadeIn()

fadeOut()

fadeTo(speed,opacity[,callback])

自定义动画

animate()

文档处理

内部插入

append/prepend;appendTo/prependTo

外部插入

after/before;insertAfter/insertBefore

删除

empty/remove

复制

clone

替换

replaceWith

包裹

wrap/wrapAll/wrapInner

jquery中的ajax技术

底层的jQuery中的ajax技术

jQuery.ajax(options)

参数说明：

options ：只有一个参数，要求是JSON格式的数据，其可以设置如下属性：

async ：是否异步，true代表异步，false代表同步。默认为true

cache ：是否缓存，true代表缓存，false代表不缓存，默认为true

complete ：当Ajax状态码为4时所触发的回调函数

contentType ：请求头，如果是POST请求，此参数为application/x-www-form-urlencoded

data : 发送Ajax请求时所传递的参数，要求是一个字符串

dataType ：期待的返回值类型，可以是text/xml/json数据类型

success ：当Ajax状态码为4且响应状态码为200时所触发的回调函数

type ：发送的http请求，可以是get，也可以是post

url ：请求的url地址

$.get

$.get(url,[data],[callback],[type]) ：发送Ajax中的get请求

$.post(url,[data],[callback],[type]) ：发送Ajax中的post请求

参数说明：

url ：请求的url地址

[data] ：可选参数，代表发送Ajax请求时所传递的数据，可以是字符串格式也可以是json格式

[callback] ：可选参数，代表当Ajax状态码为4且响应状态码为200时所触发的回调函数

[type] ：可选参数，代表期待的返回值类型，可以是text/xml/json，默认为text文本类型

$.post

子主题 1