（一）jQuery知识点及相关列子代码片段
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryDemo.WebForm1" %><%-- (一)选择器 (1)jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 元素。 $("p.intro") 选取所有 class="intro" 的
元素。 $("p#demo") 选取所有 id="demo" 的
元素。 $("#test").hide() - 隐藏所有 id="test" 的元素 (2)jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 (3)jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色： $("p").css("background-color","red"); (二)jQuery 事件函数 在上面的例子中，当按钮的点击事件被触发时会调用一个函数： $("button").click(function() {..some code... } ) （三）jQuery - Chaining 通过 jQuery，您可以把动作/方法链接起来。 Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。 好处：浏览器就不必多次查找相同的元素。 下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动： $("#p1").css("color","red").slideUp(2000).slideDown(2000); （四）jQuery Callback 函数 Callback 函数在当前动画 100% 完成之后执行。 原因:由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。 (五）Dom操作 （1）获得内容 - text()、html() 以及 val() 三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 获取属性 - attr() jQuery attr() 方法用于获取属性值。 下面的例子演示如何获得链接中 href 属性的值 $("button").click(function(){ alert($("#w3s").attr("href"));}); （2）设置内容 - text()、html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 （3）jQuery - 添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 （4）jQuery - 删除元素 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 （5）jQuery 操作 CSS addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 （6）jQuery css() 方法 css() 方法设置或返回被选元素的一个或多个样式属性。 $("p").css("background-color"); （7）jQuery - 尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight() --%>
this is a heading
This is a paragraph
this is a anothrer paragraph
W3School.com.cn
(二）jQuery之ajax列子
(1)JqueryAjaxDemo.aspx页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjaxDemo.aspx.cs" Inherits="JqueryDemo.JqueryAjaxDemo" %>
(2)服务器端处理程序Handler.ashx
using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;namespace JqueryDemo{ /// /// Handler 的摘要说明 /// public class Handler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Write(Proxy(context)); } public bool IsReusable { get { return false; } } private string GetStudents() { List list = new List (); list.Add(new Student(){StudentID="0001",StudentName="张三",Age=30,Sex="男"}); list.Add(new Student() { StudentID = "0002", StudentName = "李四" ,Sex="女"}); list.Add(new Student() { StudentID = "0003", StudentName = "王五",Sex="男" }); StringBuilder sb = new StringBuilder(); sb.Append(" "); foreach (Student student in list) { sb.Append(" "); } return sb.ToString(); } public string Proxy(HttpContext context) { string response = string.Empty; string type = context.Request.QueryString["type"].Trim(); if (type == "getStudent") { response = GetStudents(); } return response; } public class Student { public string StudentID { get; set; } public string StudentName { get; set; } public int Age { get; set; } public string Sex { get; set; } } }} （三）