zoukankan      html  css  js  c++  java
  • jquery获取自身元素的html

    在开发过程中,jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置。

    很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢?

    因为原生JS DOM里有一个内置属性 outerHTML (看清大小写哦,JS是区分大小写的)用来获取当前节点的html代码(包含当前节点),所以用jQuery的prop()能拿到
     
    一、jquery获取outerhtml

    1
    2
    3
    4
    <div class="test"><p>hello,你好!</p></div>
    <script>
    $(".test").prop("outerHTML");
    </script>

    html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。

    1. .html()用为读取和修改元素的HTML标签
    2. .text()用来读取或修改元素的纯文本内容
    3. .val()用来读取或修改表单元素的value值。

    二、jquery设置outerhtml

    1
    $('.test').prop('outerHTML', '<input>');

    希望本文所述对大家的jQuery程序设计有所帮助。

    一种办法;

    复制代码
     1 <html>
     2 <head>
     3     <title>jQuery获取自身HTML</title>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <meta http-equiv="Content-Language" content="zh-CN" />
     6     <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
     7 </head>
     8 <body>
     9 <div class="aa" style="border:1px solid #ABC;200px;text-align:center;">点击获取我自身的HTML吧</input>
    10 <script type="text/javascript">
    11 $(document).ready(function(){
    12 $(".aa").click(function(){alert($("<p>").append($(this).clone()).html())});
    13 });
    14 </script>
    15 </body>
    16 </html>
    复制代码

    原理:创建一个匿名Object,然后将自身加入其中,再取出匿名Object的html()便可得到自身HTML。

  • 相关阅读:
    语法专题:错误处理机制
    语法专题:数据类型的转换
    运算符:其他运算符,运算顺序
    运算符:二进制位运算符
    运算符:布尔运算符
    运算符:比较运算符
    day09 继承、super、this、抽象类
    day08 String类、Static关键字、Arrays类、Math类
    day06 Scanner类、Random类、匿名对象、ArrayList类
    day05 encapsulation
  • 原文地址:https://www.cnblogs.com/youxin/p/5303030.html
Copyright © 2011-2022 走看看