Introduction to jQuery

My blog characteristics: the highest important level is *** (Five Red Stars), in turn, the importance of reducing the representative is relatively low!

Introduction to jQuery

JQuery is a library of JavaScript, that is, jQuery is developed based on the JavaScript framework. The goal is to maximize the simplicity of JavaScript writing.

II. jQuery Content

1. Find tags (selectors)

2. Filter

3. Operation label

3.1. Style operation

Location operation

3.3. Text manipulation

3.4. Attribute operations

3.5. Document manipulation

4. Events

5. Animation

6. Plug-ins

III. jQuery Objects

JQuery objects are generated by wrapping DOM objects with jQuery. In normal usage, only jQuery objects can use the method in jQuery. [Because, when writing a JS script, there may be something native to js, or there may be some grammar of jQuery to use together. (This refers to the conversion between JavaScript and jQuery, as follows.) To) JQuery's approach is to use examples such as: $(" nav"). HTML ().

The code analysis of the sentence'$(" nav"). html();"Here, $(" nav") is the jQuery object (that is, the left side of the point), and the right html() of the point is the method of the jQuery object. Get the html code for the tag (element) whose id value is nav.

Note: If there is something in html, such as: $(" nav"). HTML ("<p>555</p>") does not mean to get the HTML code of the NAV tag, but to replace all HTML in the NAV tag with <p>555</p>. This is related to the operation method, which will be described in detail below. Here is just a comparison. Bricks attract jade.

Compared with native JavaScript: "$(" nav"). HTML (); document. getElementById ("nav") innerHTML equivalent to native js;

Although jQuery objects are generated by wrapping DOM objects, jQuery objects cannot directly use any method of DOM objects, nor can DOM objects directly use any method of jQuery objects. (The conversion between JavaScript and jQuery is also covered here, as mentioned below)

The convention is that when we want to declare a variable of a jQuery object, we need to add a $sign in front of the variable: for example

var $run = jQuery object

var run = DOM object

Conversion between JavaScript and jQuery:

Take the example above for example:

jQuery object: $("#nav")

DOM object: document.getElementById("nav")

1. jQuery objects are converted to DOM objects: $(" nav") [0] ********************************************************************* by adding an index to the jQuery object, which becomes a DOM object (because the tag obtained by the jQuery object is an array)

2. DOM objects are converted into jQuery objects: $(document.getElementById("nav") or $("#nav") [0])********** jQuery objects can be added outside the DOM objects by adding $().

IV. jQuery Basic Grammar

jQuery grammar is to select (find) HTML elements and then perform certain operations on selected elements.

Basic grammar: $(selector).action()

• Selector: selector." Query "and" to find elements in HTML documents.

• action: Query's operations on elements.

Example:

• $("p.test").hide() - Hide all < p > elements of class="test"

• $("# test").hide() - Hide all the elements with id="test"

5. jQuery Find Label (Selector)

5.1 Basic selector

5.1.1 id selector:

$("#main_id")

5.1.2 Label selector:

$("div")

$("p")

$("img")

5.1.3 class (Style class) Selector:

 $(".main_class")

5.1.4 Cooperative use:

$("div.main_class")
perhaps

$("div#main_class")

5.1.5 Universal selector:

 $("*")

5.1.6 Combination selector:

$("#main_id,.nav_class,div.main_class")

5.2 Hierarchical selector

x, y can be an arbitrary selector, x, can be swapped.

$("x y")         //x All descendants y

$("x>y")          //x All sons y

$("x+y")          //All right next to each other x Backstage y

$("x~y")         //x All brothers y

5.3 Basic filters

5.3.1 Common filters:

//Div represents a selector, which can be any selector here. For example, div, # main ul li,x~y Wait

$("div:first")  //First
$("div:last")　　//The last one
$("div:eq(index)")    //The element whose index equals index
$("div:even")　　　　　　　//Match all elements with even index values, counting from 0
$("div:odd")　　　　　　　　//Match all elements with odd index values and count from 0
$("div:gt(index)")   　　　　//Match all elements larger than a given index value
$("div:lt(index)")　　　　　　//Match all elements less than a given index value
$("div:not(element selector)")   　　//Remove all tags that satisfy not criteria
$("div:has(element selector)")　　　　//Select all tags that contain one or more tags(It refers to looking for elements from future generations.)

Example:

