jQuery常用方法汇总

常用方法索引:

1.JQuery自执行函数(三种)
2.text()    html()    val()
3.css()
4.get()        非ajax用法
5.parent()    children()    parents()    find()
6.eq()    siblings()    index()
7.height()    width()
8.addClass()    removeClass()    hasClass()   
9.toggle()    toggleClass()
10.show()    hide()
11.trim()
12.slideUp()    slideDown()    slideToggle()
13.attr()
14.add()    remove()    append()    appendTo()    prepend()    prependTo()
15.on()    事件委托
16.extend()
17.next()    nextAll()    nextUntil()
18.each()
AJAX
19.load()
20.get()    post()    ajax()


1.自执行函数(三种)

$(function(){  
// do something  
})
$(document).ready(function(){  
//do something  
}) 
$().ready(function(){  
//do something  
})

表示文档结构已经加载完成(不包含图片等非文字媒体文件),onload则指示页面包含图片等文件在内的所有元素都加载完成。

2.text()    html()    val()

text() 方法设置或返回被选元素的文本内容。

当该方法用于返回内容时,则返回所有匹配元素的文本内容(会删除 HTML 标记)。

当该方法用于设置内容时,则重写所有匹配元素的内容。

语法:

返回文本内容:

$( selector).text()

设置文本内容:

$( selector).text( content)

使用函数设置文本内容:

$( selector).text(function (index,currentcontent))
  • index - 返回集合中元素的 index 位置。
  • currentcontent - 返回被选元素的当前内容。


html() 方法设置或返回被选元素的内容(innerHTML)。

当该方法用于返回内容时,则返回第一个匹配元素的内容。

当该方法用于设置内容时,则重写所有匹配元素的内容。

语法:

返回内容:

$( selector).html()

设置内容:

$( selector).html( content)

使用函数设置内容:

$( selector).html(function (index,currentcontent))
  • index - 返回集合中元素的 index 位置。
  • currentcontent - 返回被选元素的当前内容。


val() 方法返回或设置被选元素的 value 属性。

当用于返回值时:
该方法返回第一个匹配元素的 value 属性的值。

当用于设置值时:
该方法设置所有匹配元素的 value 属性的值。

注意:val() 方法通常与 HTML 表单元素一起使用。

语法

返回 value 属性:

$( selector).val()

设置 value 属性:

$( selector).val( value)

通过函数设置 value 属性:

$( selector).val(function (index,currentvalue))
  • index - 返回集合中元素的 index 位置。
  • currentvalue - 返回被选元素的当前 value。


3.css()

css() 方法设置或返回被选元素的一个或多个样式属性。

如需返回指定的 CSS 属性的值(无指定则返回第一个),请使用如下语法:

css(" propertyname");

如需设置指定的 CSS 属性(无指定则设置全部),请使用如下语法:

css(" propertyname"," value");


4.get()        非ajax用法

get() 方法获取由选择器指定的 DOM 元素。

语法

$( selector).get( index)
index 可选。规定要获取哪个匹配的元素(通过 index 编号)。

5.parent()    children()    parents()    find()

parent() 方法返回被选元素的直接父元素。

$(selector).parent(filter)

filter 可选。规定缩小搜索父元素范围的选择器表达式。

例子:

<script>
$(document).ready(function(){
	$("span").parent("li.1").css({"color":"red","border":"2px solid red"});
});
</script>
</head>


<body class="ancestors">body (曾曾祖父节点)
	<div style="width:500px;">div (曾祖父节点)
		<ul>ul (祖父节点)  
			<li class="1">li (直接父节点)
				<span>span</span>
			</li>
			<li class="2">li (直接父节点)
				<span>span</span>
			</li>
		</ul>   
	</div>

 
 

children() 方法返回被选元素的所有直接子元素。

$(selector).children(filter)

filter 可选。规定缩小搜索子元素范围的选择器表达式。

parents() 方法返回被选元素的所有祖先元素。

$(selector).parents(filter)

filter

可选。规定缩小搜索祖先元素范围的选择器表达式。

注意:如需返回多个祖先,请使用逗号分隔每个表达式。


find() 方法返回被选元素的后代元素。

$(selector).find(filter)

filter 必需。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。

注意:如需返回多个后代,请使用逗号分隔每个表达式。


6.eq()    siblings()    index()

eq() 方法返回带有被选元素的指定索引号的元素。

索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)

$(selector).eq(index)

