1. 利用选择器,选择将被JQuery包装的元素
标识和选择DOM元素。JQuery采用我们已经知道的CSS语法并且扩展了一些.为了利用JQuery来选择元素,请把选择器包装在$()中。
- 基本CSS选择器:
元素名 tag, 元素ID #,元素类 .classname,位置: p a.classname 以及组合 - 子选择器,容器选择器和特性选择器
* 匹配任何元素
E 匹配标签名为E的所有元素
E F 匹配标签名为F,作为E的后代节点的所有元素
E>F 匹配标签名为F,作为E的直接子节点的所有元素
E+F 匹配标签名为F,其前面是邻近兄弟节点E,E和F紧挨着
E~F匹配标签名为F,其前面是任何兄弟节点E,E和F可以不紧挨着
E:has(F) 匹配标签名为E,至少有一个标签名为F的后代节点
E.C 匹配带有类名C的所有元素E
E#I 匹配id特性值为I的所有E元素
E[A] 匹配含有属性A的所有E元素
E[A=V] 相等
E[A^=V] 开始
E[A*=V] 包含
E[A$=V] 结尾 - 位置选择
:first 页面的最先匹配,某个元素在页面(Scope)第一个出现的 :last 页面的最后匹配 :first-child 最先的子元素. 某元素作为最先的子元素 :last-child 最后的子元素 :only-child 返回没有兄弟节点的所有元素 :nth-child(n) 第n个子节点,n从1开始 :nth-child(odd|even) 偶数或奇数 :nth-child(Xn+Y) 根据传入的公式计算的第N个子节点 :even or :odd 页面范围内偶数或奇数的匹配元素 :eq(n) 第n个匹配元素,n从0开始 :gt(n) :lt(n)
- 自定义JQuery选择器
:animated 选择当前处于动态控制之下的元素 :button 任何Button :checkbox :checked :contains(foo) 只选择包含文本foo的元素 :disabled :enabled :file :header h1~h6 :hidden :image :input :not(filter) 与指定的筛选器求反,只能应用到筛选选择器上 :parent 选择拥有后代节点的元素 包括文本节点 :password :radio :reset :selected 选择已选中的选项元素 :submit :text 只选择文本字符元素 :visible 只选择可见元素
只支持一层嵌套
筛选选择器,通过对元素应用更高的选择标准,缩小正在匹配的元素的集合
查找选择器,查找与已选择元素具有某种关系的其他元素。可能扩大操作集
支持XPath的JQuery插件:http://jQuery.com/plugins/project/xpath
/html//form/fieldset
/html//form/*/input
//div/.. div的直接父元素
//div[@foo=bar]
//div[@p]
2. 创建并放置新的HTML元素到DOM中
$("<div>Hello</div>")
$("<div>")
利用这个技巧无法可靠地创建<script>元素
eg.
$("<div class='foo'> I have foo</div><div>I don't</div>").filter(".foo").click(function(){alert('I am foo');}).end().appendTo("#someparentDiv")
3.操作元素包装集
名称 | 函数 | 参数 | 返回值 | 例子 |
确定包装集大小 | size() | 元素的个数 | $("a").size() | |
从包装集获取元素 |
get(index) index(element) |
index不指定时,获取所有的元素以JS数组形式返回 元素的引用 |
一个DOM元素或DOM元素数组 传入元素的下标或-1 |
|
添加更多元素到包装集 | add(expression) | 字符串|元素|数组 | 包装集 | $('img[alt],img[title]') $('img[alt]').add('img[title]') $('img[alt]').add('<p>sdf</p>') |
从包装集里删除元素 | not(expression) | 字符串|元素|数组。 任何JQuery包装集都能够当成元素引用的数组来使用 | 包装集 | |
编程方式筛选包装集元素 | filter(expression) |
字符串|函数 字符串作为JQuery选择器,在包装集中留下匹配的元素.函数调用返回为False的从包装集中删除 隐试函数类型的筛选器 |
包装集 | |
根据元素在包装集的位置,获取包装集子集 | slice(begin[,end]) | 数字,包含begin,不包含end | 新建的包装集 | |
关系:返回原始包装集元素的所有唯一子元素组成的包装集 | children() | 包含字符串的参数 | 包装集 | |
关系:返回原始包装集袁术的内容的包装集,可能包含文本节点。 | contents() | 包装集 | 常用语获取<iframe>元素的内容 | |
返回原始包装集元素的所有唯一的下一个兄弟元素所组成的包装集 | next() | 包含字符串的参数 | 包装集 | |
返回原始包装集元素的所有后续兄弟元素的包装集 | nextAll() | 包含字符串的参数 | 包装集 | |
返回原始包装集元素的唯一直接父元素 | parent() | 包含字符串的参数 | 包装集 | |
祖先元素,但不包括文档跟元素 | parents() | 包含字符串的参数 | 包装集 | |
prev() | 包含字符串的参数 | 包装集 | ||
prevAll() | 包含字符串的参数 | 包装集 | ||
返回原始包装集元素的所有唯一兄弟元素所组成的包装集 | siblings() | 包含字符串的参数 | 包装集 | |
把现有包装集仔细搜索,并返回包含所有匹配传入选择器表达式的元素的新包装集 操作链中调用,力量才强大 |
find(selector) | 字符串,一个jQuery选择器 | 新包装集 |
wrappedSet.find('p cite') <==> $('p cite',wrappedSet) |
查找包含指定字符串的元素 元素体的内容的各个方面,包含标记和后代元素的特性值,但不匹配受测原始元素的标记和特性值 |
contains(text) | 字符串 | 新包装集 | |
测试包装集,是否至少包含一个匹配给定选择器元素 | is(selector) | 字符串,选择器表达式 | true/false | |
回退到前一个包装集 | end() | 前一个包装集 | $('img').clone().appendTo('#somewhere').end().addClass('beenCloned') | |
合并栈内最顶端的两个包装集,把当前包装集和前一个包装集合并为一个包装集 | andSelf() | 合并后的包装集 |