The basic filter selector for jquery

This article is mainly to share with you the basic jquery filter selector, the need for a small partner to see

First, let's look at the basic filter selector :

One, single or double row selected

Can you select one of the specified?

Second, the filter is greater than, less than

Third, the order of attention to choose yo

: Not (selector) selects an element that does not meet the "selector" condition, and $ ("Input:not (. myClass)") to choose a style name other than MyClass <input>

Insert Code Location:

View Code

Four, header

With this knowledge, let's do a few exercises below.

title: The first line is the table header, so the large font (fontsize=30px) is displayed, the last line is summarized, so the red font is displayed. The first three lines of the body are the top three, so displaying the silly font (28) The even line of the table is a red color background.

Implemented in the DOM, with jquery. Compare differences!

Note: GT (0): LT (3), which means to filter out all more than 0, and then filter out all less than 3 on this basis, that is: on the basis of all greater than 0 and then select 0,1,2.

exercise code Insertion location:

 1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 2 



Exercise Demo

Case 2: Click the button and the table is discolored. Odd red, even yellow.

Case 2 Code Insertion location:

View Code


Case 2 Demo

Case 3: The top three bold displays in the list. (first three Li) font-weight:bolder

Case 3 Code Insertion location:

View Code


Case 3 Demo

Case 4: Table click Row background color to yellow, the other row background color white.

Case 4 Code Insertion location:

View Code


Case 4 Demo


Five, a few small problems


Vi. Learning to use Help

Here are two questions to test:

$ ("UL", $ (this)). CSS ("Background", "Red");

$ (selector, context); For example: $ (' TD ', $ (' P table tr '));

The context parameter can be a collection of Dom objects or a jquery object

By default, if the context is not passed, it is searched throughout the document.

 case: Modify the background color of all TD on the row, set the TD for the current click to the odd TD background color Red, the even TD background color blue. Through $ (' TD ', context) 

  1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd    "> 2 3