zoukankan      html  css  js  c++  java
  • 第三讲 JQuery 的dom模型操作

      因为种种、我没有听老师讲的这堂课,不过我还是掌握了jQuery的dom模型操作,现在就来给大家聊聊在JQuery中怎么操作dom模型吧!
            首先一定要记住几个常用的属性,这是非常重要的:

            1. text() —— 获取或设置标签中间的内容。(只能是纯文本)

            2. html()—— 获取或设置标签中间的内容。(可以设置html标签)

            3. attr()—— 获取或设置属性。

            4. css()—— 获取或设置样式(即:style)。

            5. addClass()、removeClass()、toggleClass()—— 用来添加、移除、(添加、移除)Class样式。

            6. removeAttr() —— 移除指定的属性。

            7. height()、width()—— 获取或设置高、宽。

            8. val()——获取表单元素的值。

            9. hasClass()——判断是否存在指定的样式。

            接着就是常用的方法了:
             创建元素:

            $(“标签元素”) —— 创建一个元素。

            添加元素:

            append() —— 添加元素到指定的父元素中。例如:父元素.append(子元素);

            appendTo()—— 将子元素添加到父元素中。例如:子元素.appendTo(父元素);

            after()—— 当前元素最后追加。

            before() —— 当前元素最前追加。

            删除元素:

            remove() —— 删除元素。

            包裹节点:

            wrap()—— 包裹元素。(添加父元素)—— 例如:$(“<input />”).wrap(“<div />”);用div将input标签包裹起来。

            看到这里,其实jQuery操作dom模型也就讲的差不多了,现在带大家来看一个实际的例子吧——在线编辑器

     

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>
    <style type="text/css">
    input {
    border:none;
    border-bottom:1px #000000 solid;
    }
    * {
    font-size:12px;
    }
    table {
    border:1px #000000 solid;
    border-collapse:collapse;
    }
    td {
    border:1px #000000 solid;
    padding:5px;
    }
    </style>
    <script src="jquery-1.4.1.js"></script>
    <script type="text/javascript">
    $(function(){
    $("table tr:gt(0)").find("a").click(function(){
    $(this).parent().prevAll().each(function(){
    var oldval=$(this).text();
    $(this).empty().append($("<input value='"+oldval+"' oldvalue='"+oldval+"'/>"));
    });
    var ok=$("<a href='#'>确定&nbsp;&nbsp;</a>");
    var cal=$("<a href='#'>取消&nbsp;&nbsp;</a>");
    $(this).parent().append(ok).append(cal);
    $(this).hide();
    ok.click(function(){
    $(this).parent().prevAll().each(function(){
    var newval=$(this).children().val();
    $(this).empty().text(newval);
    });
    $(this).parent().find(":first-child").show();
    $(this).parent().find(":gt(0)").remove();
    });
    cal.click(function(){
    $(this).parent().prevAll().each(function(){
    var newval=$(this).children().attr("oldvalue");
    $(this).empty().text(newval);
    });
    $(this).parent().find(":first-child").show();
    $(this).parent().find(":gt(0)").remove();
    });
    });
    });
    </script>
    </head>
    <body>
    可编辑的表格
    <table width="852" height="269" border="0" cellpadding="0" cellspacing="0">
    <tr style="background:#CCCCCC">
    <td>编号</td>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>地址</td>
    <td>操作</td>
    </tr>
    <tr>
    <td>10001</td>
    <td>张三</td>
    <td></td>
    <td>20</td>
    <td>重庆</td>
    <td><a href="#">修改</a></td>
    </tr>
    <tr>
    <td>10001</td>
    <td>张三</td>
    <td></td>
    <td>20</td>
    <td>重庆</td>
    <td><a href="#">修改</a></td>
    </tr>
    <tr>
    <td>10001</td>
    <td>张三</td>
    <td></td>
    <td>20</td>
    <td>重庆</td>
    <td><a href="#">修改</a></td>
    </tr>
    <tr>
    <td>10001</td>
    <td>张三</td>
    <td></td>
    <td>20</td>
    <td>重庆</td>
    <td><a href="#">修改</a></td>
    </tr>
    <tr>
    <td>10001</td>
    <td>张三</td>
    <td></td>
    <td>20</td>
    <td>重庆</td>
    <td><a href="#">修改</a></td>
    </tr>
    <tr>
    <td>10001</td>
    <td>张三</td>
    <td></td>
    <td>20</td>
    <td>重庆</td>
    <td><a href="#">修改</a></td>
    </tr>
    <tr>
    <td>10001</td>
    <td>张三</td>
    <td></td>
    <td>20</td>
    <td>重庆</td>
    <td><a href="#">修改</a></td>
    </tr>
    </table>
    </body>
    </html>
    
    最后,多多练习,一定会有所收获的

     

     

  • 相关阅读:
    C# 获取计算机相关信息
    C# 创建Windows服务demo
    C# 嵌入互操作类型
    使用开源框架Sqlsugar结合mysql开发一个小demo
    C# 实现最小化托盘功能
    面试-PA和XSYX面试小结
    0103-springmvc的基本流程
    0102-aop
    java并发编程-12个原子类
    ej3-0开端
  • 原文地址:https://www.cnblogs.com/lljj/p/2754574.html
Copyright © 2011-2022 走看看