Jquery 选择器之基本选择器

评论(2)

要对网页进行操作,就要选定待操作的对象,也就是页面元素,也就是 DOM 节点(我是这么理解的),不管是 Jquery 的 API 手册也好,还是教程书籍也好,Jquery 的选择器一直都是学习 Jquery 的开始,就像 CSS 一样,先得到元素,我们才能进行操作,比如说改变样式、改变内容等等等等。跟Javascript 相比 Jquery 的选择器有多,不但简化了节点标示,更易于我们得到节点。但一些喜欢用 Jquery 折腾 WordPress 的朋友(像我),因为疏于阅读手册而经常卡在得到节点上。

其实只要你仔细阅读过 Jquery 的 API手册就会被他选择器的强大所震撼。
Today 就记录一下 Jquery 的基本选择器。

基本选择器的种类

API 手册是这么分类的

  1. #id
  2. element
  3. .class
  4. *
  5. :first
  6. :last
  7. :not(selector)
  8. :even
  9. : odd
  10. :eq(index)
  11. :gt(index)
  12. :lt(index)
  13. :header
  14. :animated
  15. :focus
  16. selector1,selector2,selectorN

基本选择器的使用

靠,“基本”选择器这么多?坑爹啊?
其实 看起来多,但却很通俗!
Come On !!

//假设 HTML 代码如下
<div id = "orcode">
	<ul id="testul">
		<li>li.1</li>
		<li>li.2</li>
		<li id="lili">li.3</li>
		<li>li.4</li>
		<li class="red">li.5</li>
		<li>li.6</li>
	</ul>
</div>
//Javascript 代码如下:
// * 选择器
$("*")
//这样我们将得到 页面中所有的元素
//页面<html>标签内部的所有东西。
 
// #id 选择器
$("#testul")
//得到 id 为 testul 的元素
//当然包括里面的 li
 
// .class 选择器
$(".red")
//将会得到 class 为 red 的这个 li
//当然页面有别的元素 class 的话也会同时得到
 
// :first 选择器
$("li:first")
//将会得到第一个li元素
//$("li:last") 会是最后一个
 
// :not 选择器
$("*:not(li)")
//除了 li 之外的所有元素 (这个猛)
 
// :even 选择器
$("li:even")
//得到次序为偶数的元素
//但因为排序是从0开始的
//所以的到的元素会是第 1、3、5 li元素
//$("li:odd") 奇数元素
 
// :eq(index) 选择器
$("li:eq(1)")
//获得指定索引的元素
//这里将会获得第二个li,因为排序是从0开始的
 
// :gt(index) 选择器
$("li:gt(3)")
//获得索引大于3(第四个li元素)的元素,但不包括第四个li元素
//:lt(index) 获得小于索引的元素
 
// :header  选择器
$(":header")
//获得诸如 h1 h2 h3 的所有元素
//跟别的选择器配合用会比较有意义
 
// :animated  选择器
$(":animated")
//匹配所有在执行动画的元素
 
// :focus 选择器
$("a:focus")
//会出发每个a元素的焦点(.focus())事件,当然前提是你设置了焦点事件
 
// selector1,selector2,selectorN 选择器
$("#orcode,#testul,#lili")
//就是同事选择三个元素

基本选择器演示

没事的时候写了个演示页面
《Jquery 基本选择器演示》
说明:把鼠标放到 li 元素上后会显示一个选择器,这个选择器会得到该元素

总结

To Be Continued …





转载请注明转自: Jquery 选择器之基本选择器