Introduction to jQuery_1

Module 1.

Before Start

The following contents are the notes I took when learning jQuery on Edx.

Mainly for front-End Web developers, check here to get more details.

BTW, This class is supported by Microsoft. If you are a Linux fan, hope it would not make you uncomfortable( cause I am a little uncomfortable about it at first.) : D

Three parts:

DOM: Document Object Model.

jQuery : the most popular javaScript library. designed to bring additional power to JS.

Let’s start!

Module1 : Adding jQuery to web pages

Getting started with jQuery
- use Visual Studio
- getting started with Visual Studio Code

Adding jQuery to a page

a simple example to start:

// you can use either of them:

$(document).ready(function() {
    // code here
});

$(function() {
    // code here
});

Using CSS selectors with jQuery

Common CSS selectors

$('h1') // selects all h1 elements
$('.class-name') // selects all elements with a class of class-name
$('#demo') // selects all elements with an id of demo

Attribute based selectors

// selects all elements with an attribute matching the specified value
$('[demo-attribute="demo-value"]')

// selects all h1 elements with an attribute matching the specified value
$('h1[demo-attribute="demo-value"]')

// If you wish to find all elements where the value **starts** with a string, use the ^= operator.
$('[class^="col"]')

// If you wish to find all elements where the value **contains** a string, use the *= operator.
$('[class*="md"]')

Positional selectors

Parent/child relationships

Consider the following script:

// Selects all a elements that are direct descendants nav element
$('nav > a')

In the following HTML, the first link would be selected, but not the second. This is because the first link is a direct child, but the second is inside of a divelement.

<nav>
    <a href="#">(First) This will be selected</a>
    <div>
        <a href="#">(Second) This will not be selected</a>
    </div>
</nav>

Descendants

Examples:

// Selects all a elements that are descendants nav element
// The elements can appear anywhere inside of the element listed first
$('nav a')

//this is an example to show the difference,if you use $('nav a'), the first and the second will be selected both, if you use $('nav > a'), only the first one will be selected.
<nav>
    <a href="#">(First) This will be selected</a>
    <div>
        <a href="#">(Second) This will be selected</a>
    </div>
</nav>

Navigating the DOM with jQuery
- Parent /child relationships
  
  Four methods: children ,find, parent, parents
  - with children, it’s gonna be just the direct children.
  - find will walk the entire hierarchy down, but it needs a selector.
  - parent will be the immediate parent.
  - And parents, plural, will walk up the entire chain.
- Siblings
  - prev and next
    
    prev(): To move to the prior element
    
    next(): To move to the next element
  - prevAll and nextAll
    
    prevAll and nextAll will select all siblings prior or after the element. Both methods also accept a CSS selector to limit the items.
  - prevUntil and nextUntil
    
    prevUntil and nextUntil select all prior or following elements up to, but not including the element that matches the selector.
- Selecting items by position
  - Finding the index of an item
```
//index method will return the zero based (ordinal) location of the item, or -1 if the item isn't found.

var currentElement = $('some selector');
var parent = $('some selector');
var index = parent.children().index(currentElement);
```
  - Finding an item by its position
```
//using the get method
var parent = $('some selector');
var element = parent.children().get(index);
```
    One important note about get is it returns a JavaScript DOM object, not a jQuery object.
    
    In order to call jQuery methods on the object, you must convert it to a jQuery object.
    
    Examples below:
```
var parent = $('some selector');
var domobject = parent.children().get(index); // DOM object
var jQueryObject = $(parent.children().get(index)); // jQuery object
```
Getting started with DOM manipulation
- Adding and removing classes
  - Adding a class to an element is just as easy as calling addClass
```
currentElement.addClass('class-name');
```
  - Removing a class from an element is just as easy as calling removeClass. If the element in question was not already decorated with the class you’re trying to remove, the method will simply return.
```
currentElement.removeClass('class-name');
```
- Working with attributes
  - reading an attribute value
```
alert($('selector').attr('attribute-name'));
```
  - modifying an attribute value
```
$('selector').attr('attribute-name', 'new value');
```
  - removing an attribute value
```
$('selector').removeAttr('attribute-name');
```
- Modifying content
  - text(): get to replace the existing text in an element
  - html(): get to replace the existing HTML in an element
  - the different between text() and html() is whether or not it’s gonna allow for HTML.
    
    Examples:
```
// update the text
$(item).text('<h1>Hello, world!!</h1>'); //output: <h1>Hello, world!!</h1>

// update the html
$(item).text('<h1>Hello, world!!</h1>');//output: Hello, world!!
```
    you can say that HTML will allow you to modify HTML, Text is going to be for text only.
- Basic event handlers
  
  like click event, more details in Module 2
  
  Inside of the event handler code, you can access the object that raised the event by using this.
```
//examples
//click event
//raised when the item is clicked
$(item).click(function() {
    alert('clicked!!');
});

// hover event
// raised when the user moves their mouse over the item
$(item).hover(function() {
    alert('hover!!');
});

// mouseout
// raised when the user moves their mouse away from an item
$(item).mouseout(function() {
    alert('mouse out');
});
```

This is Module1 all about. More details.

Before Start

CONTENTS

Module1 : Adding jQuery to web pages