Javascript 使用jQuery进行Dom大纲绘制。_Javascript_Jquery_Html_Dom

Javascript 使用jQuery进行Dom大纲绘制。

javascript jquery html dom

Javascript 使用jQuery进行Dom大纲绘制。,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我是jQuery和javascript的新手，所以这似乎是一个微不足道的问题。我想使用在我创建的html页面中找到的DOM大纲视图代码我的html页面源代码如下 <!DOCTYPE html> <html> <head> <h3>Dom Outlining</h3> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/j

我是jQuery和javascript的新手，所以这似乎是一个微不足道的问题。我想使用在我创建的html页面中找到的DOM大纲视图代码

我的html页面源代码如下

<!DOCTYPE html>
<html>
<head>
    <h3>Dom Outlining</h3>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>      
    <script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
    <script>
        $(document).ready(function() {
        var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
        var myDomOutline = DomOutline({ onClick: myExampleClickHandler });

        // Start outline:
        myDomOutline.start();

        // Stop outline (also stopped on escape/backspace/delete keys):
        myDomOutline.stop();
    });
    </script>
</head>
<body>
    <h1>My First Heading</h1>

    <p>My first paragraph.</p>
    <div class="first class">
        <p> This is a division.</p>
    </div>
</body>
</html>


Dom大纲
$（文档）.ready（函数（）{
var myExampleClickHandler=function（element）{console.log（'Clicked element:'，element）；}
var myDomOutline=DomOutline（{onClick:myExampleClickHandler}）；
//开始大纲：
myDomOutline.start（）；
//停止轮廓（在转义键/退格键/删除键时也停止）：
myDomOutline.stop（）；
});
我的第一个标题
我的第一段
这是一个部门

但是，这似乎并没有根据需要选择和突出显示元素。有人能告诉我我的代码中缺少了什么吗？

因为你一开始就停止突出显示

    $(document).ready(function() {
    var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
    var myDomOutline = DomOutline({ onClick: myExampleClickHandler });

    // Start outline:
    myDomOutline.start();

    // Stop outline (also stopped on escape/backspace/delete keys):
    //myDomOutline.stop();
});

演示：

在理想的实现中，我在演示中添加了启动和停止按钮。

您只需删除

myDomOutline.stop（）：）
你启动它，然后几乎立即停止-结果什么都没有
检查此处

Dom大纲
$（函数（）{
var myDomOutline=DomOutline（{
onClick:函数（元素）{
log（'Clicked元素：'，元素）；
}
});
$（“#开始”）。单击（函数（）{
myDomOutline.start（）；
});
$（'#停止'）。单击（函数（）{
myDomOutline.stop（）；
});
});
我的第一个标题
我的第一段
这是一个部门
是否已检查“jquery.dom-outline-1.0.js”javascript是否正确加载。
 $(document).ready(function() {
        var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
        var myDomOutline = DomOutline({ onClick: myExampleClickHandler });

        // Start outline:
        myDomOutline.start();

        // Stop outline (also stopped on escape/backspace/delete keys):
       // myDomOutline.stop();
    });

<html>
<head>
    <h3>Dom Outlining</h3>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>      
    <script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
    <script>
        $(function() {
            var myDomOutline = DomOutline({ 
                onClick: function (element) { 
                    console.log('Clicked element:', element); 
                }
            });

            $('#start').click(function(){
                myDomOutline.start();
            });

            $('#stop').click(function(){
                myDomOutline.stop();
            });
        });
    </script>
</head>
<body>
    <input id="start" type="button" value="Start outline"/>
    <input id="stop" type="button" value="Stop outline"/>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>
    <div class="first class">
        <p> This is a division.</p>
    </div>
</body>
</html>