JQuery方法和DOM属性

Question

I am confused as to when I can use the DOM properties and when I could use the Jquery methods on a Jquery object. Say, I use a selector

var $elemSel = $('#myDiv').find('[id *= \'select\']')

At this point, $elemSel is a jquery object which I understand to be a wrapper around the array of DOM elements. I could get a reference to the DOM elements by iterating through the $elemSel object/array (Correct?)

My questions: 1. Is there a way to convert this $elemSel into a non JQuery regular array of DOM elements? 2. Can I combine DOM properties and JQuery methods at the same time (something like this)

$elemSel.children('td').nodeName

(nodeName is DOM related, children is JQuery related)

EDIT: What's wrong with this?

$elemSel.get(0).is(':checked')

EDIT 2:

Thanks for the responses. I understand now that I can use the get(0) to get a DOM element. Additional questions:

1. How would I convert a DOM element to a JQuery object?

2. If I assign "this" to a variable, is that new var DOM or JQuery? If it's JQuery, how can I convert this to a DOM element? (Since I can't use get(0))

   var $elemTd = $(this);

3. When I do a assignment like the one above, I have seen some code samples not include the $ sign for the variable name. Why?

4. And as for my original question, can I combine the DOM properties and JQuery functions at the same time on a JQuery object?

   $elemSel.children('td').nodeName

Answer 1

You'll need to .get(0) the result to get the DOM-ready object.

var myBox = $("div#myBox");
alert(myBox.get(0).id); // "myBox"

Read " Peeling Away the jQuery Wrapper and Finding an Array " by Cody Lindley

---

Re: Edit: .is() is not a native javascript method. When you run .get(0) , you are no longer working off of the jQuery object, therefore you cannot expect to run jQuery methods from it.

If you want to run .is() on a specific result, use the :eq(index) selector , or the .eq(index) method :

$("div:eq(1)").is(":checked"); // gets second div
$("div").eq(1).is(":checked"); // gets second div

---

Re: Edit # 2

Bob, you really should create new questions, rather than asking more and more here.

Converting a dom element to jquery object is done by passing it in a selector:

var myBox = document.createElement("div");
var myBoxJQ = $(myBox);

Assinging This to a variable. Depends on when you do it. If by "this" you're referring to a jQuery object, then this will be a jQuery object. You can convert it by following this with .get(0) .

When this is referring to a jQuery object, you don't need to wrap it in the $(). This is redundant.

And lastly, $elemSel.children('td').nodeName can be done like this: $elemSel.children('td')[0].nodeName or $elemSel.children('td').get(0).nodeName , where the 0 is the index of which item to access.

Answer 2

There is also a shortcut for get(index) function:

$(selector)[0].nodeName

Soruce: http://docs.jquery.com/Core/get#index

Answer 3

Because there can be more than one match in jQuery selectors you need to get the elements out of the "array".

You can use the get method to return a single DOM element or an array or DOM elements.

eg:

var elims = $("div").get();
for(var i in elims)
    alert(elims[i].nodeName);

Edit:

$elemSel.get(0).is(':checked') will not work because you are getting the Dom object and then trying to use jQuery functions on it. If you want to get a single jQuery element use eq .

$elemSel.eq(0).is(':checked');

Answer 4

In order to call native DOM method you can use get(index). Or if you want to use jQuery Object method, you should wrap a native DOM element with jQuery, which will convert the DOM element into a jQuery Object, so all the methods will be available. http://www.linxinshan.com/?p=339