1. jQuery Event

1.1 What is an event

1. Page responses to different visitors are called events.

2. Example: Move the mouse over an element, select a radio button, click on an element

1.2 Event Syntax

1. Click Events

2. Double-click Events

 

3. Mouse Entry

 

4. Mouse Leave

 

5. Get Focused

6. Lose focus  

2. jQuery css() method

What is the 2.1 jQuery css() method

The css() method sets or returns one or more style properties of the selected element.

2.2 Returns the css attribute

To return the value of a specified CSS property, use the following syntax:

2.3 Setting css properties

To set the specified CSS properties, use the following syntax:

2.4 Setting multiple css properties

To set multiple CSS properties, use the following syntax:

css({"propertyname":"value","propertyname":"value",...});

3. jQuery css class

3.1 addClass()

Add one or more classes to the selected element

.important { font-weight:bold; font-size:xx-large; } 
.blue { color:blue; }
$("button").click(function(){ 
$("h1,p").addClass("blue");
 	$("div").addClass("important"); 
});

3.2 remove Class()

  Delete one or more classes from the selected element

$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });

3.3 toggleClass()

Toggle Add/Remove Classes on Selected Elements

$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

3.4 eq()

Method returns the element with the specified index number of the selected element, starting with 0, so the index number of the first element is 0 (not 1).

$(selector).eq(index)

3.5 index()

  The index() method returns the index position of the specified element relative to other siblings.

$("li").click(function(){
  alert($(this).index());
});

3.6 not() 

$("input").not(".in1")

4.   jQuery Animation

4.1   jQuery Hidden Display

You can use hide() and show() methods to hide and display HTML elements.

$("#hide").click(function(){ 
$("p").hide(); 
}); 
$("#show").click(function(){ 
$("p").show(); 
});

4.2   jQuery fade in and out

fadeIn() fades in hidden elements.   The fadeOut() method is used to fade out visible elements.

$("button").click(function(){
  $("#div1").fadeIn(); 
$("#div2").fadeIn("slow"); 
$("#div3").fadeOut(3000); 
});

   The fadeToggle() method switches between the fadeIn() and fadeOut() methods.

$("button").click(function(){ ("#div2").fadeToggle("fast");});

   The fadeTo() method allows gradients to be given opacity (values between 0 and 1).

$("button").click(function(){ $("#div1").fadeTo("slow",0.15);});

4.3   jQuery Slide

  The slideDown() method is used to slide elements down.   The slideUp() method is used to slide elements up.

$("#flip").click(function(){ $("#div1").slideDown(); $("#div1").slideUp();});

   The slideToggle() method toggles between the slideDown() and slideUp() methods.

$("#flip").click(function(){ $("#panel").slideToggle(); });

4.4   jQuery Custom Animation

The animate() method is used to create custom animations. The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast" or milliseconds. The optional callback parameter is the name of the function that is executed after the animation is complete.

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

4.5   stop method

The jQuery stop() method is used to stop animations or effects and applies to all jQuery effect functions, including sliding, fading in and out, and custom animations, until they are complete.

$("#stop").click(function(){ $("#panel").stop(); });

4.6   callback

         Execute after the current animation is 100% complete.

$("button").click(function(){ 
$("p").hide("slow",function(){ 
alert("Paragraph is now hidden"); 
}); });

5. jQuery Event Mechanism

5.1 Registration Events

The bind(), on() methods add one or more event handlers to the selected element, as well as functions that run when the event occurs.

$("p").bind("click",function(){
         alert("This paragraph was clicked on.");
}"dbClick",function(){
         alert("This paragraph was double-clicked.");
});

 $("p").on("click",function(){ alert("The paragraph was clicked on."); }); 

5.2 Delegation Event

The delegate() method adds one or more event handlers to the specified element (which is a child of the selected element) and specifies the functions to run when these events occur

$("div").delegate("p","click",function(){
    $("p").css("background-color","pink");
});

5.3 Event object event

Evet objects have the following properties

Type: Event type, such as click.

which: the mouse button or keyboard key that triggers the event.

target: The initial object of the event.

Data: The data passed in to the event object.

pageX: The horizontal coordinate of the mouse position (relative to the top left corner of the page) when the event occurs.

pageY: The vertical coordinate of the mouse position (relative to the top left corner of the page) when the event occurs.

$("button").click(function(event){ 
          console.log(evet);
 	});

5.4 each() method

The each() method specifies the function to run for each matching element.

$("button").click(function(){ 
$("li").each(function(){ 
alert($(this).text()) 
});  
});

6. Setup and capture of jQuery and HTML

A very important part of jQuery is the ability to manipulate DOM.

jQuery provides a series of DOM-related methods that make it easy to access and manipulate elements and attributes.

6.1 html()

html() - Sets or returns the content (including HTML tags) of the selected element.

$("#btn2").click(function(){
 alert("HTML: " + $("#test").html()); 
});
$("#btn2").click(function(){ 
$("#test2").html("<b>Hello world!</b>"); 
});

6.2 text()

text() - Sets or returns the text content of the selected element

$("#btn1").click(function(){ 
alert("Text: " + $("#test").text()); 
});
$("#btn1").click(function(){ 
$("#test1").text("Hello world!"); 
});

6.3 val()

val() - Sets or returns the value of a form field

$("#btn1").click(function(){ 
alert("Value is: " + $("#test").val()); 
});
$("#btn3").click(function(){ 
$("#test3").val("RUNOOB"); 
});

Callback functions for 6.4 text(), html(), and val()

