1. How do you select elements on a page?

The first step in using jQuery is often to put a selection expression into the constructor jQuery() ($for short) and get the selected element. Selection expressions can be CSS selectors or jQuery’s own selection expressions

Select the expression CSS selector

  • $(document) // Select the entire document object
  • $(‘#myId’) // Select the page element with ID myId
  • $(‘div. MyClass ‘) // Select the div element whose class is myClass
  • $(‘input[name=first]’) // Select the input element whose name attribute equals first

JQuery’s own unique options

  • $(‘a:first’) // Select the first a element in the page
  • $(‘tr:odd’) // Select the odd rows of the table
  • $(‘#myForm :input’) // Select the input element in the form
  • $(‘div:visible’) // Selects 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

Look for the element

  • The return value of $(‘# XXX ‘) is not an element, but an API object
  • $(‘# XXX ‘).find (‘.red’) to find the. Red element in # XXX
  • $(‘# XXX ‘).parent(
  • $(‘# XXX ‘).children(
  • $(‘# XXX ‘).siblings() gets siblings
  • $(‘# XXX ‘).index()
  • $(‘# XXX ‘).next(
  • $(‘# XXX ‘).prev(
  • $(‘.red’).each(fn) iterates and performs fn on each element

increase

  • $ ('<div><span>1</span></div>')Create a div
  • .appendto (document.body) inserts into the body

delete

  • $div.remove()
  • $div.empty()

change

  • $div.text(?) Reading and writing text content
  • $div.html(?) Reading and writing HTML content
  • $div.attr(‘title’,?) Read and write attribute
  • $div.css({color: ‘red}) reads and writes style
  • $div.addClass(‘blue’)
  • $div.on(‘click’, fn)
  • $div.off(‘click’, fn)

Note that $div most of the time corresponds to multiple div elements

Using the prototype

  • Put all the common attributes (functions) in $.prototype
  • $.fn = $.prototype// The name is too long
  • And then let theAPI. __proto__ pointing to $. Fn

2. Chain operation

The third design idea of jQuery is that once you finally select a web element, you can perform a series of operations on it, all of which can be linked together in a chain

JQuery also provides.end()Method so that the result set can take a step back

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

Design patterns?

What design patterns jQuery uses
  • Instead of using the constructor of new, this schema has no special name
  • $(supports multiple parameters), this mode is called overloading
  • Hiding details with closures is a pattern that doesn’t have a name
  • $div.text() is readable and writable, getter/setter
  • $.fnIs an alias for $.prototype. This is called an alias
  • JQuery uses different code for different browsers, which is called an adapter
What are design patterns

I’ve written this code so beautifully that I’m sure other people can use it so let’s give it a name, let’s say adapter pattern design pattern is just a name for generic code

3. Move elements

  • .insertafter () and.after() : Inserts elements from behind outside of existing elements
  • .insertbefore () and.before() : Inserts elements from the front outside of existing elements
  • .appendto () and.append() : Insert elements from behind inside existing elements
  • .prependto () and.prepend() : Inserts elements inside existing elements from the front