JQuery gets the element

The basic design idea and main usage of jQuery is to “select a webpage element and then perform certain operations on it”. Put a selection expression into the constructor jQuery() ($) to get the selected element.

  • Select expressions can be CSS selectors
$('.intro') $('.intro') $('.intro') $('.intro' $(' name=first ') $(' name=first ') $(' name=first ') $(' name=first ') // Select the input element whose name attribute is firstCopy the code
  • Select expressions can also be jquery-specific expressions
$('a:first') // Select the first a element in the page $('tr:odd') // Select the odd row in 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 currently animated div elementsCopy the code
  • In addition to using both methods, you can also use the various filters provided by jQuery to filter the result set and narrow down the selection results
$('div').has('p'); $('div').not('.myclass '); // Select div element $('div').filter('.myclass '); // Select div element with class equal to myClass $('div').first(); // Select the first div element $('div').eq(5); // Select the sixth div element $('div').next('p'); // Select the first p element after the div element $('div').parent(); $('div').closest('form'); $('div').children(); $('div').children(); $('div').siblings(); // Select the corresponding element of the divCopy the code

JQuery chain operation

A chain operation is a series of operations that can be performed on a webpage element after it is finally selected, and all operations can be linked together and written in a chain form.

$(' div ') / / find div elements. The find (' h3) / / choice of h3 elements. The eq. (2) / / select 3 h3 elements. The HTML (" Hello "); // Change its content to HelloCopy the code

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

$(' div '). The find (' h3). Eq. (2) HTML (' Hello '.) the end () / / return to h3 elements of the selected all of the step. The eq (0) / / selected first h3 elements. The HTML (" World "); // Change its content to WorldCopy the code

JQuery creates elements

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

JQuery moves elements

JQuery allows you to move two sets of action elements around 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.

  • InsertAfter () method
$(' div '). InsertAfter ($(" p ")) / / move the selected a div element behind p elementCopy the code
  • After () method
$('p').after($('div')) // Add the p element before the div elementCopy the code

On the surface, the effect of the two approaches is the same; the only difference seems to be the perspective from which they operate. In practice, however, there is one major difference: the returned elements are different. The first method returns the div element, and the second method returns the P element!!

There are four pairs of operations using this mode:

.insertafter () and.after() : outside an existing element, insert elements from behind. InsertBefore () and.before() : outside an existing element, insert elements from ahead. AppendTo () and.append() : PrependTo () and.prepend() : Insert elements from the front inside an existing elementCopy the code

JQuery modifies the attributes of the element

The attr() method sets or returns the attribute value of the selected element.

  • Get attribute value
$(selector).attr(" attribute name ") // Get the attributeCopy the code
  • Modifying property values
$(selectors). Attr (" attribute name ", "attribute value") / / $(selectors). Setting a single property attr ({property name: "attribute value", the property name: "attribute value"... }) // Set multiple attributes, with or without quotation marksCopy the code
  • Delete the properties
$(selector).removeattr (" property name ")Copy the code