JQuery常用功能

zengshaotao

浏览: 786241 次
性别:
来自: 上海

最近访客更多访客>>

njdccy

AK1343794853

chehaoj

jstl1point0

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JQuery

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <base href="<%=basePath%>">

    <title>JQuery常用功能练习</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
        .li1{
        background:red;
        width:20px;
        }
         ul{ list-style:none; border-bottom:1px solid gray; padding:0; margin:0; width:200px;}
        .header{ background:yellow; border:1px solid gray; border-bottom:0; cursor:pointer;}
        div { height:30px; width:200px; border:1px solid red; padding:4px; margin:2px;}
        p { height:30px; width:200px; border:1px solid green; padding:4px; margin:2px;}
        .content{ color:blue; border:1px solid gray; border-bottom:0;}
         .lightOff{ background-color:Black;color:White;}

    </style>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<script type="text/javascript">

  // 可以多次注册事件
        // (Dom元素创建完毕后就被触发)
        $(document).ready(function() {
            //alert("加载完成1！");
        });
        $(document).ready(function() {
            //alert("加载完成2！");
        });

        // 只能有效一次
        // (所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发)
        window.onload = function() {
            //alert("onload 1 !");
        }
        window.onload = function() {
            //alert("onload 2 !");
        }

        $(function() {
            $("#selall").click(function() {
                $("#playList :checkbox").attr("checked", true);
            });
            $("#unselall").click(function() {
                $("#playList :checkbox").attr("checked", false);
            });
            $("#reverse").click(function() {
                $("#playList :checkbox").each(function() {
                    $(this).attr("checked", !$(this).attr("checked"));
                });
            });
        });

         $(function() {
            $("input[value=显示所选项]").click(function() {
                var names = $("input[name=city]:checked");
                var arr = new Array();
                names.each(function(key, value) { arr[key] = $(value).val(); });
                $("#spanMsg").text("共选中" + names.length + "条：" + arr.join(","));
            });
        });

        // 删除节点
        $(function() {
            $("#removeUl").click(function() {
            $("ul li.li1").remove();
            // 动态创建dom界面
             var link = $("<a href='http://www.insigmaedu.com'>网新仿真实训</a>");
             // 必须把动态创建的元素添加到界面上后，才能通过选择元素器取到。
             //link.text("网新仿真实训");设置a标签内的文本内容
             $("#link1").text("网新仿真实训");
             $("#createDom").append(link);
            });
        });


        $(function() {
            // 添加所选项
            $("#moveToRight").click(function() {
                var items = $("#select1 option:selected").remove();
                $("#select2").append(items);
            });
            // 移除所选项
            $("#moveToLeft").click(function() {
                var items = $("#select2 option:selected").remove();
                $("#select1").append(items);
            });
            // 添加所有项
            $("#moveAllToRight").click(function() {
                var items = $("#select1 option").remove();
                $("#select2").append(items);
            });
            // 移除所有项
            $("#moveAllToLeft").click(function() {
                var items = $("#select2 option").remove();
                $("#select1").append(items);
            });
        });

         $(function() {
            // 偶数
            $("#userList li:odd").addClass("content");
            // 奇数
            $("#userList li:even").addClass("header").click(function() {
                $(this).next("li.content").show("fast").siblings("li.content").hide("fast");
            });
            // 第一次
             $("#userList li:odd").hide("fast");
            $("#userList li:even").last().click();
        });

         $(function() {
           /* $("div").click(function() {
                alert("Div单击事件1---> " + $(this).next().text());
            });

            $("div").click(function() {
                alert("Div单击事件2---> " + $(this).nextAll().text());
            });

            $("div").click(function() {
                alert("Div单击事件3---> " + $(this).nextAll("div").text());
            }); */

           $("div").click(function() {
              //这里的两个this要注意，紧接的下一行的this表示当前被点击的div
              //nextAll表示向后寻找兄弟节点
            var curObjs = $(this).nextAll("div");
                 $.each(curObjs, function() {
                 //紧接的如下两行的this表示curObjs里被循环到的变量
                    $(this).css("background", "red");
                    alert($(this).text());
                 });
            });

             $("p").click(function() {
                alert("P单击事件1---> " + $(this).next("p").text());
            });

// 菜单切换
            $("li").click(function() {
                $(this).css("background", "green");
                $(this).siblings("li").css("background", "red");
            });
        });

        $(function() {
            $("#toReplace").click(function() {
                $("br").replaceWith("<hr/>");
                $("p").wrap("<font color='red'></font>");
            })
        });

         $(function() {
            $("#turnLight").click(function() {
              /* $("body").toggleClass("lightOff"); */
                if ($("body").hasClass("lightOff")) {
                    $("#turnLight").val("关灯");
                    $("body").removeClass("lightOff");
                }
                else {
                    $("#turnLight").val("开灯");
                    $("body").addClass("lightOff");
                }
    /* if($(this).val()=="关灯"){
     $("body").addClass("lightOff");
     $(this).val("开灯")
    }else{
     $("body").removeClass("lightOff");
     $(this).val("关灯")
    } */

            });
        });

