jQuery Design Idea

Previous words

Before going into the details of jQuery, you need to have a general understanding of the design idea of jQuery. In case of problems, know which jQuery feature to use, and then quickly find specific usage from the manual. This article will introduce the design idea of jQuery in detail

Element selection

The basic design idea and main usage of jQuery is to "select a web page element and then perform some operation on it". This is the fundamental characteristic that distinguishes it from other javascript libraries

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

"Analog CSS selection element"

$(document) // Select the entire document object 
$('#myId') // Select ID For myId Web page elements of 
$('div.myClass') //  Select class For myClass Adj. div Element 
$('input[name=first]') //  Select name Property is equal to first Adj. input Element 

"Special Expression Selection"

$('a:first') // Select the number in the page 1 A a Element 
$('tr:odd') // Select odd rows of a table 
$('#myForm :input') //  Select the input Element 
$('div:visible') // Select Visible div Element 
$('div:gt(2)') //  Select all div Element, except for the preceding 3 A 
$('div:animated') //  Select the currently in the animated state div Element 

"Multiple screening methods"

$('div').has('p'); //  Select to include p Element's div Element 
$('div').not('.myClass'); // Select class Not equal to myClass Adj. div Element 
$('div').filter('.myClass'); // Select class Equal to myClass Adj. div Element 
$('div').first(); // Select 1 A div Element 
$('div').eq(5); // Select 6 A div Element 

Writing style

[Method functionalization]

In the native javascript, the assignment operator is used more. However, in jQuery, the method of transferring parameters by function is often used, that is, the method is functionalized

// Native 
window.onload = function(){};
//jQuery
$(function(){});
// Native 
div.onclick = function(){};
//jQuery
div.click(function(){});
// Native 
div.innerHTML = '123';
//jQuery
div.html('123');

"Chain operation"

Once a page element is selected, you can perform 1 series of operations on it, and all operations can be linked in 1 and written in the form of a chain

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

Break it down, that's the following:

$('div') // Find div Element 
.find('h3') // Select one of them h3 Element 
.eq(2) // Select 3 A h3 Element 
.html('Hello'); // Change its content to read Hello

This is the most commendable and convenient feature of jQuery. Its principle is that every jQuery operation in 1 step returns 1 jQuery object, so different operations can be connected in 1

jQuery also provides the. end () method so that the result set can go back one step

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() // Back to all selected h3 The one of the elements 1 Step 
.eq(0) // Select 1 A h3 Element 
.html('World'); // Change its content to read World

"Take and assign the combination"

When manipulating Web page elements, the most common requirement is to get their values or assign them values. jQuery uses the same function to complete the value taking (getter) and the value assignment (setter), that is, "Valuer" and "Valuer" are combined into one. Whether to take or assign a value is determined by the parameters of the function

$('h1').html(); //html() No parameter, indicating that the h1 Value of 
$('h1').html('Hello'); //html() Parametric Hello , indicating right h1 Perform an assignment 

Common value taking and assignment functions are as follows

.html()  Take out or set html Content 
.text()  Take out or set text Content 
.attr()  Gets or sets the value of a property 
.width()  Fetches or sets the width of an element 
.height()  Fetches or sets the height of an element 
.val()  Fetch the value of a form element 

It should be noted that if the result set contains multiple elements, all the elements will be assigned when assigning values; When taking a value, only the value of the first element is taken out

[Note]. The exception to text (), which fetches the text contents of all elements