Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use jQuery's api to achieve dynamic effects", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use jQuery's api to achieve dynamic effects.

Why learn jQuery?

[01-Let div display and set content .html]

When developing with javascript, there are many disadvantages:

1. There are too few ways to find elements, which is troublesome. 2. Traversing pseudo arrays is cumbersome, usually nesting a lot of for loops. 3. There is a compatibility problem. 4. Want to achieve a simple animation effect, but also very troublesome 5. Code redundancy.

I am an old code farmer who has been developed for several years. I hope this article will be useful to you! Here I recommend my front-end learning exchange circle: 767273102, which is all learning front-end, from the most basic HTML+CSS+JS [cool special effects, games, plug-in packaging, design patterns] to the actual combat learning materials of mobile HTML5 projects are sorted out and sent to every front-end partner. 2019 the latest technology, synchronized with the needs of the enterprise. Friends are inside to learn and communicate, every day there will be Daniel regularly explain the front-end technology!

Click: join

The first experience of jQuery

[02-Let div display and set content .html]

$(document) .ready (function () {$("# btn1") .click (function () {/ / implicit iteration): secretly iterate, in jQuery, you don't need to write the for loop manually, it traverses automatically. $("div"). Show (200);}); $("# btn2") .click (function () {$("div") .text ("I am content");})

Summary of advantages:

1. There are a variety of ways to find elements, which are very flexible. It has the feature of implicit iteration, so the handwritten for loop is no longer needed. 3. There is no compatibility problem at all. 4. The realization of animation is very simple, and the function is more powerful. 5. The code is simple and rough. What is jQuery?

JQuery's official website http://jquery.com/

JQuery is a js library, and it's easier to use jQuery than JavaScript.

Js library: write some commonly used methods to a separate js file and refer to the js file directly when you use it. (animate.js, common.js)

We know that jQuery is actually a js file, which encapsulates a lot of methods to facilitate our development, in fact, it is an enhanced version of common.js, so we learn jQuery, in fact, is to learn jQuery this js file encapsulated a lot of methods.

Entry function of jQuery

There are three steps to using jQuery:

1. Import jQuery file 2. Entry function 3. Function realization

About the entry function of jQuery:

/ / the first way to write $(document) .ready (function () {}); / / the second way to write $(function () {})

Comparison between jQuery entry function and js entry function

1. The entry function of JavaScript will not be executed until all the resources (including images and files) on the page have been loaded. 2. The entry function of jQuery will only wait for the document tree to finish loading, and will not wait for pictures or files to be loaded. The difference between jQuery object and DOM object (emphasis)

DOM object: the object returned by using the method in JavaScript to get the elements in the page is the dom object.

JQuery object: the jquery object uses the jquery method to get the elements in the page. The object returned is the jQuery object.

A jQuery object is actually a wrapper set of DOM objects (wrapping a collection of DOM objects (pseudo arrays))

The methods of DOM objects and jQuery objects cannot be mixed.

Convert DOM objects to jQuery objects: [associative memory: spending money]

Var $obj = $(domObj); / / $(document) .ready (function () {}); is a typical DOM object to jQuery object

Convert a jQuery object to a DOM object:

Var $li = $("li"); / / the first method (recommended) $li [0] / / the second method $li.get (0) selector what is the jQuery selector

The jQuery selector is a set of methods provided by jQuery to make it easier for us to get the elements in the page. Note: the jQuery selector returns a jQuery object.

There are many jQuery selectors, which are basically compatible with all selectors from CSS1 to CSS3, and jQuery adds a lot of more complex selectors. [view jQuery documentation]

There are many jQuery selectors, but they can be substituted for each other, that is, to get an element, you can get it in many ways. So what we can really use is only a few of the most commonly used selectors.

Basic selector

Summary: the use of selectors is exactly the same as that of css.

Hierarchical selector

It's exactly the same as CSS's selector.

Filter selector

Filter selector (method)

At this point, I believe you have a deeper understanding of "how to use jQuery's api to achieve dynamic effects". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.