JQuery Design Philosophy (1)

For Web developers, learning jQuery is necessary. It helps you understand the most common technologies in the industry, lay the foundation for learning more advanced libraries in the future, and can easily make many complex effects.

Although jQuery is easy to use and easier to learn than other libraries, it is not easy to fully master it. Because it involves all aspects of web development, there are thousands of methods and internal changes. Beginners often find it easy to get started and difficult to improve.

Currently, jQuery Fundamentals is the best entry material for jQuery on the Internet, written by Rebecca Murphey ). Search for "jQuery training" in Google. This book ranks first. The official jQuery team has agreed to use this book as the basis for official tutorials.

Although this book is an entry-level teaching material, it has more than 100 pages. I made a detailed note on it, trying to clarify jQuery's design ideas and find out the learning context. My goal is to have a full understanding of jQuery. When I encounter problems, I have a thorough understanding of which function is used, and then I can quickly find a specific method from the manual.

BKJIA recommended topics:JQuery from entry to entry

JQuery powerful plug-in Parade

The following is my notes. It should be one of the few jQuery Chinese tutorials on the Internet. You only need a little basic knowledge of the javascript language to understand it and grasp all the main aspects of jQuery in the shortest time (except ajax and plug-in development ).

JQuery Design Philosophy

1. The basic design and usage of jQuery, a webpage element, is "select a webpage element and perform some operations on it ". This is the fundamental feature that distinguishes it from other function libraries.

The first step of using jQuery is to put a selection expression into the constructor jQuery () (abbreviated as $) and then get the selected element.

The selection expression can be a CSS selector:

 
 

  
  
$ (Document) // select the entire document object
  
  
$ ('# Myid') // select the webpage element whose ID is myId.
  
  
$ ('Div. myclass') // select the div element whose class is myClass.
  
  
$ ('Input [name = first] ') // select the input element whose name attribute is equal to first.
 
 

It can also be a jQuery-specific expression:

 
 

  
  
$ ('A: first ') // select the first a element in the webpage
  
  
$ ('Tr: odd') // select an odd row in the table
  
  
$ ('# MyForm: input') // select the input element in the form.
  
  
$ ('Div: visable') // select the visible div Element
  
  
$ ('Div: gt (2) ') // select all div elements except the first three
  
  
$ ('Div: animated') // select the currently animated div Element
 
 

Ii. Change the result set

If multiple elements are selected, jQuery provides a filter to narrow down the result set:

 
 

  
  
$ ('Div '). has ('P'); // select the div element containing the p element
  
  
$ ('Div '). not ('. myclass'); // select the div element whose class is not equal to myClass.
  
  
$ ('Div '). filter ('. myclass'); // select the div element whose class is equal to myClass.
  
  
$ ('Div '). first (); // select 1st div elements
  
  
$ ('Div '). eq (5); // select 6th div elements
 
 

Sometimes, we need to start from the result set and move it to a nearby element. jQuery also provides the moving method on the DOM tree:

 
 

  
  
$ ('Div '). next ('P'); // select the first p element after the div Element
  
  
$ ('Div '). parent (); // select the parent element of the div element.
  
  
$ ('Div '). closest ('form'); // select the form parent element closest to the div.
  
  
$ ('Div '). children (); // select all child elements of the div
  
  
$ ('Div '). siblings (); // select the same level element of the div
 
 

Iii. Chain Operations

After you select a webpage element, you can perform some operations on it.

JQuery allows all operations to be connected and written in the form of a chain. For example:

 
 

  
  
$('div').find('h3').eq(2).html('Hello');  
 
 

It is as follows:

 
 

  
  
$ ('Div ') // locate the div Element
  
  
. Find ('h3 ') // select the h3 Element
  
  
. Eq (2) // select 3rd h3 Elements
  
  
. Html ('hello'); // change its content to "Hello ".
 
 

This is jQuery's most commendable and convenient feature. The principle is that each step of jQuery operations returns a jQuery object, so different operations can be connected together.

JQuery also provides the. end () method, so that the result set can be taken back one step:

 
 

  
  
$ ('Div ')
  
  
. Find ('h3 ')
  
  
. Eq (2)
  
  
. Html ('hello ')
  
  
. End () // return to the step of Selecting All h3 Elements
  
  
. Eq (0) // select the first h3 Element
  
  
. Html ('World'); // change its content to "World ".
 
 

Iv. Operation of elements: value and value assignment

The most common requirement for webpage elements is to obtain their values or assign values to them.

JQuery uses the same function to complete values (getter) and values (setter ). Whether it is a value or a value is determined by the function parameters.

 
 

  
  
Parameters ('h1'hangzhou.html (); // No parameter in html (), indicating that the value of 'h1'hangzhou.html ('hello') In h1 is obtained; // in html (), the parameter "Hello" indicates that h1 is assigned a value.
 
 

Common values and value assignment functions are as follows:

 
 

  
  
. Html ()
  
  
 
  
  
. Text () to retrieve or set text content
  
  
 
  
  
. Attr () retrieves or sets the value of an attribute.
  
  
 
  
  
. Width () to retrieve or set the width of an element
  
  
 
  
  
. Height () to retrieve or set the height of an element
  
  
 
  
  
. Val ()
  
  
 
  
  
Retrieve or set the html content to retrieve the value of a form Element
 
 

Retrieve or set the html content to retrieve the value of a form Element

Note that if the result set contains multiple elements, all the elements in the result set are assigned values, only the value of the first element (. with the exception of text (), It extracts the text content of all elements ).

5. Element operations: Move

There are two methods to move the selected element: one is to move the element directly, and the other is to move other elements so that the target element can reach the desired position.

Suppose we have selected a div element, and we need to move it to the end of the p element.

The first method is to use. insertAfter () to move the div element behind the p element:

$ ('Div '). insertAfter ('P ');

The second method is to use. after () to add the p element to the front of the div element:

$ ('P'). after ('div ');

On the surface, the two methods have the same effect. The only difference seems to be the difference in the operational perspective. But in fact, they have a major difference, that is, they return different elements. The first method returns the div element, and the second method returns the p element. You can select which method to use as needed.

There are a total of four

 
 

  
  
. InsertAfter () and. after (): insert an element from the end of an existing element outside the existing element.
  
  
. InsertBefore () and. before (): insert an element from the front of an existing element outside the existing element.
  
  
. AppendTo () and. append (): insert an element from the end of an existing element.
  
  
. PrependTo () and. prepend ()
  
  
: Insert an element from the front of an existing element.
 
 

Vi. Operations on elements: copying, deleting, and creating

Use. clone () to copy elements ().

Use. remove () and. detach () to delete elements (). The difference between the two lies in that the former does not retain the event of the deleted element, and the latter retains it, which is useful for re-inserting documents.

Use. empty () to clear the element content (but not delete it ().

The method for creating a new element is very simple. Just pass the new element directly into the jQuery constructor:

 
 

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