怎样用jQuery自带方法函数来获取outerHTML属性

什么是outerHTML

outerHTML，中文意为图例分析，用于获取元素内的html内容和文本。

与JQ的$()html()所不同的是，jQueryhtml() 是获取当前节点下的html代码，并不包含当前节点本身的代码。而outerHTML则包含本身的代码

例HTML：

<p id="testid"><span>这是一段Html代码</span></p>

它的html()为：

<span>这是一段Html代码</span>

而有时候回需要包含当前节点的代码，所以就用到了outerHTML，也就是

<p id="testid"><span>这是一段Html代码</span></p>

如何使用jQuery获取outerHTML

原生的JS Dom中有一个内置属性叫做：outerHTML (注意大小写敏感)获取包含当前节点的HTML代码。所以可以用JQ中的prop()获取，以上文代码为例

$('#testid')prop("outerHTML")

完整代码示例

<script src="

<p id="testid"><span>这是一段Html代码</span></p>

<script type="text/javascript">

consolelog("节点内的HTML代码\n"+$('#testid')html());

consolelog("包含节点的HTML代码\n"+$('#testid')prop("outerHTML"));

</script>

jquery获取父元素方法比较多，比如parent()，parents()，closest()，find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点。

$('#cur')parent()parent();或$('#cur')parent()parent('pp');或$('#cur')parent('pp');

jquery 兄弟节点的获取

<ul>

<li>

<h3 class="title">类目一</h3>

<ul>

<li>第一项</li>

<li>第二项</li>

</ul>

</li>

<li>

<h3 class="title">类目二</h3>

<ul>

<li>第一项</li>

<li>第二项</li>

</ul>

</li></ul>

比如要点击类目一所在的 h3，对其兄弟节点的 ul 添加一个叫做 "show" 的 class，代码如下：

$("title")click(function () { $(this)parent()find('ul')addClass('show'); });

就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul，还有一种方法是使用 siblings() 函数，代码如下:

("title")click(function() { $(this)siblings('ul')addClass('show'); })

子节点怎么获得

$("#tbody1:first-child")

:first-child

匹配第一个子元素

':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

某一节点下的所有子节点function getChildren(id/节点ID/)

{    var $tree = $('#tree');    var node = $treetree

('find',id);    var childrenNodes = $treetree

('getChildren',nodetarget);    return childrenNodes;}//某节点的一级节点

function getSubChildren(id){    var $tree = $('#tree');    var node = $treetree

('find',id);    var subNodes = [];    $(nodetarget)    next()children()children

("divtree-node")each(function(){           subNodespush($treetree

('getNode',this));    });   return subNodes;}

子节点是塔的若干部件的汇合点。

所属学科：

电力（一级学科）；输电线路（二级学科）。

定义2：

在一对相啮合的齿轮上，其两节圆的切点。

所属学科：

机械工程（一级学科）；传动（二级学科）；齿轮传动（三级学科）。

定义3：

在网络拓扑中，网络任何支路的终端或网络中两个或更多支路的互连公共点。

所属学科：

通信科技（一级学科）；通信原理与基本技术（二级学科）。

比如说父节点的Id是xxx，里面有个子节点的yyy属性的值是zzz，则

$("#xxx [yyy=zzz]")

或者父节点已经获取到变量x中，则

$("[yyy=zzz]",x)

JQuery提供以下两个方法可以读取节点中的内容：

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容（包括 HTML 标记）

注意二者在获取内容上的区别，实例演示如下:

1、HTML结构

<div id="test"><i>示例文字</i></div>

<input type="button" id="btn1" value="获取text">

<input type="button" id="btn2" value="获取html">

2、jquery代码

$(function(){

$("#btn1")click(function() {

alert($("#test")text());

});

$("#btn2")click(function() {

alert($("#test")html());

});

});

3、效果演示

tabchild()会出现对象不支持此属性或方法是因为本来就没有child()方法，你用$("#tab>span")child()也同样。

获得匹配元素集合中每个元素的所有子元素应该用children()

jquery获取classname的方法。

如下参考：

1．首先，打开桌面上的jquery图标，打开软件，创建一个新的HTML文档，并指定元素的ID。

2．编写JS脚本，根据ID选择元素，如下图所示。

3．使用．val（）方法获取被选元百素的value值，如下图。

4．以d出窗口的形式显示得到的输入值。

5．保存文件并在浏览器中查看结果。

这些jquery的一些查找方法：可以看看

jQueryparent(expr)           //找父元素

jQueryparents(expr)          //找到所有祖先元素，不限于父元素

jQuerychildren(expr)        //查找所有子元素，只会找到直接的孩子节点，不会返回所有子孙

jQuerycontents()            //查找下面的所有内容，包括节点和文本。

jQueryprev()                //查找上一个兄弟节点，不是所有的兄弟节点

jQueryprevAll()             //查找所有之前的兄弟节点

jQuerynext()                //查找下一个兄弟节点，不是所有的兄弟节点

jQuerynextAll()             //查找所有之后的兄弟节点

jQuerysiblings()            //查找兄弟节点，不分前后

jQueryfind(expr)            //跟jQueryfilter(expr)完全不一样，jQueryfilter(expr)是从初始的

jQuery对象集合中筛选出一部分，而jQueryfind()的返回结果，不会有初始集中

筛选出一部分，而jQueryfind()的返回结果，不会有初始集合中的内容，比如：

  $("p")find("span")是从元素开始找，等于$("p span")

以上就是关于怎样用jQuery自带方法/函数来获取outerHTML属性全部的内容，包括:怎样用jQuery自带方法/函数来获取outerHTML属性、用jquery怎么取父节点的兄弟节点的所有子节点、如何获取jquery easyui Tree的所有子节点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！