将jQuery选择器与Javascript函数一起使用会引发错误

Question

Trying to change from using jQuery for everything and playing around with more native javascript. However, I keep getting problems when trying to use jQuery functions with native selectors and javascript functions with jQuery selectors.

Below is a simple example about my problem (all were run separately):

var text = document.getElementById("text");
var text2 = $("#text");

text.style.color = "blue"; //this works    
text.css("color", "blue"); //throws text.css is not a function error

text2.css("color", "blue"); //this works
text2.style.color = "blue"; //throws Cannot set property 'color' of undefined error

I thought that jQuery was just javascript and that you could use native functions and methods with jQuery selectors and vice versa. What am I missing?

Answer 1

In your code text does not jQuery object. And it does not have css function. Use JavaScripts methods in this case.

Non-jQuery objects has native functions only.

UPD: also jQuery object does not have style property. So you call style.color and it equal to try to get color of undefined.

Answer 2

There is no any .css() in the javascript; and there is no any .style properties in the Jquery.