Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I've been trying to understand how jQuery works. Let's say for instance you would like to do something when an anchor tag is clicked. Take the code below for example:
$('.selector').click
The "$" References jQuery but then how does jQuery know that it is supposed to look for and find ('.selector') in the DOM? Then how does jQuery automatically know to run the following method of "click" on the matched element?
$ is a function. You're passing it the ('.selector') argument. That's how it knows what to fetch.
It then returns a jQuery object populated with the DOM elements that were found. That jQuery object has methods on it.
When you call .click() on the jQuery object, it iterates through the matched DOM elements it's holding, and performs the expected operation.
Here's a very simple example.
var $ = function(selector) {
return new jQuery(selector);
}
function jQuery(selector) {
var elems = document.querySelectorAll(selector);
this.length = [].push.apply(this, elems);
}
jQuery.prototype.click = function() {
for (var i = 0; i < this.length; i++)
console.log("clicking", i, this[i].nodeName);
return this;
}
It basically registers an event handler for that event on the elements that are selected. The event handler is something your browser takes care of, it invokes the handler when it registers a click. JQuery just sets it up in a way that's more user friendly.
Also note click() is different than click(function(){}), the first actually invokes the click as if you just mouse clicked the item, the second is actually an event handler that calls your function when a click is performed.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I have a lot of questions its all on java script (with some jquery)
first im trying to detect the mouse X cordinates when the mousemove on an element :
(function() {
'use strict';
$('.AnyElement').mousemove(function (e) {
console.log(e.pageX)
});
})();
i want to detect the mouse X once i know theres a functions like mouseover etc...
but in general how to make this function run once and stop
Second when someone write :
if (document.body = 1) {
// do anything
}
he is checking if document.body equal to 1
i see a thing in someone else code i dont undertand here it is :
if (document.body) {
// do anything
}
it doesnt matter what the function do , the thing is what he is checking ???
In answer to your first question there are a few ways you could do it, one example would be to register the mousemove event and then remove the event after logging it once.
$('html').mousemove(function(e) {
console.log(e.pageX);
$('html').off('mousemove');
})
Another method could be use the one event listener built into jQuery.
$('html').one('mousemove',function(e) {
console.log(e.pageX);
});
In answer to your second question the first statement is looking for the length of the element, if the element exists it will generally be greater than 0. In the second statement document.body will return a boolean of true or false depending on whether or not the element exists. Again there are a million different ways you can do the same thing in Javascript.
Hope that helps!
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm wondering how can I rewrite this javascript function into jQuery but using if/else statements instead of while:
<textarea style="overflow-y: hidden;" onkeyup="expandtext(this);"></textarea>
function expandtext(textArea){
while (textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) {
textArea.rows--;
}
while (textArea.scrollHeight > textArea.offsetHeight) {
textArea.rows++;
}
textArea.rows++
}
Well, since you appear to want it so badly, here it is
$.fn.expandText = function () {
$.each(this, function (k, textArea) {
while (textArea.rows > 1 && textArea.scrollHeight < textArea.offsetHeight) {
textArea.rows--;
}
while (textArea.scrollHeight > textArea.offsetHeight) {
textArea.rows++;
}
textArea.rows++
});
}
$('textarea').expandText();
FIDDLE
Additionally, I think I understand what you wanted to ask. In order to understand this you need a good understanding of javascript objects and document object model. There are special properties of objects in the DOM which affect how the objects are displayed (this is all done by your browser automatically), rows is one of those properties, and in order for the element on the page to change in height, which is the goal of this function, you need to change the property rows on the specific element. You can't do this with jQuery (or maybe you can, who knows) because it wraps your object in other objects. Even if it is possible, you are going to have to call a function on the wrapper object which is then going to access the DOM object and change it's property, which is what your function does in the first place, so why bother at all.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 7 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I am having a problem trying to change some innerHtml with this piece of code bellow:
var element = document.getElementByClass("productitemcell > a");
element.innerHTML = "Remover";
It is suposed to change the innerHTML from a link that says"Remove" to "Remover" and its not working.
Here's the page of it: http://ooleiro.businesscatalyst.com/OrderRetrievev2.aspx
You have to buy some products to access this shopping cart page.
I think you meant document.getElementsByClassName()
This method will return a HTMLCollection object. You can grab the first element like so:
var elements = document.getElementsByClassName('class');
var firstElement = elements[0];
Reference: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
The method is called getElementsByClassName (plural) and returns a collection of HTML elements. For which one of those do you want to change the HTML? For the first one?
Additionally, you cannot use a CSS selector like that in standard DOM methods
EDIT: Obviously you want to change all occurrences of a elements inside all occurrences of .productitemcell:
var pics = document.getElementsByClassName("productitemcell");
for(i=0; i<pics.length; i++) {
// loop over all elements with that class
var anchors = pics[i].getElementsByTagName("a");
for(j=0; j<anchors.length; j++) {
// loop over all anchor elements within the current class element
anchors[j].innerHTML = 'Remover';
}
}
Had to change the class to
var removerprod = document.getElementsByClassName("remover");
for(i=0; i<removerprod.length; i++) {
// loop over all elements with that class
var anchors = removerprod[i].getElementsByTagName("a");
for(j=0; j<anchors.length; j++) {
// loop over all anchor elements within the current class element
anchors[j].innerHTML = 'Remover';
}
}
so it doesnt change the product name as well. the only problem remaining is that it is retrieving with ajax and everytime it refreshes it changes again to "Remove"Thank's you devnul69, i realy learned a lot today about js.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
The jQuery UI autocomplete plugin uses the catcomplete function. I'm new to the jQuery syntax. How can I to read it?
$("#searchTextBox").catcomplete({
minLength: 1,
source: $("#searchTextBox").data("url"),
open: function () {
$(".ui-autocomplete").css({
left: $(".ui-autocomplete").position().left - 50 + "px",
top: $(".ui-autocomplete").position().top - 12 + "px"
});
},
select: function (event, ui) {
/* Code */
}
});
What is catcomplete?
catcomplete is a property that appears on jQuery objects. It is not part of core jQuery so there is presumably some other script on the page that is adding it.
How does jQuery's autocomplete call it?
I can't find catcomplete mentioned anywhere in the documentation for autocomplete, so it probably doesn't. It just modifies the CSS of elements in the page with class names that suggest they are normally influenced by autocomplete.
What are minLength, source, open and select?
Properties of the object that gets passed as an argument to the catcomplete complete function. You should read the catcomplete documentation to find out what they mean.
Who decided their name?
The author(s) of catcomplete
Which part of the code knows how to use them?
The catcomplete script
Are they a part of standard jQuery?
No.
Is catcomplete a function?
Yes, it has (…) after it to call it and does not (presumably) throw an exception.
What is $("#searchTextBox").Example({})? doing? Am I defining an array and passing it to a function called Example?
No. You are creating an object. An array would be [].
Or am I defining a function called Example which initializes an anonymous Array?
No. That would be:
function Example() {
var foo = [];
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Note: This is a continuation of another question that I decided were two separate issues that need to be solved. I'm also currently not sure of how exactly to phrase this question, so I will try my best and when I get more clarity I will rephrase my question for future reference.
I'm writing two basic jQuery plugins, $.fn.query and $.fn.build, that sort an array, and create html code to insert into a document, respectively. I'm currently testing it with Vimeo video ID's that I will display videos with.
$.fn.build has three parts. First it wraps every array item with individual containers, the builds them into rows (problem area), then lastly it wraps everything in a container. (every part of this is optional).
Specifically the problem comes from this line: $(tmp).add(newRow); although it is valid javascript.
if ( options.splitBy !== undefined && options.wrapRow !== undefined ) {
var tmp = $([]),
newRow = function(i) {
$(build.splice( i, i + options.splitBy )).wrapAll( options.wrapRow ).parent();
};
for (var i = 0, l = build.length, a = options.splitBy; i < l; i += a) {
$(tmp).add(newRow);
}
build = tmp;
console.log(build);
}
See: http://jsbin.com/upatus/2/edit
I am quite sure that you want to use the function, instead of adding the function itself. Also, you will want to use the same tmp object all over the time, instead of wrapping it into a new jQuery instance and not adding to the original one. Try
tmp.add(newRow(i));
BTW: If you want to build an array, you should use
var tmp = [];
and
tmp.push(…);
Now I've looked at the code from the other question. Both answers are correct, and contain some valid points:
splice is an Array function on jQuery's prototype, and returns an array. (You have fiexd this now)
Your query method returns an array, but should return a jQuery instance for chaining
Your build variable was not initialized, but used
You should really choose whether you want to use arrays or jQuery objects internally in your function, and not mix them.
BTW, you should rename your functions to more descriptive names. "build" and "query" are very vague and may collide with other plugins.