jQuery 选择器（一）

　　在上一篇文章中介绍了如何取得一个 jQuery 对象，那么接下来就来介绍如何取得正确的对象，jQuery 函数就需要借取于其强大的“选择符”来完成这些工作。

　　jQuery 选择符分为以下几大类：

一、基本

　　1、.class

　　根据类名匹配元素。

HTML 代码：

<div class="header">
    <img src="../images/logo.jpg" />
</div>

jQuery 代码：

// 设置采用 header 样式的 div 元素的背景色为黑色
$(".header").css("background-color", "black");

　　2、element

　　根据 DOM 元素标签名称来匹配所有元素。

HTML 代码：

<div class=postBody>
    <p>1、<a href="http://www.cnblogs.com/Infinity/archive/2010/03/22/1691864.html" target=_blank>jQuery 核心函数以及 jQuery 对象</a></p>
    <p>2、jQuery 选择器</p>
    <p>3、jQuery 筛选器</p>
    <p>4、jQuery 文档处理</p>
    <p>5、jQuery CSS 处理以及 jQuery DOM 属性处理</p>
    <p>6、jQuery 事件处理</p>
    <p>7、jQuery ajax 处理</p>
    <p>8、jQuery 工具方法以及 jQuery 特效</p>
    <p>9、jQuery 插件开发</p>
    <p>10、jQuery 1.4 新特性</p>
</div>

jQuery 代码：

// 设置超链接的显示颜色为蓝色
$("a").css("color", "blue");

　　3、#id

　　根据 DOM 元素的 id 属性来匹配一个元素。

HTML 代码：

<div id=topics>
    <div class=post>
        <h1 class=posttitle><a id=ctl04_titleurl class=posttitle2 href="http://www.cnblogs.com/infinity/archive/2010/03/22/1691803.html">jquery 学习及应用</a></h1>
        <div class=clear></div>
        <div class=postbody></div>
    </div>
</div>

jQuery 代码：

// 设置 id 属性为 topics 的第一个元素的齐方式为左对齐
$("#topics").attr("align", "left");

 

二、表单

HTML 代码：

<form name="mainForm" id="mainForm">
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

　　1、:button

　　匹配所有按钮元素。

jQuery 代码：

$(":button").click();

　　2、:checkbox

　　匹配所有复选框元素。

jQuery 代码：

$(":checkbox").attr("checked", true);

　　3、:file

　　匹配所有文件域元素。

jQuery 代码：

$(":file");

　　4、:hidden

　　匹配所有隐藏域元素。

jQuery 代码：

$(":hidden").val("text");

　　5、:image

　　匹配所有图像域元素。

jQuery 代码：

$(":image").css("border", "none");

　　6、:input

　　匹配所有 input, textarea, select 和 button 元素。

jQuery 代码：

var len = $(":input").length;

　　7、:password

　　匹配所有密码框元素。

jQuery 代码：

$(":password").val("");

　　8、:radio

　　匹配所有单选按钮元素。

jQuery 代码：

$(":radio").val("checked", true);

　　9、:reset

　　匹配所有重置按钮元素。

jQuery 代码：

$(":reset").click();

　　10、:submit

　　匹配所有提交按钮元素。

jQuery 代码：

$(":submit").click();

　　11、:text

　　匹配所有的单行文本框元素。

jQuery 代码：

var inputValue = $(":text").val();