Fatal编程技术网

Javascript Java脚本行为

javascript jquery html

Javascript Java脚本行为,javascript,jquery,html,Javascript,Jquery,Html,使用以下代码时： <html> <head> <style> #main{ color: red } </style> </head> <body> <div class='try'> <h1 id='main' style='color: green'>hello</h1> </div> <scri

使用以下代码时：

<html>
<head>
    <style>
        #main{
            color: red
        }
    </style>
</head>
<body>
<div class='try'>
<h1 id='main' style='color: green'>hello</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
这将返回我在使用FireFox时期望的值。 然而，如果我尝试在Google Chrome上运行相同的东西，我会被告知这是未定义的。要在Chrome上做同样的事情，我必须这样做

$('.try').get(0).innerHTML
有人能解释一下在每个浏览器中如何对其进行不同的评估，以及我如何解决这个问题吗？

这将检索“try”elemented类中的HTML（您好）：

但这将仅检索文本（hello）：

tl；博士： 示例代码将jQuery技术与本机javascript属性混合在一起

jQuery的$（）： 
$（'.try'）
将：

返回根据传递的参数在DOM中找到或通过传递HTML字符串创建的匹配元素的集合

因此，
$（'.try'）
的返回值是一个集合，它通常不具有innerHTML†属性（就像元素那样）

正如其他人所提到的，浏览器可以根据自己的选择为$（）定义函数。它可能返回与jQuery类似的值，也可能不返回

按照@Kind user在评论中的建议，使用

获取匹配元素集中每个元素（包括其子元素）的组合文本内容，或设置匹配元素的文本内容

因此，要使用jQuery：

$('.try').text()

$（文档）.ready（函数（readyEvent）{
log（'类为“try”text:'，$（'.try'）.text（）的第一个元素）；
});

#主{
颜色：红色
}



你好

.innerHTML
是一个纯html dom函数。使用
jQuery
时，请使用：


    

  • $（'.try'）.html（）
    • 


或


    

  • $（'.try'）.text（）
    • 

Firefox和Chrome开发者工具都实现了一个名为
$
的函数，该函数可能与jQuery冲突。您可能在一个浏览器中打开了开发人员工具，但在另一个浏览器中没有


.innerHTML
是原始DOM访问器。您可能希望留在jQuery领域，使用
$（'.try'）.html（）
我认为您必须坚持使用jQuery或纯Javascript，因为对于类选择器，您使用jQuery（$（'.try'））并访问您使用纯Javascript（innerHTML）的开发内部值

因此，您可以像这样访问div中的html


var element = $('.try').[0] || $('.try');
var value = element.innerHTML;


或者直接使用JQuery方法，库将处理浏览器问题


$('.try').html();



使用
.text（）
或
.html（）
而不是
innerHTML
。请通过单击正确答案旁边的空复选标记，浏览并选择前面问题的答案。在问更多问题之前，请先这样做。

$('.try').text()



var element = $('.try').[0] || $('.try');
var value = element.innerHTML;



$('.try').html();