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.

  • Get: text and internal tag syntax :jQuery object.html ();
  • Syntax :jQuery object.html(‘ text content ‘);
var $box = $(".box")
The HTML () method is equivalent to the innerHTML attribute in native JS
// the HTML () method, if passed, changes the contents inside the element in bulk
// $box.html(" This is a new content ")
// 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 
')

// the HTML () method does not take arguments, but gets the element's content
// Only the copy inside the first element can be retrieved
console.log($box.html())
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 text syntax :jQuery object. Text ();
  • Text (‘ text content ‘); Text (‘ text content ‘);
var $box = $(".box")
The text() method is equivalent to the innerText property
// Get, get all the text inside the tag, ignore the tag
// console.log($box.text())

// Set to treat written content as normal text and will not be loaded according to labels
$box.text("Plain text 
 paragraph 
")
Copy the code

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 syntax for form elements :jQuery object. Val ();
  • Val (‘ text content ‘); val(‘ text content ‘);

JQuery manipulates tag attributes

Attr () method

Attr: full name of attribute. Gets or sets the attribute value of a label.

  • Attr (name,value);
  • Attr (name); attr(name);
// Get the element
var $pic = $(".pic")

// 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

Syntax :removeAttr(name);

// Remove attribute method removeAttr()
$pic.removeAttr("alt")
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.

  • $(‘input’).prop(‘ attribute name ‘);
  • Set syntax :$(‘input’).prop(‘ property name ‘, value);
<input type="button" value="Button" disabled="disabled" class="btn">

var $btn = $(".btn")
    
// prop(), which operates directly on booleans
console.log($btn.prop("disabled"))
    
/ / set
$btn.prop("disabled".false)
Copy the code

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.
  • 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 ().
// Get the element
var $box = $(".box")

// 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")

// 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.

RemoveClass () removes the class name

  • Deletes the specified class name
  • Syntax :jQuery object removeClass();
  • Parameter: class name in string format.
  • If no parameter is passed, all class names are deleted

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 name.
var $box = $("#box");
var $btn = $("#btn");

// 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
$btn.click(function () {
  $box.addClass("demo")})// Click the delete button to reduce the element by one class name
$btn.click(function () {
  // $box.removeClass("demo")
  // If no argument is passed, all class names will be deleted
  $box.removeClass()
})

// Click the button toggle to automatically add and remove elements in a class name
$btn.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

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.

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.
$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 you can use JQ 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.

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.

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.
  • You can use jQuery objects to make continuous dot calls.
$(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 the form of strings.
The find() method looks for span elements in descendants
$box.find("span").css({
   "width": 50."height": 50
})
Copy the code

Sibling elements

Next sibling element method • Next () next sibling • prev() previous sibling multiple selection method • nextAll() all siblings • prevAll() all siblings • Secondary selection can be made by passing arguments, which are selectors in the form of strings, Select the part of the front or back sibling that matches the selector specification.

// Make yourself red, make the next brother pink
$(this).css("background-color"."red")
.next().css("background-color"."skyblue")

// Turn yourself red and your last brother blue
$(this).css("background-color"."red")
.prev().css("background-color"."blue")

// 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