index 必需。规定元素的索引。可以是整数或负数。

注意:使用负数将从被选元素的结尾开始计算索引。

siblings() 方法返回被选元素的所有同级元素。同级元素是共享相同父元素的元素。

$( selector).siblings( filter)

filter 可选。规定缩小搜索同级元素范围的选择器表达式。


index() 方法返回指定元素相对于其他指定元素的 index 位置。

注意:如果未找到元素,index() 将返回 -1。

获得元素当前的 index 值。

$( selector).index()

获得元素相对于选择器的 index 位置。

$( selector).index( element)


7.height()    width()

height() 方法设置或返回被选元素的高度。

当该方法用于返回高度时, 则返回第一个匹配元素的高度。

当该方法用于设置高度时,则设置所有匹配元素的高度。

返回高度:

$( selector).height()

设置高度:对于em, pt, etc要使用"",px为默认单位,直接写数值

$( selector).height( value)

使用函数设置高度:

$( selector).height(function (index,currentheight))
value 当设置高度时是必需的。规定元素的高度,单位为 px、em、pt 等。
默认单位是 px。
function(index,currentheight) 可选。规定返回被选元素新高度的函数。
  • index - 返回集合中元素的 index 位置。
  • currentheight - 返回被选元素的当前高度。
width() 方法设置或返回被选元素的宽度。方法同height()


8.addClass()    removeClass()    hasClass()   

addClass() 方法向被选元素添加一个或多个类名。

该方法不会移除已存在的 class 属性,仅仅添加一个或多个类名到 class 属性。

提示:如需添加多个类,请使用空格分隔类名。

函数添加类语法:

$(selector).addClass(classname,function(index,oldclass))

classname 必需。规定一个或多个要添加的类名称。
function(index,currentclass) 可选。规定返回一个或多个待添加类名的函数。
  • index - 返回集合中元素的 index 位置。
  • currentclass - 返回被选元素的当前类名。

removeClass() 方法从被选元素移除一个或多个类。

注意:如果没有规定参数,则该方法将从被选元素中删除所有类。

$(selector).removeClass(classname,function(index,currentclass))

classname 可选。规定要移除的一个或多个类名称。如需移除若干个类,请使用空格分隔类名称。

注意: 如果该参数为空,则将移除所有类名称。
function(index,currentclass) 可选。返回要移除的一个或多个类名称的函数。
  • index - 返回集合中元素的 index 位置。
  • currentclass - 返回被选元素的当前类名。


hasClass() 方法检查被选元素是否包含指定的类名称。

如果被选元素包含指定的类,该方法返回 "true"。

$(selector).hasClass(classname)

classname 必需。规定需要在被选元素中查找的类。

9.toggle()    toggleClass()

toggle() 方法在 jQuery 版本 1.8 中被废弃,在版本 1.9 中被移除。

toggle() 方法添加两个或多个函数,以响应被选元素的 click 事件之间的切换。

当在元素上点击时调用第一个指定函数,当再次点击时调用第二个函数,以此类推。

注意:还存在一个名为 toggle() 的 jQuery 效果方法。根据不同的参数决定调用哪个方法。

$(selector).toggle(function)

function 必需。每当被选元素被点击时要运行的函数。

toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换

该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。

然而,通过使用 "switch" 参数,您能够规定只删除或只添加类。

$(selector).toggleClass(classname,function(index,currentclass),switch)

classname 必需。规定添加或移除的一个或多个类名。如需规定若干个类,请使用空格分隔类名。
function(index,currentclass) 可选。规定返回需要添加/删除的一个或多个类名的函数。
  • index - 返回集合中元素的 index 位置。
  • currentclass - 返回被选元素的当前类名。
switch 可选。布尔值,规定是否仅仅添加(true)或移除(false)类。

10.show()    hide()

show() 方法显示隐藏的被选元素。

注意:show() 适用于通过 jQuery 方法和 CSS 中 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。

$(selector).show(speed,easing,callback)

speed 可选。规定显示效果的速度。

可能的值:

  • 毫秒
  • "slow"
  • "fast"
easing 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。

可能的值:

  • "swing" - 在开头/结尾移动慢,在中间移动快
  • "linear" - 匀速移动
提示:扩展插件中提供更多可用的 easing 函数。
callback 可选。show() 方法执行完之后,要执行的函数。


hide() 方法隐藏被选元素。

提示:这与 CSS 属性 display:none 类似。

注释:隐藏的元素不会被完全显示(不再影响页面的布局)。

