jQuery Attribute Wildcard Selectors

You most likely already know it but I thought I'd highlight some common wildcard selector patters that can be used in jQuery .. I've added a jsFiddle here (http://jsfiddle.net/roeburg/mkTvx/) ..

Attribute Contains Prefix Selector [name|="value"]

Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-). (jQuery Api Link :  http://api.jquery.com/attribute-contains-prefix-selector/)

Attribute Contains Selector [name*="value"]

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~="word"]), which is more appropriate in many cases. (Jquery Api Link: http://api.jquery.com/attribute-contains-selector/)

Attribute Ends With Selector [name$="value"]

Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. (jQuery Api Link: http://api.jquery.com/attribute-ends-with-selector/)

Attribute Contains Word Selector [name~="value"]

Selects elements that have the specified attribute with a value containing a given word, delimited by spaces. This selector matches the test string against each word in the attribute value, where a "word" is defined as a string delimited by whitespace. The selector matches if the test string is exactly equal to any of the words. (jQuery Api Link: http://api.jquery.com/attribute-contains-word-selector/)

There are of course others ..

Attribute Equals Selector [name="value"]

Selects elements that have the specified attribute with a value exactly equal to a certain value.

Selectors > Attribute | Selectors > jQuery Extensions

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.

Selectors > Attribute

Attribute Starts With Selector [name^="value"]

Selects elements that have the specified attribute with a value beginning exactly with a given string.

Selectors > Attribute

Has Attribute Selector [name]

Selects elements that have the specified attribute, with any value.

Selectors > Attribute

Multiple Attribute Selector [name="value"][name2="value2"]

Matches elements that match all of the specified attribute filters.

JavaScript Did You Know? #Ramblings

I've been told on more than one occasion that I tend to ramble. But then again who doesn't from time to time ey? What I meant to ramble on about were some interesting JavaScript constructs, patterns, code .. etc

Self Executing Anonymous Functions and Document.Ready

While they can be really helpful, its always important to understand how and when they get executed. In case you'd like to know more about Self Executing Anonymous functions, here's a post by Mark Dalgleish  http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

<div class="before">
    Before Div. This content will change!
</div>
<script>
    (function () {
        $(".before").html("Since the div is declared before the script block, its loaded and we're able to manipulate it.");
        $(".after").html("The div declared after the script block is not yet loaded, we're not able to do anything!");
    })()
</script>
<div class="after">
    After Div. This content will not change.
</div>

As you may expect, the HTML elements declared before the script block will be loaded. The elements declared after the script block would not have been loaded and hence unavailable for any manipulation. (JsFiddle Link: http://jsfiddle.net/roeburg/j2r4U/ ). This behaviour is quite different from document.ready where the code is executed only when all the dom elements have been loaded! (Jsfiddle Link: http://jsfiddle.net/roeburg/Cy62T/2/)

Comparison Operators == and === 

JavaScript has both strict and Type–converting (abstract) comparisons.A strict comparison (e.g., ===) is only true if the operands are the same Type. The more commonly used abstract comparison (e.g., ==) converts the operands to the same Type before making the comparison. For relational abstract comparisons (e.g., <=), the operands are first converted to primitives, then the same Type, before comparison. (More Examples: http://goo.gl/vqJ8ek)

Arithmetic Operations on Strings V/s Numbers

<div>"1" + 2 + 3 = <span class="answer1"></span></div>

<div>1 + "2" + 3 = <span class="answer2"></span></div>

<div>1 + 2 + "3" = <span class="answer3"></span></div>

<div>1 + 2 + 3 = <span class="answer4"></span> </div>

<script>
$(function () {
    var ans1 = "1" + 2 + 3;
    $(".answer1").html(ans1);
    
    var ans2 = 1 + "2" + 3;
    $(".answer2").html(ans2);
    
    var ans3 = 1 + 2 + "3";
    $(".answer3").html(ans3);
    
    var ans4 = 1 + 2 + 3;
    $(".answer4").html(ans4);
})
</script>

(JsFiddle Link: http://jsfiddle.net/roeburg/N5RhP/1/)

JavaScript Scoping and Hoisting

JavaScript has two scopes: global and local. A variable that is declared outside a function definition is a global variable, and its value is accessible and modifiable throughout your program. A variable that is declared inside a function definition is local. It is created and destroyed every time the function is executed, and it cannot be accessed by any code outside the function. JavaScript does not support block scope (in which a set of braces {. . .} defines a new scope), except in the special case of block-scoped variables. (JsFiddle Link: http://jsfiddle.net/roeburg/pp9Pv/)

$(function () {
    // Global definition of aCentaur.
    var aCentaur = "a horse with rider,";

    // A local aCentaur variable is declared in this function.
    function antiquities() {

        var aCentaur = "A centaur is probably a mounted Scythian warrior";
    }

    antiquities();
    aCentaur += " as seen from a distance by a naive innocent.";

    $("div").html(aCentaur);

    // Output: "a horse with rider, as seen from a distance by a naive innocent."
})

In JavaScript function declarations and variable declarations are 'hoisted' i.e. are silently moved to the very top of the scope.

(JsFiddle Link: http://jsfiddle.net/roeburg/vNhLp/)