JQuery中each解析

来源:互联网 发布:网络销售外汇好做吗 编辑:程序博客网 时间:2024/06/14 07:47
<!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>
    <title>无标题页</title>
    <style type="text/css"> 
        .red{ background:Red;}
    </style>
    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("input:[name=names]").click(function(){
                $(this).attr("class","red");
                var arr=new Array();
                $("input:checked").each(function(key,value){
                    arr[key]=$(value).val();
                });
                $("#initInfo").html(arr.join(","));
            });
            var links="<p><a href='http://www.baidu.com'>百度</a></p>";
            //links.text("摆渡");
            $("#initInfo").append(links);
        });
        
        
        $(function(){
            var data={"百度":"http://www.baidu.com","新浪":"http://www.sina.com"};
            $.each(data,function(key,value){
                var tr="<tr><td>"+key+"</td><td><a href="+value+">"+key+"</a></td><tr>";
                $("#table1").append(tr);
            }); 
            var s=$("#redinfo li[class=red]").remove();
            $("#redinfo").append(s);
            //$("#redinfo li[class=red]").removeClass("red");
            
        });
    </script>
</head>
<body>
    <input type="checkbox" name="names" value="tom" />tom
    <input type="checkbox" name="names" value="jom" />jom
    <input type="checkbox" name="names" value="ss" />ss
    <input type="checkbox" name="names" value="dd" />dd
    <input type="checkbox" name="names" value="ff" />ff
    <p id="initInfo"></p>
    
    <table id="table1">
        
    </table>
    <ul id="redinfo">
        <li>11</li>
        <li class="red">22</li>
        <li>33</li>
        <li class="red">44</li>
        <li>55</li>
    </ul>
</body>
</html>
0 0
原创粉丝点击