语法和参数同上


11.trim()

$.trim() 函数用于去除字符串两端的空白字符。

注意:$.trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时,它们将被保留,不会被移除。

$.trim( str )

str String类型 需要去除两端空白字符的字符串。

12.slideUp()    slideDown()    slideToggle()

slideUp() 方法以滑动方式隐藏被选元素。

$(selector).slideUp(speed,easing,callback)

slideDown() 方法以滑动方式显示被选元素。

注意:slideDown() 适用于通过 jQuery 方法隐藏的元素,或在 CSS 中声明 display:none 隐藏的元素(不适用于通过 visibility:hidden 隐藏的元素)。

$(selector).slideDown(speed,easing,callback)

slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换。

该方法检查被选元素的可见状态。如果一个元素是隐藏的,则运行 slideDown(),如果一个元素是可见的,则运行 slideUp() - 这会造成一种切换的效果。

$( selector ).slideToggle( speed,easing,callback )


13.attr()

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值,则返回第一个匹配元素的值。

当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。


返回属性的值:

$( selector).attr( attribute)

设置属性和值:

$( selector).attr( attribute,value)

使用函数设置属性和值:

$( selector).attr( attribute,function( index,currentvalue))

设置多个属性和值:

$( selector).attr({ attribute: valueattribute: value,...}

attribute 规定属性的名称。
value 规定属性的值。
function(index,currentvalue) 规定要返回属性值到集合的函数
  • index - 接受集合中元素的 index 位置。
  • currentvalue - 接受被选元素的当前属性值。

14.add()    remove()    append()    appendTo()    prepend()    prependTo()

add() 方法把元素添加到已存在的元素组合中。

$(selector).add(element,context)

element 必需。规定要添加到已存在的元素集合的选择器表达式、jQuery 对象、一个或多个元素、HTML 片段。
context 可选。规定选择器表达式在文档中开始进行匹配的位置。

remove() 方法移除被选元素,包括所有的文本和子节点。

该方法也会移除被选元素的数据和事件。

提示:如需移除元素,但保留数据和事件,请使用 detach() 方法代替。

提示:如只需从被选元素移除内容,请使用 empty() 方法。

$(selector).remove()


append() 方法在被选元素的结尾插入指定内容。

提示:如需在被选元素的开头插入内容,请使用 prepend() 方法。

$(selector).append(content,function(index,html))

appendTo() 方法在被选元素的结尾插入 HTML 元素。

提示:如需在被选元素的开头插入 HTML 元素,请使用 prependTo() 方法。


$(content).appendTo(selector)


15.on()    事件委托

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

提示:如需移除事件处理程序,请使用 off() 方法。

提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。


$( selector).on( event,childSelector,data,function)

event 必需。规定要从被选元素移除的一个或多个事件或命名空间。

由空格分隔多个事件值,也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。

16.extend()

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意:1. 如果只为$.extend()指定了一个参数,则意味着参数target被省略。此时,target就是jQuery对象本身。通过这种方式,我们可以为全局对象jQuery添加新的函数。(也就是说可以往JQuery上添加方法)

2. 如果多个对象具有相同的属性,则后者会覆盖前者的属性值。(合并对象)

$.extend( target [, object1 ] [, objectN ] )

指示是否深度合并(false(默认)浅拷贝;true深拷贝)

$.extend( [deep ], target, object1 [, objectN ] )

deep 可选。 Boolean类型 指示是否深度合并对象,默认为false。如果该值为true,且多个对象的某个同名属性也都是对象,则该"属性对象"的属性也将进行合并。
target Object类型 目标对象,其他对象的成员属性将被附加到该对象上。
object1 可选。 Object类型 第一个被合并的对象。
objectN 可选。 Object类型 第N个被合并的对象。

17.next()    nextAll()    nextUntil()

next() 方法返回被选元素的后一个同级元素。

同级元素是共享相同父元素的元素。

注意:该方法只返回一个元素。

DOM 树:该方法沿着 DOM 元素的后一个同级元素向前遍历。

相关方法:

  • nextAll() - 返回被选元素之后的所有同级元素
  • nextUntil() - 返回两个给定参数之间的每个元素之后的所有同级元素

$(selector).next(filter)

filter 可选。规定缩小搜索后一个同级元素范围的选择器表达式。

18.each()

each() 方法为每个匹配元素规定要运行的函数。

提示:返回 false 可用于及早停止循环。

$(selector).each(function(index,element))

function(index,element) 必需。为每个匹配元素规定运行的函数。
  • index - 选择器的 index 位置。
  • element - 当前的元素(也可使用 "this" 选择器)。

jquery ajax

19.load()

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

语法:

$ ( selector ) . load ( URL , data , callback ) ;

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

这是示例文件("demo_test.txt")的内容:

< h2 > jQuery AJAX 是个非常棒的功能! </ h2 > < p id = " p1 " > 这是段落的一些文本。 </ p >

下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:

实例

$ ( " #div1 " ) . load ( " demo_test.txt " ) ;

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:

实例

$ ( " #div1 " ) . load ( " demo_test.txt #p1 " ) ;

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:

  • responseTxt - 包含调用成功时的结果内容
  • statusTXT - 包含调用的状态
  • xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:

实例

$ ( " button " ) . click ( function ( ) { $ ( " #div1 " ) . load ( " demo_test.txt " , function ( responseTxt , statusTxt , xhr ) { if ( statusTxt == " success " ) alert ( " 外部内容加载成功! " ) ; if ( statusTxt == " error " ) alert ( " Error: " + xhr . status + " : " + xhr . statusText ) ; } ) ; } ) ;


20.get()    post()    ajax()

$.get() 方法使用 HTTP GET 请求从服务器加载数据。


实例

请求 "test.php",但是忽略返回结果:

$.get("test.php");

请求 "test.php" 并连同请求发送一些额外的数据(忽略返回结果):

$.get("test.php", { name:"Donald", town:"Ducktown" });

请求 "test.php" 并传递数据数组到服务器(忽略返回结果):

$.get("test.php", { 'colors[]' : ["Red","Green","Blue"] });

请求 "test.php" 并提醒请求的结果:

$.get("test.php", function(data){
alert("Data: " + data);
});


语法

$.get( URL,data,function(data,status,xhr),dataType)


$.post() 方法使用 HTTP POST 请求从服务器加载数据。


语法

$( selector).post( URL,data,function(data,status,xhr),dataType)

参数 描述
URL 必需。规定将请求发送到哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
function(data,status,xhr) 可选。规定当请求成功时运行的函数。
额外的参数:
  • data - 包含来自请求的结果数据
  • status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
  • xhr - 包含 XMLHttpRequest 对象
dataType 可选。规定预期的服务器响应的数据类型。
默认地,jQuery 会智能判断。
可能的类型:
  • "xml" - 一个 XML 文档
  • "html" - HTML 作为纯文本
  • "text" - 纯文本字符串
  • "script" - 以 JavaScript 运行响应,并以纯文本返回
  • "json" - 以 JSON 运行响应,并以 JavaScript 对象返回
  • "jsonp" - 使用 JSONP 加载一个 JSON 块,将添加一个 "?callback=?" 到 URL 来规定回调

ajax() 方法用于执行 AJAX(异步 HTTP)请求。

所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。


语法

$.ajax( {name:value, name:value, ... })

该参数规定 AJAX 请求的一个或多个名称/值对。

下面的表格中列出了可能的名称/值:

名称 值/描述
async 布尔值,表示请求是否异步处理。默认是 true。
beforeSend(xhr) 发送请求前运行的函数。
cache 布尔值,表示浏览器是否缓存被请求页面。默认是 true。
complete(xhr,status) 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。
contentType 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。
context 为所有 AJAX 相关的回调函数规定 "this" 值。
data 规定要发送到服务器的数据。
dataFilter(data,type) 用于处理 XMLHttpRequest 原始响应数据的函数。
dataType 预期的服务器响应的数据类型。
error(xhr,status,error) 如果请求失败要运行的函数。
global 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp 在一个 jsonp 中重写回调函数的字符串。
jsonpCallback 在一个 jsonp 中规定回调函数的名称。
password 规定在 HTTP 访问认证请求中使用的密码。
processData 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset 规定请求的字符集。
success(result,status,xhr) 当请求成功时运行的函数。
timeout 设置本地的请求超时时间(以毫秒计)。
traditional 布尔值,规定是否使用参数序列化的传统样式。
type 规定请求的类型(GET 或 POST)。
url 规定发送请求的 URL。默认是当前页面。
username 规定在 HTTP 访问认证请求中使用的用户名。
xhr 用于创建 XMLHttpRequest 对象的函数。

猜你喜欢

转载自blog.csdn.net/h13783313210/article/details/79832318