How does jQuery get elements

The basic design idea and main usage of jQuery is to “select a webpage element and then perform certain operations on it”. This is what sets it apart from other Javascript libraries.

JQuery is a constructor that does not need to add new, so jQuery is not a constructor in the normal sense.

The first step in using jQuery is often to put a selection expression into the constructor jQuery() and get the selected element.

$=window. $=window.

Selection expressions can be CSS selectors:

$(document) Select the entire document object
$('#myId') // Select the page element with ID myId
$('div.myClass') // Select div element with class myClass
$('input[name=first]') // Select the input element whose name attribute is equal to first
Copy the code

Or a jquery-specific expression:

$('a:first') // Select the first a element in the page\ $('tr:odd') // Select the odd row of the table\ $('#myForm :input') // Select the input element in the form\ $('div:visible') // Select the visible div element \\ $('div:gt(2)') // Select all div elements except the first three \\ $('div:animated') // Select the div element that is currently animated
Copy the code

JQuery chain operations

The chain operation in jQuery is a series of operations that can be performed on a webpage element after it is finally selected, and all the operations can be linked together and written in a chain form. The idea is that each jQuery operation returns a jQuery object, so different operations can be linked together.

JQuery also provides a.end() method that allows the result set to take a step back.

$('div').find('h3').eq(2).html('Hello').end().eq(0).html('world');
Copy the code

Break down:

$('div') // Find the div element.find('h3') // Select the h3 element.eq(2)  // Select the third h3 element.html('Hello')  // Change its content to Hello.end()// Go back to the step where all h3 elements were selected.eq(0) // Select the first h3 element.html('World'); // Change its content to World
Copy the code

JQuery Element Operations

Element to create

Creating a new element is as simple as passing it directly into the jQuery constructor:

    $('<p>Hello</p>');
    $('<li class="new">new list item</li>');
    $('ul').append('<li>list item</li>');
Copy the code

Element to delete

.detach()    // Remove all matching elements from the DOM
.remove()      // Delete the set of matching elements from the DOM. (Note: Remove the event and jQuery data on the element.)
.empty()    // This method removes not only the child elements (and other descendants), but also the text within the element
Copy the code

The difference between:

  • .remove()and.detach()You can delete the element itself, with the former not retaining the event of the deleted element, and the latter reserved for use when re-inserting the document.
  • .empty()This method removes not only child (and other descendants) elements, but also any text in the set of matching elements. This is because, according to the DOM specification, any text string within an element is considered a child node of that element.

How does jQuery move elements

JQuery provides two sets of methods for manipulating the position of elements in a web page. One set of methods is to move the element directly, and the other set of methods is to move other elements to get the target element to the desired position.

Let’s say we’ve selected a div element and we need to move it behind the P element.

The first method is to use.insertafter () to move the div element after the p element:

$('div').insertAfter($('p'));
Copy the code

The second method uses.after() to precede the div element:

$('p').after($('div'));
Copy the code
  • The difference between the two methods is that they return different elements. The first method returns the div element, and the second returns the P element.

There are four pairs of operations using this mode:

InsertAfter () and after ()// Insert the element from behind, outside the existing elementThe insertBefore () and before ()// Insert the element from the front, outside the existing elementAppendTo () and append ()// Insert an element from behind inside an existing elementPrependTo () and the prepend ()// Insert an element from the front inside an existing element
Copy the code

JQuery gets and sets the attributes of the element

  • .attr()— Gets the attribute value of the first element.
  • .removeAttr()Removes one or more attributes from the selected element.
  • .val()— Gets the current value of the first element in the set of elements.
  • .addClass()Add style names separated by Spaces. (This method does not replace a style class name. It simply adds a style class name to the element.
  • .css()Gets and sets the CSS properties of the first element.
  • .removeClass()Multiple style names must be separated by Spaces.
  • .toggleClass()The style class is removed if it exists on each element in the collection of elements; If an element is not there, the style class is added.
  • .html()Fetch or set the HTML content.
  • .text()— Fetch or set the text content.
  • .offset()Returns the coordinates of the element relative to the document.
  • .position()Gets the offset position of an element relative to its parent element.