Jquery及Juqery Ajax学习小结

 

（一）jQuery知识点及相关列子代码片段

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="JqueryDemo.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
 <%--    (一)选择器
   (1)jQuery 元素选择器
      jQuery 使用 CSS 选择器来选取 HTML 元素。
      $("p") 选取 <p> 元素。
      $("p.intro") 选取所有 class="intro" 的 <p> 元素。
      $("p#demo") 选取所有 id="demo" 的 <p> 元素。
      $("#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() --%>
                         
    <script src="jquery-2.0.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("p").hide();

            });
            $("#btnFadeIn").click(function () {
                $("#div1").fadeIn();
                $("#div2").fadeIn("slow");
                $("#div3").fadeIn(3000);
            });
            $("#btnFadeOut").click(function () {
                $("#div1").fadeOut();
                $("#div2").fadeOut("slow");
                $("#div3").fadeOut(3000);
            });
            $("#btnFadeTo").click(function () {
                $("#div1").fadeTo("slow", 0.15);
                $("#div2").fadeTo("slow", 0.4);
                $("#div3").fadeTo("slow", 0.7);
            });
            $("#btnAnimation").click(function () {
                $("#div4").animate({
                    left: '250px',
                    opacity: '0.5',
                    height: '150px',
                    width: '150px'
                }, 3000, function () { alert('CallBack函数提示您：动画已执行完成') });
            });
            $("#btnChain").click(function () {
                $("#div1").css("color", "red").fadeIn(2000).fadeOut(2000);
            });
            $("#btnGetText").click(function () {
                alert("Text:" + $("#testText").text());
                alert("Value:" + $("#testInput").val());
                alert("连接：" + $("#w3s").attr("href"));
            });


        });
    </script>
</head>
<body>
    <h2>
        this is a heading</h2>
    <p>
        This is a paragraph</p>
    <p id="testText">
        this is a anothrer paragraph</p>
    <button type="button">
        Click Me</button>
    <button id="btnFadeIn" type="button">
        渐入</button>
    <button id="btnFadeOut" type="button">
        渐出</button>
    <button id="btnFadeTo" type="button">
        透明</button>
    <button id="btnAnimation" type="button">
        动画</button>
    <button id="btnChain" type="button">
        获取设置文本</button>
     <button id="btnGetText" type="button">获取文本</button> 
    <br />
    <input type="text" id="testInput" value="米老鼠">
    <br />
      <a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a>
    <br />  
    <div id="div1" style="width: 80px; height: 80px; display: none; background-color: red;">
    </div>
    <br />
    <div id="div2" style="width: 80px; height: 80px; display: none; background-color: green;">
    </div>
    <br />
    <div id="div3" style="width: 80px; height: 80px; display: none; background-color: blue;">
    </div>
    <br />
    <div id="div4" style="background: #98bf21; height: 100px; width: 100px; position: absolute;">
    </div>
</body>
</html>

(二）jQuery之ajax列子

(1)JqueryAjaxDemo.aspx页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqueryAjaxDemo.aspx.cs" Inherits="JqueryDemo.JqueryAjaxDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-2.0.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" >
//        Ajax代码实现
//         data中的type"getStudent"作为Handler.ashx中解析处理不同任务的参数
//         url:告诉那个页面来处理任务
//         $("#selStudent").html(data);将获取成功后的数据显示到selStudent上
        function getStudents() {
            $.ajax(
         { type: "get",
             data: { type: "getStudent" },
             url: "Handler.ashx",
             success: function (data) {
                 $("#selStudent").html(data);
             }
         })
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <input id="Button1" type="button" value="button" onclick="getStudents()"/><select id="selStudent" 
            name="D1">
            <option></option>
        </select></div>
    </form>
</body>
</html>

(2)服务器端处理程序Handler.ashx

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;

namespace JqueryDemo
{
    /// <summary>
    /// Handler 的摘要说明
    /// </summary>
    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<Student> list = new List<Student>();
            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("<option value=\"0\">--请选择--</option>");
            foreach (Student student in list)
            {
                sb.Append("<option value=\"" + student.StudentID + "\">" + student.StudentName + "</option>");
            }
            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; }
        }
    }
}

（三）源代码下载

 

posted @ 2013-07-23 20:39  焦涛  阅读(679)  评论(0)    收藏  举报