麻烦混合jquery和js

Question

嘿伙计我是jquery的菜鸟，我听说将jquery与纯javascript混合是可以的，但是我想知道这是否是导致以下代码无法工作的原因或是其它的东西我做错了？

var fnd_child = $('#thumb_slider').children().length;

$(document).ready(function(){
    $('#basic_div').innerHTML = fnd_child;
});

在basic_div中没有​​任何事情......它只是空的。我甚至尝试将此功能附加到按钮但仍然没有任何反应。我只需要知道basic_div中有多少个孩子，然后在屏幕上打印出这个号码。谢谢！

Answer 1

$('#basic_div')是一个返回jQuery对象的选择器，而不是DOM元素。

$('#basic_div')[0]会获取您的元素，但为什么不使用$('#basic_div').html()？

Answer 2

您应该使用.html()方法。

$('#basic_div').html(fnd_child);

甚至更好（，因为fnd_child只是文字）使用.text()方法

$('#basic_div').text(fnd_child);

Answer 3

准备好访问文档中的dom元素总是安全的。这确保了在加载dom后将访问它。您只需使用html方法设置值。它应该工作。

$(document).ready(function(){
    var fnd_child = $('#thumb_slider').children().length;
    $('#basic_div').html(fnd_child);
});

以下是工作演示：http://jsfiddle.net/vrfAZ/

Answer 4

你也可以这样做：

document.getElementById('basic_div').innerHTML = fnd_child;

使用选择器调用jQuery函数会返回一个“jQuery对象”，其中包含选择器在数组中选择的元素。然后它有替换等效DOM方法的方法，以及设置或返回元素属性（或有时属性）的更多方法。

因此，对于jQuery版本，您必须调用innerHTML方法并提供替换HTML作为参数，而不是分配给html属性：

$('#basic_div').html(fnd_child);

基本上就是上面的行所做的，但是还有更多的函数调用。