Using Prototype and Script.aculo.us, I am trying to make all tags with an ID starting with "idea" Droppable but I can't remember how to get all tags starting with a specific string. Thank you in advance.
The previous answers are correct, use a class name instead.
However if you are forced to use IDs there is a way with a CSS selector, now supported by most JS frameworks:
$$('*[id^=idea]')
Give them a class and do $$('div.idea');
Don't do that. IDs are meant to be used to get a single element.
The proper way to do what you want is giving those elements a common class. Then you can use whatever method prototype has to retrieve all elements with that class name (in jQuery it would be $('.class')). By using classes you allow your JS framework to use highly optimized code to search for matching elements (might even be a native getElementsByClassName method) instead of iterating over basically every single element and doing a substring comparison.
Edit: In prototype you can use $$('.class') to get all matching elements.
Related
I was looking at this question: The preferred way of creating a new element with jQuery
In it, they mention these two methods of using jquery:
Either:
var div = $("<div></div>");
$("#box").append(div);
Or:
$("#box").append("<div></div>");
I'm looking at this, and noticing that if you put actual HTML in the $ function, it acts like you are creating elements in memory. But if you use an HTML selector, it's referring to elements on the document? At least that's my interpretation. I'd like to find all the ways i can use the $ function, but when I search the site, I don't know how to find it.
Can someone list all the ways I can use $, and if possible, links to the official documentation?
$() is a shortcut for the jQuery() function, and you can find the documentation for it here: https://api.jquery.com/jQuery/
Multiple argument types are accepted, including selector, element, elementArray, object, and callback types. From the docs:
Whats a good way to select elements by their name using wildcards?
The website has element names in the form of <a_1786439></a_1786439> which are likely auto-generated. This is doable by xpath, but is it doable using css selectors or jquery selectors which are faster?
This is clearly terrible-coding, but the website is not mine, and I'm writing a userscript for it.
This doesn't exist in CSS3, as the spec's section on type selectors only includes names and wildcards, but no combinations of them.
It's possible to create custom elements using the HTML DOM createElement method like this:
document.createElement('Funny_Element');
In the website code you are dealing with, they have created a custom element, or maybe extend the a element, but they didn't choose a significant name! a_1786439??? which is, I think, really bad.
Using CSS selectors or jQuery selectors depends essentially on what you want to do. Suppose you have to access children elements of a specific node, then jquery selectors would be more appropriate.
Hope it's useful!
I wonder what's the equivalent to this jQuery selector: $(".className tagName") in javascript?
Anyone can help me?
Thnaks in adcance.
In modern browsers you can use document.querySelectorAll with exactly same string selector. This function returns collection (to be precise, NodeList collection) which you should not confuse with jquery collection though.
In any case, if, for some reason, you don't want to use jquery but want to use selectors intensively, the better solution will be to use some selector library like Sizzle.
May be the traditional way but you could use document.getElementByTagName in javascript and then iterate through to get the exact element with matching class name.
Please the entire logic in one function and re-use this to get quick result without using jQuery. persisting the results of document.getElementByTagName() in global variable will give you a performance plus.
Cheers
I don't know what it's called, but I know that there's a way to get elements based on their tags without getElementsByTagName. It returns the same thing, but it's shorter and I'm using tags a lot in my project. What I'm talking about is document.frames[x] and document.images[x], but with other elements, like document.b[x] or document.a[x]. Seeing as document.images isn't the same as the <img> tag, it seems like if there are more they'd be named differently as well. Would anyone happen to know what it's called when using this method and/or have a list of accepted tags? Thanks.
P.S. Please do not suggest using a library such as jQuery. This project is meant to be a learning experience, so I want to use regular JavaScript.
As mentioned elsewhere in the answers, this doesn't have anything to do with JavaScript really, these are DOM properties and methods accessible via the JavaScript language binding for the DOM.
With reference to addressing elements such as document.frames[x] (note that this is incorrect, it should be window.frames[x]) and document.images[x] - these are Document Object/HTML Collections and the W3C standard includes only images, applets, links, forms and anchors.
So unless I'm looking in completely the wrong place, from what I can tell from the DOM-1 and DOM-2 specs, there doesn't seem to any way of arbitrarily addressing elements by tag name the way that you remember doing.
Update
The MDC entry on HTMLCollection is more understandable; it reads
The following lists each item (and its specific properties) which return an HTMLCollection: Document (images, applets, links, forms, anchors); form (elements); map (areas); table (rows, tBodies); tableSection (rows); row (cells)
Other than other JavaScript libraries creating these shorthands, I am not aware of any that are built into the language. It would be trivial to map this to your own shorthand:
var $ = document.getElementsByTagName;
// you can then use it like so:
$('SPAN').// and so on
Other than this, there is no built-in array-like access to all of the tags in the document:
http://www.javascriptkit.com/jsref/document.shtml
Create your own reference,
document.tag = document.getElementsByTagName;
or a wrapper,
function tag(name) {
return document.getElementsByTagName(name);
}
The only APIs I know of that support querying by element name are,
DOM
getElementsByTagName
CSS Selectors
querySelectorAll
XPath
evaluate
E4X
(mozilla only, and doesn't work with the DOM yet)
Following up on my question about jQuery.get() I was wondering if there is a list of DOM properties and methods that aren't available in jQuery that can only be accessible if you were working with the raw DOM object (i.e. $("#someID").get().scrollHeight; )
I haven't encountered a list but if one existed it would probably be quite lengthy. In addition to browser-specific (proprietary) properties there's a bunch of other less useful properties and methods not currently abstracted by jQuery. But then, I don't really see this as a problem, or even a valid point of discussion because jQuery IS JavaScript; if you need access to something beyond what jQuery provides then you can use get() or access a specified element within one of your "jQuery collections" like an array:
jQuery(elem)[0].someDOMProperty;
Plus jQuery provides absolutely no support for non-element nodes within the DOM. If, for whatever reason, you need direct access to comment nodes, text nodes etc. then you'll need to use the "raw" DOM.
I don't know of a compiled list of DOM operations/properties that are NOT available in jQuery (and a quick google search didn't turn anything up), but if you go to http://api.jquery.com/ you can see the entire API, and even download it as an Adobe AIR app in case you don't have internet when you need it.
No. JQuery is just JavaScript. If you can do it in JavaScript, you can do it in jQuery. Some properties and methods are overwritten in the context of a jQuery object and that's where you would want to us the get() method--to 'get' (i.e. access) the standard property/method.
That's really as complicated as it is.
Every attribute of every element is accessible through the attr() function. If you could do a document.getElementById() on that element and then access a property, you can also do it using the attr() function. However, some properties are accessed more easily in other ways when using jquery. For example, to see if an element is hidden or visible, you could do:
var isVisible=$("#el").is(":visible");
instead of using the attr() method. Similarly, you can find the selectedIndex of dropdowns and the text of the selected option, in easier ways than using the attr() method. This pdf outlines some of these easier approaches.
To access a css property, you are better off doing:
var fontWeight=$("#el").css("fontWeight");
rather than using get() or attr(). You can also set the css properties in this way, e.g:
$("#el").css("fontWeight","bold");
I could be wrong, but I think you can access any properties via the attr method.