Core jQuery |

by imparator

HTML

<html>
<head>
    <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
</head>
<body>
    <span></span>      
    <div>this is a div</div>
    <span></span>   
    <ul>
        <li>dog</li>
        <li>cat</li>
    </ul>
    
    <a id="link1">jQuery.com</a>
<a id="link2">jQuery.com</a>
<a id="link3">jQuery.com</a>
    
</body>
</html>

CSS

body {
    padding: 10px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 13px;
}

JavaScript

// always include all css codes before any jquery code
$(document).ready(function() {
    // create something, find it, do something, find all spans, set the text
    $('span').html('<b>all spans will have the same texts</b>');
    $('<a id="programmatic-a">href</a>').attr('href', 'http://www.google.com').appendTo($('div'));
    $('<div id="nav">id nav</div>').appendTo('span:first');

    // find out the current jquery version 
    //alert(jQuery().jquery);
    // text returns a string instead of the wrapper set
    var liElements = jQuery('ul li').get();
    console.log($(liElements).eq(0).text());
    $('a').each(function() { // Loop that alerts the id value for every <a> 
        console.log($(this).attr('id')); // "this" refers to the current element     
    });

    // comments
    //By simply calling the get() method without passing it an index parameter the     method
    //will return all of the DOM elements in the wrapper set in a native JavaScript array.
    if (jQuery('a').get(0)) { // Is there an element in the set?
        jQuery('a').attr('href', 'http://www.jquery.com');
    }
    if (jQuery('a').length) { // Check the length of the set. Can also use .size()
        jQuery('a').attr('title', 'jQuery');


    }

    var temple = jQuery.noConflict();
    // Do something with jQuery methods
    //alert(temple("div").text());
});