20110228jQuery攻略

1

2

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 language="javascript" type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            //   alert('hello world.');
            var menbers = ["jon", "joah", "cnblogs"];
            //  $('p').text(menbers.join(", "));以,分隔符显示数组内容
            //   $('p').html(menbers.join("<br/>"));纵向显示数组内容
            /* var menberlist = $('#list'); each(callback):以每一个匹配的元素作为上下文来执行一个函数。
            $.each(menbers, function (index, value) {
            menberlist.append($("<li>" + value + "</li>"));
            });*/
            /* var ulname = $('li').get();//get():取得所有匹配的 DOM 元素集合。
            $('p').text(ulname.length);8/
            /*筛选数组中长度大于或等于4的;*/
            /*grep: 对数组元素进行筛选，grep(array,callback,boolean),
            其中callback(数组元素值，索引）,boolean默认是false,若是true则返回与false相反的数据
            menbers = $.grep(menbers, function (value) { return value.length >= 4 }); 
            */
            /*返回数组红是j开头的元素*/
            /*   menbers = $.grep(menbers, function (value) { return value.match(/^[j]/) });
            $('p').html(menbers.join("<br/>"));*/
            /*对数组排序*/
            var menberint = [12, 22, 41, 62, 90];
            /*sort是按ascci排序即menberint.sort()；所以要pre-next来按判断从而按值排序
            menberint = menberint.sort(function (pre, next) {
            return pre - next
            });
            $('.sorted').html(menberint.join("<br/>"));*/
            /*分拆数组
            var secondint = menberint.splice(0, 3); //从0开始将原数组中3个元素删除存储到新数组中.
            $('.frist').html(secondint.join("<br/>"));
            $('.second').html(menberint.join("<br/>"));*/
            /*合并数组
            var fristint = [1, 2, 3];
            var secondint = [3, 4];
            var contactint = fristint.concat(secondint);
            $('.contact').html(contactint.join("<br/>"));*/
            /*将数组转换成字符串，并查找其中的字符串
            var str = menbers.join("");
            $('.pstrs').text(str);
            var substr = str.substr(0, 4);
            $('.pstr').text(substr);*/
            /*创建对象*/
            var person = [
             {
                 "name": "jon",
                 "age": 55
             },
              {
                  "name": "ajon",
                  "age": 44
              },
               {
                   "name": "bjon",
                   "age": 11
               },
                {
                    "name": "cjon",
                    "age": 22
                }
            ];
            /*   $.each(person, function (index, value) {
            $('p.persons').append(value.name + " " + value.age);
            });
            $.each(person, function (index, value) {
            $('table.persons').append("<tr><td>" + value.name + "</td><td>" + value.age + "</td></tr>");
            });*/
            /*对象进行排序按age 
            person = person.sort(function (pre, next) {
            return next.age - pre.age;
            });*/
            /*对象进行排序按按字母顺序*/
            person = person.sort(function (pre, next) {
                if (next.name > pre.name) return -1;
                if (next.name < pre.name) return 1;
                return 0;
            });
            $.each(person, function (index, value) {
                $('table.personssortedbyage').append("<tr><td>" + value.name + "</td><td>" + value.age + "</td></tr>");
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <p>
    </p>
    <ol id="list">
    </ol>
    <ul>
        <li>jon</li>
        <li>joah</li>
        <li>cnblogs</li>
    </ul>
    <p class="sorted">
    </p>
    <p class="frist">
    </p>
    <p class="second">
    </p>
    <p class="contact">
    </p>
    <p class="pstrs">
    </p>
    <p class="pstr">
    </p>
    <p class="persons">
    </p>
    <table class="persons">
    </table>
    <table class="personssortedbyage">
    </table>
    </form>
</body>
</html>
3
posted @ 2011-03-01 01:09  Jon.Zhiwei@hotmail.com  Views(175)  Comments(0)    收藏  举报