The three jQuery methods above, text(), html(), and val(), also have callback functions. The callback function has two parameters: the subscript of the current element in the list of selected elements and the original (old) value. Then return the string you want to use with the new value of the function.

$("#btn1").click(function(){ 
$("#test1").text(function(i,origText){ 
return "Old Text: " + origText + " new text: Hello world! (index: " + i + ")";
}); 
});

6.5 attr() ,prop()

The attr(), prop() methods are used to get and return attribute values.

$("button").click(function(){ alert($("#runoob").attr("href")); });
$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });

         Attributes with true and false attributes, such as checked, selected, or disabled, use prop(), others use attr();. Attr can return not only the native attributes of an element, but also the custom attributes.

7. jQuery page size operations on HTML

With jQuery, it's easy to handle elements and browser window sizes.

jQuery size:

 

7.1 width() and height() methods

The width() method sets or returns the width of an element (excluding the inner, border, or outer margins).

The height() method sets or returns the height of an element (excluding the inner, border, or outer margins).

$("button").click(function(){
"div The width is: " + $("#div1").width() + "</br>";
    "div The height is: " + $("#div1").height(20); 
});

7.2 innerWidth and innerHeright() methods

The innerWidth() method returns the width (including the interior margin) of an element.

The innerHeight() method returns the height (including the interior margin) of an element.

$("button").click(function(){
"div Width, including interior margins: " + $("#div1").innerWidth();
"div Height, including interior margins: " + $("#div1").innerHeight(); 
});

7.3 outherWidth() and outerHeight() methods

The outerWidth() method returns the width (including the inner margin and border) of an element.

The outerHeight() method returns the height of the element, including the inner margin and the border.

$("button").click(function(){ 
txt+="div Width, with margins and borders: " + $("#div1").outerWidth() 
 		txt+="div Height, with margins and borders: " + $("#div1").outerHeight();
 	});

7.4 scrollTop() and scrollLeft() methods

The scrollTop() method sets or returns the height of the scrollbar scrolled element

The scrollLeft() method sets or returns the width of the scrollbar scrolled element

$("button").click(function(){ alert($("div").scrollTop()); });

8. jQuery adds and deletes elements

8.1 append() method

  append() method inserts content at the end of the selected element (still inside the element)   

$("ol").append("<li>Append List Items</li>");

8.2 prepend() method

  The prepend() method inserts content at the beginning of the selected element.

$("ol").prepend("<li>Append List Items</li>");

8.3   after() and before() methods

The jQuery after() method inserts content after the selected element.

The jQuery before() method inserts content before the selected element.

$("img").before("<b>before</b>");
$("img").after("<i>after</i>");

8.4   Delete element/content

remove() - Delete the selected element (and its children)

empty() - Delete child elements from selected elements

empty() simply deletes the text of the element, takes up the position, and does not appear on the page, but the DOM node is not deleted

remove() deletes the entire dom node without taking a place

9. Understanding of jQuery Plugins

9.1 Plugin

jquery can't contain all the functions. We can extend the functions of jquery through plug-ins.

JQuery has a rich set of plug-ins that provide additional functionality to jquery.

10. Use of jQuery.color.js

10.1 Introduction of js files

The animate animation in jQuery does not support discoloration itself, but jquery.color.js makes up for this.

.color.js relies on jQuery. So you need to reference jqueryjs first:

<script src="jquery.min.js"></script>
<script src="jquery.color.js"></script>

10.2 Example

11. Use of jquery.lazyload.js

11.1 Introduction of js files

         Many websites use the'picture lazy load'method to optimize their websites by delaying the loading of pictures or meeting certain criteria before they start loading pictures.
         Lazy Loading Principle: Browsers automatically send requests to the src attribute of img tags on the page and download pictures. This is achieved by dynamically changing the src attribute of the img. It can delay loading pictures from long pages outside the viewable area of the browser, and pictures will not be loaded until the user scrolls the page to their location.
Contrary to the way pictures are pre-loaded, delaying the loading of pictures on long pages with many large pictures can speed up page loading, especially on the mobile side. The browser will be ready to load visible pictures. It can also help reduce the burden on the server in the case of Taobao commodity details page, comic website and many pictures

<script src="jquery.min.js"></script>
<script src="jquery.lazyload.js"></script>

11.2 Example  

<img alt="" width="640" height="480" data-original="img/test.jpg" />
$(function() {
		$("img").lazyload();
	});

12. Use of jquery.ui.js

What is the 12.1 jQuery UI?

         The jQuery UI is a set of user interface interactions, special effects, widgets, and themes built on the jQuery JavaScript library. Whether you're creating a highly interactive Web application or simply adding a date selector to a form control, the jQuery UI is a perfect choice.

         The jQuery UI contains many widgets that maintain state, so it differs slightly from the typical jQuery plug-in usage pattern. All jQuery UI widgets use the same pattern, so as long as you learn to use one, you know how to use the other widgets.

12.2 Introduction

Download the zip package and unzip it. Typically, you need to reference these three files on the page in order to use the form widgets and interaction widgets of the jQuery UI:

<link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css" />
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="jquery-ui-1.12.1/jquery-ui.min.js"></script>

12.3 Operational Date Selector

Once you have referenced these necessary files, you can add some jQuery widgets to your page. For example, to make a date picker widget, you need to add a text input box to the page and call it again  . datepicker(), as follows:

<input type="text" name="date" id="date" />
	$( "#date" ).datepicker();

 

 

12.4 Drag

Allows the mouse to drag elements, enabling draggable on any DOM element. Move the draggable object by clicking with the mouse and dragging it in the viewport.

  $(function() {
    $( "#draggable" ).draggable();
  });