Develop Reference

jQuery span class selector

I have a span with a text inside it like :
<span class="characters-count">(160 Characters Left)</span>
given the span a class in this case .characters-count , when i tried class selector using jQuery to get the text inside span :
$(".characters-count")[0].text();
it returns undefined !
However this selector works well :
$("span.characters-count").text();
anyone can explain what is happening ?

$("span.characters-count").text();
In our case you work with jQuery Object that has text method
$(".characters-count")[0].text();
In this case you work with actual DOM element (like document.getElementByClassName('characters-count')[0]) that does not have text method

Use
$(".characters-count").text();
Demo

console.log($(".characters-count:first").text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="characters-count">(160 Characters Left)</span>
try something like this:
$(".characters-count:first").text()
Check here, why it was not working for you.
//This will return dom element, so it doesn't have `text()` method, that's why it was throwing error for you.
console.log($(".characters-count:first")[0]);
// This will return object of an element, you can use jQuery selectors to get first element from collection and set text to it
console.log($("span.characters-count"));
console.log($("span.characters-count:first").text
);

you need to use innerText instead of text() when you use $(".characters-count")[0] check DEMO
$(".characters-count")[0].innerText

What is the difference between the selectors #id and [id$='id']?

What is the difference between two statements:
$("span[id$='id']").text(var);
// And
$("#id").text(var);
HTML code is : <span class="normal11" id="id"></span>

The first one is using ends with selector while the second one is using just normal id selector.
Attribute Ends With Selector [name$="value"]
ID Selector ("#id")

By the documentation on JQuery:
$("#id") uses the JavaScript function document.getElementById(), which is extremely efficient. Link.
So, the second way should be faster and should be used.

Some different between id selector and attribute selector is
Since id selector called document.getElementById(),
it only return the first element that have a id equal to that.
However, if you use attribute selector, it will return all elements that have the id attribute that equals to that.
But duplicated id is actually invalid in HTML, and should never used.
if you really want to do that, use class instead.
example
$("#id-selector").click(function(){
$("#test").css("color", "red");
});
$("#attr-selector").click(function(){
$("*[id=test]").css("color", "blue");
});
http://jsfiddle.net/toucyqas/1/

jQuery opposite of "starts with" selector: [^=]

I have some div tag below:
<div class="magazine"></div>
<div class="newsletter"></div> // I need to take this div
<div class="may-moon"></div>
If I needed div with class start with "ma", I would use $('div[class^="ma"]'), but what is opposite? thanks.

The opposite would be to use jQuery :not():
$('div:not([class^="ma"])')

You can use the negative filtering function "not" like this: $('div').not('[class^="ma"]'), or the negative selector ":not" like this: $('div:not([class^="ma"])') (as pointed by Karl-André Gagnon)

You need to use :not() Selector for this. because there is no exact opposite selector exist of [^=] and * in jquery.
:not() Selector - Selects all elements that do not match the given selector.
See more about Jquery selectors
There a opposite selector exist ! -
Attribute Not Equal Selector [name!="value"] - Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.
but use of this ! selector, you need to provide full-name of class.
$('div[class!="magazine"][class!="may-moon"]')
Try This

JQuery Search for part of span class name

If I have a span class called "peanutty", and "peanuts", can I do a search for "peanut*"?

You can try:
$('span[class^="peanut"]')
jsFiddle example
See jQuery's attribute starts with selector.

You should take a look at this http://www.w3schools.com/jquery/jquery_ref_selectors.asp but what you are asking for is something like this $("[class~='hello']") which would be a contains selector meaning it would select any class containing the word "hello", while $("[class^='hello']") would select any class beginning with the word "hello".

jquery select element by name attribute

I have an input with the name attribute:
<input type="text" name="data[foo][bar]" />
how can I select this element?
I tried $("input[name=data[foo][bar]]") but in vein.

Add quotes to the attribute value, otherwise you get conflicting square brackets and a parse error:
$("input[name='data[foo][bar]']")

$("input[name='data[foo][bar]']")

$('input[name="data[foo][bar]"]')
http://api.jquery.com/attribute-equals-selector/ for more info

Use
$("input[name=data\\[foo\\]\\[bar\\]]")
The documentation says:
If you wish to use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?#[]^`{|}~ ) as a literal part of a name, you must escape the character with two backslashes: \. For example, if you have an element with id="foo.bar", you can use the selector $("#foo\.bar").
http://api.jquery.com/category/selectors/