jQuery 核心:选取元素

来源:互联网 发布:势不可挡网络剧百度云 编辑:程序博客网 时间:2024/06/04 19:26

在JS原生DOM中,我们想要对DOM元素进行操作,首先得获取到对应的元素(getElementById()getElementsByTagName()等),然后再对这些元素进行操作。

同样的,jQuery也需要先选取所需的DOM元素,然后再针对这些元素进行操作。我们先来看看jQuery如何获取所需的元素。

在jQuery中,我们一般通过一个字符串来标识匹配的元素

$("#uid"); // 选取id属性为"uid"的单个元素$("p"); // 选取所有的p元素$(".test"); // 选择所有带有CSS类名"test"的元素$("[name=books]"); // 选择所有name属性为"books"的元素
是否感觉这和CSS选择器非常相似?是的,jQuery获取元素就是通过类似于CSS选择器的字符串来匹配对应的元素,我们一般将其称作jQuery选择器(selector)。几乎所有的CSS选择器都可以当做jQuery选择器来使用,只要CSS选择器对哪些元素生效,对应的jQuery选择器就可以选取到哪些元素.

jQuery选择器也支持多个选择器任意组合使用。

// 多个选择器以空格或指定符号隔开,将匹配与前者具有指定关系的最后一个选择器所表示的元素$("#uid span"); // 选择id为"uid"的元素的所有后代span元素$("p > span"); // 选择p元素的所有子代span元素$("div + p"); // 选择div元素后面紧邻的同辈p元素$("div p span"); // 选择div元素的所有后代p元素的后代span元素// 多个选择器之间没有空格,将匹配同时满足这些选择器条件的元素$("p#uid"); // 选择id属性为"uid"的p元素$("div.foo"); // 选择所有带有CSS类名"foo"的div元素$(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素$("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素
jQuery的选择器较多,请直接参考jQuery选择器一览表

jQuery为我们提供了一系列的文档筛选方法,方便我们快速地选取我们所需的元素

// 以下方法都返回一个新的jQuery对象,他们包含筛选到的元素$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)$("ul li").first(); // 选取ul li中匹配的第一个元素$("ul li").last(); // 选取ul li中匹配的最后一个元素$("ul li").slice(1, 4); // 选取第2 ~ 4个元素$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素$("div").find("p"); // 选取所有div元素的所有后代p元素$("div").children(); // 选取所有div元素的所有子代元素$("div").children("p"); // 选取所有div元素的所有子代p元素$("span").parent(); // 选取所有span元素的父元素$("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素$("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素$("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素
本人整理转载, 为以后方便学习! 刚接触Jquery 多多学习。

0 0