$("div:has(h1)")// Find out that among all offspring h1 Labeled div Label
$("div:has(.c1)")// Find out that among all offspring c1 Style class div Label
$("li:not(.c1)")// Find all not included c1 Style class li Label
$("li:not(:has(a))")// Find all offspring that do not contain a Labeled li Label

Practice:

Not updated

5.4 Attribute Selector

Attribute:"attribute" means.

[attribute]
[attribute=value]// Attribute equals
[attribute!=value]// Attributes are not equal to

Example:

<input type="text">;
<input type="password">;
<input type="button">;
//application

$("input[type='text']");

$("input[type='password']");   // Fetch password Type input Label

$("input[type!='button']");// Fetch type is not button Of input Label

5.5 Form selector

Divided into two groups, the first group (five), the second group (three, all buttons)

:text                     //Example: $(":text ")     Find all in the form text
:password             //Example: $(":password")      Find all in the form password
:checkbox             //Example: $(":checkbox")      Find all in the form checkbox
:radio                   //Example: $(":radio")
:file                      //Example: $(":file")

:submit                 //Example: $(":submit")
:reset                    //Example: $(":reset")
:button                  // Example: $(":button ") 

Find the corresponding tags by attributes (4):

:enabled       //Tag Availability Properties
:disabled　　　　//Tag Availability Properties
:checked 
:selected

Example:

1. Find the available input tag

<form>
　　<input  name="username" disabled="disabled">
　　<input name="id" />
</form>
$("input:enabled")  // Find available input Label

2. Find the selected option:

<select id="s1">
  <option value="beijing">Beijing</option>
  <option value="shanghai">Shanghai</option>
  <option selected value="guangzhou">Guangzhou City</option>
  <option value="shenzhen">Shenzhen City</option>
</select>

$(":selected")  // Find all selected option

6. jQuery filter

6.1 Find the next element:

$("#nav").next();
$("#nav").nextAll();
$("#nav").nextUntil("#id");

6.2. Find an element:

$

("#nav").prev();
$("#nav").prevAll();
$("#nav").prevUntil("#id");

6.3 Find Father Elements:

$("#nav").parent();
$("#nav").parents();     //Find all parents of the current element
$("#nav").parentsUntil("#id"); //Find all parents of the current tag until they find it ID The value is id Parent element

6.4 Find the elements of sons and brothers:

$("# nav").children(); // Find all sons under the current element
$("# nav").siblings(); // Find siblings with current elements

6.5 Finding method (.find()):

A method of searching for a specified descendant element of the current element. This method is a good way to find the offspring of the elements being processed.

$("div").find("p");      //This sentence is equivalent to  $("div p");

