jQuery1.7.1API手册
本文基于jQuery1.7.1版本,是对官方API的整理和总结,完整的官方API见api.jquery/browser/
0、总述
jQuery框架提供了很多方法,但大致上可以分为3大类:获取jQuery对象的方法、在jQuery 对象间跳转的方法,以及获取jQuery对象后调用的方法
其中第一步是怎样获取jQuery对象。大致来说,是通过最核心的$()方法,将页面上的元素(或者在页面上不存在的html片段)包装成jQuery对象。
$()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+等)、过滤器(包括:过滤器和[]过滤器)。
通过以上3种的组合,“查询”得到想要操作的元素或者元素集合,作为$()的参数,得到jQuery 对象(或者jQuery对象的集合)
第二步是在jQuery对象间的跳转。也就是说,已经得到了一个jQuery对象,但是并不是想要的,那么可以通过一系列的跳转方法,比如parent()、next()、children()、find()等,或者过滤筛选的方法,比如eq()、filter()、not()等,来得到最终想要操作的jQuery对象。
用跳转和过滤方式得到的jQuery结果,往往通过比较复杂的表达式组合,可以达到同样的目的。
比如说$("div").eq(3),也可以用$("div:eq(3)")达到同样的目的。
又比如说$("div").find("span"),可以用$("div span")取到同样的元素。
方法是很灵活的,要根据具体的情况来选择。一般来说,HTML页面写得越规范,使用jQuery 就越简单
还有一种情况,在得到了jQuery()对象之后,想要判断其是否满足条件,那么可以调用is()、hasClass()等方法,返回一个boolean值,进行后续的判断。这类方法也可以归到这类。
第三步是在获取准确的jQuery对象之后,调用其上的各种方法,来进行操作。这一步反而是比较简单的了。
后面就是对jQuery框架各种方法的简要介绍,更详细的内容,还是以官方API为准
1、$(...)
$()一切的核心,可以跟4种参数
$(expression),比如$("#id")、$(".class")等,返回jQuery对象,或者jQuery对象的集合$(html),比如$("<span>hello world</span>"),返回jQuery对象,或者jQuery对象的集合$(element),比如$(document.body),返回jQuery对象,或者jQuery对象的集合$(*),所有元素
2、jQuery Object Accessors
jQuery.index(element),返回该jQuery对象在集合中的索引
jQuery.each(function),遍历jQuery对象集合,在每个对象上执行function函数,function callback(index,domElement){this};
jQuery.size(),返回jQuery对象集合的大小
jQuery.length,相当于size()方法
<(),获取原生DomElement对象的Array
<(index),获取原生DomElement对象
jQuery.eq(position),获取jQuery对象集合中的一个jQuery对象
3、Data相关方法
jQuery.data(name)
jQuery.data(name,value)
4、选择符
multiple(selector1,selector2),可以选择多个元素或者表达式,包装成jQuery对象的集合
例子:$("div,span")
id(id)
例子:$("#id")
class(class)
例子:$(".class")
element(element)
例子:$("div")
all
例子:$("*")
descendant
例子:$("table tr td")
child(parent,child)
例子:$("#id>span"),和上一个descendant的区别在于,descendant只要是后代就会被选中,而child必须是直接子节点,不包括孙子节点
next(prev,next)
例子:$("label+input"),选中的是label标签的下一个input标签,返回jQuery对象的集合
siblings(prev,siblings)
例子:$("#prev~div"),选中的是#prev之后的所有div标签,返回jQuery对象的集合,有点像next,但是范围更大
Basic Filters
$(":header"),选中所有header,包括<h1><h2>等
$("tr:odd"),选中所有奇数行
$("tr:even"),选中所有偶数行
$(":animated"),选中所有当前有特效的元素,$("div:animated"),选中当前所有有特效的<div>
$("tr:first"),选中第一行
$("tr:last"),选中最后一行
$("input:not(:checked)"),选中所有没有“checked”的input元素
$("td:gt(4)"),选中所有index是4之后的td
$("td:lt(4)"),选中所有index是4之前的td
$("td:eq(4)"),选中index是4的td,可以用$("td").eq(4)来实现同样的效果
Content Filters
$("div:contains('John')"),选中所有包含"John"字符串的div
$("td:empty"),选中所有内容为空的td
$("div:has(p)"),选中包含有<p>元素的<div>元素,返回jQuery对象集合
$("td:parent"),选中所有包含子节点的元素,包括文本也可以算是子节点
Visibility Filters
$("span:hidden"),选中所有隐藏的<span>
$("span:visible"),选中所有可见的<span>
Attribute Filters
$("div[id]"),选中包含id属性的<div>元素
$("input[name$='letter']"),选中包含某个属性的<input>元素,这个属性名是以'letter'结尾的$("input[name^='letter']"),选中包含某个属性的<input>元素,这个属性名是以'letter'开头的
$("input[name*='man']"),选中包含某个属性的<input>元素,这个属性的属性名里包含'man' $("input[name='newsletter']"),选中包含一个属性的<input>元素,这个属性的名字是'newsletter'
$("input[name!='newsletter']"),选中所有不包含'newsletter'属性的<input>元素
$("input[id][name$='man']"),选中包含id属性,和以'man'结尾属性的<input>元素
Child Filters
$("ul li:nth-child(2)"),选中自身是<ul>元素的第二个子节点的<li>元素,注意这个计算是从1开始的,不是从0开始
$("div span:firstChild"),选中自身是<div>元素的第一个子节点的<span>元素
$("div span:lastChild"),选中自身是<div>元素的最后一个子节点的<span>元素
$("div span:onlyChild"),选中自身是<div>元素的唯一子节点的<span>元素
Forms
$(":button"),所有<button>元素,和<input type="button">元素
$("form:checkbox"),选中所有<form>标签下的<input type="checkbox">,不过这样会比较慢,官方建议使用$("input:checkbox")
$(":file"),选中所有<input type="file">
$(":hidden"),选中所有隐藏元素,以及<input type="hidden">
$(":input"),选中所有<input>
$(":text"),选中所有<input type="text">
$(":password"),选中所有<input type="password">
$(":radio"),选中所有<input type="radio">,不过这样会比较慢,建议使用$("input:radio") $(":image"),选中所有<input type="image">
$(":reset"),选中所有<input type="reset">
$(":submit"),选中所有<input type="submit">jquery在一个元素后追加标签
Form Filters
$("input:enabled"),选中所有enabled的<input>元素
$("input:disabled"),选中所有disabled的<input>元素
$("input:checked"),选中所有checked的<input type="checkbox">元素
$("input:selected"),选中所有selected的<option>元素
5、属性相关的方法
jQuery.attr(name),返回属性的值,比如$("img").attr("src")
jQuery.attr(key,value),这是设置属性的值
jQuery.attr(properties),也是设置属性的值
例子:
$("img").attr({
src:"/images/hat.gif",
title:"jQuery",
alt:"jQuery Logo"
});
jQuery.attr(key,function),也是设置属性的值,这个function计算出的结果,赋给key
function callback(index){
//index==position in the jQuery object
/
/this means DOM Element
}
6、class相关的方法
jQuery.hasClass(class),返回boolean
jQueyr.addClass(class),增加class
7、HTML相关的方法
jQuery.html(),返回包含的html文本
jQuery.html(val),用val替换包含的html文本
8、文本相关的方法
<(),返回包含的纯文本,不会包括html标签,比如<span>abcd</span>,调用.text()方法,只会返回abcd,不会返回<span>abcd</span>
<(val),用val替换包含的纯文本,和html(val)方法的区别在于,所有的内容会被看作是纯文本,不会作为html标签进行处理,比如调用.text("<span>abcd</span>"),<span>和</span>不会被认为是html标签
9、值相关的方法
jQuery.val(),返回string或者array
jQuery.val(val),设置string值
jQuery.val(array),设置多个值,以上3个方法,主要都是用在表单标签里,如<input type="text">,<input type="checkbox">等
10、在jQuery对象集合中进行过滤
以下几类方法有点像把选择符Filter进行方法化,比如$("label:eq(4)"),取到第4个<label>元素,这个就可以用$("label").eq(4)来替代,达到同样的效果
jQuery.is(expr),返回boolean,比如$(this).is(":first-child"),判断一个元素,是不是其父节点的第一个子节点
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论