Разница между jquery $ ('# my_id') и document.getElementById ('my_id')?

I tought $ ('# my_id1') - это то же самое, что document.getElementById ('my_id1'). Но это, по-видимому, нет. В чем разница?

(function($) { 
    $.fn.simple_hide_function = function() { 
    var $t = this; 
    $t.hide(); 
    }; 
})(jQuery); 

$(window).load(function() { 
var $div1 = $('#my_id1'); 
var $div2 = document.getElementById('my_id2'); 
$div1.simple_hide_function(); // this is working 
$div2.simple_hide_function(); // but this is not working 
});

Добавление пример, чтобы сделать его более ясным:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 

<div id="my_id1" style="height:100px;background:#f00">div1</div> 
<div id="my_id2" style="height:100px;background:#f00">div2</div> 



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 

(function($) { 
    $.fn.simple_hide_function = function() { 
    var $t = this; 
    $t.hide(); 
    }; 
})(jQuery); 

$(window).load(function() { 
var $div1 = $('#my_id1'); 
var $div2 = document.getElementById('my_id2'); 
$div1.simple_hide_function(); 
$div2.simple_hide_function(); 
}); 

</script> 
</body> 
</html>

источник

2011-12-29 Hakan

У вас есть my_id1 vs my_id2 - идентификаторы не совпадают – Nobita

у вас есть div с идентификатором «my_id2». –

Запуск имен переменных с помощью $ немного странно - $ t, $ div1 и т. Д. - только потому, что jQuery использует $ везде, это не значит, что вам нужно. О, вы думаете, что это PHP? – Spacedman

Первый возвращает объект JQuery с этим DIV в качестве единственного члена. Вы можете использовать функции jQuery для объекта, чтобы манипулировать им.

Второй возвращает DOMElement с использованием встроенных методов браузера.

источник

2011-12-29 11:40:42 Interrobang

Разница в том, что первая возвращает объект Jquery в то время как второй возвращает элемент DOM .

Но эти утверждения эквивалентны :

document.getElementById('my_id2') <-> $('#my_id1').get(0)

или

document.getElementById('my_id2') <-> $('#my_id1')[0]

источник

2011-12-29 11:40:16 Aliostad

Не обязательно то же самое. Internet Explorer будет возвращать элементы, атрибут «name» которых соответствует запрашиваемому значению «id» из «getElementById()», но библиотека jQuery никогда не сделает этого. – Pointy

Использование my_id1:

var $div2 = document.getElementById('my_id1');

источник

2011-12-29 11:41:23

$('#my_id1') // Returns a jQuery object

getElementById('my_id1') // Returns a DOM object.

Чтобы получить объект DOM объекта JQuery, вы можете позвонить:

$('#my_id1').get()

JQuery может соответствовать более чем один объект с selec тор, поэтому, чтобы получить второй соответствующий DOM элемент:

$('#my_id1').get(1) // 1 = item #2 (zero-based index)

И получить соответствующие DOM элементы из END коллекции, вы можете использовать отрицательное число, расстояние от конца согласованного элементы, которые вы хотите получить, поэтому -1 получает последний элемент.

$('#my_id1').get(-1) // gets the last item of the matched elements

источник

2011-12-29 11:42:52 lawrencealan

По моему мнению, разница в его рендеринге в браузерах.

Как будто мы не используем документ. Это не будет работать в браузерах IE.

Но работает только в других браузерах.

источник

2012-12-24 06:42:24 Capricon

Разница между jquery $ ('# my_id') и document.getElementById ('my_id')?

ответ

Смежные вопросы