6.6 Screening method (. filter():

Select the set of elements that match the expressions in parentheses of filter method. This method can narrow the matching range very well. The selector expressions in parentheses of filter method can be multiple and comma-separated. Like a combination selector.

$("div").filter(".c1")  // from div The results were filtered out by centralized filtering. c1 Style class is equivalent to $("div.c1")

6.7 Comparison of several filters and screening methods:

.first() // Get the first element of the match                     　　　　　　   Filter:　　:first
.last() // Get the last element of the match　　　　　　　　　　　　　　　　　　　　Filter:　　:last
.not() // Delete elements that match the specified expression from the set of matching elements　　　　　　　　　 Filter:　　:not(element selector)
.has() // Retain elements that contain specific offspring and remove elements that do not contain specified offspring.　　 　　Filter:　　:has(element selector)
.eq() // An element whose index value is equal to the specified value　　　　　　　　　　　　　　　　　　　　　Filter:　　 :eq(index)

Two differences:

1. The filter method is preceded by a dot ".". The filter is a colon":"

2. There are parentheses behind the filter method, but there are no filters

Example:

To be updated...

7. jQuery Operational Label

7.1 Style class name operation

addClass("Class name");          // Add the class name specified in parentheses

removeClass("Class name");     //Remove the bracketed css Class name

hasClass("Class name")；        //Judging whether a style exists

toggleClass("Class name");       //switch css Class names are removed if there is a class name, and negative elements are added.

Examples:

Regular updates are in the process of...

7.2 Location operation

offset()        //Get the matching element in the current window(window)Relative position or setting element position
position()        //Get the offset of the matching element relative to the parent element
scrollTop()        //Get the offset of the matching element relative to the top of the scroll bar
scrollLeft()        //Get the offset of the matching element relative to the left side of the scrollbar

The. offset() method allows us to retrieve the current location of an element relative to a document.

The difference between. position() and. position() is that. position() is a displacement relative to the parent element.

Examples:

Regular updates are in the process of...

7.3 Text manipulation

7.3.1 HTML code:

html()  　　　　 //Getting the first element html content

html(val)　　　　Set up all matching Whitmiller content

7.3.2 Text code:

text()　　　　　　//  Setting the content of all matching elements

text(val)　　　　　　// Setting the content of all matching elements

7.3.3 Set values:

$("[name = ''hobby]").val(['basketable','foontball'])

$("#s1").val (["1", "2"])

Example:

Get the checkbox or radio selected.

<label for="c1">female</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">male</label>
<input name="gender" id="c2" type="radio" value="1">

Use examples:

$("input[name='gender']:checked").val()

7.3.4 Value:

val()// Gets the current value of the first matching element
val(val)// Set the values of all matching elements
val([val1, val2])// Setting multiple selections checkbox,Multiple selection select Value

Examples:

Regular updates are in the process of...

7.3.5 Attribute operations

Customize attributes with ID tags, etc.

attr(attrName)   　　　　　　//Returns the attributes of the first matching element
attr(attrName,attrValue) 　　//Set an attribute value for all matching elements
attr({k1:v1, k2:v2})     　　// Setting multiple attribute values for all matching elements
removeAttr()                  // Delete an attribute from each matching element

For checkbox and radio

prop()                 // get attribute
removeProp()        // Remove Attribute 

It is worth noting that:

There are bugs when attr is used to assign checkbox values in jQuery versions 1.X and 2.X, but there are no bugs in jQuery versions 3.X. To solve this problem, we'd better use prop() instead of attr("checked","checked") in addition to checkbox and radio s.

<input type="checkbox" value="checkbox">
<input type="radio" value="radio">
<script>
$(":checkbox").prop("checked",true);
$(":radio").prop("checked",true);
</script>

The difference between prop() and attr():

attr is called attribute: attribute.

prop is also called property.

Although all attributes are attributes, they refer to different attributes. Attr refers to HTML tag attributes, while prop refers to DOM object attributes. It can be considered that attr is explicit while prop is implicit.

For instance:

<input type="checkbox" id="i1" value="1">

For the above code,

$("#i1").attr("checked")  // undefined
$("#i1").prop("checked")  // false

You can see that attr gets undefined when it gets something that is not in a label, while prop gets the properties of the DOM object, so checked is false.

If the following code is replaced:

<input type="checkbox" checked id="i1" value="1">

Re-execution:

$("#i1").attr("checked")   // checked
$("#i1").prop("checked")  // true

This has proved the limitation of attr, whose scope is limited to the attributes in HTML tags, while prop gets the attributes of the DOM object, returns true when checked, and false when unchecked.

Next, let's look at the difference between attr and prop for custom attributes.

<input type="checkbox" checked id="i1" value="1" me="Custom Properties">

Execute the following code:

$("#i1").attr("me ")//" custom attribute“
$("#i1").prop("me")  // undefined

You can see that prop does not support custom attributes for getting tags.

To sum up:

1. attr is used for all visible and custom attributes on tags
2. Pro is used for returning Boolean values such as checkbox, radio, and option.

7.3.6 Document Processing

After adding to the inside of the specified element

$(A).append(B)// hold B Added to A
$(A).appendTo(B)// hold A Added to B

Add to the front of the specified element

$(A).prepend(B)// Preposition B to A
$(A).prependTo(B)// Preposition A to B

After adding to the outside of the specified element

$(A).after(B)// Put B behind A
$(A).insertAfter(B)// Put A behind B.

Add to the front of the specified element

$(A).before(B)// Put B in front of A
$(A).insertBefore(B)// Put A in front of B.

Remove and empty elements

$(A).remove()// from DOM Delete all matching elements.
empty()// Delete all child nodes in the set of matching elements.

replace

replaceWith()
replaceAll()

Clone

clone()// parameter

The example is being updated ^.........

7.3.7 Dimensions

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

VIII. jQuery Event

Common events

click(function(){..................})      //Click on Things
hover(function(){..................})　　　　//
focus(function(){.....................})　　　　//Get the cursor event and change the background color of the search box when you click on the search box
blur(function(){..................})　　　　　　//Lose cursor event, click outside input field, make it lose focus 

change(function(){..................}) 　　　　　　//Attributes can be changed when a label or control is used or changed
keyup(function(){.....................})　　　　　　//When you press the key, change the color of the text field:

9. jQuery Animation

10. jQuery plug-in