JQuery — introduction, using

Time:2021-4-3

1、 Introduction to jquery

1. What is itjQuery

#JQuery is an efficient, concise and functional JavaScript tool library
 #JQuery greatly simplifies JavaScript programming

2、Why use jQuery

Advantages of jQuery (the tenet of jQuery is: "write less, do more.")

3. JQuery version

#1. X: ie678 compatible, the most widely used, official only do bug maintenance, no new features. So for general projects, it's OK to use version 1. X. final version: 1.12.4 (May 20, 2016)
#2. X: not compatible with ie678, rarely used, official only do bug maintenance, no new features. If you don't consider compatibility with lower version browsers, you can use 2. X, final version: 2.2.4 (May 20, 2016)
#3. X: not compatible with ie678, only support the latest browser. It should be noted that many old jQuery plug-ins do not support version 3. X. At present, this version is the main official update and maintenance version.

#PS: it's a headache to maintain ie678. Generally, we load an additional CSS and JS to handle it separately. Fortunately, the number of people using these browsers has gradually decreased. PC users have been gradually replaced by mobile users. If there are no special requirements, they will generally choose to give up the support for 678.

4. JQuery related websites

  Official website https://jquery.com/

Document API: http://jquery.cuishifeng.cn/index.html

2、 Basic use of jquery

1. Download to local first, then reference, then use (download compressed version is recommended)

#Mode 1: local introduction


    //< span > note that all operations provided by jQuery must be used after introducing jQuery


#Method 2: use CDN directly

<span>
    code...

 ps: Address of each version of bootcdn jQuery: https://www.bootcdn.cn/jquery/

2. JQuery object

$is an alias for jQuery).show()

 

3. Document ready events

Steps of DOM document loading (emphasis)

  1. Parse the HTML structure.
  2. Load external scripts and style sheet files.
  3. Parse and execute the script code.
  4. The DOM tree is completed.
  5. Load external files such as pictures.
  6. The page is loaded.

There are two ways to execute the function after the document is loaded

#1. The execution time is different
window.onload You must wait until all the elements in the page, including the picture, are loaded.

$(document). Ready() is executed after the DOM structure is drawn, without waiting for the loading to complete.

#2. The number of compilers is different
window.onload You can't write multiple at the same time if there are multiple window.onload Method, only one will be executed

$(document). Ready() can write multiple programs at the same time, and all of them can be executed

#3. Simplified writing is different
window.onload There is no simplification

It can be abbreviated as ($) (ready function);

 4. Chain operation

#Chain call, the principle is to call an instantiation method to return the current object
$('.box1').css('color','red').next().css('width','200px').css('height','200px').css('background','green').removeAttr('class')

5. Jquerydom and jsdom

#1. DOM objects obtained through native JS are called jsdom or native dom

#2. The DOM object obtained by jQuery selector is called jQuery dom

#3. JQuery DOM is essentially a collection of jsdom, which is a class array object. You can get the jsdom through the [index], $(jsdom) can be converted to jQuery DOM as follows
var box =  document.getElementsByClassName ('box '); # get JS DOM object
JS DOM object = = > JQ DOM object $(JS DOM object) # e.g. $(box)
JQ DOM object = = > JS DOM object
$("selector") [0] # or $("selector"). Get (0)

 

3、 Selector

1. ID selector

$("#id")

2. Label selector

$("tagName")

3. Class selector

$(".className")

4. All element selectors

$("*")

5. Intersection selector

$("div.c1") // find the div tag of Class C1

6. Union selector

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

7. Level selector

//X and y can be arbitrary selectors

$("x, Y"); // all descendants of X
$("x > y"); // all sons of X Y (sons)
$("x + Y") // find all y's immediately after X
$("x ~ y") // all brothers y after X

8. Basic filter

: first // first
: last // last
: EQ (index) // the element whose index is equal to index
: even // matches all elements with even index values, counting from 0
: odd // matches all elements with odd index values, counting from 0
: GT (index) // matches all elements larger than the given index value
: LT (index) // matches all elements less than the given index value
: not (selector) // filter out all tags that meet the not condition
: has (selector) // filter out the tags that meet the has condition in all descendants

#For example
$(" div:has (H1) ") // find the div tags with H1 tags in all descendants
$(" div:has (. C1) ") // find the div tags with C1 style class in all descendants
$("Li: not (. C1)") // find all Li tags that do not contain C1 style classes
$("Li: not (: has (a))") // find all!!! In future generations!!! Li tag without a tag

 

JQuery -- introduction, usingJQ version of custom modal box

9. Property selector

[attribute]

give an example

$("input [type '='checkbox']); // get the input tag of the checkbox type
$("input [type! ='text ']); // get the input tag whose type is not text

Common filtering of forms

:text
:password:file
:radio
:checkbox
:submit
:reset
:button

give an example

$(": checkboxes") // find all checkboxes

Form object properties:

:enabled
:disabled
:checked
:selected

give an example

Find available input tags

$(" input:enabled ") // find the available input tags

Find the selected option:

Beijing
  Shanghai
  Guangzhou City
  Shenzhen City


$(": selected") // find all the selected options

4、 Filter

Next sibling element:

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

Last sibling element:

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

Father element:

$("#id").parent()
$("#id"). Parents() // find all the parent elements of the current element
$("#id"). Parentsuntil() // finds all the parent elements of the current element until the matching element is encountered.

Son and brother elements:

$("#id"). Children (); // sons
$("#id"). Siblings(); // brothers

lookup

Searches for all elements that match the specified expression. This function is a good way to find the descendants of the element being processed.

$("div"). Find ("P") // equivalent to $("div P")

screen

Filters out the set of elements that match the specified expression. This method is used to narrow the scope of matching. Separate multiple expressions with commas.

$("div"). Filter (". C1") // filter out the class with C1 style from the result set, which is equivalent to $("div.c1")

Supplement:

. first() // get the first matching element
. last() // gets the last matching element
. not() // removes the elements that match the specified expression from the set of matching elements
. has() // keep the elements that contain specific descendants and remove those that do not.
. eq() // the element whose index value is equal to the specified value

give an example:

JQuery -- introduction, usingLeft menu example