difference between $('<div>') and $('<div/>') [duplicate] - javascript

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
$(‘<element>’) vs $(‘<element />’) in jQuery
I am used to write $('<div>').
But today I saw a presentation about advanced-jquery by john-resig who use the following syntax $('<div/>').
http://loft.bocoup.com/john-resig-advanced-jquery/
To me they seem to produce the same output.
My question is: is there some difference between
$('<div>') and $('<div/>')?

No, jQuery will normalize those statements into the exact same.
In some earlier version of jQuery tho, it happend to be that <div> was actually faster than <div/> for whatever reason. I don't know yet, if that still applies.
http://jsperf.com/jquery-constructor-performance
Seems like this bug/feature is no longer true.

<div>, <div/>, <div></div>, and even <div/></div> (Yes, this one will only create one element) all trigger the singleTag regular rexpression which makes jQuery to call document.createElement("div"). It was never passed to any html parser at all.
Here's the regex that you can play with, if it returns true, it will be document.createElement'd
var rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;

<div> is an opening tag. <div/> is a self-closing tag. In this context, however, there is no difference.

Related

<script> Invalid comment formatting? [duplicate]

This question already has an answer here:
Does HTML comment <!-- act as a single-line comment in JavaScript, and why?
(1 answer)
Closed 7 years ago.
I have taken on a project that someone else has worked on and I am running into a bunch of script blocks formatted like this:
<script>
<!--
$('...').live('change', function() {
if (...) {
$('...').hide();
$('...').show();
} else {
$('...').show();
$('...').hide();
}
});
//-->
</script>
They are not even the correct comment format for JavaScript.
The code still works but should I worry that this might break in the long term if I start adding to it?
Is this just blatantly wrong and should I remove all the invalid comments?
To formalize my comment.
Back in the day not all browsers supported JavaScript. To make the JS disappear it would be wrapped in an HTML comment and the browser would effectively ignore it.
This hasn't been relevant for some time now and it can be safely deleted.
It can also be left in without harm, but ew.
By way of example, this question from 2009 asks the question re: relevancy, not what it actually is.
This also means I'm old :(

Hiding Option tags in IE [duplicate]

This question already has answers here:
style.display='none' doesn't work on option tags in chrome, but it does in firefox
(8 answers)
Closed 8 years ago.
Let me start off saying I hate IE.
I have a bit of code running to hide options in a select tag and then narrow them down and only show the narrowed down options. This works perfectly everywhere, except I.E. and I'm not really sure why.
My code looks something like this...
$("select[name='FormId']").prop("disabled", false);
$(".modalContent select[name='FormId'] option").hide();
var formIds = this.model.collection.models.map(function ( model ) {
return model.attributes.Form.attributes.Id
});
formIds.forEach(function ( formId ) {
$(".modalContent select[name='FormId'] option[value='"+ formId +"']").show();
});
Any help would be much appreciated!
this.model.collection.models is a plain array, so you'd need ES5 for map to work on it. just use this.model.collection.map which will use the safe one from underscore

