博客园_无涯空间

jQuery 选择器（一）

2010-03-29T09:21:00Z

在上一篇文章中介绍了如何取得一个 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();

本文链接

jQuery 核心函数以及 jQuery 对象

2010-03-22T13:03:00Z

一、jQuery 核心函数

首先介绍 jQuery 的几个核心函数，在 jQuery 中它们起着至关重要的作用，在实际的前端开发过程中用到最多的也是它们。

1、jQuery(elements)

将一个或多个DOM元素转化为jQuery对象。

这个函数也可以接收XML文档和Window对象（虽然它们不是DOM元素）作为有效的参数。

返回值：jQuery 对象

参数

elements:　　用于封装成 jQuery 对象的 DOM 元素

// 将当前页面的背景色设为黑色
jQuery(document.body).css( "background-color", "black" );

再看以下代码

// 将当前页面的背景色设为黑色
$(document.body).css( "background-color", "black" );

代码也可以正常运行，并且执行的效果跟前面的代码一致；那么这儿的 $ 和前面的 jQuery 标识符到底有什么关系呢？

打开 jQuery 的源文件 jquery-1.3.2.js 发现以下代码

jQuery = window.jQuery = window.$ = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context );
}

原来 $ 与 jQuery 代表的是 jQuery 框架中同一个 function，使用 jQuery 和 $ 的效果是一样的；实际上 jQuery 框架中采用 $ 来作为 jQuery 方法的一个别名（更易于使用），由于担心 $ 与其它 javascript 框架（比如 asp.net ajax）甚至个人代码中的 $ 标识符产生冲突，也可以通过 jQuery.noConflict() 函数来移除 $ 与 jQuery 函数的关联，这样 $ 就不代表 jQuery 方法了，而是代表那个原始的 $ 对象了。

2、jQuery(expression,[context])

　　这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。

返回值：jQuery 对象

参数

expression:　　　用来查找 DOM 元素的字符串

context:　　　　 (可选) 作为待查找的 DOM 元素集、文档或 jQuery 对象，用于限定查找范围

// 查找所有 DIV 元素下的 A 元素
$("div > a");

3、jQuery(html)

根据 HTML 字符串，动态创建由 jQuery 对象包装的 DOM 元素。

返回值：jQuery 对象

参数

html:　　　　用于创建 DOM 元素的 HTML 字符串

// 将一个 jquery.com 的超链接元素加到页面主体元素中
$("<a href=http://jquery.com/>jquery.com</a>").appendTo("body");

二、jQuery 对象

jQuery 核心函数的返回值都是一个 jQuery 对象，通过对 jQuery 对象进行操作，可以完成 javascript 编程中的大部分任务；那么这个 jQuery 对象到底是一个什么对象呢？

通过 doc[0]、doc[1] 可以分别取出一个 DOM 对象，其它的则是一些 jQuery 对象特有的属性和方法；实际上 jQuery 对象包装了 DOM 对象，同时还包含了一些操作 DOM 元素的 jQuery 方法。

在使用 jQuery 的过程中，大部分情况下第一步工作同时也是最重要的一步工作，就是取得包装了要操作 DOM 对象的 jQuery 对象；然后通过调用取得的 jQuery 对象的方法来完成对 DOM 对象的操作。

本文链接

jQuery 学习及应用

2010-03-22T11:17:00Z

jQuery 是一款非常优秀的 javascript 应用框架，在最近几年来十分流行，它以其小巧的体积、强大的功能、精简的代码、丰富的插件博得了广大前端开发人员的亲睐。

最近打算写一些文章来介绍 jQuery 的基础知识以及分享一些个人经验的总结，希望和大家就 jQuery 的使用经验进行交流。

1、jQuery 核心函数以及 jQuery 对象

2、jQuery 选择器（一）

3、jQuery 筛选器

4、jQuery 文档处理

5、jQuery CSS 处理以及 jQuery DOM 属性处理

6、jQuery 事件处理

7、jQuery Ajax 处理

8、jQuery 工具方法以及 jQuery 特效

9、jQuery 插件开发

10、jQuery 1.4 新特性

本文链接

两种自定义表单设计方案 [原创]

2006-11-02T08:29:00Z

最近参与一个项目，客户要求提供自定义表单的功能。主要的要求是：能够对表单的字段进行增删改，对显示表单的格式可以灵活定制。由于客户的表单变动可能比较频繁，所以决定实现自定义表单功能。初步设想出以下两种自定义表单的解决方案。

从 dll 程序集中动态加载窗体 [原创]

2006-10-26T03:28:00Z

昨天晚上花了一晚上时间写了一个从程序集中动态加载窗体的程序．将任何包含窗体的代码编译成 dll 文件，再把 dll 文件拷贝到本程序的目录下，本程序运行时即可动态检查到 dll 文件中的窗体，将窗体类的类型在程序菜单中显示出来，点击菜单即可运行对应的窗体．　　本程序主要用到了 Assembly 类动态加载程序集，再得到程序集中包含类的 Type 类型，动态生成类实例，动态调用类方法．个人觉得这是一种提供高度松耦合，可随意扩展的程序结构框架，希望和大家探讨一下这种框架的应用前景！

C# 绘制矢量图形 [原创]

2006-08-10T06:45:00Z

近来参与了一个项目，软件主要的功能就是使用C#画矢量图，然后导出到Word、Excel、Powerpoint中，并且能够再次被编辑。以下是我们的解决过程：首先应该确定在Office文档中可编辑图形使用的格式；学习了相关资料，了解到Office文档主要支持三种矢量图的格式：1、VML图形，2、WMF文件格式，3、EMF文件格式。由于VML图开一般使用HTML语言进行描述，不便于进行操作，因此决定采用WMF和EMF文件格式。

利用Javascript 结合 VML 生成三维报表（饼图）[原创]

2006-03-02T02:36:00Z

前几天看了Jmtek 的 http://www.cnblogs.com/jmtek/archive/2006/02/23/336073.html 这篇文章，写得的确不错，控件也非常好。只是只能供我们使用 DotNet 的朋友们使用。最近在网上比较流行 AJAX 技术，于是萌生了在 AJAX 下实现这种效果的想法。最终决定采用一个文本文件作为数据源，Javascript 动态生成 VML 代码。实现后的效果还比较可以，生成的图表效果和 Jmtek 的控件效果差不多，并且能够在文本数据内容发生改变时无刷新的更新图表，更新数据也非常方便。这段代码的最大特点是：移植性非常好，只需将两个文件放在任意一个目录下即可运行，这样爱好 JAVA 的朋友也可实现这种效果了。

微软的正则表达式教程（五）：选择/编组和后向引用

2006-01-25T01:57:00Z

微软的正则表达式教程（五）：选择/编组和后向引用

微软的正则表达式教程（四）：限定符和定位符

2006-01-25T01:56:00Z

微软的正则表达式教程（四）：限定符和定位符

微软的正则表达式教程（三）：字符匹配

2006-01-25T01:55:00Z

微软的正则表达式教程（三）：字符匹配