html_jquery

Posted on Edited on In ,

JQuery

jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

jQuery greatly simplifies JavaScript programming but run it make sure

  • load your script after jquery
  • runs it when document is ready

The jQuery library contains the following features:

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

use it on your website
Include jQuery from a CDN, like Google

1
2
3
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
    //$("p") select all <p> elements
    //set its click callback!

    /* if you use raw method, you need to
     * get all elements by document.getElementByTagName("p")
     * then iterate each element and set it e.click=
     * jquery method can add event for one or an array based on selector
     */
    $("p").click(function(){
        // this set display: none
        $(this).hide();
    })
})

syntax

The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

Basic syntax is: $(selector).action()

  • $ sign to define/access jQuery
  • (selector) to “query (or find)” HTML elements
  • jQuery action() to be performed on the element(s)

Examples:

1
2
3
4
5
//The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds
$(this).hide(1000)  //hides the current element.
$("p").hide("slow") //hides all <p> elements slowly
$(".test").hide()   //hides all elements with class="test".
$("#test").hide()   //hides the element with id="test".

selector

It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors css selector

change effects

hide/show vs fadeIn/fadeOut slideDown/slideUp are used to display or hide element with different effects.

  • Fadeout is a function that will change the opacity of an element to 0, time can be a parameter of the function (but also has a default value if unspecified), opposite of fadeIn() that will change opacity to 1.
    • with fdeOut() you see the element from clear to unclear slowly, at last not see it(opacity changes)
  • Hide function will just set display:none to the element, opposite to show() that will just set display:block.
    • With hide(), you see the element from clear to disappear.
1
2
3
4
$("button").click(function(){
  $("p").toggle();
  //$("p").toggle(1000); speed
});

With jQuery you can fade an element in and out of visibility.
jQuery has the following fade methods:

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

The jQuery fadeTo() method allows fading to a given opacity (value between 0 and 1)

1
2
3
4
5
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

With jQuery you can create a sliding effect on elements.
jQuery has the following slide methods:

  • slideDown()
  • slideUp()
  • slideToggle(
1
2
3
$("#flip").click(function(){
  $("#panel").slideToggle();
});

The jQuery animate() method is used to create custom animations
Only properties containing numeric values!
Syntax:

1
$(selector).animate({params},speed,callback);

The required params parameter defines the CSS properties to be animated

1
2
3
4
5
//The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it has reached a left property of 250px:
$("button").click(function(){
  $("div").animate({left: '250px'});
});
//param defined the result should be from the orginal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

$("button").click(function(){
  $("div").animate({
    left: '250px',
    height: '+=150px',
    width: '+=150px'
  });
});

$("button").click(function(){
  var div = $("div");
  div.animate({left: '100px'}, "slow");
  div.animate({fontSize: '3em'}, "slow");
});

The jQuery stop() method is used to stop an animation or effect(slide) before it is finished.

with all above
JavaScript statements are executed line by line. However, with effects, the next line of code can be run even though the effect is not finished. This can create errors.

To prevent this, you can create a callback function.

A callback function is executed after the current effect is finished.

Typical syntax: $(selector).hide(speed,callback);

1
2
3
4
5
$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });
});

action Chain

There is a technique called chaining, that allows us to run multiple jQuery commands, one after the other, on the same element(s).

Tip: This way, browsers do not have to find the same element(s) more than once.

1
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

element

Three simple, but useful, jQuery methods for DOM manipulation are:

  • text() - Sets or returns the text content of selected elements
  • html() - Sets or returns the content of selected elements (including HTML markup)
  • val() - Sets or returns the value of form fields

change attribute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//GET
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

//SET
$("button").click(function(){
  $("#w3s").attr("href","image/2.png");
});

//SET multiple attr
$("button").click(function(){
  $("#w3s").attr({
    "href" : "https://www.w3schools.com/jquery/",
    "title" : "W3Schools jQuery Tutorial"
  });
});

change style

Query has several methods for CSS manipulation. We will look at the following methods:

  • addClass() - Adds one or more classes to the selected elements
  • removeClass() - Removes one or more classes from the selected elements
  • toggleClass() - Toggles between adding/removing classes from the selected elements
  • css() - Sets or returns the style attribute
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$("button").click(function(){
  $("#div1").addClass("row");
});

//GET
$("p").css("background-color");

//SET
$("p").css("background-color", "yellow");

$("p").css({"background-color": "yellow", "font-size": "200%"});

//also set do this with css
$("button").click(function(){
  $("#div1").width(500).height(500);
});

add/del/replace element

We will look at four jQuery methods that are used to add new content:

  • append() - Inserts content at the end of the selected elements(as end child)
  • prepend() - Inserts content at the beginning of the selected elements(as first child)
  • after() - Inserts content after the selected elements(as siblings)
  • before() - Inserts content before the selected elements(as siblings)
  • replaceWith() - replace selected element with new one(element)
  • html()- replace children of selected element with new child(element)
  • text()- the content will be seen only as text, text(‘<h1>hello</h1>’), h1 has no meaning!!!

