· Common methods and events

JQuery encapsulates a large number of methods, greatly simplifying the code and making it easier to implement different business scenarios

(1) Common operation methods

1.1 Operating Label Content

1.1.1 the HTML () method

The HTML () method is equivalent to the innerHTML property in native JS and is used to get or set the inner content of the tag. Method can pass a custom string content as an argument.

(note:Cannot be used with single tags, can only be used with double tag elements)

An overview of the

Get content: text and internal tags Syntax: jQuery object.html ();
Setting content: Text content in string format. If the string contains AN HTML tag, the structure is rendered according to the HTML tag. Syntax: jQuery object.html(‘ text content ‘);

The sample

    // Do not pass the value: get the element copy. If multiple elements are retrieved, only the copy or internal tag of the first element can be retrieved
    console.log($div.html()); // <p>hello word 1</p>

    // Pass value: batch modify element content, return element tag class array
    let $pTxt = $div.html("Hello");
    // If there are tag elements in the content of the new setting, the structure will be rendered according to the HTML tag
    let $pTxt2 = $div.html("Copy  New copy 1
");
Copy the code

1.1.2 the text () method

The text() method is equivalent to the innerText property in native JS and is used to get or set the text inside the tag.

(note:Cannot be used with single tags, can only be used with double tag elements)

An overview of the

Syntax: jQuery object. Text ();
Set content: Set text to string format; Tags are set as normal text syntax: jQuery object text(‘ text content to set ‘);

The sample

    // Get the element
    let $box = $(".box");

    // Get content: Get all the text inside the tag. (And the output text will retain the source text format, including newline indentation, etc.)
    console.log($box.text())
Copy the code

Output:

    // Set the content: The content will replace all the content inside the element, including normal text and labels; If the content of the set string contains AN HTML tag element, it will be loaded as normal text and the page structure will not be rendered
    $box.text("New copy  New paragraph 
");  // 
Copy the code

Output:

1.1.3 val () method

The val() method is equivalent to the value property in native JS and is used to get or set the form element content.

An overview of the

Value syntax for form elements: jQuery object. Val ();
Set content: value syntax: jQuery object. Val (” set content “);

parameter

Call this method directly without passing an argument to get the element content

Set the content and pass the content as a string

The sample

Get the value

    // Get value
    console.log($box.val()); // There is no value attribute so return null
    console.log($input.val()); // Returns the value attribute of the first element
    console.log($text.val()); // Returns the text of the first element
    console.log($sel.val()); // Returns the value of the selected item in the form
    console.log($opt.val()); // Returns the value of the selected item in the form
Copy the code

Output:

Set the value

// Set value
$box.val("New copy?"); // There is no doubt that it will not work
$input.val("New copy?"); // Change the value in batches (the new value is rendered on the page, and the value attribute in the HTML structure does not change)
$text.val("New copy?"); // Change the value in batches (the new value is rendered on the page, and the value attribute in the HTML structure does not change)
$sel.val("xigua"); // Change the default option for displaying SELECT
$opt.val("xigua"); // The value of the option element in the HTML structure is changed in batches.
Copy the code

Output:

1.2 Operating Label Attributes

1.2.1 attr () method

Attr: full name of attribute.

The attr() method is used to get or set the attribute value of the tag element.

Note:It can be a custom attribute of the tag

An overview of the

Attr (); attr(); attr(); attr();
Attr () is a jQuery object. Attr (” attribute name “,” attribute value “);

parameter

Parameter in string format

The sample

Get attributes:

// Get attributes
console.log($inp.attr("class")); // box
Copy the code

Set properties:

// Set the property value
$inp.attr("name"."newNmae");
Copy the code

Output:

1.2.2 removeAttr () method

The removeAttr() method is used to remove attributes from tags such as ID, class, value…

An overview of the

Pass in the name of the attribute that exists in the tag as an argument

parameter

Parameter in string format

The sample

Remove attributes:

// Remove the attributes of the tag
$inp.removeAttr("id");
Copy the code

Output:

1.2.3 prop () method

Properties of the selected, Checked, and Disabled form elements. The property value of this type of property is the same as the property name

An overview of the

Syntax: jQuery object prop(” Attribute name “); prop(” attribute name “);
The prop() method is used to set the attribute value of the tag element.

parameter

Gets property values: arguments in string format

Set property value: the property name in the string format of the first argument; The second parameter is a normal value

The sample

Get the property value:

// Get the form element attribute value: returns a Boolean value of true or false
console.log($btn.prop("disabled"));
console.log($choose.prop("checked"));
Copy the code

Output:

Set the property value:

 // Set the property value
 $btn.prop("disabled".false);
 $choose.prop("checked".false);
Copy the code

Output:

1.3 Manipulating the CSS Styles

1.3.1 CSS () method

Use to invoke CSS property values or change CSS property values.

An overview of the

One argument: represents the value of a CSS property that is called, resulting in the computed style of an element in string format.

The second parameter can be the value of the CSS style attribute. If the value of the attribute is a number with a unit, it can be written as a string with a unit, a string without a unit, a pure number, a string with +=, etc.

The first argument to the CSS () method is written as a single attribute for a compound attribute: either a hump or a line.

You can set multiple CSS properties for the same object at the same time and write the properties and their values in object format as the parameters of CSS ().

grammar

The jQuery object. CSS (name, value);

parameter

Parameter 1: the name of the CSS style property in string format

Parameter 2: Set or changed property value.

The sample

Structure: Initial style:

Get the style property value:

    // Get the style property value
    console.log($box.css("width"));
    console.log($box.css("border")); // This property is not set to return the default value
    // Get the corresponding attribute writing format: hump or - hyphen
    console.log($box.css("background-color"));
    console.log($box.css("backgroundColor"));
Copy the code

Output:

Set style property values:

    // Set the style property value
    $box.css("width".100);
    $box.css("width"."200");
    $box.css("width"."300px");
    $box.css("width"."+ = 300");
    $box.css("width"."+=300px");
    // Batch set multiple properties: object format parameters
    $box.css({
        // "width": 100,
        // "width": "200",
        "width": "200px"."height": 100."backgroundColor": "rgb(255, 99, 88)"
    });
Copy the code

1.4 Operation class Class name

JQuery encapsulates the manipulation of the tag class name attribute by adding or removing the specified class name.

Note:The class method only operates on the specified class name, and does not affect other existing class names

1.4.1 addClass () method

An overview of the

The addClass() method is used to add the specified attribute name

grammar

$jQuery object. AddClass (" Name of class to add ")

parameter

The class name of the character substitution type is passed in

The sample

    // Add the class name
    $btn1.click(function () {
    $box.addClass("newStyle");
  });
Copy the code

1.4.2 removeClass () method

An overview of the

The removeClass() method is used to remove the specified attribute name

grammar

$jQuery object removeClass(" Name of class to remove ")

parameter

The class name of the character substitution type is passed in

The sample

    // Remove the class name
    $btn2.click(function () {
    $box.removeClass("newStyle");
    });
Copy the code

1.4.3 toggleClass () method

An overview of the

The toggleClass() method toggles the name of the specified attribute to be added or removed

grammar

ToggleClass (" Class name ")

parameter

The class name of the character substitution type is passed in

The sample

    // Class name toggleClass
    $btn3.click(function () {
    $box.toggleClass("newStyle");
    });
Copy the code

1.4.4 hasClass () method

An overview of the

The hasClass() method is used to determine whether the class name is included.

You can use addClass and removeClass methods to switch between adding and removing specified attribute names. The effect is the same as toggleClass()

grammar

$jQuery object hasClass(" class name ")

parameter

The class name of the character substitution type is passed in

The sample

    $btn4.click(function () {
    // Check if this attribute has a class name
    if ($box.hasClass("newStyle")) {
      / / if you have
      $box.removeClass("newStyle");
    } else {
      $box.addClass("newStyle"); }});Copy the code

Effect:

(2) Common event methods

Mouse events commonly used in jQuery

Mouseenter () event: The event function is triggered when the mouse moves over an element
Mouseleave () event: Triggers the event function when the mouse moves out of the element
Hover () event: combined event: triggers the event function when the mouse moves out and removes an element

Note: jUnlike the mouse events mouseover() and mouseout() of native JS, the mouse events in Query do not bubble up

2.1 mouseenter ()

An overview of the

The event function fires when the mouse moves over an element

grammar

$jQuery object. Mouseenter ();

parameter

Parameter of the fn() function

The sample

    // Enter the element and fire the event
    $box.mouseenter(function(){
    console.log("Trigger: MouseEnter () event to enter the box");
    });
Copy the code

2.2 mouseleave ()

An overview of the

The event function fires when the mouse moves out of an element

grammar

$jQuery object. Mouseleave ();

parameter

Parameter of the fn() function

The sample

    // Remove the element, raising the event
    $box.mouseleave(function(){
    console.log("Trigger: Mouseleave () event, leaves small box");
    }); 
Copy the code

2.3 hover ()

An overview of the

The event function is triggered when the mouse moves out of an element, and when an element is removed. Two function parameters in an event function.

grammar

$jQuery object. Hover ();

parameter

Two function arguments fn()

The first argument: the event triggered by the entry element; Second argument: The event triggered by the removal element

The sample

    // hover()
    $warp.hover(function(){
        console.log("Into the Big Box: Trigger event");
    },function(){
        console.log("Move out of big Box: Trigger event");
    });
Copy the code

(3) relationship search method

You can find the parent, subset, and sibling elements of a jQuery object

The method returns an array object of the found node

3.1 & (this)

An overview of the

$(); $(); $(); $();

This refers to the jQuery object that calls this

grammar

The jQuery object. (this);

parameter

this

The sample

    // Add its own event to the clicked object
    // You need to wrap this with $() and turn it into a jQuery object to call the jQuery method
    $(this).css("backgroundColor"."orange");
Copy the code

3.2 the parent ()

An overview of the

The parent() method finds its nearest parent element

The parents() method finds all of its parent elements. Including body

After calling this method, you can continue to call jQuery methods without passing any parameters

grammar

The jQuery object. The parent ();

The jQuery object. Parents ();

parameter

You can pass selector arguments as strings

The parent() method: the existing selector that matches the parent is valid, otherwise the parent is not selected

The parents() method: passes in the specified argument, optionally selecting the specified parent element that meets the criteria

The sample

    // parent() : Click on yourself to find the nearest parent element above you
    $(this).parent().css("backgroundColor"."tomato");
    
    // parents() : all the parent elements above itself
    $(this).parents().css("backgroundColor"."tomato");
Copy the code

3.3 the children ()

An overview of the

The children() method selects its own subset element

Parameter passing: Selects the subset elements that meet certain criteria

No parameter: All subset elements are selected

grammar

The jQuery object. The children ()

parameter

A selector parameter of type string

The sample

    $(this).children().css("backgroundColor"."tomato");
    / / the refs
    $(this).children("span").css("backgroundColor"."tomato");
Copy the code

3.4 siblings ()

An overview of the

Select siblings of the same parent element

No parameter: Select all sibling elements

Parameter passing: Select the sibling element of the specified feature

grammar

The jQuery object. Siblings ()

parameter

A selector parameter of type string

The sample

    $(this).siblings().css("backgroundColor"."tomato");
    / / the refs
    $(this).siblings("h5").css("backgroundColor"."tomato");
Copy the code

Other relationship lookup methods

3.5 the find ()

An overview of the

Finds the specified element that matches the selector

grammar

The jQuery object. The find ()

parameter

A selector parameter of type string

The sample

$(this).find("p").css("backgroundColor"."red");
Copy the code

3.6 next ()

An overview of the

Find the next sibling element

grammar

The jQuery object. Next ()

parameter

A selector parameter of type string

The sample

    // Next p
    $(this).next("p").css("backgroundColor"."red");
Copy the code

3.7 passing perv ()

An overview of the

Find the last sibling element

grammar

The jQuery object. Passing perv ()

parameter

A selector parameter of type string

The sample

    // Last p
    $(this).prev("p").css("backgroundColor"."red");
Copy the code

3.8 nextAll ()

An overview of the

Find all sibling elements

grammar

The jQuery object. NextAll ()

parameter

A selector parameter of type string

The sample

    // all the following p
    $(this).nextAll("p").css("backgroundColor"."red");
Copy the code

3.9 pervAll ()

An overview of the

Find all of the siblings above

grammar

The jQuery object. PervAll ()

parameter

A selector parameter of type string

The sample

    // all p's above
    $(this).prevAll("p").css("backgroundColor"."red");
Copy the code

(4) chain call

A chained call is a jQuery object that returns a value after calling any method (the node relation method)

So you can continue to call methods or properties of jQuery objects on the result of execution

Simplify code

An overview of the

You can perform different methods and properties on a jQuery object in succession

grammar

The jQuery object. Siblings (). The CSS () the parent (). The CSS ()…

parameter

Method can be passed to specify a specific element

The sample

    $(this).css("backgroundColor"."red")
    .siblings("h5").css("backgroundColor"."yellow")
    .parent().css("backgroundColor"."tomato");
Copy the code

(1) Common operation methods

1.1 Operating Label Content

1.1.1 the HTML () method

1.1.2 the text () method

1.1.3 val () method

1.2 Operating Label Attributes

1.2.1 attr () method

1.2.2 removeAttr () method

1.2.3 prop () method

1.3 Manipulating the CSS Styles

1.3.1 CSS () method

1.4 Operation class Class name

1.4.1 addClass () method

1.4.2 removeClass () method

1.4.3 toggleClass () method

1.4.4 hasClass () method

(2) Common event methods

2.1 mouseenter ()

2.2 mouseleave ()

2.3 hover ()

(3) relationship search method

3.1 & (this)

3.2 the parent ()

3.3 the children ()

3.4 siblings ()

3.5 the find ()

3.6 next ()

3.7 passing perv ()

3.8 nextAll ()

3.9 pervAll ()

(4) chain call

Related Posts

ES6 Some uncommon little knowledge

In the history of the most complete HTML classification tag, read not understand to chop me

An open source component bug triggered analysis