zoukankan      html  css  js  c++  java
  • jQuery操作得到DOM元素

             jQueryDOM操作方面提供了一些函数及其用法,这里就对DOM元素的包装简单说明一下,怎样使用会了,对其它方法也能灵活的使用。以下是一个小样例及其效果图。

    代码例如以下:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>演示jquery操作得到的元素</title>
        <%--引入jquery文件--%>
        <script  type ="text/javascript" src ="jquery-2.1.4.js"></script>
        <script  type ="text/javascript">
            $(document).ready(function () {
                //触发onclick事件
                $("#testbutton").click(
                    function () {
                        //使用class为test的元素包裹给定元素
                        $("p").wrap($(".test"));
                    }
                    );
            });
        </script>
        <%--基本样式设定--%>
        <style type ="text/css">
            .test {
            color :white ;
            background-color :#ffd800;
            }
            .wrap {
            background-color :green ;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            
        <div id="content">
            <button id="testbutton">測试</button>
            <br /><br />
            <div class ="test"></div>
            <p id ="first">第一段文字,id为first</p>
            <p id ="second">第二段文字。id为second</p>
            <p id ="third">第三段文字,id为third</p>
        </div>
        </form>
    </body>
    </html>
    
      对于jQuery的使用自己要多多实践,这样才干对它了如指掌啊~

  • 相关阅读:
    蛋糕切割【数论,数学】
    【洛谷P1082】同余方程【扩欧】
    【洛谷P4003】无限之环【费用流】
    【洛谷P4503】企鹅QQ【字符串hash】
    【洛谷P3084】照片Photo【单调队列dp】
    【洛谷P2286】宠物收养场【Treap】
    POJ 3984 迷宫问题
    牛客IOI周赛19-普及组题解
    UVA 11624 Fire!
    FZU 2150 Fire Game
  • 原文地址:https://www.cnblogs.com/llguanli/p/6880229.html
Copyright © 2011-2022 走看看