</script>
<body>
<div id="playList">
        <input type="checkbox" />23秒32年<br/>
        <input type="checkbox" />妈妈的太阳<br/>
        <input type="checkbox" />婚前试爱<br/>
        <input type="checkbox" />最重要的决定<br/>
        <input type="checkbox" />我的电话<br/>
        <input type="checkbox" />不只有缘<br/>
        <input type="checkbox" />丹书铁契<br/>
    </div>
<input id="selall" type="button" value="全选" />
    <input id="unselall" type="button" value="全不选" />
    <input id="reverse" type="button" value="反选" />


<br><hr>
<input type="checkbox" name="city" value="beijing" /> 北京<br/>
    <input type="checkbox" name="city" value="shanghai" /> 上海<br/>
    <input type="checkbox" name="city" value="hangzhou" /> 杭州<br/>
    <input type="checkbox" name="city" value="zhenzhou" /> 郑州<br/>
    <input type="checkbox" name="city" value="xian" /> 西安<br/>
    <input type="button" value="显示所选项" />
    <span id="spanMsg"></span>
    
<br><hr>
<div id="createDom"></div>
    <ul>
        <li>111</li>
        <li class="li1">222</li>
        <li>333</li>
        <li class="li1">444</li>
        <li>555</li>
    </ul>
    <input type="button" value="删除" id="removeUl" />
    
    <br><hr>
    <select id="select1" style="width:150px;height:150px;float:left;" multiple="multiple">
        <option>添加</option>
        <option>删除</option>
        <option>修改</option>
        <option>查询</option>
        <option>打印</option>
    </select>

    <div style="width:50px;height:150px;float:left; text-align:center;">
        <input id="moveToRight" type="button" value=" > " />
        <input id="moveToLeft" type="button" value=" < " />
        <input id="moveAllToRight" type="button" value=">>" />
        <input id="moveAllToLeft" type="button" value="<<" />
    </div>
    <select id="select2" style="width:300px;height:150px;float:left;" id="select2" multiple="multiple">
    </select>

     
    <br><hr width="1033px" align="left">
    <ul id="userList">
        <li>我的好友</li>

        <li>张三<br/>
        李四<br/>
        </li>

        <li>我的同事</li>

        <li>拉登<br/>
        奥巴马<br/></li>

        <li>陌生人</li>

        <li>陈凯歌<br/>
        周笔畅<br/></li>
    </ul>

    
    <br><hr>
    <div>层1</div>
    <div>层2</div>
    <div>层3</div>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <div>层4</div>
    <div>层5</div>
    <ul>
        <li>元素1</li>
        <li>元素2</li>
        <li>元素3</li>
        <li>元素4</li>
    </ul>
    
    <br><hr>
      米勃朗峰位于法国和意大利边境地区。<br/>
    海拔4807米区。<br/>
    是阿尔卑斯山脉的最高峰区。<br/>
    也是欧洲最高峰区。<br/>
    享有“欧洲屋脊”之美称区。
    <br/>
    <br/>
    <p>山巅冰雪覆盖，山坡林木葱茏，山麓碧波荡漾。</p>
    <input id="toReplace" type="button" value="ReplaceWith"/>
     
    <br><hr>
    <input id="turnLight" type="button" value="关灯" />


</body>

</html>

分享到：

FusionCharts.js | JQuery,extjs比较

2014-10-13 23:00
浏览 671
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论