How to properly call JS from Jquery [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 8 years ago.
<head>
<script src="jquery-latest.js" />
<script>
function makeitnull(){
alert('inside make it null');
//using hex routine 1 -> 3 -> 5 -> 8 -> (11 == a)
document.getElementById("u_0_1").value = "" ;
document.getElementById("u_0_3").value = "" ;
document.getElementById("u_0_5").value = "" ;
document.getElementById("u_0_8").value = "" ;
document.getElementById("u_0_a").value = "" ;
}
</script>
</head>
<body>
<script>
$( document ).ready(function() {
alert('before make it null');
makeitnull();
alert('make it null pahse passed');
$('#u_0_5').click (function(){
$('#js_1').removeClass('hidden_elem');
});
});
</script>
The Problem is that the alert('make it null'); is working but after the function call rest of the code won't work.
I am newbie to the web development on internet i tried to find out my problem but unbale to get the reasonable answer.
As for "after the function call rest of the code won't work" that doesn't really mean anything useful.
That said ... read How to ask a good question if really want help them edit this question to fulfill the requirements in those instructions!
You should know that jQuery is JavaScript. Manipulating the DOM manually while using jQuery demonstrates you don't really understand what jQuery is for.
The title in this attempt at a question makes no logical sense, you can't "call JavaScript" from jQuery for the above reason. That is like asking "How do you do Algebra with Math?"
From the front page of the jQuery home page:
jQuery is a fast, small, and feature-rich JavaScript library. It makes
things like HTML document traversal and manipulation, event handling,
animation, and Ajax much simpler with an easy-to-use API that works
across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people
write JavaScript.
You should not be traversing the DOM manually you should be using jQuery to look up things, that is what it was created for.
At no point should you have to resort to this:
document.getElementById("u_0_1").value = "" ;
this is what jQuery is supposed to be replacing
$("#u_0_1").value = "" ;
this kind of the entire point of JQuery!
You are already looking up other things with the correct syntax.
http://api.jquery.com/id-selector/

Remove the space from a regex match while user types in an input box [duplicate]

This question already has answers here:
Changing input value while still allowing the user to type
(2 answers)
Closed 9 years ago.
If the user types:
my name is jackson5 model number 5g1 |nR%1b and I would 644 like to say 55 hello to all the tags of html in the world.
I'd like to replace the 55 hello with 55hello while they continue to type with no hiccups or interuptions to the input box.
here is my code so far. I have the regex statement in there but not sure how to replace the space between 55 hello so that it becomes 55hello.
<script type="text/javascript">
function isValid(strQuery){
var regStatement =/[0-9]+ hello/;
if (regStatement.test(strQuery.value)) {
strQuery.value = strQuery.value.replace("$2","");
}
}
</script>
<input type="text" id="wtf" name="search_query" onkeyup="isValid(this);" />
try this
function isValid(strQuery){
strQuery.value = strQuery.value.replace(/((\d+)\s+)(?=hello)/,"$2");
}
you don't need to test it first, if the string doesn't match, it won't replace anything.
I don't have enough reputation to post comments, so I will have to resort to an 'answer' -- be careful with this approach. I've tested my solution and also that posted by #leonhart above (his is much better, so I will not bother posting mine). What both have in common is that both cause TWO calls to isValid, in case if your input box has a history of similar inputs, and starts to provide suggestions (didn't occur in Chrome, but did in Firefox). Not sure what's causing it, but, apparently, either the event handler is registered twice, or something along those lines.. good luck figuring that out! Or maybe someone else here can explain the cause... and the workaround =)

... (three dots) in jQuery?

I was looking at the documentation page for jScroll plugin for jQuery (http://demos.flesler.com/jquery/scrollTo) and I noticed this :
$(...).scrollTo( $('ul').get(2).childNodes[20], 800 );
So, what does the three dots in jQuery mean ? I have never seen this selector before
EDIT :
DOM Element
This is from the source HTML. Viewing the source for the following links :
Relative
selectorjQuery
objectDOM
ElementAbsolute
numberAbsolute
all give the same implementation.
EDIT : I didnt look at the attribute clearly, its for the title attribute. I assumed its the href attribute. Feel silly asking this question now :) Thanks for the answers
I am fairly certain that he was using that as an example.
$( ... ) would be akin to $( your-selector-here ).
In other words, I have never seen any implementation of that.
Typically ... is used in various docs to shorten the example, and it means that you put something in place of the dots, or that what you would put there was omitted (to shorten the example)
It's not actually valid JS syntax.
It has no meaning. They meant just write your own selector.
Check out the souce code
$('div.pane').scrollTo( 0 );
They are not syntactically correct. They are just way the author uses to say scroll to some element, the name of which I don't bother to write here so I just write dots. Check the source code of the page if in doubt.
Three dots in javascript is Spread Syntax see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals)

Categories