table of Contents

jQuery Introduction

jQuery is a lightweight, multi-browser compatible JavaScript library.
jQuery makes it easier for users to handle HTML Document, Events, achieve animation effects, easily interact with Ajax, JavaScript can greatly simplify programming. Its purpose is: "Write less, do more."

jQuery advantage

A lightweight JS framework. jQuery core js file only a few dozen kb, will not affect the page loading speed.
Rich DOM selectors, jQuery selection Used easy to use, for example, to find adjacent elements of a DOM object, JS could write several lines of code, and one line of code jQuery to get, then you want a table such as interlaced color, jQuery also get line of code.
Chain expression. jQuery's chaining multiple operations can be written in a single line of code, the more concise.
Events, styles, animation support. jQuery also simplifies the operation css js code readability and also stronger than js.
Ajax operations support. AJAX jQuery simplifies operation, only the rear end of a return communication JSON string format can be done in the front end.
Cross-browser compatible. jQuery basically compatible with the major browsers now, no longer compatible browser issues and headache.
Plug-in extension development. jQuery has a wealth of third-party plug-ins, such as: tree menu, date control, image transition plug-ins, pop-ups, etc. The basic component on the front page has a corresponding plug-in, and do it with jQuery plug-in effects stunning, and can be according to their need to rewrite and package plug-ins, simple and practical.

jQuery content

Selector
Filters
Style operations
Text manipulation
Property operations
Document processing
event
Animation
Plug
each、data、Ajax

Download Link: jQuery official website

Chinese Documentation: jQuery document the AP Chinese

jQuery object

jQuery object is an object produced after packaging DOM objects by jQuery. jQuery object is unique to jQuery. If an object is a jQuery object , then it can use jQuery in the way: for example, $ ( "# i1") html ().

$("#i1").html()It means: id value acquiring i1html code elements. Which html()is in the jQuery method.

It is equivalent to: document.getElementById("i1").innerHTML;

Although the jQuery对象packaging DOM对象produced later, but jQuery对象can not use DOM对象any method, empathy DOM对象did not use jQueryin the method.

A convention, we declare a jQuery object variable time plus $ in front of the variable name;

jQuery objects and DOM objects using:

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

jQuery basic grammatical structure

jQuery ( 'selector') .action (attribute) # jQuery inconvenient to write, write $

$ ( 'Selector') .action (attribute)

Note the use of jQuery

You must file the introduction of external jQue in script, you can use after import.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery3.4.1.js"></script>
</head>
<body>
<p>ppp</p>
</body>
</html>

Find label

The basic selector

id selector:

$("#id")

Tag selector:

$("tagName")

class selector:

$(".className")

With the use of:

$("div.c1")  // 找到有c1 class类的div标签

All elements of selectors:

$("*")

Combined selector:

$("#id, .className, tagName")

Level selector

x and y may be any selector

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="jQuery3.4.1.js"></script>-->
      <!--从bootcdn上直接引入jQuery文件，前提要有网络-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<span class="c1">span</span>
<div id="d1">div
    <span>div>span</span>
    <p>div>p
        <a href="">div>p>a</a>
    </p>
    <span>div>span</span>
</div>
<span>div+span</span>
</body>
</html>

The front end of the JQuery js