1.1. The jQuery is introduced
1.1.1 JavaScript library
A JavaScript library, or library, is an encapsulated collection of specific methods and functions. A library encapsulates a bunch of predefined functions, such as animate, hide, show, and fetch elements.
Simple understanding: is a JS file, in the face of our native JS code encapsulated, stored in the inside. This allows us to use these encapsulated features quickly and efficiently.
JQuery, for example, is designed for quick and easy manipulation of the DOM, which is basically full of functions (methods).
Common JavaScript libraries: JQuery, Prototype, YUI, Dojo, Ext JS, Mobile zepto, etc., these libraries are the encapsulation of native JavaScript, internal implementation is JavaScript, we mainly learn jQuery.
1.1.2 concepts of jQuery
JQuery overview is as follows:
-
JQuery is a fast, concise JavaScript library designed to “write Less, Do More”, which advocates writing Less code and doing More.
-
J is JavaScript; Query Query; Meaning is query JS, the DOM operation in JS encapsulation, we can quickly query the use of the inside function.
-
JQuery encapsulates common JavaScript functionality and optimizes DOM manipulation, event handling, animation design, and Ajax interaction.
-
Learning the essence of jQuery: Learning to call these functions (methods).
-
The purpose of jQuery is to speed up the development of front-end staff, we can very convenient call and use it, so as to improve the development efficiency.
1.1.3 Advantages of jQuery
- Lightweight. The core file is only tens of kilobytes, so the page loading speed will not be affected.
- Cross-browser compatibility, basically compatible with the mainstream browser now.
- Chain programming, implicit iteration.
- Support for events, styles, and animations greatly simplifies DOM manipulation.
- Support plug-in extension development. There are plenty of third-party plug-ins, such as tree menus, date controls, and wheel maps.
- Free and open source.
1.2. Basic use of jQuery
1.2.1 jQuery Download
You can download the latest version of jQuery from www.jquery.com/.
Download each version: code.jquery.com/
Version introduction:
1X: Compatible with IE 678 and other browsers of earlier versions, the official website will not be updated
2X: not compatible with Internet Explorer 678 and other earlier browsers, the official website will not be updated
3X: this version is not compatible with Internet Explorer 678 and other earlier browsers. This version is officially updated and maintained
1.2.2. Experience the jQuery
Steps:
- Import the jQuery file.
- Insert script tags at the end of the document to write experience code.
- $(‘div’).hide() can hide the box.
1.2.3. JQuery entry functions
There are two common entry functions in jQuery:
// The first is easy to use.
$(function () {...// This is the entry where the page DOM is loaded});// Second: cumbersome, but achievable
$(document).ready(function(){...// This is the entry where the page DOM is loaded
});
Copy the codeConclusion:
- Instead of waiting for all the external resources to load, you can execute the internal code after the DOM structure has been rendered. JQuery wraps it for you.
- Equivalent to DOMContentLoaded in native JS.
- Unlike native JS, load events wait for page documents, external JS files, CSS files, and images to be loaded before executing internal code.
- The first method is more recommended.
1.2.4. The top-level object $in jQuery
- $is another name for jQuery. You can use jQuery instead in your code, but for convenience, you usually use $directly.
- $is jQuery’s top-level object, equivalent to the window in native JavaScript. You can call jQuery methods by wrapping elements with $as jQuery objects.
1.2.5. JQuery objects and DOM objects
The elements obtained using jQuery are different from those obtained using native JS, as summarized below:
- The object obtained with native JS is the DOM object
- The elements that the jQuery methods get are jQuery objects.
- The essence of jQuery object is to use $to wrap the DOM object into an object (stored as a pseudo-array).
Note:
Only jQuery objects can use jQuery methods; DOM objects use native JavaScirpt methods.
1.2.6. JQuery object and DOM object conversion
DOM objects and jQuery objects can be converted to each other. Because native JS is larger than jQuery, there are some native properties and methods that jQuery doesn’t encapsulate. To use these properties and methods, you need to convert jQuery objects into DOM objects.
There is only one way to convert a DOM object into a jQuery object
var box = document.getElementById('box'); // Get the DOM object
var jQueryObject = $(box); // Convert DOM objects to jQuery objects
// 2. There are two ways to convert jQuery objects into DOM objects:
// 2.1 jQuery object
var domObject1 = $('div') [0]
// 2.2 jQuery object get(index)
var domObject2 = $('div').get(0)
Copy the codeSummary: The most common practice in development is to convert DOM objects into jQuery objects so that you can call the more powerful jQuery methods.
1.3. JQuery selector
The way native JS gets elements is very messy and inconsistent, so jQuery encapsulates it and makes it standard to get elements.
1.3.1. Base selectors
$("Selector") // Write CSS selectors to CSS selectors in quotes
Copy the code
1.3.2. Hierarchy selectors
The two most commonly used hierarchical selectors are descendant selectors and child selectors.
Base selector and hierarchy selector case code
<body>
<div>I am a div</div>
<div class="nav">I am a nav div</div>
<p>I am a p</p>
<ul>
<li>I am the ul</li>
<li>I am the ul</li>
<li>I am the ul</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
Copy the code1.3.3. Filter selectors
The filter selector, as its name implies, selects all the options that meet the criteria for a filter selection. Common as follows:
Case code
<body>
<ul>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
</ul>
<ol>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
<li>Filter a few out of many</li>
</ol>
<script>
$(function() {$("ul li:first").css("color"."red");
$("ul li:eq(2)").css("color"."blue");
$("ol li:odd").css("color"."skyblue");
$("ol li:even").css("color"."pink");
})
</script>
</body>
Copy the codeIn addition, jQuery also has some filtering methods, similar to DOM through a node to find another node, except the parent, child, brother strengthened.
Emphasis on memory, demo code slightly.
1.3.4 Knowledge matting
- JQuery Settings
$('div').css('properties'.'value')
Copy the code- Exclusivity in jQuery
// If you want to select one or more, the idea is exclusive: the current element is set in style, and the rest of the sibling elements are cleared.
$(this). The CSS (" color ", "red"); $(this). Siblings (). The CSS (" color ", "");Copy the code- Implicit iteration
// The process of iterating through internal DOM elements (stored as pseudo-arrays) is called implicit iteration.
// Simple understanding: to match all elements loop through, execute the corresponding method, without us to loop again, simplify our operation, convenient for us to call.
$('div').hide(); // All divs in the page are hidden, no loop operation
Copy the code- Chain programming
// Chained programming is designed to save code and look more elegant.
$(this).css('color'.'red').sibling().css('color'.' ');
Copy the code1.3.5 Case: Taobao clothing boutique case
1. Core principle: when the mouse passes over a small Li in the left box, the corresponding picture of the box in the content area will be displayed, and the other pictures will be hidden. $(this).index() 4 $(this).index() 4 For the corresponding picture in the middle, 5 can be selected by eq(index) method. Show element show() Hide element hide()
Code implementation omitted. (See source code for details)
1.4. Jquery-style operations
There are two common style operations in jQuery: CSS () and class style methods
1.4.1. Method 1: Operate the CSS method
JQuery can use CSS methods to modify simple element styles. You can also manipulate classes and modify multiple styles.
The following three forms are commonly used:
// 1. The parameter is written only to the attribute name, which returns the attribute value
var strColor = $(this).css('color');
// 2. The parameters are the name of the attribute, the value of the attribute, separated by commas, and set a set of styles. The attribute must be quoted, and the value can not be quoted if it is a number
$(this).css(' 'color' '.' 'red' ');
// 3. Parameters can be in object form, which is convenient to set multiple groups of styles. Attribute names and attribute values are separated by colons, and attributes may not be quoted
$(this).css({ "color":"white"."font-size":"20px"});
Copy the codeNote: CSS () is mostly used with a small number of styles, but more is inconvenient.
1.4.2. Method 2: Set class style methods
The function is the same as the previous classList, you can manipulate the class style, pay attention to the operation class inside the parameter do not dot.
There are three common ways to set class styles:
// 1. Add a class
$("div").addClass("current");
// 2. Delete the class
$("div").removeClass("current");
// 3. Switch classes
$("div").toggleClass("current");
Copy the codeNote:
- The class style method is suitable for multi-style operations and can compensate for CSS ().
- ClassName overwrites the className of the element. JQuery only operates on the specified class, and does not affect the className.
1.4.3. Case: TAB bar switching
1. Click on the upper part of li to add the current class and remove the other siblings. 2. Click to get the current index number of Li. 3
Code implementation omitted. (See source code for details)
1.5. Effect of jQuery
JQuery encapsulates many animation effects. The most common ones are as follows:
- Show hide: show()/hide()/toggle();
- Draw: slideDown()/slideUp()/slideToggle();
- FadeIn and out: fadeIn()/fadeOut()/fadeToggle()/fadeTo();
- Custom animation: animate();
Note:
Animations or effects are executed once triggered, and if triggered more than once, multiple animations or effects are queued to execute.
JQuery gives us another way to stop animation queuing: stop();
1.5.1. Show hide
There are three common ways to display hidden animations: show()/hide()/toggle();
The syntax is as follows:
Code demo
<body>
<button>According to</button>
<button>hidden</button>
<button>switch</button>
<div></div>
<script>
$(function() {$("button").eq(0).click(function() {$("div").show(1000.function() {
alert(1); }); $(})"button").eq(1).click(function() {$("div").hide(1000.function() {
alert(1); }); $(})"button").eq(2).click(function() {$("div").toggle(1000);
})
// In normal cases, we can show and hide without parameters
});
</script>
</body>
Copy the code1.5.2. Slide in, slide out
There are three common ways to slide in and out: slideDown()/slideUp()/slideToggle();
The syntax is as follows:
Code demo
<body>
<button>Slide the drop-down</button>
<button>Pull on the slide</button>
<button>Slide switch</button>
<div></div>
<script>
$(function() {$("button").eq(0).click(function() {
// slideDown()
$("div").slideDown(); $(})"button").eq(1).click(function() {
// slideUp slideUp()
$("div").slideUp(500); $(})"button").eq(2).click(function() {
// slideToggle()
$("div").slideToggle(500);
});
});
</script>
</body>
Copy the codeExample: drop – down menu (see source code for details).
1.5.3 Fade in and out
FadeIn ()/fadeOut()/fadeToggle()/fadeTo();
The syntax is as follows:
Code demo
<body>
<button>Fade in effect</button>
<button>fade-out</button>
<button>Fade-in and fade-out switch</button>
<button>Modify transparency</button>
<div></div>
<script>
$(function() {$("button").eq(0).click(function() {
/ / fade in fadeIn ()
$("div").fadeIn(1000); $(})"button").eq(1).click(function() {
/ / out fadeOut ()
$("div").fadeOut(1000); $(})"button").eq(2).click(function() {
// fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// Change transparency fadeTo() this speed and transparency must be written
$("div").fadeTo(1000.0.5);
});
});
</script>
</body>
Copy the code1.5.4 Custom Animation
Custom animations are very powerful, and all of the above can be simulated by passing parameters through animate();
The syntax is as follows:
Code demo
<body>
<button>move</button>
<div></div>
<script>
$(function() {$("button").click(function() {$("div").animate({
left: 500.top: 300.opacity: 4..width: 500
}, 500); })})</script>
</body>
Copy the code1.5.5 Stopping animation Queuing
Animations or effects are executed once triggered, and if triggered more than once, multiple animations or effects are queued to execute.
To stop animation queuing: stop();
- The stop() method is used to stop an animation or effect.
- Stop () writes to the beginning of an animation or effect, stopping the previous animation.
Summary: Before each animation, call stop() before calling the animation.
1.5.6. Event switching
JQuery adds a new event hover() for us; Function similar to CSS pseudo-class :hover. Introduce the following
grammar
hover([over,]out) // Over and out are two functions
Copy the code- Over: function to trigger when the mouse moves over an element (equivalent to a mouseenter)
- Out: function to trigger when the mouse moves out of the element (equivalent to mouseleave)
- If you write only one function, it will be triggered by both mouse over and mouse away
Hover event and Stop animation permutation cases
<body>
<ul class="nav">
<li>
<a href="#">weibo</a>
<ul><li><a href="">Direct messages</a></li><li><a href="">comments</a></li><li><a href="">@ I</a></li></ul>
</li>
<li>
<a href="#">weibo</a>
<ul><li><a href="">Direct messages</a></li><li><a href="">comments</a></li><li><a href="">@ I</a></li></ul>
</li>
</ul>
<script>
$(function() {
// Mouse over
// $(".nav>li").mouseover(function() {
// // $(this) jQuery Unquote the current element this
// // show() displays elements hide() hides elements
// $(this).children("ul").slideDown(200);
// });
// // Mouse away
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. Event toggle hover is a composite of mouse over and off
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
If you write only one function to hover, then the function will be triggered by mouse over and mouse off
$(".nav>li").hover(function() {
// The stop method must be written before the animation
$(this).children("ul").stop().slideToggle();
});
})
</script>
</body>
Copy the code