Content here can be text or html element!

1
2
3
4
5
6
7
8
9
$("p").append("Some appended text.");

function appendText() {
  var txt1 = "<p>Text.</p>";               // Create element with HTML
  var txt2 = $("<p></p>").text("Text.");   // Create with jQuery
  var txt3 = document.createElement("p");  // Create with DOM
  txt3.innerHTML = "Text.";
  $("body").append(txt1, txt2, txt3);      // Append the new elements
}

Remove Elements/Content

  • remove() - Removes the selected element (and its child elements)
  • empty() - Removes the child elements from the selected element

Filter the Elements to be Removed

1
$("p").remove(".test, .demo");

parent/child

The parent() method returns the direct parent element of the selected element.
The parents() method returns all ancestor elements of the selected element, all the way up to the document’s root element (<html>).

The children() method returns all direct children of the selected element.

1
2
3
$(document).ready(function(){
  $("div").children();
});

Sibling

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()
1
2
3
4
5
6
7
$(document).ready(function(){
  $("h2").siblings();
});

$(document).ready(function(){
  $("h2").siblings("p");
});

The first(), last(), eq(), filter() and not() Methods

The most basic filtering methods are first(), last() and eq(), which allow you to select a specific element based on its position in a group of elements.

Other filtering methods, like filter() and not() allow you to select elements that match, or do not match, a certain criteria.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
  $("div").first();
});

//The eq() method returns an element with a specific index number of the selected elements.

//The index numbers start at 0, so the first element will have the index number 0 and not 1. The following example selects the second <p> element (index number 1):

$(document).ready(function(){
  $("p").eq(1);
});

//The filter() method lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned.

//The following example returns all <p> elements with class name "intro":

$(document).ready(function(){
  $("p").filter(".intro");
});

events

Jquery provides lots of methods to attach callback for an event like, but all of them are shorthand of $(‘selector’).on() which is low level API. the callback and the default callback runs in this order

    1. jQuery click-handlers
    1. onclick-handlers
    1. native/default behavior (calling the link, writing it to window.location)

but if you call e.preventDefault() in jquery handler, the native/default behavior isn’t performed by the browser

  • $(‘selector’).click()
  • $(‘selector’).hover()
  • $(‘selector’).change()
  • $(‘selector’).focus()
  • $(‘selector’).keyup() etc
  • $(‘selector’).mousedown() etc
  • $(‘selector’).submit()
1
2
3
4
5
6
7
8
9
//Stupid way!!!
//iterate each html element and add addEventListener
$('button').each(function() {
    //this is html element, not jquery object
    this.addEventListener('click', clickCallback);
})

// always use this way!!!
$('button').click(clickCallback);

The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:

1
2
3
4
5
6
$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});

The blur() method attaches an event handler function to an HTML form field.

The function is executed when the form field loses focus:

1
2
3
$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});

Ajax

jQuery provides several methods for AJAX functionality.

With the jQuery AJAX methods, you can request text, HTML, XML, or JSON from a remote server using both HTTP Get and HTTP Post - And you can load the external data directly into the selected HTML elements of your web page!

load

$(selector).load(URL,data,callback);
The required URL parameter specifies the URL you wish to load.
The optional data parameter specifies a set of query string key/value pairs to send along with the request.
The optional callback parameter is the name of a function to be executed after the load() method is completed

1
2
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
1
2
3
4
5
6
7
8
9
10
11
12
$("#div1").load("demo_test.txt");


$("button").click(function(){
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr){
    if(statusTxt == "success")
      alert("External content loaded successfully!");
    if(statusTxt == "error")
      alert("Error: " + xhr.status + ": " + xhr.statusText);
  });
});

get

$.get(URL,callback)

1
2
3
4
5
$("button").click(function(){
  $.get("demo_test.asp", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

post

$.post(URL,data,callback)
The required URL parameter specifies the URL you wish to request.
The optional data parameter specifies some data to send along with the request.
The optional callback parameter is the name of a function to be executed if the request succeeds.
The following example uses the $.post() method to send some data along with the request:

1
2
3
4
5
6
7
8
9
10
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name: "Donald Duck",
    city: "Duckburg"
  },
  function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

get json

Get Json

1
2
3
4
5
6
7
8
9
$("button").click(function(){
  $.getJSON("demo_ajax_json.js", function(data,result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
    //Json.parse(data); No need this as getJSON
    //already parsed the json!!!
  });
});

plugin

In addition, jQuery has a lot lot plugins, with these plugins you can do!!

  • UI like bootstrap (static) not better than
  • Form validation
  • Animation
  • Special effects

REF