This is the 23rd day of my participation in the August More Text Challenge.More challenges in August

JQuery manipulates label content

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.

• Fetch: text and internal tags. Only the copy inside the first element can be fetched

Syntax: jQuery object.html ();

• Settings: If the label is set, the label will be rendered

Syntax: jQuery object.html (‘ text content ‘);

    // the HTML () method, if passed, changes the contents inside the element in bulk
    $box.html("This is a new one.")
    
    // If the internal string contains the characters of the tag syntax, it will be loaded according to HTML syntax
    $box.html('This is the newly added child 
 this is the paragraph 
')
Copy the code

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.

• Get: Just the text, get all the text

Syntax: jQuery object.text ();

• Settings: If you set a label, the label will be treated as plain text

Syntax: jQuery object. Text (‘ text content ‘);

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.

• Get: value of the form element

Syntax: jQuery object. Val ();

• Setting: the value of the form element

Syntax: jQuery object. Val (‘ text content ‘);

Note: For , val() takes the value of the selected element; For, val() takes the value of the element selected by default. Note that changes the value inside the tag, not the text inside it.

Note:

HTML () and.text() cannot be used with single tags such as . Only val() can be used to fetch the content

For double labels, all three methods are valid

JQuery manipulates tag attributes

Attr () method

Attr: full name of attribute.

Gets or sets the attribute value of a label.

• Set the attributes of the label

Syntax: jQuery object attr(name,value);

• Get tag attribute values

Syntax: jQuery object.attr (name);

    // Tag attribute Settings: 2 parameters need to be passed
    $pic.attr("src"."images/cat2.jpg")    

    // Get the value of the tag attribute: 1 argument is required
    console.log($pic.attr("alt"))
Copy the code

RemoveAttr () method

Action: Removes an attribute from a label

Grammar: removeAttr (name);

    // Remove attribute method removeAttr()
    $pic.removeAttr("hobby")
Copy the code

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.

• get

Syntax: $(‘input’).prop(‘ attribute name ‘);

• set

Syntax: $(‘input’).prop(‘ attribute name ‘, value);

    // the prop() method returns a Boolean value
    console.log($btn.prop("disabled"))
    console.log($choose.prop("checked"))

    / / set
    $btn.prop("disabled".false)
Copy the code

If you use attr(), you get “disabled” instead of a Boolean value

JQuery manipulates style methods

CSS () method

JQuery objects have a CSS () method that calls CSS property values or changes CSS property values.

Syntax: jQuery object. CSS (name,value);

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

• Parameter 2: Set or changed property value.

Pay attention to

• 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 property value in string format. If the value of a number with a unit can be written as a string with a unit, a string without a unit, a pure number, a string with += and other assignment operations.

The first argument to the CSS () method, the single-attribute notation for the compound property, can be either hump nomenclature or horizontal notation.

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

    // CSS () passes an argument: get the corresponding property value
    console.log($box.css("width"))
    // Single attribute notation for compound attributes, either horizontal or camel nomenclature
    console.log($box.css("background-color"))
    console.log($box.css("backgroundColor"))

    // CSS () takes two arguments: to set or change the corresponding property value
    $box.css("width"."400px")
    $box.css("width"."400")
    $box.css("width".500)
    $box.css("width"."+=100px")
Copy the code

    // Set multiple properties. You can use object parameters
    $box.css({
      "width": 200."height": 300
    })
Copy the code

JQuery operates on class name methods

AddClass () adds the class name

Syntax: jQuery object.addClass (‘ class name ‘)

• Parameter: class name in string format.

        // The class name control method in jQuery only operates on the specified class name, does not affect other class names
        // Click the add button to add a class name to the element
        $btn1.click(function () {
          $box.addClass("demo")})Copy the code

RemoveClass () removes the class name

Delete the specified class name. The class name control method in jQuery only operates on the specified class name.

Syntax: jQuery object removeClass();

• Parameter: class name in string format.

• If no parameter is passed, all class names are deleted

        // Click the delete button to reduce the element by one class name
        $btn2.click(function () {
          // $box.removeClass("demo")
          // If no argument is passed, all class names will be deleted
          $box.removeClass()
        })
Copy the code

ToggleClass () class name toggle

If the class name exists, the class name is removed. Otherwise, add the class name

Syntax: jQuery object toggleClass(‘ class name ‘);

• Parameter: class name in string format.

• Advantages: The three methods only operate on the parameter part of the class name, does not affect the original other class names.

        // Click the button toggle to automatically add and remove elements in a class name
        $btn3.click(function () {
          $box.toggleClass("demo")})Copy the code

HasClass () checks if the class name exists

• Syntax: jQuery object. HasClass (‘ class name ‘);

• Return values: true and false

        // Check whether a class name is loaded in the tag
        console.log($box.hasClass("demo"))
Copy the code

JQuery common event methods

JQuery objects encapsulate a series of event methods.

Event methods have similar names to native JS event methods and do not need to write on.

Event methods need to be invoked by jQuery objects, and the arguments in the parentheses are event functions. For example, the click event: click() method.

Mouseenter () method

JQuery’s own event method. The mouse enters an event triggered by an element.

Mouseleave () method

JQuery’s own event method. An event triggered when the mouse moves away from an element.

contrast

Note: MouseEnter and Mouseleave have no event bubbling.

It is more appropriate to replace mouseover and mouseout when used.

Hover () method

The hover event is equivalent to writing the mouseoEnter and mouseleave events together.

Parameters: There are two parameters, the first parameter is the mouse up execution event function, the second parameter is the mouse away execution event function.

        // the hover() method combines mouseenter and mouseleave
        $box.hover(function () {
          // Mouse over
          $box.addClass("demo")},function () {
          // Mouse away
          $box.removeClass("demo")})Copy the code

JQuery relational lookup method

$(this)

• In native DOM manipulation, there is a this keyword inside the event function that points to the event source that triggered the event. In jQuery, you pass this keyword to the $() method, which points to your own jQuery object, and use JQ’s methods.

The parent () the parent

JQuery objects have a parent() method to get their parent level.

The parent gets a jQuery object and goes straight to calling JQ methods and properties.

The children () the child

There is a children() method inside the jQuery object to get all of its child elements.

The resulting child jQuery objects can continue to call JQ methods and properties.

There is no restriction on label types when obtaining children.

Children () can pass arguments: arguments are selectors in string format. In the case that all children are selected, the part that satisfies the selector is retained and the second selection is made.

    // Get its child elements by clicking div
    $box.click(function () {
      // Get the child
      $(this).children().css("background-color"."pink")
      // After the parameter is added, a secondary selection is made in the child level according to the specified selector
      // $(this).children("p").css("background-color","pink")
    })
Copy the code

Siblings (brother)

When a jQuery object calls the siblings() method, you can get all the siblings except yourself as jQuery objects.

Getting jQuery objects can continue to use JQ methods and properties.

The jQuery object given by the Siblings () method can be selected twice by passing a string-like selector to the parameters.

    $ps.click(function () {
      // Make the click color red
      // This refers to the native JS object of the event source that triggered the event
      // Need to convert to jQuery object
      $(this).css("background-color"."red")
      // Find the parent element of the event source and add a yellow background
      $(this).parent().css("background-color"."yellow")
      // Find sibling elements
      $(this).siblings().css("background-color"."skyblue")
      // $(this).siblings("h2").css("background-color","skyblue")
    })
Copy the code

Chain calls

When a jQuery object calls any method (except node-relational methods), the method returns a value that is the jQuery object itself. This gives us the convenience of calling JQ methods and properties on the result of the execution.

• Continuous dot calls can be made using jQuery objects.

    $ps.click(function () {
      // Make the click color red
      // When a jQuery object calls a node-related method, the return value is the object itself
      // You can continue to chaining the methods and properties of other jQuery objects
      / / the console. The log ($(this). The CSS (" background - color ", "red"). The HTML (" ha ha "))
      $(this).css("background-color"."red")        // Turn red
      .siblings().css("background-color"."gold")   // Brother turns golden
      .parent().css("background-color"."pink")     // Parent becomes pink
      .siblings().css("background-color"."blue")   // The parent brother turns blue
      .children().css("background-color"."yellowgreen")  // The children of the father's brother turn yellowish green
    })
Copy the code

JQuery other relationship lookup methods

Find () descendant element

JQuery objects can use the find() method to pass in a single argument, specified in the selector section, to find all descendants of the jQuery object.

• Arguments are selectors in string format.

    The find() method looks for span elements in descendants
    $box1.find("span").css({
      "width": 50."height": 50
    })
Copy the code

Sibling elements

The adjacent sibling element method

• Next () next brother

• Prev () previous brother

Alternative methods

• All brothers behind nextAll()

• prevAll() all previous brothers

A secondary selection can be made by passing arguments, which are selectors in the form of strings, to select the part of the preceding or following sibling that matches the selector’s specification.

      // Make yourself red and your next brother blue
      $(this).css("background-color"."red")
      .next().css("background-color"."skyblue")
Copy the code

      $(this).css("background-color"."red")
      .prev().css("background-color"."blue")
Copy the code

      // Make yourself red, make all brothers in front blue, and make all brothers behind yellow
      $(this).css("background-color"."red")
      .prevAll().css("background-color"."blue"The $()this).nextAll("p").css("background-color"."yellow")
Copy the code

Parents () ancestors

This method results in a jQuery object consisting of all ancestor elements of the specified object, including body.

• Secondary selection is made by passing parameters, and the parameter position is a selector in string format

      // Turn yourself red, ancestral blue
      $(this).css("background-color"."red")
      .parents("div").css("background-color"."skyblue")
Copy the code