jQuery: DOM Elements: Attributes: query & create - javascript

I have a few questions about jQuery, relating to attributes:
Is there a jQuery or DOM API call that I could use to list or clone all of the attributes of a DOM element. The jQuery.attr() API call lets you do it if you know the name of the attribute, but if you don't, is there a way?
Is there a jQuery or DOM API call that I could use to create a new CSS rule, besides the obvious one of dynamically loading a new script?
It seems possible because when I open up the JS debugger in Google Chrome using CTRL-Shift-J, and click on a DOM element in the elements pane, I can see all of the attributes of the element without having to ask for them by name.

Clone the whole object, that will replicate all attributes as well, http://api.jquery.com/clone/
Add new style section into the head element using append, http://api.jquery.com/append/

The other guys are right that you should use clone - but if you want to list the attributes, you can do it like so:
for(attr in $('#selector')) {
console.log(attr);
}
I don't think you can create a new css rule, but you can do pretty much the same by attaching css to a selector:
$('#selector').css({
display: 'block'
});

Related

Store "templates" of children

I am new to JavaScript so forgive me if the question comes around as dumb.
I know that appendChild() allows me to add a child element to an existing element. However, the problem is that I want to add an element which has an image on the left and a series of text boxes on the right and I need to add it over and over again on button click.
Adding simple elements like p, a , etc can be done by a single call to appendChild(), however for the above scenario, it will be a little messy.
Is there some way that I can define the custom element that I want to append and then just add it with a single call to appendChild()
Are you using jQuery? If it is a really complicated template, you could use .load() to ajax in an template and populate it with whatever you have to. You wouldn't need to dynamically create all of the elements using javascript, only populate it. This would would also allow you to change your template if need be very easily.
It seems you need cloneNode:
target.appendChild(template.cloneNode(true)); // If you want to clone template
// with all its descendants
target.appendChild(template.cloneNode(false)); // If you want to clone template
// without its descendants
I do this quite a bit. My code generally looks like this:
<div class="template" style="display: none;">stuff</div>
then:
$('.template').clone(true).removeClass('template').show().appendTo(someElement);
Since you're not using jQuery, have a look at the clone function here:
http://code.jquery.com/jquery-1.11.0.js
(search for "clone: function" to find it)
You can steal the relevant bits if you can't actually use jQuery itself.

How to detect all events added on a div

I am new to jQuery and such kind of js frameworks. Till now I used to do like this
<div onclick="function()"></div>
But in jQuery we get the element and add the event there. How can I detect all events added on a div?
I have a div whose height is set to the remaining height. Then I cant find appropriate css for that. I strongly believe that it has been done from javascript. I cant find relavant code any where. I dont know how to debug this.
Any help is highly appreciated.
To answer your question you can use:
jQuery._data( elem, "events" );
This will become an object of all events attached to the selected element.
This will return undefined when no event is attached to the element.
Note that this should be a single element, so for a class you should use:
$._data($('.class')[0], "events")
Which only select the first element with that class, instead of all the elements with that class.
jsFiddle
Source: jQuery find events handlers registered with an object

How do I use jQuery on an HTML document instead of the DOM?

I'm trying to modify an HTML document, but its not the same as the DOM. However, I found that the syntax that I used with the DOM itself doesn't work with the other document. For example, I could find the title using $("title") with the DOM. However, with the document I have to use doc.find("title"). There are other, more involved changes and I'm stuck on how to proceed with this. Is there a reference I can look at? I know about the jQuery documentation, but that assumes that you're manipulating the DOM itself.
From what I've gathered the $ function assumes it's default scope for selectors is the active document. if you create jQuery objects that are not in the body of the document, the $(object).find(selector) is your best way to select within that object. The rest of the functions should work fine, at least the ones dealing with selecting, transversing and manipulation.
I should add that if the object is a jQuery object, there is no need to use the $. All the jQuery functions will be available to that object. So if you create:
var obj = $('<div>some text</div>');
you can use obj.addClass('cool) to get a jQuery object containing
<div class="cool">some text</div>
You can use jQuery on your doc by using the following
$("title", doc)
You pass the string "doc" to jQuery and it will use that instead of the DOM

JQuery - Unfamiliar notation

I am modifying a javascript file in which they have used the following code. Does anyone know what this does / where it is documented / etc. It appears it is creating an anchor node and giving it the inner html of "Back", but I'm not sure how it works or what it's capabilities are, as I need to add various attributes to the link:
$("<a id=>").html("Back");
Thanks!
jQuery is just being forgiving. Normally, the code would look like this, instead:
$('<a/>').html("Back");
Which means, create an a element and set its inner HTML to "Back". You can chain some attribute assignments directly after:
$('<a/>')
.html('Back');
.attr('id', 'your-id');
This code is indeed creating an anchor element:
<a id="">Back</a>
You can add attributes using the "attr" function, like so:
$("<a id=>").html("Back").attr('href', myUrl);
Alternatively, you can add the attributes directly in the markup:
$("<a id='myId' href='url'>").html("Back");
It is creating an anchor element, but it hasn't appended it to anything, what you would normally do, is either:
$("body").append($("<a>").html("Back").attr("target", "_blank"));
(as an example), or even:
$("<a>").html("Back").attr("target", "_blank").appendTo($("body"));
Because it is a jQuery object, you can continue chaining methods on it to build it up how you want to.
I think it's just some bothched HTML being passed to the factory. Should result in a jQuery collection holding one anchor element which is not yet in the DOM and which has an empty id attr and contains the text "Back":
<a id="">Back</a>

In Greasemonkey/javascript, how can I handle new elements added to page?

I have written a Greasemonkey script which manipulates the contents of certain elements with the following selector:
$("span.relativetime").each(function() { $(this).html("TEST"); });
However, sometimes matching elements are added to the page through AJAX, and I don't know how to handle those new elements. I have tried this, but it doesn't work:
$("span.relativetime").live(function() { $(this).html("TEST"); });
The documentation for jQuery live() says that it wants an event (like "click"). But I don't have any event, I just want to know when something matching my selector has been created, and then I want to modify it.
Background: I am encountering this problem with a Greasemonkey script to display StackOverflow's relative timestamps as absolute local timestamps, which you can find on meta-SO. The problem is when you click "show all comments", the new comments are added by AJAX, and I don't know how to find and replace the timestamps in those scripts.
With StackOverflow's setup I find it annoying to handle stuff after the comments. What I've done is put a bind on the Add/Remove comments button that uses setTimeout to wait for the elements to be created, and then modify them.
One thing you could try (although I'm not sure if it would work) is to cache your selection in some global variable like so:
var $relativetime = $("span.relativetime");
Then you would have your .each function:
$relativetime.each(function() { $(this).html("TEST"); });
After your new elements were added to the DOM, you could reselect append to your cached object:
$relativetime.append("<my html>"); //or
$("<my html>").appendto($relativetime);
(P.s. .html() is for setting html. To set text, use .text()

Categories